"use client"
import Image from 'next/image'
import MGMButton from './MGMButton'
import { resolveAssetUrl } from '@/lib/asset-url'
import type { GalleryNewsletterData } from '@/lib/strapi/types'

interface GalleryNewsletterSectionProps {
  data: GalleryNewsletterData
}

const backgroundImage = resolveAssetUrl('/assets/gallery-newsletter/bg-dark.jpg')
const backgroundOverlay = resolveAssetUrl('/assets/gallery-newsletter/bg-gradient.jpg')
const calendarIcon = '/assets/newsletters/calendar-icon.svg'

/** Safely read an image URL from the data array by index (wraps around). */
function FillImage({ src, alt = "", sizes = "100vw" }: { src?: string; alt?: string; sizes?: string }) {
  if (!src) return null

  return (
    <Image
      src={src}
      alt={alt}
      fill
      sizes={sizes}
      loading="lazy"
      className="object-cover"
    />
  )
}

function MosaicImage({ src }: { src?: string }) {
  if (!src) return null

  return (
    <span className="block relative w-full h-full">
      <Image
        src={src}
        alt=""
        fill
        sizes="(min-width: 800px) 390px, 220px"
        loading="lazy"
        className="object-cover"
      />
    </span>
  )
}
function img(imgs: GalleryNewsletterData['galleryImages'], i: number): string {
  if (imgs.length === 0) return ''
  return imgs[i % imgs.length]?.url ?? ''
}

