/* ============ SERVICES OVERVIEW ============ */
function ServicesPage({ onBook }) {
  const { N, nStyles, useMediaQuery, PageHero, SectionLabel, CTAStrip, GridBg } = window;
  const isMobile = useMediaQuery('(max-width: 768px)');
  const isTablet = useMediaQuery('(max-width: 1024px)');
  const container = { ...nStyles.container, padding: isMobile ? '0 20px' : '0 48px' };

  const services = [
    {
      id: 'bookkeeping',
      code: '01',
      name: 'Cloud Bookkeeping',
      tag: 'Daily',
      href: 'Bookkeeping.html',
      desc: 'Automated transaction categorization, bank reconciliation, and financial record keeping powered by leading cloud platforms. Your books are always accurate and up to date.',
      stack: ['Xero', 'QuickBooks', 'Dext', 'Plaid'],
      highlight: '< 24hr',
      highlightLabel: 'reconciliation lag',
    },
    {
      id: 'tax',
      code: '02',
      name: 'Tax Compliance',
      tag: 'Year-round',
      href: 'Tax.html',
      desc: 'Corporate and personal tax preparation, GST/HST filings, payroll remittances, and strategic tax planning to minimize your burden legally and effectively.',
      stack: ['IRS e-file', 'CRA My Business', 'GST/HST', 'T2 / 1120'],
      highlight: '$14.2k',
      highlightLabel: 'avg client savings',
    },
    {
      id: 'payroll',
      code: '03',
      name: 'Payroll',
      tag: 'Bi-weekly',
      href: 'Payroll.html',
      desc: 'Full-service payroll with direct deposit, tax remittances, year-end forms, and multi-jurisdiction support. Employees and contractors, W-2 and T4, all in one system.',
      stack: ['Gusto', 'Rippling', 'ADP', 'Wagepoint'],
      highlight: '100%',
      highlightLabel: 'on-time filing',
    },
    {
      id: 'cfo',
      code: '04',
      name: 'CFO Advisory',
      tag: 'Strategic',
      href: 'CFO Advisory.html',
      desc: 'Strategic financial guidance typically reserved for large corporations. Budgeting, forecasting, cash flow management, and growth planning tailored to your business.',
      stack: ['Fathom', 'LivePlan', '13-wk cash', 'Board reporting'],
      highlight: '42%',
      highlightLabel: 'avg margin lift',
    },
  ];

  return (
    <>
      <PageHero
        eyebrow="› services / index"
        title={<>Everything your business needs.<br/><span style={{ color: N.accent }}>Under one roof.</span></>}
        subtitle="Stop juggling providers. Fortis delivers comprehensive financial services designed to work together seamlessly — powered by cloud automation, delivered by qualified professional accountants."
      >
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <button onClick={onBook} style={{ ...nStyles.btn, background: N.accent, color: N.bg, fontWeight: 600, boxShadow: `0 0 24px ${N.accentGlow}` }}>Book a consult →</button>
          <a href="How It Works.html" style={{ ...nStyles.btn, background: 'transparent', color: N.ink, border: `1px solid ${N.lineStrong}` }}>See how it works</a>
        </div>
      </PageHero>

      {/* SERVICE GRID */}
      <section style={{ padding: isMobile ? '60px 0' : '100px 0', borderBottom: `1px solid ${N.line}` }}>
        <div style={container}>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: 24 }}>
            {services.map(s => (
              <a key={s.id} href={s.href} style={{
                display: 'block', textDecoration: 'none', color: 'inherit',
                border: `1px solid ${N.line}`, borderRadius: 10,
                padding: isMobile ? 24 : 36, background: N.surface, position: 'relative',
                transition: 'all .2s', overflow: 'hidden',
              }}
              onMouseEnter={e => {
                e.currentTarget.style.borderColor = N.accent;
                e.currentTarget.style.boxShadow = `0 0 40px ${N.accentGlow}`;
                e.currentTarget.style.transform = 'translateY(-2px)';
              }}
              onMouseLeave={e => {
                e.currentTarget.style.borderColor = N.line;
                e.currentTarget.style.boxShadow = 'none';
                e.currentTarget.style.transform = 'translateY(0)';
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 28 }}>
                  <div>
                    <div style={{ ...nStyles.mono, fontSize: 11, color: N.accent, letterSpacing: '0.2em', marginBottom: 10 }}>SVC / {s.code}</div>
                    <h3 style={{ ...nStyles.h3, fontSize: isMobile ? 22 : 30 }}>{s.name}</h3>
                  </div>
                  <div style={{ ...nStyles.tag, background: N.surface2, borderColor: N.lineStrong }}>{s.tag}</div>
                </div>
                <p style={{ color: N.inkSoft, fontSize: 15, lineHeight: 1.6, marginBottom: 28 }}>{s.desc}</p>

                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 20, borderTop: `1px solid ${N.line}`, flexWrap: 'wrap', gap: 16 }}>
                  <div>
                    <div style={{ ...nStyles.mono, fontSize: 10, color: N.inkMute, letterSpacing: '0.14em', marginBottom: 6 }}>STACK</div>
                    <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                      {s.stack.map(t => (
                        <span key={t} style={{ ...nStyles.mono, fontSize: 10, color: N.inkSoft, padding: '3px 7px', background: N.surface2, borderRadius: 3 }}>{t}</span>
                      ))}
                    </div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ fontSize: 26, fontWeight: 500, color: N.accent, letterSpacing: '-0.02em', filter: `drop-shadow(0 0 10px ${N.accentGlow})` }}>{s.highlight}</div>
                    <div style={{ ...nStyles.mono, fontSize: 10, color: N.inkMute, letterSpacing: '0.12em' }}>{s.highlightLabel}</div>
                  </div>
                </div>

                <div style={{ marginTop: 24, ...nStyles.mono, fontSize: 12, color: N.accent, letterSpacing: '0.1em', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                  VIEW DETAIL <span>→</span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* COMPARISON TABLE */}
      <section style={{ padding: isMobile ? '60px 0' : '100px 0', borderBottom: `1px solid ${N.line}` }}>
        <div style={container}>
          <SectionLabel>$ diff fortis traditional</SectionLabel>
          <h2 style={{ ...nStyles.h2, fontSize: isMobile ? 26 : 48, maxWidth: 900, marginBottom: 48 }}>
            We didn't tweak the old accounting model.<br/>
            <span style={{ color: N.accent }}>We rebuilt it from the ground up.</span>
          </h2>
          {isMobile ? (
            <div style={{ display: 'grid', gap: 12 }}>
              {[
                ['Financial reporting', 'Monthly, often late', 'Real-time cloud dashboards'],
                ['Communication', 'Slow, hard to reach', 'Dedicated team · < 4hr SLA'],
                ['Tax planning', 'Reactive year-end scramble', 'Proactive year-round strategy'],
                ['Technology', 'Desktop, manual entry', 'Cloud-native, automated'],
                ['Business insights', 'Basic compliance only', 'Strategic growth advisory'],
                ['Pricing', 'Hourly, unpredictable', 'Flat monthly · no surprises'],
                ['Onboarding', 'Weeks of back-and-forth', 'Streamlined setup · 14 days'],
              ].map(([f, a, b], i) => (
                <div key={i} style={{ border: `1px solid ${N.line}`, borderRadius: 8, padding: 20, background: i % 2 ? 'transparent' : N.surface }}>
                  <div style={{ ...nStyles.mono, fontSize: 10, color: N.accent, letterSpacing: '0.1em', marginBottom: 10 }}>{f.toUpperCase()}</div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, fontSize: 13 }}>
                    <div style={{ color: N.inkMute }}>{a}</div>
                    <div style={{ color: N.ink, display: 'flex', gap: 6 }}>
                      <span style={{ width: 6, height: 6, borderRadius: '50%', background: N.accent, boxShadow: `0 0 8px ${N.accent}`, flexShrink: 0, marginTop: 4 }} />
                      {b}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div style={{ border: `1px solid ${N.line}`, borderRadius: 10, overflow: 'hidden' }}>
              {[
                ['Financial reporting', 'Monthly, often late', 'Real-time cloud dashboards'],
                ['Communication', 'Slow, hard to reach', 'Dedicated team · < 4hr SLA'],
                ['Tax planning', 'Reactive year-end scramble', 'Proactive year-round strategy'],
                ['Technology', 'Desktop, manual entry', 'Cloud-native, automated'],
                ['Business insights', 'Basic compliance only', 'Strategic growth advisory'],
                ['Pricing', 'Hourly, unpredictable', 'Flat monthly · no surprises'],
                ['Onboarding', 'Weeks of back-and-forth', 'Streamlined setup · 14 days'],
              ].map(([f, a, b], i) => (
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: '1fr 1.2fr 1.2fr',
                  padding: '22px 32px',
                  borderBottom: i < 6 ? `1px solid ${N.line}` : 'none',
                  background: i === 0 ? N.surface : (i % 2 ? 'transparent' : N.surface),
                  fontSize: 14,
                }}>
                  <div style={{ ...nStyles.mono, color: N.inkMute, letterSpacing: '0.08em', textTransform: 'uppercase', fontSize: 11 }}>{f}</div>
                  <div style={{ color: N.inkMute, opacity: 0.7 }}>{a}</div>
                  <div style={{ color: N.ink, display: 'flex', alignItems: 'center', gap: 10 }}>
                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: N.accent, boxShadow: `0 0 8px ${N.accent}` }} />
                    {b}
                  </div>
                </div>
              ))}
              <div style={{
                display: 'grid', gridTemplateColumns: '1fr 1.2fr 1.2fr',
                padding: '18px 32px', background: N.surface2,
                ...nStyles.mono, fontSize: 10, letterSpacing: '0.2em', color: N.inkMute,
              }}>
                <div>FEATURE</div>
                <div>TRADITIONAL FIRMS</div>
                <div style={{ color: N.accent }}>FORTIS</div>
              </div>
            </div>
          )}
        </div>
      </section>

      {/* INTEGRATIONS */}
      <section style={{ padding: isMobile ? '60px 0' : '100px 0', borderBottom: `1px solid ${N.line}`, position: 'relative', overflow: 'hidden' }}>
        <GridBg />
        <div style={{ ...container, position: 'relative' }}>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.6fr', gap: isMobile ? 32 : 60, alignItems: 'center' }}>
            <div>
              <SectionLabel>› integrations</SectionLabel>
              <h2 style={{ ...nStyles.h2, fontSize: isMobile ? 28 : 40 }}>Your stack stays.<br/>We plug in.</h2>
              <p style={{ fontSize: isMobile ? 14 : 16, color: N.inkSoft, marginTop: 20, lineHeight: 1.6 }}>
                We integrate with the cloud tools you already use — no forced migration, no change-management theater. Automated bank feeds, OCR-powered receipt capture, and secure file sharing out of the box.
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)', gap: 14 }}>
              {['Xero', 'QuickBooks', 'Shopify', 'Stripe', 'BigCommerce', 'FreshBooks', 'Gusto', 'Square', 'Plaid', 'Dext', 'HubDoc', 'A2X'].map((s, i) => (
                <div key={i} style={{
                  border: `1px solid ${N.line}`, borderRadius: 8, padding: isMobile ? '16px 12px' : '22px 16px',
                  textAlign: 'center', background: N.surface,
                  ...nStyles.mono, fontSize: isMobile ? 12 : 13, letterSpacing: '0.08em', color: N.inkSoft,
                  transition: 'all .15s',
                }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = N.accent; e.currentTarget.style.color = N.accent; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = N.line; e.currentTarget.style.color = N.inkSoft; }}>
                  {s}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <CTAStrip onBook={onBook} line1="One partner. Every service." line2="Pick your starting point." />
    </>
  );
}
window.ServicesPage = ServicesPage;