// src/works.jsx — WORKS: case grid + slide-over detail

function Works() {
  const works = publicItems(window.DATA.works);
  const [openId, setOpenId] = React.useState(null);
  const [indFilter, setIndFilter] = React.useState("全部");
  const [svcFilter, setSvcFilter] = React.useState("全部");

  const industries = ["全部", ...new Set(works.map((w) => w.industry))];
  const svcs = ["全部", ...new Set(works.map((w) => w.svc))];

  const filtered = works.filter((w) =>
    (indFilter === "全部" || w.industry === indFilter) &&
    (svcFilter === "全部" || w.svc === svcFilter)
  );

  const opened = works.find((w) => w.id === openId);

  return (
    <section id="works" className="sec" style={{ background: "var(--bg-sunk)" }}>
      <div className="wrap">
        <Reveal>
          <div className="sec-head">
            <div>
              <div className="sec-tag">05 / Works</div>
              <h2>事实建立<em style={{ fontStyle: "normal", color: "var(--accent)", fontFamily: "var(--display)" }}> 信任</em>，<br/>反思建立<em style={{ fontStyle: "normal", color: "var(--accent)", fontFamily: "var(--display)" }}> 共鸣</em>。</h2>
            </div>
            <div className="sec-meta">47 个项目 / 4 个公开案例</div>
          </div>
        </Reveal>

        <Reveal>
          <div className="works-filters">
            <div className="group">
              <span className="lbl">行业</span>
              {industries.map((i) => (
                <button key={i} className={`pill${indFilter === i ? " active" : ""}`} onClick={() => setIndFilter(i)}>{i}</button>
              ))}
            </div>
            <div className="group">
              <span className="lbl">服务</span>
              {svcs.map((s) => (
                <button key={s} className={`pill${svcFilter === s ? " active" : ""}`} onClick={() => setSvcFilter(s)}>{s}</button>
              ))}
            </div>
          </div>
        </Reveal>

        <Reveal>
          <div className="works-list">
            {filtered.map((w) => (
              <div className="work-card" key={w.id} onClick={() => setOpenId(w.id)}>
                <div className="indus">
                  <span className="dot" />
                  <span>{w.industry}</span>
                  <span className="svc-tag">/ {w.svc}</span>
                </div>
                <div className="who">{w.who}</div>
                <div className="problem">{w.problem}</div>
                <div className="results">
                  {w.results.map((r, i) => (
                    <div className="r" key={i}>
                      <div className="v">{r.v}<span className="u">{r.unit}</span></div>
                      <div className="l">{r.l}</div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>

      <div className={`work-overlay${opened ? " show" : ""}`} onClick={() => setOpenId(null)}>
        <div className="panel" onClick={(e) => e.stopPropagation()}>
          <button className="close" onClick={() => setOpenId(null)}>✕</button>
          {opened && (
            <div style={{ clear: "both" }}>
              <div className="hero-meta">
                <span className="ind">● {opened.industry}</span>
                <span>/ {opened.svc}</span>
              </div>
              <h3>{opened.who}</h3>
              <p style={{ fontSize: 15, color: "var(--mute)", lineHeight: 1.7, marginBottom: 28 }}>{opened.problem}</p>

              <div className="res-strip">
                {opened.results.map((r, i) => (
                  <div className="r" key={i}>
                    <div className="v">{r.v}<span className="u">{r.unit}</span></div>
                    <div className="l">{r.l}</div>
                  </div>
                ))}
              </div>

              <div className="sec-block">
                <div className="lbl">§ 1 · 最初的问题</div>
                <p>{opened.detail.original}</p>
              </div>

              <div className="sec-block">
                <div className="lbl">§ 2 · 我看到的真正问题</div>
                <p>{opened.detail.seen}</p>
              </div>

              <div className="sec-block">
                <div className="lbl">§ 3 · 解决方案的设计</div>
                <p>{opened.detail.approach}</p>
                <p style={{ marginTop: 14 }}><strong style={{ fontFamily: "var(--serif)", color: "var(--ink)" }}>关键决策：</strong></p>
                <ul style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.85, paddingLeft: 22 }}>
                  {opened.detail.keyMoves.map((m, i) => <li key={i}>{m}</li>)}
                </ul>
              </div>

              <div className="sec-block">
                <div className="lbl">§ 4 · 结果</div>
                <p>{opened.detail.result}</p>
              </div>

              <div className="sec-block">
                <div className="lbl">§ 5 · 反思</div>
                <ul style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.85, paddingLeft: 22 }}>
                  {opened.detail.lessons.map((m, i) => <li key={i}>{m}</li>)}
                </ul>
              </div>

              <div className="sec-block">
                <div className="lbl">§ 6 · 给你的启发</div>
                <div className="pull">{opened.detail.forYou}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

window.Works = Works;