// services.jsx — services + process + cases

const SERVICES = [
  {
    num: "01",
    title: "Custom Automation Builds",
    sub: "End-to-end systems wired into your stack",
    desc: "We design and ship custom automation that lives inside the tools your team already uses — Linear, Notion, Slack, Gmail, your codebase. Not chatbots. Operational systems that take action, ask when uncertain, and finish the work.",
    examples: [
      "Code review systems reading your repo conventions",
      "Internal tools matched to your team's workflow",
      "On-call diagnostics with runbook awareness",
    ],
    timeline: "2–4 weeks",
  },
  {
    num: "02",
    title: "Backend Automations",
    sub: "Quiet workhorses, no UI required",
    desc: "Long-running pipelines that move data between systems, enforce rules, and surface only what needs human eyes. We use AI where reasoning matters and plain code where it doesn't.",
    examples: [
      "Invoice ingestion → routing → flagging anomalies",
      "Lead qualification and CRM enrichment",
      "Document parsing pipelines (contracts, receipts, RFPs)",
    ],
    timeline: "3–5 weeks",
  },
  {
    num: "03",
    title: "Reporting Automations",
    sub: "Recurring intelligence, on time",
    desc: "Replace the weekly analyst-hours spent assembling decks, dashboards, and digests. We read your data sources, draft the narrative, and the report shows up where you want it — Slack, email, Notion — already written.",
    examples: [
      "Monday-morning digests for leadership",
      "Customer-health weekly with drafted intro",
      "Board-ready monthly metrics with commentary",
    ],
    timeline: "2–3 weeks",
  },
  {
    num: "04",
    title: "Long-term Advanced Builds",
    sub: "Embedded for the hard problems",
    desc: "Multi-quarter retainers where we sit in your slack, evolve your automation infrastructure, and tackle the projects that matter to your business. Think of us as the senior engineer you can't justify hiring full-time.",
    examples: [
      "Internal tools that compound over months",
      "Custom automation platforms for your team",
      "Continuous evaluation and improvement loops",
    ],
    timeline: "Ongoing",
  },
];

