// sections-work.jsx — work section with 3 layouts: grid, list (cursor reveal), gallery.
const { useRef: useWorkRef, useEffect: useWorkEffect, useState: useWorkState } = React;

const slotId = (p) => `proj-${p.slot}`;
const Media = window.Media;

function WorkHeader({ count }) {
  return (
    <div className="sec-head">
      <div className="sec-head-l">
        <span className="mono dim">SELECTED WORK</span>
        <h2 className="sec-title"><span className="impact">ALL</span> <span className="impact">WORKS</span></h2>
      </div>
      <p className="mono dim sec-head-r">{String(count).padStart(2, '0')} projects · 2020—2025</p>
    </div>);

}

/* ---------- GRID ---------- */
function WorkGrid() {
  const projects = window.PROJECTS;
  return (
    <div className="work-tiles">
      {projects.map((p) =>
      <a key={p.slot} href={`project.html?p=${p.slot}`} className="work-tile" data-cursor="link" style={{ '--ac': window.acColor(p.accent) }}>
          {p.coverGrid ?
          <div className="tile-feed">{p.coverGrid.map((s, i) => <img key={i} src={s} alt="" loading="lazy" />)}</div> :
          <Media src={p.cover} id={slotId(p)} ph={`${p.title} — drop image`} alt={p.title} />}
          <span className="tile-label mono">{p.title}</span>
          <span className="card-view"><span className="card-view-pill">View Campaign <i>↗</i></span></span>
        </a>
      )}
    </div>);

}

/* ---------- LIST (index + cursor image reveal) ---------- */
function WorkList() {
  const projects = window.PROJECTS;
  const wrapRef = useWorkRef(null);
  const [active, setActive] = useWorkState(null);
  const posRef = useWorkRef({ x: 0, y: 0 });

  useWorkEffect(() => {
    const onMove = (e) => {
      posRef.current = { x: e.clientX, y: e.clientY };
      const r = document.getElementById('list-reveal');
      if (r) {r.style.left = e.clientX + 'px';r.style.top = e.clientY + 'px';}
    };
    window.addEventListener('pointermove', onMove);
    return () => window.removeEventListener('pointermove', onMove);
  }, []);

  return (
    <div className="work-list" ref={wrapRef}>
      <div className="work-list-rows">
        {projects.map((p) =>
        <a key={p.slot} href={`project.html?p=${p.slot}`} className={`work-row ${active === p.slot ? 'is-active' : ''}`} data-cursor="view"
        style={{ '--ac': window.acColor(p.accent) }}
        onMouseEnter={() => setActive(p.slot)} onMouseLeave={() => setActive(null)}>
            <span className="row-num mono">{p.n}</span>
            <span className="row-title">{p.title}</span>
            <span className="row-cat mono dim">{p.cat}</span>
            <span className="row-year mono dim">{p.year}</span>
            <i className="row-arr">↗</i>
          </a>
        )}
      </div>
      <div id="list-reveal" className={`list-reveal ${active ? 'show' : ''}`} aria-hidden="true">
        {projects.map((p) =>
        <div key={p.slot} className="list-reveal-img" style={{ opacity: active === p.slot ? 1 : 0, '--ac': window.acColor(p.accent) }}>
            <Media src={p.cover} id={slotId(p)} ph={p.title} alt={p.title} />
          </div>
        )}
      </div>
    </div>);

}

/* ---------- GALLERY (alternating editorial) ---------- */
function WorkGallery() {
  const projects = window.PROJECTS;
  return (
    <div className="work-gallery">
      {projects.map((p, i) =>
      <a key={p.slot} href={`project.html?p=${p.slot}`} className={`gallery-item ${i % 2 ? 'flip' : ''}`} data-cursor="link"
      style={{ '--ac': window.acColor(p.accent) }}>
          <div className="gallery-frame">
            <Media src={p.cover} id={slotId(p)} ph={`${p.title} — drop image`} alt={p.title} />
            <span className="work-card-tag">{p.cat.split(' · ')[0]}</span>
            <span className="card-view"><span className="card-view-pill">View Campaign <i>↗</i></span></span>
          </div>
          <div className="gallery-text">
            <span className="gallery-num impact outline">{p.n}</span>
            <h3 className="gallery-title impact">{p.title}</h3>
            <p className="gallery-sub serif-ital">{p.sub}</p>
            <p className="gallery-blurb">{p.blurb}</p>
            <div className="gallery-foot">
              <span className="mono dim">{p.cat}</span>
              <span className="mono dim">{p.year}</span>
            </div>
          </div>
        </a>
      )}
    </div>);

}

