// Projects list page
const { useState: useStateP } = React;

const FILTERS = ["全部", "AI 产品", "用户调研", "AIGC 创作"];

function Filter({ label, active, onClick }) {
  const [hover, setHover] = useStateP(false);
  return (
    <button onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        padding: "9px 16px", borderRadius: 100, fontSize: 13.5, fontWeight: 600, letterSpacing: "-0.01em",
        border: "1px solid " + (active ? "transparent" : "var(--line)"),
        background: active ? "#fff" : hover ? "rgba(255,255,255,0.06)" : "transparent",
        color: active ? "#0a0a0b" : "var(--muted)", transition: "all .2s",
      }}>{label}</button>
  );
}

function Projects() {
  const [filter, setFilter] = useStateP("全部");
  const [voxOpen, setVoxOpen] = useStateP(false);
  const toggleVox = () => setVoxOpen((o) => !o);
  const list = filter === "全部" ? PROJECTS : PROJECTS.filter((p) => (p.cat || p.tags).some((t) => t.toLowerCase().includes(filter.toLowerCase())));
  function renderCard(p, i) {
    if (p.id === 1) return <ProjectCard key={p.id} p={p} idx={i} actions={<window.SignalActions />} />;
    if (p.id === 2) return (
      <div key={p.id} style={{ display: "flex", flexDirection: "column" }}>
        <ProjectCard p={p} idx={i} actions={<window.VoxActions open={voxOpen} onToggle={toggleVox} />} />
        {window.VoxLensShowcase && <window.VoxLensShowcase open={voxOpen} onToggle={toggleVox} />}
      </div>);
    if (p.id === 3) return <ProjectCard key={p.id} p={p} idx={i} actions={<React.Fragment />} />;
    return <ProjectCard key={p.id} p={p} idx={i} />;
  }
  return (
    <div>
      <section style={{ paddingTop: 64 }}>
        <Reveal delay={80}>
          <h1 className="display" style={{ fontSize: "clamp(40px,5.4vw,72px)", marginTop: 24 }}>项目</h1>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ marginTop: 22, maxWidth: 560, fontSize: 16, lineHeight: 1.85, color: "var(--muted)" }}>
            围绕 AI 产品、用户调研与 AIGC 创作的 0→1 实践。每个案例都讲述问题、过程与可衡量的成果。
          </p>
        </Reveal>
        <Reveal delay={200}>
          <div style={{ display: "flex", gap: 10, marginTop: 34, flexWrap: "wrap" }}>
            {FILTERS.map((f) => <Filter key={f} label={f} active={filter === f} onClick={() => setFilter(f)} />)}
          </div>
        </Reveal>
      </section>

      <section style={{ paddingTop: 64, display: "flex", flexDirection: "column", gap: "clamp(76px,9vw,124px)" }}>
        {list.length ? list.map((p, i) => renderCard(p, i))
          : <div style={{ padding: "60px 0", color: "var(--muted)", fontFamily: "var(--font-mono)", fontSize: 13 }}>该分类下暂无项目。</div>}
      </section>

      <CTA />
    </div>
  );
}

Object.assign(window, { Projects });