// Services page
function ServicesPage({ onQuote }) {
  const groups = [
    {
      name: 'Build',
      intro: 'We ship the product. Web, MVPs, whatever needs to exist by a date.',
      color: 'teal',
      items: [
        { t: 'Custom web applications', d: 'From internal dashboards to consumer products. Modern stacks (Next.js, Django, Rails) chosen to fit the problem, not the trend.', len: '6–16 weeks', hook: 'Let\'s talk scope' },
        { t: 'MVP sprints',              d: 'A focused 2–6 week push with a small team. You end the sprint with a working product, not a pitch deck.', len: '2–6 weeks', hook: 'See what\'s possible' },
      ],
    },
    {
      name: 'Intelligence',
      intro: 'The AI work we do for clients — and the advice for teams figuring out where AI fits.',
      color: 'yellow',
      items: [
        { t: 'AI agents & automations', d: 'LLM-powered internal tools, retrieval systems (RAG), copilots inside existing products. We build things that actually get used, not demos.', len: '3–10 weeks', hook: 'Show me what\'s possible' },
        { t: 'AI strategy consulting',  d: 'A short pair-up to find the AI initiatives worth doing in your business — and quietly kill the ones that aren\'t.', len: '2–4 weeks', hook: 'Start the conversation' },
      ],
    },
    {
      name: 'Platform',
      intro: 'The less-glamorous work that keeps software actually running.',
      color: 'red',
      items: [
        { t: 'Cloud & DevOps',    d: 'AWS, GCP, Azure. CI/CD pipelines, observability, cost audits, migrations. The goal: infra your team could hand to anyone.', len: '2–6 weeks', hook: 'Audit my setup' },
        { t: 'QA & test automation', d: 'Playwright, Cypress, Pytest. We set up the harness and leave your team a test culture that outlives the engagement.', len: '2–4 weeks', hook: 'Stop the regressions' },
      ],
    },
    {
      name: 'Craft',
      intro: 'Design and the operational work that makes products feel considered.',
      color: 'teal',
      items: [
        { t: 'UI/UX design',     d: 'Product design, design systems, and front-end implementation. Usually paired with a build engagement — standalone available.', len: '2–8 weeks', hook: 'Share my Figma' },
        { t: 'Data operations',  d: 'Structured data entry, cleanup, migration, and QA for datasets that need human judgment AI can\'t quite close.', len: 'flexible',  hook: 'Describe the dataset' },
      ],
    },
  ];

  return (
    <main className="services-page">
      <section className="page-hero">
        <Reveal>
          <p className="eyebrow">Services</p>
          <h1>What we do — grouped the way we actually work.</h1>
          <p className="page-lead">Eight capabilities across four teams. One team owns your engagement end-to-end — no hand-offs, no project managers in the middle.</p>
        </Reveal>
      </section>

      <section className="service-groups">
        {groups.map((g, i) => (
          <Reveal key={g.name} delay={i * 60}>
            <div className={`svc-group svc-${g.color}`}>
              <div className="svc-group-head">
                <span className="svc-group-tag mono">0{i + 1} &middot; TEAM</span>
                <h2>{g.name}</h2>
                <p>{g.intro}</p>
              </div>
              <div className="svc-items">
                {g.items.map(it => (
                  <article className="svc-item" key={it.t}>
                    <div className="svc-item-head">
                      <h3>{it.t}</h3>
                      <button className="svc-chip svc-chip-cta mono" onClick={onQuote}>{it.hook} &rarr;</button>
                    </div>
                    <p>{it.d}</p>
                    <span className="svc-len mono">Typical engagement &middot; {it.len}</span>
                  </article>
                ))}
              </div>
            </div>
          </Reveal>
        ))}
      </section>

      <Reveal>
        <section className="svc-closing">
          <h2>Curious what yours might look like?</h2>
          <p>Every project is different — every quote is too. Tell us the problem and we'll send back something specific, not a price sheet.</p>
          <button className="btn btn-primary btn-lg" onClick={onQuote}>Start the conversation</button>
        </section>
      </Reveal>
    </main>
  );
}

Object.assign(window, { ServicesPage });