// Services — five expandable rows covering everything we do.

window.AtServices = () => {
  const [open, setOpen] = React.useState(0);

  const services = [
    {
      num: '01',
      kicker: 'What we do most',
      title: 'Websites',
      desc: 'Custom-built sites for shops, studios, and services. Designed so people actually want to click around.',
      bullets: [
        'Marketing sites and brochure sites',
        'E-commerce and booking flows',
        'Internal tools and dashboards',
        'CMS so your team can update things',
        'Lightning-fast, on good hosting',
      ],
      meta: ['3–7 days typical', 'from $500', 'Next.js · Astro · WP'],
    },
    {
      num: '02',
      kicker: 'Stop doing the busywork',
      title: 'Automation',
      desc: 'If your team does it manually more than once a week, we can probably automate it. Invoices, onboarding, scheduling, reports, handoffs.',
      bullets: [
        'Workflow bots (n8n, Zapier, custom)',
        'CRM syncs and lead routing',
        'Scheduled reports and alerts',
        'Document processing pipelines',
        'Custom scripts for the weird stuff',
      ],
      meta: ['2–5 days typical', 'from $500', 'Node · Python · n8n'],
    },
    {
      num: '03',
      kicker: 'Thoughtful, applied AI',
      title: 'AI systems',
      desc: 'Claude and GPT plugged into the places they actually help — not AI for the sake of it. Internal copilots, smart search, summarizers, data extractors.',
      bullets: [
        'Chatbots with access to your docs',
        'Document & email triage',
        'Retrieval-augmented search (RAG)',
        'Fine-tuned prompts and guardrails',
        'Cost and quality monitoring',
      ],
      meta: ['3–7 days typical', 'from $500', 'Claude · OpenAI · LangChain'],
    },
    {
      num: '04',
      kicker: 'Native feel, in your pocket',
      title: 'Mobile apps',
      desc: 'Cross-platform apps that don\'t feel like websites in a shell. Real interactions, offline modes, push, the lot.',
      bullets: [
        'iOS + Android from one codebase',
        'Push notifications & deep links',
        'Offline-first data sync',
        'App Store & Play Store submission',
        'Over-the-air updates',
      ],
      meta: ['2–4 weeks typical', 'from $3,000', 'React Native · Expo'],
    },
    {
      num: '05',
      kicker: 'Out of the basement, into the cloud',
      title: 'Cloud infrastructure',
      desc: 'Move off the aging server under the desk. We audit, plan, migrate, and tune — without breaking what works.',
      bullets: [
        'Data audits and migration plans',
        'AWS · GCP · Azure · DigitalOcean',
        'Database moves and backups',
        'Cost optimization post-migration',
        'Documented handoff to your team',
      ],
      meta: ['3–7 days typical', 'from $500', 'AWS · GCP · Azure'],
    },
  ];

  return (
    <section id="services" style={{
      background: TC.bone,
      padding: '140px 40px 120px',
      borderTop: `1px solid ${TC.line}`,
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'end', marginBottom: 72 }}>
          <div>
            <Eyebrow>§ 01 — What we do</Eyebrow>
            <h2 style={{
              fontFamily: TC.serif, fontSize: 'clamp(48px, 6.2vw, 92px)',
              lineHeight: 0.96, letterSpacing: -2.2, fontWeight: 400,
              margin: '24px 0 0', color: TC.ink,
            }}>
              Five disciplines,<br />
              done <em style={{ color: TC.terraDeep }}>deeply.</em>
            </h2>
          </div>
          <p style={{
            fontSize: 18, lineHeight: 1.6, color: TC.inkSoft,
            maxWidth: 440, justifySelf: 'end', margin: 0,
          }}>
            We stay small on purpose. It means we can only do a few things,
            but the few things we do — we do really well. Click any row below to expand.
          </p>
        </div>

        <div style={{ borderTop: `1px solid ${TC.line}` }}>
          {services.map((s, i) => {
            const isOpen = open === i;
            return (
              <div key={s.num} style={{ borderBottom: `1px solid ${TC.line}` }}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{
                    width: '100%', background: 'transparent', border: 'none',
                    padding: '36px 0', cursor: 'pointer', textAlign: 'left',
                    display: 'grid', gridTemplateColumns: '80px 1fr auto', gap: 32,
                    alignItems: 'center', fontFamily: 'inherit', color: 'inherit',
                  }}
                  className="at-service-row"
                >
                  <span style={{ fontFamily: TC.mono, fontSize: 13, color: TC.mute }}>{s.num}</span>
                  <span style={{
                    fontFamily: TC.serif, fontSize: 'clamp(44px, 5.4vw, 76px)',
                    letterSpacing: -2, lineHeight: 1,
                    color: isOpen ? TC.terraDeep : TC.ink,
                    fontStyle: isOpen ? 'italic' : 'normal',
                    transition: 'color .3s, font-style .3s',
                  }}>
                    {s.title}
                  </span>
                  <span style={{
                    width: 46, height: 46, borderRadius: 23,
                    border: `1px solid ${TC.line}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    background: isOpen ? TC.ink : 'transparent',
                    color: isOpen ? TC.bone : TC.ink,
                    transition: 'all .3s ease',
                  }}>
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4">
                      <line x1="3" y1="8" x2="13" y2="8" />
                      <line x1="8" y1="3" x2="8" y2="13" style={{
                        transform: isOpen ? 'scaleY(0)' : 'scaleY(1)',
                        transformOrigin: 'center', transition: 'transform .25s ease',
                      }} />
                    </svg>
                  </span>
                </button>

                <div style={{
                  maxHeight: isOpen ? 520 : 0,
                  opacity: isOpen ? 1 : 0,
                  overflow: 'hidden',
                  transition: 'max-height .45s cubic-bezier(.2,.7,.3,1), opacity .3s ease',
                }}>
                  <div style={{
                    display: 'grid', gridTemplateColumns: '80px 1.3fr 1fr',
                    gap: 32, paddingBottom: 40, paddingTop: 4,
                  }}>
                    <div style={{ fontFamily: TC.mono, fontSize: 10, color: TC.terra,
                      letterSpacing: 2, textTransform: 'uppercase' }}>
                      {s.kicker}
                    </div>
                    <div>
                      <p style={{ fontSize: 19, lineHeight: 1.55, color: TC.inkSoft, margin: '0 0 24px', maxWidth: 520 }}>
                        {s.desc}
                      </p>
                      <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
                        {s.bullets.map((b, j) => (
                          <li key={j} style={{
                            display: 'flex', alignItems: 'baseline', gap: 12,
                            padding: '8px 0', fontSize: 15, color: TC.ink,
                            borderBottom: j === s.bullets.length - 1 ? 'none' : `1px dashed ${TC.lineSoft}`,
                          }}>
                            <span style={{ color: TC.terra, fontFamily: TC.mono, fontSize: 11 }}>→</span>
                            {b}
                          </li>
                        ))}
                      </ul>
                    </div>
                    <div style={{ paddingLeft: 24, borderLeft: `1px solid ${TC.lineSoft}` }}>
                      {s.meta.map((m, j) => (
                        <div key={j} style={{
                          fontFamily: TC.mono, fontSize: 12, color: TC.mute,
                          padding: '6px 0', letterSpacing: 0.5,
                        }}>
                          {m}
                        </div>
                      ))}
                      <a href="#contact" className="at-arrow" style={{ marginTop: 20, fontSize: 14 }}>
                        Discuss a {s.title.toLowerCase()} project
                        <svg width="11" height="11" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.8">
                          <path d="M3 9L9 3M9 3H4M9 3V8" strokeLinecap="round" />
                        </svg>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
      <style>{`
        .at-service-row:hover span:nth-child(2) { color: ${TC.terraDeep}; }
      `}</style>
    </section>
  );
};