// Services — what I do
const SERVICES = [
  {
    n: '01',
    title: 'a website that actually sells for you',
    body: 'a one-page site so clear, so well-written, that the right person reads it and wants to work with you immediately. the wrong person leaves. that\'s the whole job.',
    bullets: ['words that pull the reader in', 'designed around one big "yes"', 'live in 14 days, fully yours'],
    sample: 'avg lift: 2.4× more bookings',
    icon: 'globe',
  },
  {
    n: '02',
    title: 'the website you can grow into',
    body: 'when one page isn\'t enough — services, about, blog, the works. a real online home that looks like a brand, loads in a blink, and you can update yourself.',
    bullets: ['edit it from your phone', 'looks expensive (it\'s not)', 'built to grow with you'],
    sample: 'one client: $0 → $14k/mo in 90 days',
    icon: 'code',
  },
  {
    n: '03',
    title: 'tiny robots that do the boring work',
    body: 'every repetitive task you do — replying to emails, following up with leads, sending invoices, posting content — handed off to a quiet system that runs 24/7.',
    bullets: ['set up once, runs forever', 'plain-english instructions', 'pause anytime, you\'re in charge'],
    sample: 'one client got 11 hrs/week back',
    icon: 'graph',
  },
  {
    n: '04',
    title: 'a steady drip of new clients',
    body: 'a system that finds your perfect-fit customers, writes them a personal note, follows up politely, and books the call on your calendar. you just show up.',
    bullets: ['perfect-fit prospects only', 'no spam — actually thoughtful', 'calls land on your calendar'],
    sample: '4–9 booked calls per week',
    icon: 'target',
  },
];

function Icon({ name }) {
  const c = {
    globe: <><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c3 4 3 14 0 18M12 3c-3 4-3 14 0 18"/></>,
    code: <><path d="M8 6 L2 12 L8 18 M16 6 L22 12 L16 18 M14 4 L10 20"/></>,
    graph: <><path d="M3 20 L9 12 L13 16 L21 6 M21 6 H15 M21 6 V12"/></>,
    target: <><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/></>,
  };
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      {c[name]}
    </svg>
  );
}

function Services() {
  return (
    <section id="services" className="section">
      <SectionHead
        id="what.you.get"
        kicker="what i actually do"
        title='four ways to get<br/><span class="italic-em">your time back.</span>'
        lede="i don't do everything. i do these four. that's why each one works the first time, every time."
      />

      <div className="container services-grid" style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
        gap: 24,
      }}>
        {SERVICES.map((s, i) => (
          <Reveal key={s.n} delay={(i % 2) + 1}>
            <ServiceCard s={s} />
          </Reveal>
        ))}
      </div>

      <Marquee items={['more time', 'more clients', 'more calm', 'less busywork', 'fewer tabs', 'fixed prices', 'real results']} />
    </section>
  );
}

function ServiceCard({ s }) {
  return (
    <article className="card services-card-inner" style={{
      padding: '32px',
      display: 'grid',
      gridTemplateColumns: 'auto 1fr',
      gap: '20px 24px',
      alignItems: 'start',
      minHeight: 320,
    }}>
      <div style={{
        width: 44, height: 44,
        borderRadius: 10,
        display: 'grid', placeItems: 'center',
        background: 'var(--ink)',
        color: 'var(--bg)',
      }}>
        <Icon name={s.icon} />
      </div>
      <div>
        <div className="label" style={{ marginBottom: 12 }}>service · {s.n}</div>
        <h3 className="serif" style={{
          fontSize: 30,
          lineHeight: 1.05,
          letterSpacing: '-0.025em',
          margin: 0,
          fontWeight: 400,
          textWrap: 'balance',
        }}>{s.title}</h3>
        <p style={{ color: 'var(--ink-2)', marginTop: 14, lineHeight: 1.55, textWrap: 'pretty' }}>{s.body}</p>
        <ul style={{ listStyle: 'none', padding: 0, margin: '20px 0 0', display: 'grid', gap: 8 }}>
          {s.bullets.map(b => (
            <li key={b} className="mono" style={{ fontSize: 12, color: 'var(--ink-2)', display: 'flex', gap: 10, alignItems: 'center' }}>
              <span style={{ color: 'var(--accent)' }}>›</span>{b}
            </li>
          ))}
        </ul>
        <div style={{
          marginTop: 24,
          paddingTop: 16,
          borderTop: '1px dashed var(--line-2)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        }}>
          <span className="label">// the result</span>
          <span className="mono" style={{ fontSize: 12, color: 'var(--ink)', fontWeight: 500 }}>{s.sample}</span>
        </div>
      </div>
    </article>
  );
}

Object.assign(window, { Services });