// PRLX site — "Collaborators" logo strip. Whitened client logos in a seamless,
// auto-scrolling marquee (pauses on hover). Ordered by calibre.
function Collaborators() {
  const { useViewport } = window;
  const { isMobile } = useViewport();

  React.useEffect(() => {
    if (document.getElementById("prlx-marquee-kf")) return;
    const s = document.createElement("style");
    s.id = "prlx-marquee-kf";
    s.textContent = "@keyframes prlxMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}";
    document.head.appendChild(s);
  }, []);

  const logos = [
    { slug: "netflix", name: "Netflix", w: 118 },
    { slug: "amazon-music", name: "Amazon Music", w: 150 },
    { slug: "nfl", name: "NFL", w: 92 },
    { slug: "tiktok", name: "TikTok", w: 120 },
    { slug: "canon", name: "Canon", w: 108 },
    { slug: "tourism-australia", name: "Tourism Australia", w: 86 },
    { slug: "cricket-australia", name: "Cricket Australia", w: 74 },
    { slug: "woolworths", name: "Woolworths", w: 92 },
    { slug: "telstra", name: "Telstra", w: 56 },
    { slug: "wide-world-of-sports", name: "Wide World of Sports", w: 92 },
    { slug: "tourism-nt", name: "Northern Territory", w: 120 },
    { slug: "nt-government", name: "NT Government", w: 120 },
    { slug: "charles-darwin-university", name: "Charles Darwin University", w: 130 },
    { slug: "eureka", name: "Eureka Productions", w: 78 },
  ];
  const H = isMobile ? 34 : 46;
  const CAP = isMobile ? 112 : 150;
  const track = [...logos, ...logos];

  return (
    <section data-screen-label="Collaborators" id="collaborators" style={{ background: "var(--prlx-ink)", padding: isMobile ? "56px 0" : "80px 0", borderTop: "1px solid rgba(255,255,255,0.08)", borderBottom: "1px solid rgba(255,255,255,0.08)" }}>
      <div style={{ padding: isMobile ? "0 20px" : "0 32px", marginBottom: isMobile ? 32 : 44, display: "flex", alignItems: "baseline", gap: 14, flexWrap: "wrap" }}>
        <span style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 11, textTransform: "uppercase", letterSpacing: "0.32em", color: "var(--prlx-graphite-400)" }}>
          ↳ Collaborators
        </span>
        <span style={{ fontFamily: "var(--font-body)", fontWeight: 300, fontSize: isMobile ? 14 : 16, color: "var(--prlx-graphite-500)" }}>
          Brands and broadcasters we've rolled cameras for.
        </span>
      </div>

      {/* marquee */}
      <div
        style={{
          position: "relative", overflow: "hidden", width: "100%",
          WebkitMaskImage: "linear-gradient(to right, transparent, #000 8%, #000 92%, transparent)",
          maskImage: "linear-gradient(to right, transparent, #000 8%, #000 92%, transparent)",
        }}
      >
        <div style={{
          display: "flex", alignItems: "center", width: "max-content",
          gap: isMobile ? 48 : 80,
          animation: `prlxMarquee ${isMobile ? 36 : 52}s linear infinite`,
        }}>
          {track.map((l, i) => (
            <div key={`${l.slug}-${i}`} title={l.name} style={{ flexShrink: 0, height: H, display: "flex", alignItems: "center", justifyContent: "center" }}>
              <img
                src={`../../assets/collaborators/${l.slug}.png`}
                alt={l.name}
                style={{
                  maxHeight: H, maxWidth: CAP, width: "auto", height: "auto",
                  objectFit: "contain", opacity: 0.6,
                }}
              />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Collaborators });