export default function GalleryNewsletterSection({ data }: GalleryNewsletterSectionProps) {
  const g = data.galleryImages
  const newsletters = data.newsletters

  return (
    <section className="gallery-perf-section relative overflow-hidden lg:px-5">
      {/* Background */}
      <div className="absolute inset-0 pointer-events-none">
        <FillImage src={backgroundImage} />
      </div>

      {/* Background Overlay */}
      <div className="absolute inset-0 pointer-events-none">
        <FillImage src={backgroundOverlay} />
      </div>

      <div
        className="absolute inset-x-0 bottom-0 h-[220px] pointer-events-none"
        style={{ background: 'linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 100%)',
        }}
      />

      <div className="relative">
        {/* Gallery Section */}
        <div className="pt-10 lg:pt-20 pb-16 lg:pb-20">
          <div className="w-full max-w-[1297px] mx-auto px-5 lg:px-0">
            {/* Gallery Header */}
            <div className="flex flex-col gap-5 lg:gap-6 lg:flex-row lg:items-start lg:justify-between mb-8 lg:mb-14">
              <div>
                <span className="inline-flex items-center gap-2 px-6 py-3 bg-[#ebebeb] rounded-full">
                  <img
                    src={data.galleryHeader.badgeIcon || "/assets/gallery-newsletter/sparkle-icon.svg"}
                    alt=""
                    loading="lazy"
                    className="w-[17px] h-4"
                  />
                  <span className="font-heading text-black text-base uppercase leading-none">
                    {data.galleryHeader.badge || 'Gallery'}
                  </span>
                </span>
              </div>
              <div className="flex flex-col gap-4 lg:gap-0 lg:max-w-[461px]">
                <p className="font-sans font-medium text-base text-white/60 leading-[1.5]">
                  {data.galleryHeader.description}
                </p>
                <div className="w-full border-t border-white/20 lg:mt-6 lg:border-t-0 lg:border-b lg:border-white/20" />
              </div>
            </div>
          </div>

          {/* Mobile: Auto-sliding mosaic gallery */}
          <div className="lg:hidden w-full overflow-hidden">
            <div
              className="gallery-motion-track flex gap-[9px] w-max"
              style={{ animation: 'galleryNewsletterMobileMarquee 52s linear infinite',
              }}
            >
              {[0, 1].map((setIndex) => (
                <div key={setIndex} className="flex gap-[9px] shrink-0">
                  {/* Card 1: Left column */}
                  <div className="flex flex-col gap-[9px] w-[316px] shrink-0">
                    <div className="h-[99px] rounded-lg overflow-hidden">
                      <MosaicImage src={img(g, 0)} />
                    </div>
                    <div className="flex gap-[7px]">
                      <div className="flex-1 h-[86px] rounded-lg overflow-hidden">
                        <MosaicImage src={img(g, 1)} />
                      </div>
                      <div className="flex-1 h-[86px] rounded-lg overflow-hidden">
                        <MosaicImage src={img(g, 2)} />
                      </div>
                    </div>
                    <div className="h-[163px] rounded-lg overflow-hidden">
                      <MosaicImage src={img(g, 3)} />
                    </div>
                  </div>

                  {/* Card 2: Center column */}
                  <div className="flex flex-col gap-[9px] w-[489px] shrink-0">
                    <div className="flex gap-[9px]">
                      <div className="w-[212px] h-[237px] rounded-lg overflow-hidden">
                        <MosaicImage src={img(g, 10)} />
                      </div>
                      <div className="flex-1 flex flex-col gap-[9px]">
                        <div className="h-[114px] rounded-lg overflow-hidden">
                          <MosaicImage src={img(g, 4)} />
                        </div>
                        <div className="h-[114px] rounded-lg overflow-hidden">
                          <MosaicImage src={img(g, 5)} />
                        </div>
                      </div>
                    </div>
                    <div className="h-[119px] rounded-lg overflow-hidden">
                      <MosaicImage src={img(g, 6)} />
                    </div>
                  </div>

                  {/* Card 3: Right column */}
                  <div className="flex flex-col gap-[9px] w-[316px] shrink-0">
                    <div className="h-[99px] rounded-lg overflow-hidden">
                      <MosaicImage src={img(g, 11)} />
                    </div>
                    <div className="flex gap-[6px]">
                      <div className="flex flex-col gap-[9px] w-[195px]">
                        <div className="flex gap-[7px]">
                          <div className="w-[98px] h-[86px] rounded-lg overflow-hidden">
                            <MosaicImage src={img(g, 12)} />
                          </div>
                          <div className="w-[90px] h-[86px] rounded-lg overflow-hidden">
                            <MosaicImage src={img(g, 13)} />
                          </div>
                        </div>
                        <div className="h-[163px] rounded-lg overflow-hidden">
                          <MosaicImage src={img(g, 14)} />
                        </div>
                      </div>
                      <div className="w-[114px] h-[257px] rounded-lg overflow-hidden">
                        <MosaicImage src={img(g, 15)} />
                      </div>
                    </div>
                  </div>

                  {/* Card 4 */}
                  <div className="flex flex-col gap-[9px] w-[489px] shrink-0">
                    <div className="flex gap-[9px]">
                      <div className="w-[212px] h-[237px] rounded-lg overflow-hidden">
                        <MosaicImage src={img(g, 17)} />
                      </div>
                      <div className="flex-1 flex flex-col gap-[9px]">
                        <div className="h-[114px] rounded-lg overflow-hidden">
                          <MosaicImage src={img(g, 18)} />
                        </div>
                        <div className="h-[114px] rounded-lg overflow-hidden">
                          <MosaicImage src={img(g, 19)} />
                        </div>
                      </div>
                    </div>
                    <div className="h-[119px] rounded-lg overflow-hidden">
                      <MosaicImage src={img(g, 20)} />
                    </div>
                  </div>

                  {/* Card 5 */}
                  <div className="flex flex-col gap-[9px] w-[316px] shrink-0">
                    <div className="h-[99px] rounded-lg overflow-hidden">
                      <MosaicImage src={img(g, 21)} />
                    </div>
                    <div className="flex gap-[7px]">
                      <div className="flex-1 h-[86px] rounded-lg overflow-hidden">
                        <MosaicImage src={img(g, 22)} />
                      </div>
                      <div className="flex-1 h-[86px] rounded-lg overflow-hidden">
                        <MosaicImage src={img(g, 23)} />
                      </div>
                    </div>
                    <div className="h-[163px] rounded-lg overflow-hidden">
                      <MosaicImage src={img(g, 24)} />
                    </div>
                  </div>

                  {/* Card 6 */}
                  <div className="flex flex-col gap-[9px] w-[316px] shrink-0">
                    <div className="h-[99px] rounded-lg overflow-hidden">
                      <MosaicImage src={img(g, 25)} />
                    </div>
                    <div className="flex gap-[6px]">
                      <div className="flex flex-col gap-[9px] w-[195px]">
                        <div className="flex gap-[7px]">
                          <div className="w-[98px] h-[86px] rounded-lg overflow-hidden">
                            <MosaicImage src={img(g, 16)} />
                          </div>
                          <div className="w-[90px] h-[86px] rounded-lg overflow-hidden">
                            <MosaicImage src={img(g, 8)} />
                          </div>
                        </div>
                        <div className="h-[163px] rounded-lg overflow-hidden">
                          <MosaicImage src={img(g, 15)} />
                        </div>
                      </div>
                      <div className="w-[114px] h-[257px] rounded-lg overflow-hidden">
                        <MosaicImage src={img(g, 10)} />
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Desktop: Full-width auto slider */}
          <div className="hidden lg:block w-full overflow-hidden">
            <div
              className="gallery-motion-track flex gap-4 w-max"
              style={{ animation: 'galleryNewsletterDesktopMarquee 78s linear infinite',
              }}
            >
              {[0, 1].map((setIndex) => (
                <div key={setIndex} className="flex gap-4 shrink-0">
                  {/* Left Column */}
                  <div className="flex flex-col gap-4 min-w-[575px]">
                    <div className="h-[181px] rounded-lg overflow-hidden">
                      <MosaicImage src={img(g, 0)} />
                    </div>
                    <div className="flex gap-3">
                      <div className="w-1/2 h-[238px] rounded-lg overflow-hidden">
                        <MosaicImage src={img(g, 1)} />
                      </div>
                      <div className="w-1/2 h-[238px] rounded-lg overflow-hidden">
                        <MosaicImage src={img(g, 2)} />
                      </div>
                    </div>
                  </div>

                  {/* Center Column */}
                  <div className="flex gap-4 min-w-[890px]">
                    <div className="w-[386px] h-[432px] rounded-lg overflow-hidden">
                      <MosaicImage src={img(g, 10)} />
                    </div>
                    <div className="flex flex-col gap-4 w-[488px]">
                      <div className="h-[208px] rounded-lg overflow-hidden">
                        <MosaicImage src={img(g, 4)} />
                      </div>
                      <div className="h-[208px] rounded-lg overflow-hidden">
                        <MosaicImage src={img(g, 5)} />
                      </div>
                    </div>
                  </div>

                  {/* Right Column */}
                  <div className="flex flex-col gap-4 min-w-[575px]">
                    <div className="h-[181px] rounded-lg overflow-hidden">
                      <MosaicImage src={img(g, 7)} />
                    </div>
                    <div className="flex gap-3">
                      <div className="w-1/2 h-[238px] rounded-lg overflow-hidden">
                        <MosaicImage src={img(g, 6)} />
                      </div>
                      <div className="w-1/2 h-[238px] rounded-lg overflow-hidden">
                        <MosaicImage src={img(g, 9)} />
                      </div>
                    </div>
                  </div>

                  {/* Column 4 */}
                  <div className="flex gap-4 min-w-[890px]">
                    <div className="w-[386px] h-[432px] rounded-lg overflow-hidden">
                      <MosaicImage src={img(g, 15)} />
                    </div>
                    <div className="flex flex-col gap-4 w-[488px]">
                      <div className="h-[208px] rounded-lg overflow-hidden">
                        <MosaicImage src={img(g, 11)} />
                      </div>
                      <div className="h-[208px] rounded-lg overflow-hidden">
                        <MosaicImage src={img(g, 12)} />
                      </div>
                    </div>
                  </div>

                  {/* Column 5 */}
                  <div className="flex flex-col gap-4 min-w-[575px]">
                    <div className="h-[181px] rounded-lg overflow-hidden">
                      <MosaicImage src={img(g, 13)} />
                    </div>
                    <div className="flex gap-3">
                      <div className="w-1/2 h-[238px] rounded-lg overflow-hidden">
                        <MosaicImage src={img(g, 14)} />
                      </div>
                      <div className="w-1/2 h-[238px] rounded-lg overflow-hidden">
                        <MosaicImage src={img(g, 17)} />
                      </div>
                    </div>
                  </div>

                  {/* Column 6 */}
                  <div className="flex gap-4 min-w-[890px]">
                    <div className="w-[386px] h-[432px] rounded-lg overflow-hidden">
                      <MosaicImage src={img(g, 18)} />
                    </div>
                    <div className="flex flex-col gap-4 w-[488px]">
                      <div className="h-[208px] rounded-lg overflow-hidden">
                        <MosaicImage src={img(g, 19)} />
                      </div>
                      <div className="h-[208px] rounded-lg overflow-hidden">
                        <MosaicImage src={img(g, 20)} />
                      </div>
                    </div>
                  </div>

                  {/* Column 7 */}
                  <div className="flex flex-col gap-4 min-w-[575px]">
                    <div className="h-[181px] rounded-lg overflow-hidden">
                      <MosaicImage src={img(g, 21)} />
                    </div>
                    <div className="flex gap-3">
                      <div className="w-1/2 h-[238px] rounded-lg overflow-hidden">
                        <MosaicImage src={img(g, 22)} />
                      </div>
                      <div className="w-1/2 h-[238px] rounded-lg overflow-hidden">
                        <MosaicImage src={img(g, 23)} />
                      </div>
                    </div>
                  </div>

                  {/* Column 8 */}
                  <div className="flex gap-4 min-w-[575px]">
                    <div className="w-1/2 h-[432px] rounded-lg overflow-hidden">
                      <MosaicImage src={img(g, 24)} />
                    </div>
                    <div className="flex flex-col gap-4 w-1/2">
                      <div className="h-[208px] rounded-lg overflow-hidden">
                        <MosaicImage src={img(g, 25)} />
                      </div>
                      <div className="h-[208px] rounded-lg overflow-hidden">
                        <MosaicImage src={img(g, 16)} />
                      </div>
                    </div>
                  </div>

                  {/* Column 9 */}
                  <div className="flex flex-col gap-4 min-w-[575px]">
                    <div className="h-[181px] rounded-lg overflow-hidden">
                      <MosaicImage src={img(g, 8)} />
                    </div>
                    <div className="flex gap-3">
                      <div className="w-1/2 h-[238px] rounded-lg overflow-hidden">
                        <MosaicImage src={img(g, 15)} />
                      </div>
                      <div className="w-1/2 h-[238px] rounded-lg overflow-hidden">
                        <MosaicImage src={img(g, 13)} />
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Newsletter Section */}
        <div className="py-16 lg:py-20">
          <div className="w-full max-w-[1297px] mx-auto px-5 lg:px-0">
            {/* Newsletter Header */}
            <div className="flex flex-col gap-5 lg:gap-6 lg:flex-row lg:items-start lg:justify-between mb-8 lg:mb-14">
              <div>
                <span className="inline-flex items-center gap-2 px-6 py-3 bg-[#ebebeb] rounded-full">
                  <img
                    src={data.newsletterHeader.badgeIcon || "/assets/gallery-newsletter/sparkle-icon.svg"}
                    alt=""
                    className="w-[17px] h-4"
                  />
                  <span className="font-heading text-black text-base uppercase leading-none">
                    {data.newsletterHeader.badge || 'Newsletters'}
                  </span>
                </span>
              </div>
              <div className="flex flex-col gap-4 lg:gap-0 lg:max-w-[524px]">
                <p className="font-sans font-medium text-base text-white/60 leading-[1.5]">
                  {data.newsletterHeader.description}
                </p>
                <div className="w-full border-t border-white/20 lg:mt-6 lg:border-t-0 lg:border-b lg:border-white/20" />
              </div>
            </div>

            {/* Newsletter Cards */}
            <div className="flex gap-4 lg:gap-6 overflow-x-auto scrollbar-hide -mx-5 pl-5 pr-0 lg:mx-0 lg:px-0 lg:overflow visible lg:justify-center">
              {newsletters.map((item) => (
                <div
                  key={item.title}
                  className="flex-shrink-0 w-[272px] lg:w-auto lg:flex-1 lg:min-w-0 lg:max-w-[416px] rounded-2xl overflow-hidden flex flex-col"
                  style={{ border: '0.833px solid rgba(229,231,235,0.5)',
                    background: 'radial-gradient(ellipse at bottom left, rgba(255,232,233,1), rgba(255,232,233,0) 60%), #fff',
                  }}
                >
                  {/* PDF Thumbnail */}
                  <div className="relative overflow-hidden shrink-0">
                    <img
                      src={item.image}
                      alt={item.title}
                      loading="lazy"
                      className="w-full h-auto block"
                    />
                    {/* Date Badge */}
                    <div className="absolute top-4 left-4 lg:top-6 lg:left-6 flex items-center gap-2 bg-white/90 border border-white rounded-2xl px-3 py-1.5">
                      <img
                        src={calendarIcon}
                        alt=""
                        className="w-[18px] h-[19px]"
                      />
                      <span className="font-funnel text-sm text-[#2a3036]/80 whitespace-nowrap">
                        {item.date}
                      </span>
                    </div>
                  </div>

                  {/* Content Area */}
                  <div className="flex flex-col gap-2 px-4 py-5 lg:flex-row lg:items-center lg:justify-between lg:p-6">
                    <h3 className="font-heading font-bold text-[20px] lg:text-2xl text-[#102443] leading-normal">
                      {item.title}
                    </h3>
                    <a
                      href={item.pdfUrl}
                      className="flex items-center gap-2.5 shrink-0"
                    >
                      <span className="font-sans font-medium text-sm text-[#2a3036] tracking-[0.7px] uppercase whitespace-nowrap">
                        View PDF
                      </span>
                      <div className="w-5 h-5 bg-[#d20010] rounded flex items-center justify-center">
                        <svg
                          width="6"
                          height="10"
                          viewBox="0 0 8 14"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M1 1L7 7L1 13"
                            stroke="white"
                            strokeWidth="2.5"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                        </svg>
                      </div>
                    </a>
                  </div>
                </div>
              ))}
            </div>

            {/* View All CTA */}
            <div className="mt-10 flex justify-center">
              <MGMButton text="View all" href="/newsletter" />
            </div>
          </div>
        </div>
      </div>

    </section>
  )
}