/* global React, Btn, Reveal */

// ============================================================================
//  Proof — Showreel + Gallery + Logo wall
// ============================================================================

// ---- Showreel ---------------------------------------------------------------
function Showreel() {
  return (
    <section className="section" id="showcase">
      <div className="page">
        <Reveal className="section__head">
          <div className="eyebrow">02 · See what's possible</div>
          <h2 className="headline">A 45-second cut of <span className="accent">the work</span>.</h2>
        </Reveal>
        <Reveal delay={120}>
          <div className="showreel" role="button" aria-label="Play showreel">
            <div className="showreel__poster"/>
            <div className="showreel__grid" aria-hidden="true"/>
            <div className="showreel__chip"><span className="live-dot"/>0:45 · 4K</div>
            <div className="showreel__meta">
              <span><b>Showreel</b> · 2026</span>
              <span>Studio + Creator work</span>
            </div>
            <div className="showreel__play">
              <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path d="M7 5v14l12-7L7 5z"/>
              </svg>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---- Gallery ----------------------------------------------------------------
const CATEGORIES = ["All", "Immersive", "Sports", "Communications", "Marketing", "Film & VFX"];

const PROJECTS = [
  { id: "p1", title: "Hollow Coast", category: "Immersive",     cams: "24 cameras",   hue: 280, n: 1 },
  { id: "p2", title: "Penalty Shootout", category: "Sports",    cams: "48 cameras",   hue: 320, n: 2 },
  { id: "p3", title: "Atlas (short film)", category: "Film & VFX", cams: "32 cameras",hue: 240, n: 3 },
  { id: "p4", title: "Brand Activation · Vega", category: "Marketing", cams: "single camera", hue: 340, n: 4 },
  { id: "p5", title: "Quarterly · Mira",   category: "Communications", cams: "single camera", hue: 260, n: 5 },
  { id: "p6", title: "Studio Sessions vol. 3", category: "Immersive", cams: "16 cameras",  hue: 300, n: 6 },
  { id: "p7", title: "Live · Rotterdam GP", category: "Sports",   cams: "single camera", hue: 350, n: 7 },
  { id: "p8", title: "Highline (music video)", category: "Film & VFX", cams: "48 cameras", hue: 220, n: 8 },
];

function Tile({ p, layout }) {
  const bg = `radial-gradient(60% 60% at 50% 45%, hsla(${p.hue}, 86%, 62%, 0.55), transparent 60%), radial-gradient(60% 60% at 70% 80%, hsla(${(p.hue+60)%360}, 76%, 56%, 0.5), transparent 65%), linear-gradient(180deg, #1a141f 0%, #0a0a0a 100%)`;
  return (
    <div className="tile" data-cat={p.category}>
      <div className="tile__art" style={{ background: bg }}>
        <span className="tile__num">{String(p.n).padStart(2,"0")}</span>
      </div>
      <div className="tile__overlay"/>
      <div className="tile__category">{p.category}</div>
      <div className="tile__meta">
        <div className="tile__title">{p.title}</div>
        <div className="tile__tag">{p.cams}</div>
      </div>
    </div>
  );
}

function Gallery({ layout = "bento" }) {
  const [active, setActive] = React.useState("All");

  const visible = active === "All" ? PROJECTS : PROJECTS.filter(p => p.category === active);

  // Counts per chip
  const counts = CATEGORIES.reduce((acc, c) => {
    acc[c] = c === "All" ? PROJECTS.length : PROJECTS.filter(p => p.category === c).length;
    return acc;
  }, {});

  // Bento needs 8 tiles for the spec; if filter trims, fall back to grid
  const useBento = layout === "bento" && active === "All";
  const wrapCls = useBento ? "bento" : layout === "scroll" ? "gallery-scroll" : "gallery-grid";

  return (
    <section className="section" style={{ paddingTop: 0 }}>
      <div className="page">
        <LogoWall/>

        <Reveal className="section__head">
          <div className="eyebrow">Application gallery</div>
          <h2 className="headline">Single camera. Or fifty. <span className="accent">Same pipeline.</span></h2>
          <p className="lede">A camera-count tag on every tile. The breadth lands without anyone having to explain it.</p>
        </Reveal>

        <Reveal>
          <div className="gallery__filters" role="tablist">
            {CATEGORIES.map(c => (
              <button
                key={c}
                role="tab"
                aria-selected={active === c}
                className={`chip ${active === c ? "is-active" : ""}`}
                onClick={() => setActive(c)}
              >
                {c} <span className="count">{counts[c]}</span>
              </button>
            ))}
          </div>
        </Reveal>

        <Reveal delay={80}>
          <div className={wrapCls}>
            {visible.map(p => <Tile key={p.id} p={p} layout={layout}/>)}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---- Logo wall (marquee) ----------------------------------------------------
// Image: { src: "assets/logos/file.svg", alt: "Brand name" }
// Optional tone: "gray" for desaturated color; omit (or "white") for flat white (default)
const LOGOS = [
  { src: "assets/logos/samsung.svg", alt: "Samsung" },
  { src: "assets/logos/vodafone.svg", alt: "Vodafone" },
  { src: "assets/logos/HSLU.svg", alt: "HSLU" },
  { src: "assets/logos/Hugo_Boss.svg", alt: "Hugo Boss" },
  { src: "assets/logos/acciona.svg", alt: "Acciona" },
  { src: "assets/logos/tcd.svg", alt: "Trinity College Dublin"},
  { src: "assets/logos/HTC.svg", alt: "HTC" },
  { src: "assets/logos/arcturus.svg", alt: "Arcturus" },
  { src: "assets/logos/National_Gallery_London.svg", alt: "The National Gallery London" },
  { src: "assets/logos/upm.svg", alt: "Universidad Politécnica de Madrid", tone: "gray"},
];

function LogoMarqueeItem({ logo }) {
  const toneCls = logo.tone === "gray" ? " logo-marquee__item--tone-gray" : "";
  const tipText = logo.alt || logo.label;

  return (
    <li className={`logo-marquee__item${toneCls}`} tabIndex={tipText ? 0 : undefined}>
      {logo.src ? (
        <img src={logo.src} alt={logo.alt} loading="lazy" decoding="async"/>
      ) : (
        <span className={`placeholder-logo pl--${logo.style}`}>{logo.label}</span>
      )}
      {tipText ? (
        <span className="logo-marquee__tip" role="tooltip">{tipText}</span>
      ) : null}
    </li>
  );
}

function LogoWall() {
  const items = LOGOS.map((logo, i) => <LogoMarqueeItem key={`${logo.label || logo.alt}-${i}`} logo={logo}/>);

  return (
    <div className="logo-wall">
      <div className="logo-marquee" aria-label="Trusted by studios, broadcasters and brands">
        <div className="logo-marquee__viewport">
          <div className="logo-marquee__track">
            <ul className="logo-marquee__group">{items}</ul>
            <ul className="logo-marquee__group" aria-hidden="true">{items}</ul>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Showreel, Gallery, LogoWall });