"use client"

import type { PartnersData } from '@/lib/strapi/types'

interface PartnersGrowthSectionProps {
  data: PartnersData
}

export default function PartnersGrowthSection({ data }: PartnersGrowthSectionProps) {
  const partners = data.partners
  return (
    <section className="bg-white py-16 lg:py-20">
      {/* Top: Badge + Description (constrained width) */}
      <div className="w-full max-w-[1297px] mx-auto px-5 lg:px-5 mb-8 lg:mb-14">
        <div className="flex flex-col gap-5 lg:gap-6 lg:flex-row lg:items-start lg:justify-between">
          {/* Badge */}
          <div>
            <span
              className="inline-flex items-center gap-2 px-6 py-3 rounded-[66px]"
              style={{ backgroundColor: '#ebebeb' }}
            >
                <img
                  src={data.header.badgeIcon || "/assets/leaders/sparkle-icon.svg"}
                  alt=""
                  loading="lazy"
                  className="w-[17px] h-4 shrink-0"
                />
                <span className="font-heading text-base text-black uppercase leading-tight sm:leading-none whitespace-normal sm:whitespace-nowrap">
                  {data.header.badge || 'Partners in Long-Term Growth'}
                </span>
            </span>
          </div>

          {/* Description */}
          <div className="flex flex-col gap-4 lg:gap-6 flex-1 lg:max-w-[524px]">
            <p className="font-sans font-medium text-base leading-[1.5] text-[rgba(16,36,67,0.6)]">
{data.header.description}            </p>
            <div className="w-full border-t border-[rgba(16,36,67,0.2)]" />
          </div>
        </div>
      </div>

      {/* Mobile: 2-column static grid (constrained width) */}
      <div className="w-full max-w-[1297px] mx-auto px-5 lg:hidden">
        <div className="grid grid-cols-2 gap-x-[7px] gap-y-6">
          {partners.map((partner, index) => (
            <div
              key={`mobile-${partner.name}-${index}`}
              className="h-[80px] rounded-xl flex items-center justify-center relative overflow-hidden"
              style={{ border: '0.8px 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',
              }}
            >
              <img
                src={partner.logo}
                alt={`${partner.name} logo`}
                className="max-w-[90%] max-h-[80%] w-auto h-auto object-contain scale-110"
                loading="lazy"
              />
            </div>
          ))}
        </div>
      </div>

      {/* Desktop: Full-width Marquee */}
      <div className="hidden lg:block w-full overflow-hidden">
        <div className="flex gap-6 animate-marquee will-change-transform">
          {/* First set */}
          {partners.map((partner, index) => (
            <div
              key={`first-${partner.name}-${index}`}
              className="flex-shrink-0 w-[300px] h-[124px] rounded-2xl flex items-center justify-center relative overflow-hidden"
              style={{ border: '1.146px 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',
              }}
            >
              <img
                src={partner.logo}
                alt={`${partner.name} logo`}
                className="max-w-[85%] max-h-[75%] w-auto h-auto object-contain scale-110"
                loading="lazy"
              />
            </div>
          ))}
          {/* Duplicate set for seamless loop */}
          {partners.map((partner, index) => (
            <div
              key={`second-${partner.name}-${index}`}
              className="flex-shrink-0 w-[300px] h-[124px] rounded-2xl flex items-center justify-center relative overflow-hidden"
              style={{ border: '1.146px 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',
              }}
            >
              <img
                src={partner.logo}
                alt={`${partner.name} logo`}
                className="max-w-[85%] max-h-[75%] w-auto h-auto object-contain scale-110"
                loading="lazy"
              />
            </div>
          ))}
        </div>
      </div>

    </section>
  )
}