// pages/ServicesPage.jsx
function ServicesPage({ setPage }) {
  const mob = useIsMobile();
  const services = [
    { n: '01', t: 'Website Design & Build', body: 'Custom-built, not templated. Not a drag-and-drop builder, not a template bought off a marketplace. Every section designed for your business and nobody else\'s.', includes: ['Discovery call & brief', 'Design mockups', 'Bespoke build', 'Mobile-first layout', 'Hosting setup', 'Training handover'] },
    { n: '02', t: 'Photography for the Web', body: 'Stock photography gives you a site that could belong to anyone. This gives you something that couldn\'t. Full-day or half-day shoots, edited for web.', includes: ['Team portraits', 'Venue & interior', 'Product shots', 'Events coverage', 'Web-ready edits', 'Raw archive'] },
    { n: '03', t: 'Ongoing Care', body: 'Updates, tweaks, match reports, new galleries, a fresh page for the new season. Sensible monthly rate. No ticket systems — you text me.', includes: ['Monthly retainer', 'Same-week changes', 'Hosting & backups', 'Plugin updates', 'New photo sessions', 'Direct phone number'] },
  ];
  return (
    <React.Fragment>
      <section className="section" style={{ paddingTop: mob ? 64 : 100, overflow: 'hidden' }}>
        {!mob && (
          <div style={{ position: 'absolute', top: -60, right: -60, pointerEvents: 'none' }}>
            <WireShape shape="icosahedron" size={640} speedY={0.35} speedX={0.12} strokeWidth={0.8} opacity={0.13} initY={0.5} initX={0.3}/>
          </div>
        )}
        <Reveal className="sec-eyebrow">Services</Reveal>
        <Reveal as="h1" className="sec-heading" delay={80} style={{ fontSize: mob ? 'clamp(44px, 12vw, 64px)' : 'clamp(56px, 8vw, 96px)' }}>
          What I do,<br/>and what I don't.
        </Reveal>
        <Reveal delay={160} className="sec-lede" style={{ marginTop: 28 }}>
          Three services, all delivered by one person. If what you need is outside this — <strong>big e-commerce platforms, mobile apps, complex backend</strong> — I'll tell you and point you at someone who does it better.
        </Reveal>
      </section>
      {services.map((s, i) => (
        <section key={s.n} className={`section ${i % 2 === 1 ? 'well' : ''}`}>
          <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : '1fr 1.3fr', gap: mob ? 32 : 64, alignItems: 'start' }}>
            <Reveal>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--alp-jade)' }}>Service {s.n}</div>
              <h2 className="sec-heading" style={{ marginTop: 16, fontSize: mob ? 'clamp(32px, 8vw, 48px)' : 'clamp(36px, 4.5vw, 56px)' }}>{s.t}</h2>
              <p className="sec-lede" style={{ marginTop: 20 }}>{s.body}</p>
            </Reveal>
            <Reveal delay={mob ? 0 : 100}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--fg3)', marginBottom: 20, paddingBottom: 12, borderBottom: '1px solid var(--border)' }}>Included</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gridTemplateColumns: mob ? '1fr' : '1fr 1fr', gap: mob ? 12 : 16 }}>
                {s.includes.map(x => (
                  <li key={x} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, fontSize: 15, color: 'var(--fg1)' }}>
                    <span style={{ color: 'var(--alp-jade)', fontFamily: 'var(--font-mono)', fontSize: 14, lineHeight: 1.3 }}>✓</span>
                    <span>{x}</span>
                  </li>
                ))}
              </ul>
            </Reveal>
          </div>
        </section>
      ))}
      {/* PROCESS */}
      <section className="section">
        <Reveal className="sec-eyebrow">Process</Reveal>
        <Reveal as="h2" className="sec-heading" delay={80}>Four steps,<br/>no surprises.</Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr 1fr' : 'repeat(4, 1fr)', gap: mob ? 12 : 18, marginTop: 36 }}>
          {[
            { n: '01', t: 'Call', d: 'Twenty-minute chat about what you need and what it should cost.' },
            { n: '02', t: 'Quote', d: 'Written quote, fixed scope, fixed price. Deposit to start.' },
            { n: '03', t: 'Build', d: 'Design → review → build → review. Usually 3–4 weeks for a standard site.' },
            { n: '04', t: 'Launch', d: 'We go live. Training call. Final invoice. Optional care plan from there.' },
          ].map((p, i) => (
            <Reveal key={p.n} delay={i * 750} className="card">
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.15em', color: 'var(--alp-jade)', marginBottom: 14 }}>{p.n}</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, textTransform: 'uppercase', margin: 0, color: 'var(--fg1)' }}>{p.t}</h3>
              <p style={{ fontSize: 14, color: 'var(--fg2)', lineHeight: 1.65, marginTop: 10, marginBottom: 0 }}>{p.d}</p>
            </Reveal>
          ))}
        </div>
      </section>
      <CTABand setPage={setPage} />
    </React.Fragment>
  );
}

function CTABand({ setPage }) {
  const mob = useIsMobile();
  return (
    <section className="section well" style={{ padding: mob ? '48px 24px' : '72px 64px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : '1.2fr 1fr', gap: mob ? 24 : 40, alignItems: 'center' }}>
        <Reveal>
          <h2 className="sec-heading">Ready to start?</h2>
          <p className="sec-lede" style={{ marginTop: 20 }}>Tell me about the project. If it's not a fit, I'll say so.</p>
        </Reveal>
        <Reveal delay={100} style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: mob ? 'flex-start' : 'flex-end' }}>
          <button className="btn btn-primary" onClick={() => setPage('contact')}>Get in touch →</button>
          <button className="btn btn-ghost" onClick={() => setPage('pricing')}>See pricing</button>
        </Reveal>
      </div>
    </section>
  );
}

window.ServicesPage = ServicesPage;
window.CTABand = CTABand;