const { Button, Badge } = window.ZaviFxDesignSystem_f15c31;

/* stacked-deck showcase: autoplay, prev/next, category tags, word-blur copy */
function ProjectShowcase({ go }) {
  const all = window.PORTFOLIO;
  const cats = window.CATEGORIES;
  const detail = (slug) => (window.PROJECTS || []).find((d) => d.slug === slug);
  const [cat, setCat] = React.useState('All');
  const list = React.useMemo(
    () => (cat === 'All' ? all : all.filter((p) => p.c === cat)),
    [cat, all]
  );
  const [i, setI] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  React.useEffect(() => { setI(0); }, [cat]);
  React.useEffect(() => {
    if (reduce || paused || list.length < 2) return;
    const t = setInterval(() => setI((n) => (n + 1) % list.length), 5200);
    return () => clearInterval(t);
  }, [paused, list.length, reduce]);

  const next = () => setI((n) => (n + 1) % list.length);
  const prev = () => setI((n) => (n - 1 + list.length) % list.length);
  const active = list[i];
  if (!active) return null;

  /* three visible cards in the deck */
  const deck = [0, 1, 2].map((o) => list[(i + o) % list.length]).filter(Boolean);

  return (
    <section className="zx-show" id="work-showcase">
      <div className="zx-container">
        <header className="zx-show__head" data-reveal>
          <div>
            <span className="zx-show__eyebrow">Selected work</span>
            <h2 className="zx-show__h2">{all.length} builds, sorted by the world they live in</h2>
          </div>
          <Button variant="secondary" onClick={() => go('work')}>Browse all work</Button>
        </header>

        <div className="zx-show__tags" role="tablist" data-reveal>
          {cats.map((c) => (
            <button key={c} type="button" role="tab" aria-selected={c === cat}
              className="zx-filter__pill" data-on={c === cat ? '' : undefined} onClick={() => setCat(c)}>
              {c}<em>{c === 'All' ? all.length : all.filter((p) => p.c === c).length}</em>
            </button>
          ))}
        </div>

        <div className="zx-show__grid" data-reveal>
          <div className="zx-deck" style={{ '--ratio': 1.42 }}
            onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
            {deck.map((p, o) => (
              <figure key={p.s} className="zx-deck__card" data-depth={o}
                onClick={() => o === 0 ? window.openShowcase?.(p) : setI((i + o) % list.length)}>
                <img src={window.ASSETS + p.img} alt={p.n + ' — website by ZaviFx'} loading="lazy" draggable="false" />
                {o === 0 && <span className="zx-deck__open" aria-hidden="true">View full page</span>}
              </figure>
            ))}
          </div>

          <div className="zx-show__panel">
            <div key={active.s} className="zx-show__copy">
              <h3 className="zx-show__name">{active.n}</h3>
              <p className="zx-show__ind">{active.c} · {active.tech.join(' · ')}</p>
              <p className="zx-show__quote">
                {((detail(active.s) || {}).challenge || (active.n + ' — a ' + active.c.toLowerCase() + ' build covering ' + active.svc.join(', ').toLowerCase() + ', shipped with a documented design system, a measured performance budget and a tracking plan handed over on launch day.')).split(' ').map((w, n) => (
                  <span key={n} className="zx-word" style={{ animationDelay: (n * 0.022) + 's' }}>{w}&nbsp;</span>
                ))}
              </p>
              <div className="zx-show__svc">
                {active.svc.map((v) => <Badge key={v}>{v}</Badge>)}
              </div>
            </div>

            <div className="zx-show__nav">
              <button type="button" className="zx-halo" onClick={prev} aria-label="Previous project"><span>Previous</span></button>
              <button type="button" className="zx-halo" onClick={next} aria-label="Next project"><span>Next</span></button>
              <button type="button" className="zx-halo zx-halo--fill" onClick={() => window.openShowcase?.(active)}><span>Open showcase</span></button>
            </div>

            <div className="zx-show__bar" aria-hidden="true">
              <i key={i + '-' + cat} data-paused={paused ? '' : undefined} />
            </div>

            <div className="zx-show__dots" aria-hidden="true">
              {list.map((p, n) => (
                <button key={p.s} type="button" className="zx-show__dot" data-on={n === i ? '' : undefined}
                  onClick={() => setI(n)} tabIndex={-1} />
              ))}
              <span className="zx-show__count">{String(i + 1).padStart(2, '0')} / {String(list.length).padStart(2, '0')}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { ProjectShowcase });