// PROCESS — The 3-week ship. Editorial timeline showing how a project unfolds.

const WEEKS = [
  {
    n: "WEEK 01",
    title: "Discovery, ranked.",
    body: "We sit with your team for two days, then a third with the data. By Friday you have a ranked agent roadmap with cost, effort, and risk per agent. You decide what ships first — we already know what we'd ship.",
    items: [
      "Process audit + recordings review",
      "Salesforce org & data assessment",
      "Ranked agent map with estimates",
      "Go/no-go on agent #1",
    ],
  },
  {
    n: "WEEK 02",
    title: "Building, narrowly.",
    body: "One agent, end to end. Topics, actions, prompts, voice (if it's a voice one), test cases, runbook. You watch it work in your sandbox by Wednesday. We polish through Friday with your team next to us.",
    items: [
      "Agent topics + tools + guardrails",
      "Voice + telephony if applicable",
      "Salesforce integration & writes",
      "Eval set + drift detection wired",
    ],
  },
  {
    n: "WEEK 03",
    title: "Shipping, soberly.",
    body: "Pilot in production with a tight blast radius — one team, one customer segment, one outcome metric. We sit on the calls, the dashboards, and your team's Slack. End of week three: you decide to scale, pause, or pivot. We don't decide for you.",
    items: [
      "Production pilot with kill-switch",
      "Live observability dashboard",
      "Daily standups + transcript review",
      "Decision: scale / pause / pivot",
    ],
  },
];

function Process() {
  const colors = [
    { bg: "var(--paper)", fg: "var(--ink)", num: "var(--ink-mute)", chip: "var(--persimmon)" },
    { bg: "var(--persimmon)", fg: "var(--ink)", num: "var(--ink)", chip: "var(--ink)" },
    { bg: "var(--cobalt)", fg: "var(--bone)", num: "var(--bone)", chip: "var(--yellow)" },
  ];
  return (
    <section className="section" id="process">
      <div className="shell">
        <SectionHead
          num="§ 06"
          label="HOW WE WORK"
          title="Three weeks. One agent. Then the next."
          kicker="The big consultancies sell a six-month roadmap and ship a slide deck. We sell three weeks and ship a working agent. Then we do it again."
        />

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 0,
          border: "1px solid var(--ink)",
        }} className="process-grid">
          {WEEKS.map((w, i) => {
            const c = colors[i];
            const isLight = c.fg === "var(--ink)";
            return (
              <article key={w.n} style={{
                background: c.bg,
                color: c.fg,
                padding: "40px 32px",
                display: "flex",
                flexDirection: "column",
                gap: 20,
                minHeight: 500,
                position: "relative",
                borderRight: i < 2 ? "1px solid var(--ink)" : "none",
              }}>
                <header style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                  <span className="mono" style={{ fontSize: 12, color: c.num, opacity: 0.7, letterSpacing: "0.12em" }}>
                    {w.n}
                  </span>
                  <span style={{
                    width: 44,
                    height: 44,
                    background: c.chip,
                    color: isLight ? "var(--bone)" : "var(--ink)",
                    display: "grid",
                    placeItems: "center",
                    fontFamily: "var(--font-display)",
                    fontWeight: 800,
                    fontSize: 22,
                  }}>
                    {String(i + 1).padStart(2, "0")}
                  </span>
                </header>

                <h3 className="serif" style={{ margin: 0, fontSize: "clamp(28px, 2.8vw, 40px)", lineHeight: 1.02, letterSpacing: "-0.025em", textWrap: "balance", color: c.fg }}>
                  {w.title}
                </h3>

                <p style={{ margin: 0, fontSize: 15, lineHeight: 1.5, color: c.fg, opacity: 0.85 }}>{w.body}</p>

                <ul style={{ marginTop: "auto", padding: 0, listStyle: "none", display: "grid", gap: 10, borderTop: `1px solid ${isLight ? "var(--rule-strong)" : "color-mix(in oklab, var(--bone) 25%, transparent)"}`, paddingTop: 20 }}>
                  {w.items.map(it => (
                    <li key={it} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 13, lineHeight: 1.4 }}>
                      <span style={{
                        flexShrink: 0,
                        width: 6,
                        height: 6,
                        background: c.chip,
                        marginTop: 7,
                      }}></span>
                      <span style={{ color: c.fg, opacity: 0.95 }}>{it}</span>
                    </li>
                  ))}
                </ul>
              </article>
            );
          })}
        </div>

        <div style={{
          marginTop: 56,
          display: "grid",
          gridTemplateColumns: "1.6fr 1fr",
          gap: 48,
          alignItems: "center",
        }} className="process-foot">
          <p className="serif" style={{
            margin: 0,
            fontSize: "clamp(24px, 2.6vw, 34px)",
            lineHeight: 1.2,
            letterSpacing: "-0.01em",
            maxWidth: "40ch",
            color: "var(--ink-2)",
            textWrap: "balance",
          }}>
            And then we do it again, every three weeks, until your team is doing it themselves. <span className="italic" style={{ color: "var(--ink-mute)" }}>That's the goal — to be unneeded, eventually.</span>
          </p>
          <a href="about.html" className="btn btn-ghost" style={{ justifySelf: "end" }}>
            Read our principles <span className="arr">→</span>
          </a>
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .process-grid { grid-template-columns: 1fr !important; }
          .process-foot { grid-template-columns: 1fr !important; gap: 24px !important; }
          .process-foot a { justify-self: start !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Process });