/* ---------- BRANDING (separate section + lightbox) ---------- */
function BrandingSection() {
  const items = window.BRANDING || [];
  const [open, setOpen] = useWorkState(null); // index of open board

  useWorkEffect(() => {
    const onKey = (e) => {
      if (open === null) return;
      if (e.key === 'Escape') setOpen(null);
      else if (e.key === 'ArrowRight') setOpen((i) => (i + 1) % items.length);
      else if (e.key === 'ArrowLeft') setOpen((i) => (i - 1 + items.length) % items.length);
    };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = open !== null ? 'hidden' : '';
    return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [open, items.length]);

  const cur = open !== null ? items[open] : null;

  return (
    <div className="branding">
      <div className="sec-head branding-head">
        <div className="sec-head-l">
          <span className="mono dim">BRANDING &amp; IDENTITY</span>
          <h2 className="sec-title"><span className="impact">BRAND</span> <span className="serif-ital">systems.</span></h2>
        </div>
        <p className="mono dim sec-head-r">{String(items.length).padStart(2, '0')} identities · logos to rollout</p>
      </div>

      <div className="brand-grid">
        {items.map((b, i) => (
          b.pdf && !b.img ?
          <a key={b.name} href={b.pdf} target="_blank" rel="noopener" data-no-transition className="brand-tile brand-tile-pdf" data-cursor="link" style={{ '--tone': b.tone }}>
            <div className="brand-tile-pdfface">
              <span className="brand-pdf-name impact">{b.name}</span>
              <span className="brand-pdf-badge mono">PDF ↗</span>
            </div>
            <div className="brand-tile-meta"><span className="brand-name">{b.name}</span><span className="mono dim">{b.cat}</span></div>
          </a> :
          <button key={b.name} type="button" className="brand-tile" data-cursor="view" style={{ '--tone': b.tone }} onClick={() => setOpen(i)}>
            <div className="brand-tile-frame">
              <img src={b.img} alt={b.name} loading="lazy" />
              <span className="card-view"><span className="card-view-pill">View Identity <i>↗</i></span></span>
            </div>
            <div className="brand-tile-meta"><span className="brand-name">{b.name}</span><span className="mono dim">{b.cat}</span></div>
          </button>
        ))}
      </div>

      {cur &&
      <div className="brand-lightbox" onClick={() => setOpen(null)}>
        <div className="brand-lb-bar" onClick={(e) => e.stopPropagation()}>
          <div className="brand-lb-title"><span className="brand-name">{cur.name}</span><span className="mono dim">{cur.cat}</span></div>
          <div className="brand-lb-tools">
            <span className="mono dim">{String(open + 1).padStart(2, '0')} / {String(items.length).padStart(2, '0')}</span>
            <button type="button" className="brand-lb-x" data-cursor="link" onClick={() => setOpen(null)} aria-label="Close">✕</button>
          </div>
        </div>
        <button type="button" className="brand-lb-nav prev" data-cursor="link" onClick={(e) => { e.stopPropagation(); setOpen((open - 1 + items.length) % items.length); }} aria-label="Previous">‹</button>
        <button type="button" className="brand-lb-nav next" data-cursor="link" onClick={(e) => { e.stopPropagation(); setOpen((open + 1) % items.length); }} aria-label="Next">›</button>
        <div className="brand-lb-stage" onClick={(e) => e.stopPropagation()}>
          <img src={cur.img} alt={cur.name} />
        </div>
      </div>}
    </div>);

}

function Work({ layout = 'grid' }) {
  return (
    <section className="sec work" id="work">
      <WorkHeader count={window.PROJECTS.length} />
      {layout === 'list' ? <WorkList /> : layout === 'gallery' ? <WorkGallery /> : <WorkGrid />}
      <BrandingSection />
    </section>);

}

Object.assign(window, { Work });