/* global React */
const SERVICES = [
  {
    n: "01",
    eyebrow: "Look",
    title: "Find where AI is worth the trouble",
    body:
      "Two weeks. We sit with your team, look at the work, and come back with three to five places AI will pay for itself — and the ones it won't.",
    bullets: ["Walk-throughs with your team", "Honest cost-benefit per idea", "A shortlist you can actually do"],
  },
  {
    n: "02",
    eyebrow: "Build",
    title: "Ship it into the tools you already use",
    body:
      "We build inside the systems your team works in every day — your CRM, your email, your shared drive. Not a separate app nobody opens.",
    bullets: ["Inside your existing stack", "Trained on your real documents", "Handover in plain language"],
  },
  {
    n: "03",
    eyebrow: "Keep",
    title: "Hand the keys back",
    body:
      "When we leave, you own everything — the code, the prompts, the playbook. We're a few weeks of senior help, not a long-term dependency.",
    bullets: ["You own the code", "Written runbook for your team", "Two follow-up check-ins included"],
  },
];

window.ServicesGrid = function ServicesGrid() {
  return (
    <section className="services" id="services">
      <div className="section-inner">
        <header className="section-head">
          <EyebrowRow kicker="§ 01 — Services" />
          <h2>Three things, done thoroughly.</h2>
          <p className="lead">
            No staff pyramids. No deck-only deliverables. Every engagement is led
            by the partner who scoped it.
          </p>
        </header>
        <div className="services-grid">
          {SERVICES.map((s) => (
            <article key={s.n} className="service-card">
              <Hairline w={28} />
              <span className="service-n">{s.n}</span>
              <Eyebrow>{s.eyebrow}</Eyebrow>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
              <ul className="service-bullets">
                {s.bullets.map((b) => (
                  <li key={b}>{b}</li>
                ))}
              </ul>
              <TextLink href="#">Learn more</TextLink>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};