/* Selected Work — case studies. Exports Work to window. */

function Case({ data, isOpen, onToggle }) {
  const c = data;
  return (
    <article
      className={"case reveal" + (isOpen ? " open" : "")}
      data-screen-label={"Case " + c.id + " — " + c.title}
    >
      <div className="case-top" onClick={onToggle}>
        <span className="case-id">{c.id}</span>
        <h3 className="case-title">{c.title}</h3>
        <div className="case-meta">
          <span><b>Role</b>&nbsp; {c.role}</span>
          <span><b>Year</b>&nbsp; {c.year}</span>
          <span><b>Client</b>&nbsp; {c.client}</span>
        </div>
        <span className="expand-ico" aria-hidden="true">+</span>
      </div>

      <div className="case-body">
        <div className="inner">
          <VF className="case-still-wrap">
            {c.video ? (
              <iframe
                className="case-still"
                src={c.video}
                title={c.title}
                frameBorder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                referrerPolicy="strict-origin-when-cross-origin"
                allowFullScreen
              />
            ) : (
              <Placeholder className="case-still" label={c.still} />
            )}
          </VF>
          <VF className="case-thumb-wrap">
            {c.video ? (
              <iframe
                className="case-thumb"
                src={c.video}
                title={c.title}
                frameBorder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                referrerPolicy="strict-origin-when-cross-origin"
                allowFullScreen
              />
            ) : (
              <Placeholder className="case-thumb" label={c.still} />
            )}
          </VF>
          <div className="case-grid">
            <span className="spacer" />
            <div className="case-block problem">
              <span className="lbl">Problem</span>
              <p>{c.problem}</p>
            </div>
            <div className="case-block work">
              <span className="lbl">What I did</span>
              <p>{c.work}</p>
            </div>
            <div className="case-block result">
              <span className="lbl">Result</span>
              <div className="case-result-metric">{c.metric}</div>
              <span className="metric-unit">{c.metricUnit}</span>
              <p>{c.result}</p>
            </div>
          </div>
        </div>
      </div>
    </article>
  );
}

function Work() {
  const [openId, setOpenId] = React.useState(CASES[0].id);
  return (
    <section className="section work" id="work" data-screen-label="Selected Work">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot" /> Selected Work — 2024–25</span>
          <h2>Four Projects.</h2>
        </div>
        <div className="cases">
          {CASES.map((c) => (
            <Case
              key={c.id}
              data={c}
              isOpen={openId === c.id}
              onToggle={() => setOpenId(openId === c.id ? null : c.id)}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Work, Case });