import { Reveal } from "@/components/reveal";

const partners = Array.from({ length: 6 }, (_, i) => ({
  id: i,
  name: "Company Name",
  tagline: "Partnership placeholder",
}));

function PartnerIcon() {
  return (
    <svg viewBox="0 0 24 24" className="size-7 shrink-0 fill-current" aria-hidden>
      <rect x="3" y="3" width="7" height="7" rx="1.5" transform="rotate(12 6.5 6.5)" />
      <rect x="14" y="3" width="7" height="7" rx="1.5" transform="rotate(-12 17.5 6.5)" />
      <rect x="3" y="14" width="7" height="7" rx="1.5" />
      <rect x="14" y="14" width="7" height="7" rx="1.5" transform="rotate(20 17.5 17.5)" />
    </svg>
  );
}

export function Partners() {
  return (
    <section aria-label="Partners" className="relative py-10 lg:py-14">
      <Reveal className="overflow-hidden [mask-image:linear-gradient(90deg,transparent,#000_8%,#000_92%,transparent)]">
        {/* List rendered twice so translating -50% loops seamlessly */}
        <div className="flex w-max animate-marquee hover:[animation-play-state:paused]">
          {[0, 1].map((copy) => (
            <ul key={copy} aria-hidden={copy === 1} className="flex shrink-0">
              {partners.map((p) => (
                <li className="group flex items-center gap-3 px-8 transition-opacity duration-300 sm:px-12" key={p.id}>
                  <span className="text-foreground/70 transition-colors duration-300 group-hover:text-accent">
                    <PartnerIcon />
                  </span>
                  <div className="leading-tight">
                    <p className="text-sm font-semibold text-foreground">{p.name}</p>
                    <p className="text-sm text-muted">{p.tagline}</p>
                  </div>
                </li>
              ))}
            </ul>
          ))}
        </div>
      </Reveal>
    </section>
  );
}