const { useState, useEffect } = React;

function WorkHero() {
  return (
    <section className="page-header">
      <div className="page-header-bg"></div>
      <div className="container">
        <div className="crumb reveal">
          <a href="index.html">Home</a> / Work
        </div>
        <h1 className="reveal d1 split-words">
          Case studies, <span className="acc">results</span>, and <span style={{ color: '#212121' }}>projects</span>.
        </h1>
        <p className="reveal d2">A collection of projects built around a business problem or goals, with the process, decisions, and outcomes behind each one.

        </p>
      </div>
    </section>);

}

function FullWork() {
  const projects = window.PROJECTS;
  const caseStudyProjects = projects.filter((p) => p.caseStudy);
  const cats = ["All", "Case Studies", ...Array.from(new Set(projects.map((p) => p.cat)))];
  const [filter, setFilter] = useState("All");

  let filtered;
  if (filter === "All") {
    filtered = projects;
  } else if (filter === "Case Studies") {
    filtered = caseStudyProjects;
  } else {
    filtered = projects.filter((p) => p.cat === filter);
  }

  return (
    <section className="section" style={{ paddingTop: 40 }}>
      <div className="container">
        <div className="work-filter reveal">
          {cats.map((c) =>
          <button
            key={c}
            className={`chip violet ${filter === c ? "active" : ""}`}
            onClick={() => setFilter(c)}>
            
              {c}
              <span className="count">
                {c === "All" ? projects.length : c === "Case Studies" ? caseStudyProjects.length : projects.filter((p) => p.cat === c).length}
              </span>
            </button>
          )}
        </div>

        <div className="work-grid reveal d1">
          {filtered.map((p) => <WorkCard key={p.id} p={p} />)}
        </div>
      </div>
    </section>);

}

function WorkCTA() {
  return (
    <section className="section" style={{ paddingTop: 20, paddingBottom: 100 }}>
      <div className="container" style={{ textAlign: "center" }}>
        <div className="reveal" style={{ maxWidth: 640, margin: "0 auto" }}>
          <h2 style={{ fontSize: "clamp(36px, 5vw, 64px)", fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1, marginBottom: 18 }}>
            Want the <span className="gradient-text">deep version?</span>
          </h2>
          <p style={{ fontSize: 17, color: "var(--muted)", maxWidth: "44ch", margin: "0 auto 28px", lineHeight: 1.55 }}>Each project came with its own context, constraints, choices, and lessons. I can walk you through the full story.

          </p>
          <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <a href="index.html#contact" className="btn btn-primary">Get in touch <ArrowR /></a>
          </div>
        </div>
      </div>
    </section>);

}

function App() {
  useReveal();
  useScrollWordReveal();
  return (
    <>
      <Nav active="work" />
      <WorkHero />
      <FullWork />
      <WorkCTA />
      <Footer />
    </>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);