function AboutPage({ 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 team = [
    { name: 'M Afridi, CPA', role: 'Founder & Managing Partner', bio: 'Former Big-4 auditor who saw too many small businesses get a raw deal. Built Fortis to fix it. 18 years practice.', loc: 'Mississauga, ON', tag: 'FOUNDER' },
    { name: 'A Majid', role: 'Head of Client Experience', bio: 'Makes sure every client feels like our only client. Dedicated to delivering clarity, responsiveness, and results at every touchpoint.', loc: 'Mississauga, ON', tag: 'PARTNER' },
  ];

  const values = [
    { k: '01', t: 'Clarity over billable hours', d: 'We don\'t count minutes. We count whether you understand your numbers.' },
    { k: '02', t: 'Humans with automation', d: 'Tech eliminates the tedium. Our people focus on what actually needs judgment.' },
    { k: '03', t: 'Onshore, in-house', d: 'Every team member sits in a US or Canadian office. No offshore outsourcing. Ever.' },
    { k: '04', t: 'Relationship, not transaction', d: 'Same team every month, same people at tax time. We know your business because we\'re in it.' },
  ];

  return (
    <>
      <PageHero
        eyebrow="› about"
        title={<>We saw too many owners getting a <span style={{ color: N.accent }}>raw deal.</span><br/>So we built something better.</>}
        subtitle="Fortis was founded on a simple belief: small business owners deserve the same quality of financial advice that Fortune 500 companies get. Just without the Fortune 500 price tag, partner ego, and 6-week turnaround."
      />

      {/* VIDEO */}
      <section style={{ padding: isMobile ? '48px 0' : '80px 0', borderBottom: `1px solid ${N.line}` }}>
        <div style={container}>
          <SectionLabel>› explainer / 2:30</SectionLabel>
          <h2 style={{ ...nStyles.h2, fontSize: isMobile ? 26 : 42, marginBottom: isMobile ? 24 : 40 }}>
            See how <span style={{ color: N.accent }}>Fortis works.</span>
          </h2>
          <div style={{
            position: 'relative', width: '100%', paddingBottom: '56.25%',
            borderRadius: 12, overflow: 'hidden',
            border: `1px solid ${N.lineStrong}`,
            boxShadow: `0 20px 80px rgba(0,0,0,0.5), 0 0 40px ${N.accentGlow}`,
          }}>
            <iframe
              src="Fortis Video.html"
              style={{
                position: 'absolute', top: 0, left: 0,
                width: '100%', height: '100%',
                border: 'none',
              }}
              allow="autoplay"
              title="Fortis Accounting Services Explainer"
            />
          </div>
        </div>
      </section>

      {/* MISSION */}
      <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.4fr', gap: isMobile ? 32 : 80, alignItems: 'start' }}>
            <div>
              <SectionLabel>› our mission</SectionLabel>
              <h2 style={{ ...nStyles.h2, fontSize: isMobile ? 28 : 42 }}>A message from the team.</h2>
            </div>
            <div style={{ fontSize: isMobile ? 15 : 17, color: N.inkSoft, lineHeight: 1.75 }}>
              <p style={{ marginTop: 0 }}>We started Fortis because we saw too many small business owners paying premium fees for services that amounted to data entry and an annual tax filing.</p>
              <p>We knew there had to be a better way. By leveraging cloud technology, automation, and a genuinely proactive approach, we built a service that gives business owners what they actually need: <span style={{ color: N.ink, fontWeight: 500 }}>complete financial visibility, strategic guidance, and peace of mind.</span></p>
              <p>Every client we take on becomes part of our mission. We don't just process your transactions. We analyze your patterns, identify opportunities you might be missing, and help you make decisions that drive real growth.</p>
              <p style={{ ...nStyles.mono, fontSize: 13, color: N.accent, letterSpacing: '0.12em', marginTop: 32 }}>— THE FORTIS ACCOUNTING TEAM</p>
            </div>
          </div>
        </div>
      </section>

      {/* VALUES */}
      <section style={{ padding: isMobile ? '60px 0' : '100px 0', borderBottom: `1px solid ${N.line}` }}>
        <div style={container}>
          <SectionLabel>› principles</SectionLabel>
          <h2 style={{ ...nStyles.h2, fontSize: isMobile ? 28 : 48, marginBottom: isMobile ? 32 : 56 }}>What we actually believe.</h2>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: 0, border: `1px solid ${N.line}`, borderRadius: 10, overflow: 'hidden' }}>
            {values.map((v, i) => (
              <div key={i} style={{
                padding: isMobile ? 24 : 36,
                borderRight: !isMobile && i % 2 === 0 ? `1px solid ${N.line}` : 'none',
                borderBottom: isMobile ? `1px solid ${N.line}` : (i < 2 ? `1px solid ${N.line}` : 'none'),
                background: i % 2 ? N.surface : 'transparent',
              }}>
                <div style={{ ...nStyles.mono, fontSize: 32, color: N.accent, letterSpacing: '-0.02em', marginBottom: 18, filter: `drop-shadow(0 0 12px ${N.accentGlow})` }}>{v.k}</div>
                <h3 style={{ ...nStyles.h3, fontSize: isMobile ? 20 : 24, marginBottom: 12 }}>{v.t}</h3>
                <p style={{ fontSize: 14, color: N.inkSoft, lineHeight: 1.65, margin: 0 }}>{v.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* STATS */}
      <section style={{ padding: isMobile ? '48px 0' : '80px 0', borderBottom: `1px solid ${N.line}`, background: N.surface }}>
        <div style={container}>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)', gap: isMobile ? 24 : 32 }}>
            {[
              ['2015', 'FOUNDED'],
              ['480+', 'CLIENTS'],
              ['38', 'STATES / PROVINCES'],
              ['$2.1B', 'TX VOLUME / YR'],
            ].map(([v, l], i) => (
              <div key={i} style={{ borderLeft: `2px solid ${N.accent}`, paddingLeft: 20 }}>
                <div style={{ fontSize: isMobile ? 36 : 52, fontWeight: 500, color: N.accent, letterSpacing: '-0.03em', lineHeight: 1, filter: `drop-shadow(0 0 14px ${N.accentGlow})` }}>{v}</div>
                <div style={{ ...nStyles.mono, fontSize: 11, color: N.inkMute, letterSpacing: '0.14em', marginTop: 12 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* TEAM */}
      <section style={{ padding: isMobile ? '60px 0' : '100px 0', borderBottom: `1px solid ${N.line}` }}>
        <div style={container}>
          <SectionLabel>› team / leadership</SectionLabel>
          <h2 style={{ ...nStyles.h2, fontSize: isMobile ? 28 : 48, marginBottom: 12 }}>Real names. <span style={{ color: N.accent }}>Real faces.</span></h2>
          <p style={{ fontSize: isMobile ? 14 : 16, color: N.inkSoft, marginBottom: isMobile ? 32 : 56, maxWidth: 640 }}>No faceless corporation. Every team member works out of our US or Canadian offices. You'll know them by name.</p>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)', gap: 20 }}>
            {team.map((t, i) => (
              <div key={i} style={{
                border: `1px solid ${N.line}`, borderRadius: 10, padding: 28,
                background: N.surface, transition: 'all .2s',
              }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = N.accent; e.currentTarget.style.boxShadow = `0 0 30px ${N.accentGlow}`; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = N.line; e.currentTarget.style.boxShadow = 'none'; }}
              >
                <div style={{
                  width: 64, height: 64, borderRadius: '50%', marginBottom: 20,
                  background: `linear-gradient(135deg, ${N.accent}, ${N.teal})`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  ...nStyles.mono, fontSize: 18, fontWeight: 600, color: N.bg,
                  boxShadow: `0 0 20px ${N.accentGlow}`,
                }}>{t.name.split(' ').map(x => x[0]).join('').slice(0, 2)}</div>
                <div style={{ ...nStyles.mono, fontSize: 10, color: N.accent, letterSpacing: '0.16em', marginBottom: 8 }}>{t.tag}</div>
                <div style={{ fontSize: 17, fontWeight: 500, marginBottom: 4 }}>{t.name}</div>
                <div style={{ fontSize: 13, color: N.inkSoft, marginBottom: 16 }}>{t.role}</div>
                <p style={{ fontSize: 13, color: N.inkSoft, lineHeight: 1.6, margin: 0, marginBottom: 16 }}>{t.bio}</p>
                <div style={{ ...nStyles.mono, fontSize: 10, color: N.inkMute, letterSpacing: '0.12em', paddingTop: 14, borderTop: `1px solid ${N.line}` }}>
                  📍 {t.loc}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* LOCATIONS */}
      <section style={{ padding: isMobile ? '48px 0' : '80px 0', borderBottom: `1px solid ${N.line}` }}>
        <div style={container}>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: 24 }}>
            {[
              { c: '🇨🇦', country: 'CANADA', addr: '55 Village Centre Place, Building 4265 Unit 107, Mississauga, ON, L4Z 1V9', phone: '+1 (416) 820-0779' },
              { c: '🇺🇸', country: 'UNITED STATES', addr: 'Remote-first operations serving 38 US states with dedicated domestic staff', phone: '+1 (909) 647-5586' },
            ].map((l, i) => (
              <div key={i} style={{ border: `1px solid ${N.line}`, borderRadius: 10, padding: 32, background: N.surface }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
                  <span style={{ fontSize: 24 }}>{l.c}</span>
                  <div style={{ ...nStyles.mono, fontSize: 12, color: N.accent, letterSpacing: '0.2em' }}>{l.country}</div>
                </div>
                <div style={{ fontSize: 15, color: N.inkSoft, lineHeight: 1.6, marginBottom: 14 }}>{l.addr}</div>
                <div style={{ ...nStyles.mono, fontSize: 13, color: N.ink }}>{l.phone}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTAStrip onBook={onBook} line1="Ready to meet your team?" line2="Start with a 30-min consult." />
    </>
  );
}
window.AboutPage = AboutPage;