function HowItWorksPage({ 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 steps = [
    { n: '01', title: 'Free consult', desc: 'A 30-minute call to map your current stack, pain points, and scope. No sales theater, no obligation. If we\'re not a fit, we\'ll say so and recommend who is.', timing: 'Day 0' },
    { n: '02', title: 'Fixed-fee quote', desc: 'Within 48 hours, you get a written scope and a flat monthly fee. No hourly billing, no surprise invoices. You decide.', timing: '48 hours' },
    { n: '03', title: 'Cloud setup', desc: 'We configure Xero or QuickBooks Online, connect bank feeds, wire up receipt capture, and migrate historical data.', timing: 'Days 3–7' },
    { n: '04', title: 'Catch-up & clean-up', desc: 'Historical books caught up to current. Reconciliation discrepancies resolved. Chart of accounts rationalized.', timing: 'Weeks 2–3' },
    { n: '05', title: 'Go live', desc: 'First full monthly close delivered. Dashboards live. Your dedicated accountant introduced. You\'re flying.', timing: 'Day 14' },
    { n: '06', title: 'Ongoing rhythm', desc: 'Daily reconciliation, monthly close by the 5th, quarterly tax strategy, annual filings. We handle it, you run your business.', timing: 'Forever' },
  ];

  const principles = [
    { icon: '⚡', title: 'Automation first', desc: 'We don\'t sell hours — we sell outcomes. Bank feeds, OCR, and rule engines do the repetitive work so our humans focus on advisory.' },
    { icon: '☁️', title: 'Cloud-native', desc: 'Xero, QuickBooks Online, and best-in-class integrations. Your data is accessible from anywhere, always current, always secure.' },
    { icon: '🔒', title: 'Bank-grade security', desc: '256-bit SSL/TLS encryption, SOC 2 audited providers, and staff located exclusively in US and Canadian offices. Zero offshore outsourcing.' },
    { icon: '🎯', title: 'Flat monthly fee', desc: 'Unlimited questions, unlimited meetings. You never hesitate to call because the meter\'s not running.' },
    { icon: '👥', title: 'Dedicated team', desc: 'A named bookkeeper and a qualified CPA assigned to your file. Same faces every month. They know your business.' },
    { icon: '📊', title: 'Forward-looking', desc: 'Most firms tell you what happened last month. We tell you what\'s going to happen next quarter — and what to do about it.' },
  ];

  return (
    <>
      <PageHero
        eyebrow="› how it works"
        title={<>From chaos to clarity in<br/><span style={{ color: N.accent }}>14 days flat.</span></>}
        subtitle="No RFP. No 6-week onboarding. No 'we'll get back to you.' Here's exactly what happens from the first call to your first clean monthly close."
      >
        <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}` }}>Start day 0 →</button>
          <a href="Services.html" style={{ ...nStyles.btn, background: 'transparent', color: N.ink, border: `1px solid ${N.lineStrong}` }}>View services</a>
        </div>
      </PageHero>

      {/* TIMELINE */}
      <section style={{ padding: isMobile ? '60px 0' : '100px 0', borderBottom: `1px solid ${N.line}`, position: 'relative', overflow: 'hidden' }}>
        <GridBg />
        <div style={{ ...container, position: 'relative' }}>
          <SectionLabel>› onboarding timeline</SectionLabel>
          <h2 style={{ ...nStyles.h2, fontSize: isMobile ? 28 : 48, marginBottom: isMobile ? 32 : 56 }}>Six moves. Two weeks. <span style={{ color: N.accent }}>Live.</span></h2>
          <div style={{ position: 'relative' }}>
            {!isMobile && (
              <div style={{ position: 'absolute', left: 30, top: 30, bottom: 30, width: 2, background: `linear-gradient(180deg, ${N.accent} 0%, ${N.teal} 50%, transparent 100%)`, boxShadow: `0 0 12px ${N.accentGlow}`, opacity: 0.6 }} />
            )}
            {steps.map((s, i) => (
              <div key={i} style={{ display: 'flex', gap: isMobile ? 16 : 28, marginBottom: isMobile ? 16 : 32, position: 'relative' }}>
                <div style={{
                  width: isMobile ? 48 : 62, height: isMobile ? 48 : 62, borderRadius: '50%',
                  background: N.bg, border: `2px solid ${N.accent}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                  ...nStyles.mono, fontSize: isMobile ? 13 : 16, fontWeight: 600, color: N.accent,
                  boxShadow: `0 0 20px ${N.accentGlow}`,
                  zIndex: 1,
                }}>{s.n}</div>
                <div style={{ flex: 1, border: `1px solid ${N.line}`, borderRadius: 10, padding: isMobile ? 18 : 28, background: N.surface }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: isMobile ? 'flex-start' : 'center', marginBottom: 10, flexWrap: 'wrap', gap: 8 }}>
                    <h3 style={{ ...nStyles.h3, fontSize: isMobile ? 18 : 24 }}>{s.title}</h3>
                    <div style={{ ...nStyles.tag, borderColor: N.accent, color: N.accent, background: `${N.accent}12` }}>{s.timing}</div>
                  </div>
                  <p style={{ fontSize: 15, color: N.inkSoft, lineHeight: 1.6, margin: 0 }}>{s.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PRINCIPLES */}
      <section style={{ padding: isMobile ? '60px 0' : '100px 0', borderBottom: `1px solid ${N.line}` }}>
        <div style={container}>
          <SectionLabel>› operating principles</SectionLabel>
          <h2 style={{ ...nStyles.h2, fontSize: isMobile ? 28 : 48, marginBottom: isMobile ? 32 : 56 }}>How we actually work.</h2>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)', gap: 20 }}>
            {principles.map((p, i) => (
              <div key={i} style={{ border: `1px solid ${N.line}`, borderRadius: 10, padding: isMobile ? 20 : 28, background: N.surface }}>
                <div style={{ fontSize: 28, marginBottom: 14 }}>{p.icon}</div>
                <div style={{ fontSize: 18, fontWeight: 500, marginBottom: 10 }}>{p.title}</div>
                <div style={{ fontSize: 14, color: N.inkSoft, lineHeight: 1.6 }}>{p.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* WARNING SIGNS */}
      <section style={{ padding: isMobile ? '60px 0' : '100px 0', borderBottom: `1px solid ${N.line}`, background: N.surface }}>
        <div style={container}>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 40 : 48 }}>
            <div>
              <div style={{ ...nStyles.mono, fontSize: 11, letterSpacing: '0.14em', color: N.warn, marginBottom: 16 }}>⚠ WARNING SIGNS</div>
              <h3 style={{ ...nStyles.h3, fontSize: isMobile ? 20 : 26, marginBottom: 28 }}>Your current accountant is failing you if...</h3>
              <div style={{ display: 'grid', gap: 12 }}>
                {[
                  'You only hear from them at tax season',
                  'Financial reports are weeks or months late',
                  'You\'ve been surprised by a tax bill',
                  'You can\'t get a clear profitability answer',
                  'They charge extra every time you ask a question',
                  'Books are always behind and never reconciled',
                  'They use outdated desktop software',
                  'You feel like just another number',
                ].map((l, i) => (
                  <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontSize: 14, color: N.inkSoft }}>
                    <span style={{ color: N.warn, fontSize: 12, marginTop: 3 }}>✕</span>
                    <span>{l}</span>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <div style={{ ...nStyles.mono, fontSize: 11, letterSpacing: '0.14em', color: N.accent, marginBottom: 16 }}>✓ WORKING WITH FORTIS</div>
              <h3 style={{ ...nStyles.h3, fontSize: isMobile ? 20 : 26, marginBottom: 28 }}>What clients actually experience.</h3>
              <div style={{ display: 'grid', gap: 12 }}>
                {[
                  'Proactive communication and regular check-ins',
                  'Real-time access to your financial data, anytime',
                  'Year-round tax planning — zero April surprises',
                  'Jargon-free explanations of your numbers',
                  'Flat monthly pricing with unlimited questions',
                  'Books always current, reconciled, audit-ready',
                  'Modern cloud tools on any device',
                  'A team that genuinely cares about your growth',
                ].map((l, i) => (
                  <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontSize: 14, color: N.inkSoft }}>
                    <span style={{ color: N.accent, fontSize: 12, marginTop: 3, filter: `drop-shadow(0 0 4px ${N.accent})` }}>✓</span>
                    <span>{l}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      <CTAStrip onBook={onBook} line1="Day 0 is a 30-min call." line2="Day 14 is a clean close." />
    </>
  );
}
window.HowItWorksPage = HowItWorksPage;