// case-study.jsx — Full-screen overlay for a selected project.

function CaseStudy({ w, onClose }) {
  const prevScroll = React.useRef(0);

  React.useEffect(() => {
    if (!w) return;
    prevScroll.current = window.scrollY;
    document.body.style.overflow = "hidden";
    const esc = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", esc);
    return () => {
      document.body.style.overflow = "";
      window.removeEventListener("keydown", esc);
    };
  }, [w]);

  if (!w) return null;

  return (
    <div className="cs" style={{ "--tint": w.tint, "--bg": w.bg }}>
      <div className="cs-top">
        <span className="cs-top-l">
          <span className="cs-top-dot" />
          <span>Case Study · {w.year}</span>
        </span>
        <button className="cs-close" onClick={onClose} aria-label="Close">
          <span>Close</span>
          <span className="cs-close-x" aria-hidden="true">✕</span>
        </button>
      </div>

      <div className="cs-scroll">
        <header className="cs-header">
          <span className="cs-client">{w.client}</span>
          <h2 className="cs-title">{w.title}</h2>
          <div className="cs-meta">
            <div><dt>Client</dt><dd>{w.client}</dd></div>
            <div><dt>Scope</dt><dd>{w.kind}</dd></div>
            <div><dt>Year</dt><dd>{w.year}</dd></div>
            <div><dt>Role</dt><dd>Full Suit — concept, production, post</dd></div>
          </div>
        </header>

        <div className="cs-hero">
          <Placeholder label={`${w.client} · hero film`} tint={w.tint} bg={w.bg} ratio="21/9" />
          <span className="cs-hero-play">
            <span className="cs-hero-ring" />
            <span className="cs-hero-tri">▶</span>
          </span>
        </div>

        <section className="cs-intro">
          <p className="cs-lede">{w.summary}</p>
          <p className="cs-body">
            The brief asked for one film. We came back with a full toolkit — identity, stills, a cut-down suite for social, and a site that made the work findable. Shot over ten days across three states with a six-person crew.
          </p>
        </section>

        <div className="cs-metrics">
          {w.metrics.map(([n, l]) => (
            <div key={l} className="cs-metric">
              <span className="cs-metric-n">{n}</span>
              <span className="cs-metric-l">{l}</span>
            </div>
          ))}
        </div>

        <div className="cs-media-grid">
          <Placeholder label="still · 01" tint={w.tint} bg={w.bg} ratio="4/5" />
          <Placeholder label="still · 02" tint={w.tint} bg={w.bg} ratio="4/5" />
          <div className="cs-media-wide">
            <Placeholder label="editorial spread" tint={w.tint} bg={w.bg} ratio="16/9" />
          </div>
          <Placeholder label="identity system" tint={w.tint} bg={w.bg} ratio="1/1" kind="dots" />
          <Placeholder label="packaging · suite" tint={w.tint} bg={w.bg} ratio="1/1" />
        </div>

        <section className="cs-credits">
          <h3>Credits</h3>
          <div className="cs-credits-grid">
            <div><dt>Direction</dt><dd>Ava Chen</dd></div>
            <div><dt>Design Lead</dt><dd>Marcus Ford</dd></div>
            <div><dt>Production</dt><dd>Nia Okoye</dd></div>
            <div><dt>DP</dt><dd>Jonas Reyes</dd></div>
            <div><dt>Editor</dt><dd>Sam Park</dd></div>
            <div><dt>Composer</dt><dd>Lila Voss</dd></div>
          </div>
        </section>

        <div className="cs-next">
          <span className="cs-next-k">Next project</span>
          <button className="cs-next-a" onClick={onClose}>
            <span>Back to all work</span>
            <span aria-hidden="true">→</span>
          </button>
        </div>
      </div>
    </div>
  );
}

window.CaseStudy = CaseStudy;