/* ============================================================================
   work-grid.jsx  —  THE WORK SECTION'S 12-CARD PROJECT GRID
   ----------------------------------------------------------------------------
   Ported from the standalone Work page so it lives inside section 02's panel.

     • 12 cards laid out 4 columns x 3 rows of 4:3 rectangles — a 16:9 block
       that sizes itself to whatever room the panel gives it.
     • Hover a card -> its title fades up over a scrim. Motion thumbnails are
       built but switched OFF (WORK_HOVER_VIDEO in work-data.js) until the
       hover-sized films are exported; flip that flag to bring them back.
     • Click a card -> work/project.html?p=<id> (the shared detail template).
     • On phones the same cards render as a scrolling 2-column grid (stills
       only — no autoplay on a phone's data plan).

   Content lives in work-data.js.
   ============================================================================ */

const WORK_GRID_CSS = `
.wg-wrap{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  gap:clamp(8px,.9vw,14px); padding:clamp(12px,1.4vw,22px); }
.wg-top{ flex:0 0 auto; display:flex; align-items:center;
  padding-right:clamp(30px,2.8vw,42px); }
.wg-title{ font-family:var(--display); text-transform:uppercase; font-weight:500; letter-spacing:.02em;
  line-height:1.2; color:var(--paper); font-size:clamp(14px,1.35vw,20px); margin:0; }

/* The grid sizes itself: a 16:9 block capped by the stage, split 4x3 — which
   makes every cell exactly 4:3 without measuring anything in JS. */
.wg-stage{ position:relative; flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; }
.wg-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(3,1fr);
  gap:clamp(5px,.55vw,10px); aspect-ratio:16/9; flex:0 0 auto; height:100%; width:auto; max-width:100%; }
.wg-cell{ position:relative; min-width:0; min-height:0; }

.wg-card{ position:absolute; inset:0; border-radius:10px; overflow:hidden; cursor:pointer;
  background:rgba(10,18,14,.5); background-size:cover; background-position:center; color:var(--paper);
  text-decoration:none; display:block; will-change:transform;
  transition:transform .25s ease, box-shadow .25s ease; }
.wg-card:hover{ transform:translateY(-3px); box-shadow:0 18px 44px rgba(10,9,7,.34); }
.wg-card:active{ transform:translateY(0); }
.wg-card.wg-ph{ background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 14px, transparent 14px 28px); }
.wg-tint{ position:absolute; inset:0; z-index:0; pointer-events:none; background:rgba(0,0,0,.3);
  opacity:0; transition:opacity .35s ease; }
.wg-card:hover .wg-tint{ opacity:1; }

/* The hover clip. Sits above the still, below the scrim + title. It fades in
   only once the video is actually playing, so you never see a black frame. */
.wg-vid{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .45s ease; pointer-events:none; }
.wg-vid.playing{ opacity:1; }
.wg-face{ position:absolute; inset:0; z-index:2; }
.wg-face::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,14,11,.15) 0%, rgba(8,14,11,.05) 44%, rgba(8,14,11,.66) 100%);
  opacity:0; transition:opacity .35s ease; }
.wg-card:hover .wg-face::before{ opacity:1; }
.wg-cap{ position:absolute; z-index:3; left:0; right:0; bottom:0; padding:clamp(9px,1vw,15px);
  display:flex; flex-direction:column; justify-content:flex-end; gap:4px; opacity:0; transition:opacity .35s ease;
  font-family:var(--display); text-transform:uppercase; font-weight:500; letter-spacing:.01em; line-height:1.05;
  color:var(--paper); text-wrap:balance; font-size:clamp(11px,1.15vw,20px); }
.wg-card:hover .wg-cap{ opacity:1; }
.wg-blurb{ font-family:"Work Sans",system-ui,sans-serif; text-transform:none; font-weight:300;
  line-height:1.35; letter-spacing:normal; color:var(--paper); opacity:.88; font-size:clamp(9px,.72vw,12px);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
/* ---- Mobile: a scrolling 2-column grid inside the open accordion panel ---- */
.wg-mgrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.wg-mcell{ position:relative; aspect-ratio:4/3; }
.wg-mcell .wg-card{ position:relative; inset:auto; width:100%; height:100%; }
.wg-mcell .wg-cap{ opacity:1; font-size:14px; }
.wg-mcell .wg-face::before{ opacity:1; }
.wg-mcell .wg-blurb{ font-size:10px; }`;

/* One project card. On hover it mounts its clip (once) and plays it muted on a
   loop; on leave it fades out and rewinds so the next hover starts clean. */
function WorkCard({ p, still }) {
  const [armed, setArmed] = React.useState(false); /* has the <video> mounted? */
  const [playing, setPlaying] = React.useState(false);
  const vidRef = React.useRef(null);
  const hasClip = WORK_HOVER_VIDEO && !!p.clip && !still;

  const enter = () => {
    if (!hasClip) return;
    setArmed(true);
    const v = vidRef.current;
    if (v) { const q = v.play(); if (q && q.catch) q.catch(() => {}); }
  };
  const leave = () => {
    if (!hasClip) return;
    setPlaying(false);
    const v = vidRef.current;
    if (v) { v.pause(); v.currentTime = 0; }
  };
  /* Autoplay the moment the element exists (the first hover mounts it). */
  React.useEffect(() => {
    if (!armed) return;
    const v = vidRef.current;
    if (v) { const q = v.play(); if (q && q.catch) q.catch(() => {}); }
  }, [armed]);

  return (
    <a className={"wg-card" + (p.thumb ? "" : " wg-ph")} href={WORK_HREF(p.id)}
      onMouseEnter={enter} onMouseLeave={leave} onFocus={enter} onBlur={leave}
      style={p.thumb ? { backgroundImage: `url(${p.thumb})` } : undefined}>
      {p.thumb ? <div className="wg-tint"></div> : null}
      {armed &&
      <video ref={vidRef} className={"wg-vid" + (playing ? " playing" : "")} src={p.clip}
        muted loop playsInline preload="auto" tabIndex={-1} aria-hidden="true"
        onPlaying={() => setPlaying(true)} />
      }
      <div className="wg-face">
        <div className="wg-cap"><span>{p.title}</span></div>
      </div>
    </a>);

}

function WorkGrid({ mobile }) {
  if (mobile) return (
    <div className="wg-mgrid">
      {WORK_PROJECTS.map((p) =>
      <div key={p.id} className="wg-mcell"><WorkCard p={p} still /></div>
      )}
    </div>);


  return (
    <div className="wg-wrap">
      <div className="wg-top">
        <h2 className="wg-title">Selected Work</h2>
      </div>
      <div className="wg-stage">
        <div className="wg-grid">
          {WORK_PROJECTS.map((p) =>
          <div key={p.id} className="wg-cell"><WorkCard p={p} /></div>
          )}
        </div>
      </div>
    </div>);

}

Object.assign(window, { WORK_GRID_CSS, WorkGrid });