/* Work page gallery — editorial index with cursor-following preview, plus a framed grid view. */
function WorkStage() {
  const all = window.PORTFOLIO;
  const cats = window.CATEGORIES;
  const [cat, setCat] = React.useState('All');
  const [view, setView] = React.useState('index');
  const [hot, setHot] = React.useState(null);
  const wrap = React.useRef(null);
  const list = React.useMemo(() => (cat === 'All' ? all : all.filter((p) => p.c === cat)), [cat, all]);

  const move = (e) => {
    const el = wrap.current; if (!el) return;
    const r = el.getBoundingClientRect();
    el.style.setProperty('--px', (e.clientX - r.left) + 'px');
    el.style.setProperty('--py', (e.clientY - r.top) + 'px');
  };

  return (
    <section className="zx-ws" ref={wrap} onMouseMove={move}>
      <div className="zx-container">
        <div className="zx-ws__bar">
          <div className="zx-ws__tags" role="tablist" aria-label="Project category">
            {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-ws__views" role="tablist" aria-label="Layout">
            {['index', 'grid'].map((v) => (
              <button key={v} type="button" role="tab" aria-selected={v === view} className="zx-ws__view"
                data-on={v === view ? '' : undefined} onClick={() => setView(v)}>{v}</button>
            ))}
          </div>
        </div>

        {view === 'index' ? (
          <>
            <ol className="zx-ws__list" onMouseLeave={() => setHot(null)}>
              {list.map((p, n) => (
                <li key={p.s}>
                  <button type="button" className="zx-ws__row" data-on={hot === p.s ? '' : undefined}
                    onMouseEnter={() => setHot(p.s)} onFocus={() => setHot(p.s)}
                    onClick={() => window.openShowcase?.(p)}>
                    <span className="zx-ws__n">{String(n + 1).padStart(2, '0')}</span>
                    <span className="zx-ws__name">{p.n}</span>
                    <span className="zx-ws__cat">{p.c}</span>
                    <span className="zx-ws__tech">{p.tech.join(' · ')}</span>
                    <span className="zx-ws__go" aria-hidden="true">
                      <svg width="16" height="16" viewBox="0 0 18 18" fill="none"><path d="M5.5 12.5 12.5 5.5M6.5 5.5h6v6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    </span>
                  </button>
                </li>
              ))}
            </ol>
            <div className="zx-ws__peek" data-on={hot ? '' : undefined} aria-hidden="true">
              {hot && <img src={window.ASSETS + list.find((p) => p.s === hot).img} alt="" />}
            </div>
          </>
        ) : (
          <div className="zx-ws__grid">
            {list.map((p, n) => (
              <article key={p.s} className={'zx-ws__tile' + (n % 7 === 0 ? ' is-wide' : '')} data-reveal>
                <button type="button" onClick={() => window.openShowcase?.(p)} aria-label={'Open ' + p.n}>
                  <span className="zx-ws__chrome" aria-hidden="true"><i /><i /><i /><b>{p.s}.example</b></span>
                  <span className="zx-ws__shot">
                    <img src={window.ASSETS + p.img} alt={p.n + ' — website by ZaviFx'} loading="lazy" />
                  </span>
                  <span className="zx-ws__foot">
                    <span>
                      <em>{p.c}</em>
                      <strong>{p.n}</strong>
                    </span>
                    <span className="zx-ws__pill">Open</span>
                  </span>
                </button>
              </article>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}
Object.assign(window, { WorkStage });