import OemLogo from "./OemLogo";
import type { Partner } from "../types";

// Infinite OEM logo ticker — light structured tile band: bordered tiles on white.
export default function LogoMarquee({ partners }: { partners: Partner[] }) {
  if (!partners?.length) return null;
  const row = (hidden: boolean) => (
    <div className="flex shrink-0 items-center gap-3.5 pr-3.5" aria-hidden={hidden || undefined}>
      {partners.map((p) => (
        <div
          key={p.slug}
          className="group flex h-[74px] min-w-[184px] items-center justify-center gap-3.5 border border-[#E2E7EF] bg-[#F6F8FA] px-7 hover:border-cydeep/50 hover:bg-white transition-all duration-300"
          data-testid={`marquee-logo-${p.slug}`}
        >
          <OemLogo domain={p.domain} name={p.name} slug={p.slug} className="h-7 w-7" tileCls="hidden" />
          <span className="text-[15px] font-bold text-[#101828]/80 group-hover:text-[#101828] whitespace-nowrap transition-colors duration-300">{p.name}</span>
        </div>
      ))}
    </div>
  );
  return (
    <section className="relative bg-white border-b border-[#E2E7EF] overflow-hidden" data-testid="logo-marquee-band">
      <div className="mx-auto max-w-[1320px] px-5 md:px-10 pt-9 flex flex-wrap items-center justify-between gap-3">
        <p className="font-tech text-[10px] sm:text-xs tracking-[0.3em] text-cydeep flex items-center gap-3" data-testid="logo-marquee-eyebrow">
          <span className="h-px w-10 bg-cydeep/60 inline-block" />
          POWERED BY THE WORLD'S LEADING TECHNOLOGY OEMS
        </p>
        <p className="font-tech text-[10px] tracking-[0.24em] text-mist/50" data-testid="logo-marquee-count">140+ OEM ECOSYSTEM</p>
      </div>
      <div className="mt-7 overflow-hidden pb-9 -rotate-[1.1deg] scale-[1.03]">
        <div className="logo-marquee-track flex w-max">
          {row(false)}
          {row(true)}
        </div>
      </div>
      {/* edge fade so tiles dissolve into the band */}
      <div className="pointer-events-none absolute inset-y-0 left-0 w-14 bg-gradient-to-r from-white to-transparent" aria-hidden="true" />
      <div className="pointer-events-none absolute inset-y-0 right-0 w-14 bg-gradient-to-l from-white to-transparent" aria-hidden="true" />
    </section>
  );
}