// Work page: renders all nine case studies using the shared WorkCase component from sections-a.jsx.

function WorkPage() {
  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add("in"); });
    }, { threshold: 0, rootMargin: "0px 0px -12% 0px" });
    document.querySelectorAll(".reveal").forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Nav/>
      <section className="work-hero reveal" aria-label="Work">
        <div className="wrap">
          <h1 className="work-hero-title">We've been busy helping businesses and founders get leaner and grow more.</h1>
          <p className="work-hero-lede">Every build below is real, deployed, and running under human sign-off. Problem, architecture, outcome. Click any agent chip to see what it does.</p>
        </div>
      </section>

      <section className="section section-tinted" aria-label="Case studies">
        <div className="wrap">
          <div className="work-cases">
            {WORK_CASES.map(c => <WorkCase key={c.name} {...c} />)}
          </div>
        </div>
      </section>

      <FinalCTA/>
      <Footer/>
    </>
  );
}

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