function ServicesPage({ onContact }) {
  const services = [
    {
      to: '/services/websites', icon: 'browser', accent: 'var(--aurora-green)',
      label: 'Websites', title: 'Website Design & Build',
      headline: 'Hand-built sites that load fast and actually convert.',
      body: 'Modern, no-bloat websites for small businesses. We design, build, and host them — or hand them off cleanly so your in-house person can maintain them.',
      bullets: ['Modern static + headless stacks', 'Booking, payments, lead capture', 'Mobile-first · 95+ Lighthouse', 'On-call edits or monthly retainer'],
      visual: <WebsiteVisual />,
    },
    {
      to: '/services/email', icon: 'mail', accent: 'var(--aurora-magenta)',
      label: 'Business Email & IT', title: 'Business Email & IT',
      headline: 'Look like a real business in your inbox.',
      body: 'hello@yourbusiness.com. Migrated cleanly, deliverability configured, and someone you can call when an employee can\'t log in on a Saturday morning.',
      bullets: ['Google Workspace or Microsoft 365', 'SPF, DKIM, DMARC properly set', 'Zero-downtime migration', 'Ongoing IT for small teams'],
      visual: <EmailVisual />,
    },
    {
      to: '/services/networking', icon: 'wifi', accent: 'var(--aurora-blue)',
      label: 'Networking', title: 'Network Consulting & Tune-ups',
      headline: 'Honest fixes for the network you already have.',
      body: 'Dead zones, mystery slowdowns, or a UniFi® setup nobody\'s maintained? We diagnose, tune, and right-size existing home and small-office networks — and handle small upgrades in a single visit.',
      bullets: ['Dead-zone diagnosis and fixes', 'UniFi cleanups: firmware, VLANs, security', 'Small upgrades — add an AP, swap a router', 'Advice you can act on, no gear-pushing'],
      visual: <PlanningVisual />,
    },
    {
      to: '/services/cameras', icon: 'camera', accent: 'var(--aurora-purple)',
      label: 'Camera Support', title: 'UniFi Protect® Support',
      headline: 'Care for the cameras you already own.',
      body: 'Already running UniFi Protect®? We tune alerts so they matter, fix blind spots, expand storage and retention, and keep the whole system updated and healthy. Support only — we no longer install new systems.',
      bullets: ['Alert tuning that ends false alarms', 'Storage & retention upgrades', 'Camera realignment and refocus', 'Firmware, security, and health checks'],
      visual: <CamerasVisual />,
    },
  ];
  return (
    <main data-screen-label="Services">
      <PageIntro
        crumbs={[{label:'Home', to:'/'}, {label:'Services'}]}
        eyebrow="All services"
        title={<>Four pillars. <span className="beat-aurora">One consultant.</span></>}
        body="Aurora is built around websites, business email, and IT consulting — with expert care for the UniFi® network and cameras you already own. Pick a service to see what's inside and how we work."
      />

      <section className="section section--tight">
        <div className="container">
          <div className="grid grid-2">
            {services.map((s, i) => (
              <Link to={s.to} key={s.to} className="service-card" style={{'--accent': s.accent, minHeight: 420, padding: 40}}>
                <div className="number">0{i+1} / 04</div>
                <div className="icon-tile icon-tile--lg" style={{
                  background: `color-mix(in srgb, ${s.accent} 16%, transparent)`,
                  borderColor: `color-mix(in srgb, ${s.accent} 32%, transparent)`,
                  color: s.accent,
                }}>
                  <Icon name={s.icon} size={28} />
                </div>
                <div className="spaced-cap" style={{color: s.accent}}>{s.label}</div>
                <h3 className="h2" style={{fontSize:'clamp(24px, 2.8vw, 32px)', margin:'8px 0 12px'}}>{s.headline}</h3>
                <p className="body">{s.body}</p>
                <div style={{marginTop:12}}>
                  <BulletList items={s.bullets} />
                </div>
                <div className="footer-row mt-2">
                  <span className="quote-link">Explore {s.label.toLowerCase()} <Icon name="arrow-up-right" /></span>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHeader
            align="center"
            eyebrow="Bundling"
            title={<>Pairs well. <span className="beat-aurora">Like wine and dinner.</span></>}
            body="The fastest way to overpay is to buy these services from four different vendors who don't talk to each other. Bundle two or more and we pre-coordinate everything — one schedule, one quote, one person to call."
          />
          <div className="grid grid-3">
            {[
              { a:'browser', b:'mail', title:'Website + Email', desc:'New domain, new email addresses, new website — set up together so deliverability and SEO start clean.' },
              { a:'mail', b:'wifi', title:'IT + Network care', desc:'Email, accounts, and the office network watched by the same person — small-business IT without the agency.' },
              { a:'browser', b:'wifi', title:'Whole small-business stack', desc:'Website, email, IT support, and network care. Everything a 5–25-person business needs from one provider.' },
            ].map((b, i) => (
              <div className="card card--edge" key={i}>
                <div className="row gap-3" style={{marginBottom:18}}>
                  <div className="icon-tile"><Icon name={b.a} size={20} /></div>
                  <span className="mono dim" style={{alignSelf:'center'}}>+</span>
                  <div className="icon-tile"><Icon name={b.b} size={20} /></div>
                </div>
                <h4 className="h4">{b.title}</h4>
                <p className="body mt-2" style={{fontSize:14}}>{b.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTABand
        eyebrow="Not sure which fits?"
        title="Tell us what's broken. We'll tell you what to do."
        body="Free 30-minute consult. We listen first, scope second — and if you don't need our services, we'll tell you that too."
        primary="Schedule a Free Consultation"
        onPrimary={onContact}
        secondary="See our process"
        onSecondary={() => navigate('/about')}
      />
    </main>
  );
}
window.ServicesPage = ServicesPage;