function Services() {
  const [openIdx, setOpenIdx] = React.useState(null);

  return (
    <section className="section" id="services" data-screen-label="02 Services">
      <div className="section-body" style={{ paddingBottom: 0 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "end", marginBottom: 56 }}>
          <h2 className="h-display" style={{ fontSize: "clamp(36px, 4.8vw, 64px)" }}>
            What we <em>actually</em><br />build for growing teams.
          </h2>
          <p className="lede">
            Every engagement starts the same way: we sit with your team for a week, find the
            five workflows eating the most hours, and build the one that compounds the fastest.
            Then we keep going.
          </p>
        </div>
      </div>

      <div className="svc-acc">
        {SERVICES.map((s, i) => {
          const isOpen = openIdx === i;
          return (
            <div className={`svc-item${isOpen ? " open" : ""}`} key={s.num}>
              <button
                className="svc-head"
                onClick={() => setOpenIdx(isOpen ? null : i)}
                aria-expanded={isOpen}
                aria-controls={`svc-body-${s.num}`}
              >
                <span className="svc-num">{s.num}</span>
                <span className="svc-title">
                  {s.title}
                  <span className="svc-sub">{s.sub}</span>
                </span>
                <span className="svc-chev" aria-hidden>+</span>
              </button>
              <div className="svc-body" id={`svc-body-${s.num}`} role="region">
                <div className="svc-body-inner">
                  <p className="svc-desc">{s.desc}</p>
                  <div className="svc-examples">
                    <div className="tag">Typical scope</div>
                    <ul>
                      {s.examples.map((e, j) => <li key={j}>{e}</li>)}
                    </ul>
                  </div>
                  <div className="svc-timeline">
                    Timeline · <span>{s.timeline}</span>
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

const STEPS = [
  { n: "01", title: "Diagnose", desc: "One week embedded with your team. I map every workflow, instrument the time-sinks, and write up what's worth building, what isn't, and why. You see the list before any code is written.", meta: ["Week 1", "Low commitment"] },
  { n: "02", title: "Build", desc: "I write the code. You review a working demo every 7 days. No black boxes — every workflow, every rule, every guardrail lives in your repo from day one.", meta: ["Weeks 2–5", "Weekly demos"] },
  { n: "03", title: "Hand off", desc: "Code in your repo, automation on your infra, runbooks in your wiki. I train two of your engineers so the system is yours to evolve, not mine to hold hostage.", meta: ["Final week", "Yours forever"] },
];

function Process() {
  React.useEffect(() => {
    const steps = document.querySelectorAll(".proc-step");
    if (!steps.length) return;

    const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce || typeof IntersectionObserver === "undefined") {
      steps.forEach((el) => el.classList.add("in-view"));
      return;
    }

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("in-view");
            observer.unobserve(entry.target);
          }
        });
      },
      { threshold: 0.18, rootMargin: "0px 0px -8% 0px" }
    );

    steps.forEach((el) => observer.observe(el));
    return () => observer.disconnect();
  }, []);

  return (
    <section className="section" id="process" data-screen-label="03 Process">
      <div className="proc-intro">
        <h2 className="h-mono proc-h">
          Embed. Diagnose. Build. Leave value.
        </h2>
        <p className="lede proc-lede">
          No discovery decks. The first week is hands-on. By Friday you have a ranked
          list of automations and an honest take on which ones are worth my time and yours.
        </p>
      </div>

      <ol className="proc-timeline">
        {STEPS.map((s) => (
          <li className="proc-step" key={s.n}>
            <div className="proc-dot" aria-hidden></div>
            <div className="proc-row">
              <div className="proc-head">
                <span className="proc-n">{s.n}</span>
                <h3 className="proc-title">{s.title}</h3>
                <span className="proc-meta">{s.meta.join(" · ")}</span>
              </div>
              <p className="proc-desc">{s.desc}</p>
            </div>
          </li>
        ))}
      </ol>

      <div className="proc-footnote">
        <div className="proc-footnote-label">─── A note on what I don't do</div>
        <p>
          No "AI strategy" engagements. No 60-page audits. No platform lock-in.
          If I can't show value in week one, I'll tell you to keep your money.
        </p>
      </div>
    </section>
  );
}

const CASES = [
  {
    industry: "Legal · 38 staff",
    client: "Mercer & Vale",
    quote: "The contract review system reads our standard playbook. It catches risky clauses before a partner ever sees the document.",
    metric: { v: "14h", l: "saved per attorney / week" },
    stack: ["Custom pipeline", "DocuSign API", "Internal playbook"],
    project: "Contract review pipeline",
  },
  {
    industry: "DTC e-commerce · 22 staff",
    client: "Northwind Goods",
    quote: "Customer support went from a 9-person inbox triage to two people approving drafts. We didn't have to hire for Q4.",
    metric: { v: "62%", l: "tickets handled end-to-end" },
    stack: ["Custom pipeline", "Zendesk", "Shopify"],
    project: "Support triage automation",
  },
  {
    industry: "Healthcare SaaS · 84 staff",
    client: "Cardinal Health Tech",
    quote: "Monday morning, every leader gets a written summary of last week's customer health, churn risk, and three things to do today.",
    metric: { v: "1,200h", l: "annualized hours saved" },
    stack: ["Custom pipeline", "Snowflake", "Slack"],
    project: "Weekly leadership digest",
  },
];

function Cases() {
  return (
    <section className="section" id="cases" data-screen-label="04 Cases">
      <div className="cases">
        {CASES.map((c, i) => (
          <div className="case" key={i}>
            <div className="case-head">
              <span>// case_{String(i + 1).padStart(2, "0")}</span>
              <span>{c.industry}</span>
            </div>
            <div>
              <div className="tag" style={{ marginBottom: 8 }}>{c.project}</div>
              <div className="client">{c.client}</div>
            </div>
            <div className="quote">{c.quote}</div>
            <div className="stack">
              {c.stack.map((s, j) => <span key={j}>{s}</span>)}
            </div>
            <div className="metric">
              <div className="v">{c.metric.v}</div>
              <div className="l">{c.metric.l}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

window.Services = Services;
window.Process = Process;
window.Cases = Cases;