// Process + How we work + Who we are. Clean Institutional system.

function ProcessStep({ step }) {
  const ref = React.useRef(null);
  const [active, setActive] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => setActive(e.isIntersecting));
    }, { rootMargin: "-38% 0px -38% 0px" });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <li ref={ref} className={"process-step" + (active ? " is-active" : "")}>
      <span className="process-dot" aria-hidden="true"/>
      <span className="process-num tnum">{step.n}</span>
      <div className="process-body">
        <h3>{step.h}</h3>
        <p>{step.body}</p>
      </div>
    </li>
  );
}

function Process() {
  const steps = [
    { n: "01", h: "Diagnose", body: "A 30-minute call. You tell us the mess. We come back with what's worth building and what isn't." },
    { n: "02", h: "Scope", body: "A one-page brief. Fixed price, fixed timeline, clear deliverables. No surprises." },
    { n: "03", h: "Ship", body: "v1 in days. Hardening over weeks. Weekly demo, async Slack, shared board. You see progress every day, not every month." },
    { n: "04", h: "Partner", body: "We stick around. Live dashboards for AI cost and agent performance. Request new work async. All visible, all the time." },
  ];
  return (
    <section id="process" className="section reveal" aria-label="Process">
      <div className="wrap">
        <div className="section-head">
          <h2>From &ldquo;we should probably do something with AI&rdquo; to shipped, in four steps.</h2>
        </div>
        <ol className="process">
          {steps.map((s) => (
            <ProcessStep key={s.n} step={s}/>
          ))}
        </ol>
      </div>
    </section>
  );
}

function HowWeWork() {
  const cards = [
    {
      kind: "project",
      label: "Project",
      title: "A defined build.",
      subtitle: "Shipped in weeks.",
      ticks: ["W1", "W2", "W3", "W4"],
      ongoing: false,
      meta: ["2-4 weeks", "Fixed price"],
      body: "One problem, one quote, one working system. If it can be built with agents, we've probably built something close. Have a chat - we'll tell you honestly whether it's a fit and what it'll cost.",
    },
    {
      kind: "retainer",
      label: "Retainer",
      title: "Your AI team.",
      subtitle: "On subscription.",
      ticks: ["M1", "M2", "M3", "M4"],
      ongoing: true,
      meta: ["Month-to-month", "Cancel anytime"],
      body: "We embed. Weekly call, continuous delivery, a shared board where your team drops in new requests, and a live dashboard of what's running and what it's costing. Cancel any time - if we're not earning it in month two, you should fire us.",
    },
  ];
  return (
    <section id="how-we-work" className="section section-tinted reveal" aria-label="How we work">
      <div className="wrap">
        <div className="section-head">
          <h2>How we work.</h2>
          <p className="lede">Two ways in. Pick the one that fits where you are. Priced up front, AI costs passed through at cost, live dashboards throughout.</p>
        </div>
        <div className="hw-grid">
          {cards.map((c) => (
            <article key={c.kind} className={"hw-card hw-card-" + c.kind}>
              <div className="hw-head">
                <span className="eyebrow">{c.label}</span>
                <div className="hw-meta">
                  {c.meta.map((m, i) => (
                    <React.Fragment key={i}>
                      {i > 0 && <span className="dot" aria-hidden="true"/>}
                      <span>{m}</span>
                    </React.Fragment>
                  ))}
                </div>
              </div>
              <h3 className="hw-title">
                {c.title}<br/><span className="hw-subtitle">{c.subtitle}</span>
              </h3>
              <div className="hw-timeline">
                <div className="hw-bar">
                  <span className={"hw-fill" + (c.ongoing ? " hw-fill-ongoing" : "")}/>
                </div>
                <div className="hw-ticks">
                  {c.ticks.map((t) => <span key={t}>{t}</span>)}
                  {c.ongoing && <span className="hw-tick-more">&rarr;</span>}
                </div>
              </div>
              <p>{c.body}</p>
              <a href="https://calendar.app.google/pr4sprutBxycHg9d7" target="_blank" rel="noopener" className="link-draw">
                <span>Have a chat</span>
                <Arrow/>
              </a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function WhoWeAre() {
  return (
    <section id="who" className="section section-who reveal" aria-label="Who we are">
      <div className="wrap who-inner">
        <div className="who-copy">
          <span className="eyebrow">Who we are</span>
          <h2>A team that's shipped AI for a living.</h2>
          <p className="lede">
            Our team consists of AI builders who&rsquo;ve shipped production systems inside multinational corporates and led AI at funded startups as fractional Chief AI Officer, Head of AI and interim CTO - alongside a decade of founding, fundraising and venture capital sitting behind every build.
          </p>
          <a href="/who" className="btn btn-primary">Meet the team <Arrow/></a>
        </div>
        <div className="who-initials" aria-hidden="true">
          <div className="who-initial"><span>AI</span><span className="who-initial-label">Builders</span></div>
          <div className="who-initial"><span>OPS</span><span className="who-initial-label">Operators</span></div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Process, HowWeWork, WhoWeAre });