const Projects = () => {
  const [filter, setFilter] = React.useState("all");
  const items = filter === "all" ? window.PROJECTS : window.PROJECTS.filter(p => p.area === filter);
  const AREA_LABEL = { ai: "AI · ML", ds: "Data Science", bc: "Blockchain", cl: "Cloud" };

  // Filter changes replace DOM nodes; App.jsx's IntersectionObserver only sees
  // the initial set, so new `.project.reveal` cards would stay at opacity 0.
  // Skip the first mount (keep scroll-in animation on first view) and thereafter
  // reveal cards immediately after filter switch.
  const mounted = React.useRef(false);
  React.useEffect(() => {
    if (!mounted.current) { mounted.current = true; return; }
    document.querySelectorAll("#projects .project.reveal").forEach(el => el.classList.add("in"));
  }, [filter]);

  return (
    <section className="section" id="projects">
      <div className="section-head">
        <span className="section-eyebrow">Expeditions · /projects</span>
        <Cli path="projects" cmd="ps -ef" flags=" --status=active --grep=partner"/>
        <h2 className="section-title">Active <em style={{fontStyle:"italic",color:"var(--mint-deep)"}}>projects</em></h2>
        <p className="section-sub">Ongoing expeditions — each with partners, timelines, and a growing map of results.</p>
      </div>
      <div className="paper-filter" style={{marginBottom:24}}>
        <button className={filter==="all"?"active":""} onClick={()=>setFilter("all")}>All</button>
        {["ai","ds","bc","cl"].map(a => (
          <button key={a} className={filter===a?"active":""} onClick={()=>setFilter(a)}>{AREA_LABEL[a]}</button>
        ))}
      </div>
      <div className="projects">
        {items.map((p, i) => (
          <article key={p.title} className="project reveal" data-area={p.area}>
            <div className="project-head">
              <div>
                <div className="project-eyebrow">{p.tag}</div>
                <h4>{p.title}</h4>
              </div>
              <span className="project-status" data-status={p.status}>{p.status}</span>
            </div>
            <p className="project-desc">{p.desc}</p>
            {p.collab && <div className="project-collab">Partners · <b>{p.collab}</b></div>}
            <div className="project-progress">
              <span>{p.progress}%</span>
              <div className="bar"><span style={{width: p.progress + "%"}}/></div>
            </div>
            <div className="project-span">{p.span}</div>
          </article>
        ))}
      </div>
    </section>
  );
};
window.Projects = Projects;