/** CRAiD UI kit — Services / Growth value drivers */
function Services() {
  const services = [
    { n: '01', title: 'Agentic Strategy', body: 'We assess your organization, map the agentic opportunity, and build the roadmap that gets you there without the hype.', tags: ['Assessment', 'Roadmap', 'Coaching'] },
    { n: '02', title: 'Agentic Products', body: 'We design, prototype, and ship agent-native products — from first concept to live revenue — with our humans + AI team.', tags: ['Design', 'Prototyping', 'Build'] },
    { n: '03', title: 'Agentic Operations', body: 'We rebuild your teams and workflows around agents. Faster cycles, shared memory, measurable outcomes.', tags: ['Ops', 'Workflow', 'Enablement'] },
  ];

  return (
    <section style={svcStyles.section}>
      <div style={svcStyles.wash} />
      <div style={svcStyles.inner}>
        <span className="overline" style={{ display: 'block', marginBottom: 24 }}>02 — Services</span>
        <h2 style={svcStyles.h2}>Three ways to put agents to work.</h2>

        <div style={svcStyles.list}>
          {services.map((s) => (
            <article key={s.n} style={svcStyles.row}>
              <div style={svcStyles.num}>{s.n}</div>
              <div style={svcStyles.body}>
                <h3 style={svcStyles.rowTitle}>{s.title}</h3>
                <p style={svcStyles.rowBody}>{s.body}</p>
                <div style={svcStyles.tagRow}>
                  {s.tags.map((t) => <span key={t} style={svcStyles.tag}>{t}</span>)}
                </div>
              </div>
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--fg-subtle)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={svcStyles.arrow}>
                <path d="M5 12h14M13 5l7 7-7 7" />
              </svg>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

const svcStyles = {
  section: { position: 'relative', padding: '128px 48px', background: 'var(--craid-lavender-soft)', overflow: 'hidden' },
  wash: { position: 'absolute', inset: 0, background: 'var(--grad-services-wash)', pointerEvents: 'none' },
  inner: { position: 'relative', maxWidth: 1200, margin: '0 auto' },
  h2: { fontSize: 'clamp(2.5rem, 4vw, 3.5rem)', fontWeight: 700, lineHeight: 1.1, margin: '0 0 64px', maxWidth: 800 },
  list: { display: 'flex', flexDirection: 'column', gap: 4 },
  row: {
    display: 'grid', gridTemplateColumns: '88px 1fr 40px',
    alignItems: 'flex-start', gap: 32,
    padding: '36px 0',
    borderTop: '1px solid var(--border)',
    cursor: 'pointer',
    transition: 'background 300ms var(--ease-out)',
  },
  num: { fontSize: 13, fontWeight: 400, color: 'var(--primary)', letterSpacing: '0.1em', paddingTop: 6 },
  body: { maxWidth: 720 },
  rowTitle: { margin: '0 0 14px', fontSize: 32, fontWeight: 600, color: 'var(--fg)', letterSpacing: '-0.01em' },
  rowBody: { margin: '0 0 20px', fontSize: 16, fontWeight: 300, lineHeight: 1.625, color: 'var(--fg-muted)' },
  tagRow: { display: 'flex', gap: 8, flexWrap: 'wrap' },
  tag: {
    padding: '5px 12px', borderRadius: 9999,
    border: '1px solid var(--border)', background: 'rgba(255,255,255,0.55)',
    fontSize: 12, color: 'var(--fg-muted)',
  },
  arrow: { alignSelf: 'center', justifySelf: 'end' },
};

window.Services = Services;