// Direction — Tech-forward dark mode, orange neon accents
// Near-black, elevated surfaces, geometric sans + mono, dashboard vocabulary.

// Palette derived from Fortis logo: slate-indigo + deep teal + pale sage,
// pushed into a dark futuristic space with cyan/teal glows.
const N = {
  bg: '#04060A',          // near-black with blue undertone
  surface: '#0D1524',     // elevated
  surface2: '#1A2540',    // elevated 2
  surface3: '#253149',    // elevated 3 (cards, modals)
  line: 'rgba(217,229,236,0.12)',
  lineStrong: 'rgba(217,229,236,0.22)',
  ink: '#FFFFFF',         // near white with cool cast
  inkSoft: '#D9E5EC',
  inkMute: '#5A6B76',
  // Logo colors as palette
  slate: '#8FA0D8',       // slate-indigo (F outer)
  teal: '#4FB8D8',        // deep teal (F inner)
  sage: '#E8F8F0',        // pale sage (accent square)
  // Futuristic accents
  accent: '#00FFE0',       // cyan-teal, brighter sibling of the deep teal
  accentDim: '#00DECE',
  accentGlow: 'rgba(0,255,224,0.55)',
  accentGlowStrong: 'rgba(0,255,224,0.85)',
  success: '#00FFE0',
  warn: '#F2B97C',
};

function useMediaQuery(query) {
  const [matches, setMatches] = React.useState(false);
  React.useEffect(() => {
    const media = window.matchMedia(query);
    if (media.matches !== matches) {
      setMatches(media.matches);
    }
    const listener = () => setMatches(media.matches);
    media.addListener(listener);
    return () => media.removeListener(listener);
  }, [matches, query]);
  return matches;
}

function getResponsiveStyles(isMobile, isTablet) {
  return {
    page: {
      background: N.bg,
      color: N.ink,
      fontFamily: '"Space Grotesk", "Inter", system-ui, sans-serif',
      fontSize: isMobile ? 14 : 15,
      lineHeight: 1.55,
      width: '100%',
      minHeight: '100%',
    },
    mono: { fontFamily: '"JetBrains Mono", ui-monospace, "SF Mono", monospace' },
    container: {
      maxWidth: 1240,
      margin: '0 auto',
      padding: isMobile ? '0 16px' : isTablet ? '0 24px' : '0 48px',
      width: '100%',
    },
    btn: {
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '12px 22px', borderRadius: 6, fontWeight: 500,
      fontSize: 14, cursor: 'pointer', border: 'none',
      transition: 'all .15s', fontFamily: 'inherit',
    },
    glow: { boxShadow: `0 0 0 1px ${N.accent}, 0 0 24px ${N.accentGlow}` },
    tag: {
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '5px 10px', borderRadius: 4,
      fontFamily: '"JetBrains Mono", monospace', fontSize: 11,
      letterSpacing: '0.05em',
      border: `1px solid ${N.line}`, background: N.surface,
      color: N.inkSoft,
    },
  };
}

function NPlaceholder({ label, height = 300 }) {
  return (
    <div style={{
      height, background: N.surface,
      backgroundImage: `linear-gradient(135deg, transparent 0 49%, ${N.line} 49% 51%, transparent 51% 100%)`,
      backgroundSize: '14px 14px',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: N.inkMute, fontFamily: '"JetBrains Mono", ui-monospace, "SF Mono", monospace',
      fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase',
      border: `1px solid ${N.line}`, borderRadius: 4,
    }}>{label}</div>
  );
}

/* ================================================================ */
/*  NAV                                                              */
/* ================================================================ */
function Nav({ onBook, nStyles, isMobile, isTablet }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(10,10,11,0.75)',
      backdropFilter: 'blur(16px)',
      borderBottom: `1px solid ${N.line}`,
    }}>
      <div style={{ ...nStyles.container, display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: isMobile ? 56 : 64 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: isMobile ? 8 : 40 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ position: 'relative', filter: `drop-shadow(0 0 10px ${N.accentGlow})` }}>
              <svg width={isMobile ? 28 : 34} height={isMobile ? 28 : 34} viewBox="0 0 40 40">
                <defs>
                  <linearGradient id="fortis-outer" x1="0" y1="0" x2="1" y2="1">
                    <stop offset="0%" stopColor={N.accent} />
                    <stop offset="100%" stopColor={N.slate} />
                  </linearGradient>
                  <linearGradient id="fortis-inner" x1="0" y1="0" x2="1" y2="1">
                    <stop offset="0%" stopColor={N.accent} />
                    <stop offset="100%" stopColor={N.teal} />
                  </linearGradient>
                </defs>
                <path d="M4 4 H36 V13 H13 V18 H28 V27 H13 V36 H4 Z" fill="url(#fortis-outer)" />
                <path d="M10 10 H30 V15 H15 V20 H25 V25 H15 V30 H10 Z" fill="url(#fortis-inner)" opacity="0.95" />
                <rect x="16" y="26" width="8" height="8" fill={N.accent} />
              </svg>
            </div>
            {!isMobile && (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 2, lineHeight: 1 }}>
                <span style={{
                  fontSize: 17, fontWeight: 700, letterSpacing: '0.14em',
                  background: `linear-gradient(90deg, ${N.ink} 0%, ${N.accent} 100%)`,
                  WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
                  backgroundClip: 'text',
                }}>FORTIS</span>
                <span style={{ ...nStyles.mono, fontSize: 9, letterSpacing: '0.24em', color: N.accent, opacity: 0.8 }}>
                  ACCOUNTING
                </span>
              </div>
            )}
            {!isMobile && <span style={{ ...nStyles.mono, fontSize: 10, color: N.accent, padding: '2px 7px', border: `1px solid ${N.accent}`, borderRadius: 3, marginLeft: 6, background: `${N.accentGlow}`, letterSpacing: '0.1em' }}>v2.26</span>}
          </div>
          {!isMobile && (
            <div style={{ display: 'flex', gap: 28, fontSize: 14, color: N.inkSoft }}>
              <a href="Services.html" style={{ color: 'inherit', textDecoration: 'none' }}>Services</a>
              <a href="Clients.html" style={{ color: 'inherit', textDecoration: 'none' }}>Who we serve</a>
              <a href="How It Works.html" style={{ color: 'inherit', textDecoration: 'none' }}>How it works</a>
              <a href="About.html" style={{ color: 'inherit', textDecoration: 'none' }}>About</a>
            </div>
          )}
        </div>
        {isMobile ? (
          <button onClick={() => setMenuOpen(!menuOpen)} style={{
            background: 'transparent', border: 'none', color: N.accent, cursor: 'pointer', fontSize: 20, padding: 8,
          }}>☰</button>
        ) : (
          <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
            <a href="Client Portal.html" style={{ fontSize: 13, color: N.inkSoft, textDecoration: 'none', padding: '8px 14px', borderRadius: 6, border: `1px solid ${N.line}`, display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: '"JetBrains Mono", monospace', letterSpacing: '0.08em' }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: N.accent, boxShadow: `0 0 8px ${N.accent}` }} />
              CLIENT PORTAL
            </a>
            <button onClick={onBook} style={{
              ...nStyles.btn, background: N.accent, color: N.bg,
            }}>
              Book a consult
              <span style={{ ...nStyles.mono, fontSize: 10, opacity: 0.7 }}>↵</span>
            </button>
          </div>
        )}
      </div>
      {isMobile && menuOpen && (
        <div style={{ background: N.surface, borderTop: `1px solid ${N.line}`, padding: '16px' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <a href="Services.html" style={{ color: N.inkSoft, textDecoration: 'none', fontSize: 14, padding: '8px 0' }}>Services</a>
            <a href="Clients.html" style={{ color: N.inkSoft, textDecoration: 'none', fontSize: 14, padding: '8px 0' }}>Who we serve</a>
            <a href="How It Works.html" style={{ color: N.inkSoft, textDecoration: 'none', fontSize: 14, padding: '8px 0' }}>How it works</a>
            <a href="About.html" style={{ color: N.inkSoft, textDecoration: 'none', fontSize: 14, padding: '8px 0' }}>About</a>
            <a href="Client Portal.html" style={{ color: N.accent, textDecoration: 'none', fontSize: 13, padding: '8px 0', fontWeight: 500 }}>Client Portal</a>
            <button onClick={onBook} style={{
              ...nStyles.btn, background: N.accent, color: N.bg, width: '100%', justifyContent: 'center', marginTop: 8,
            }}>
              Book a consult
            </button>
          </div>
        </div>
      )}
    </nav>
  );
}

/* ================================================================ */
/*  HERO                                                             */
/* ================================================================ */
function Hero({ onBook, nStyles, isMobile, isTablet }) {
  return (
    <section style={{
      position: 'relative', padding: isMobile ? '60px 0 40px' : isTablet ? '80px 0 60px' : '120px 0 100px',
      borderBottom: `1px solid ${N.line}`,
      overflow: 'hidden',
    }}>
      {/* Grid background */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `
          linear-gradient(${N.line} 1px, transparent 1px),
          linear-gradient(90deg, ${N.line} 1px, transparent 1px)
        `,
        backgroundSize: '64px 64px',
        maskImage: 'radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent)',
        WebkitMaskImage: 'radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent)',
        pointerEvents: 'none',
      }} />
      {/* Scanlines */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,255,224,0.03) 2px 3px)`,
        pointerEvents: 'none', mixBlendMode: 'screen',
      }} />
      {/* Radial glow */}
      <div style={{
        position: 'absolute', top: -200, left: '50%', transform: 'translateX(-50%)',
        width: 900, height: 500, borderRadius: '50%',
        background: `radial-gradient(circle, ${N.accentGlow} 0%, ${N.slate}00 60%, transparent 80%)`,
        filter: 'blur(50px)', pointerEvents: 'none',
        animation: 'pulse 6s ease-in-out infinite',
      }} />
      {/* Decorative corner brackets */}
      {[
        { top: 24, left: 24, rot: 0 }, { top: 24, right: 24, rot: 90 },
        { bottom: 24, left: 24, rot: 270 }, { bottom: 24, right: 24, rot: 180 },
      ].map((p, i) => (
        <svg key={i} width="18" height="18" viewBox="0 0 18 18" style={{
          position: 'absolute', ...p, transform: `rotate(${p.rot}deg)`,
          color: N.accent, opacity: 0.4,
        }}>
          <path d="M0 0 L0 6 M0 0 L6 0" stroke="currentColor" strokeWidth="1.5" fill="none" />
        </svg>
      ))}

      <div style={{ ...nStyles.container, position: 'relative' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <div style={{ ...nStyles.tag, color: N.accent, borderColor: 'rgba(0,255,224,0.5)', background: 'rgba(0,255,224,0.12)' }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: N.accent, boxShadow: `0 0 10px ${N.accent}` }} />
            LIVE · 2025 tax season · 12 slots open
          </div>
        </div>

        <h1 style={{
          fontSize: isMobile ? 44 : isTablet ? 60 : 88, lineHeight: 0.98, fontWeight: 500, margin: 0,
          letterSpacing: '-0.045em', textAlign: 'center', maxWidth: 1000, marginInline: 'auto',
        }}>
          Accounting,<br/>
          <span style={{
            background: `linear-gradient(180deg, ${N.accent} 0%, ${N.accentDim} 60%, ${N.teal} 100%)`,
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            backgroundClip: 'text',
            filter: `drop-shadow(0 0 30px ${N.accentGlow})`,
          }}>engineered.</span>
        </h1>
        <p style={{
          marginTop: isMobile ? 16 : 28, maxWidth: 580, fontSize: isMobile ? 15 : 18, lineHeight: 1.5,
          color: N.inkSoft, textAlign: 'center', marginInline: 'auto', padding: isMobile ? '0 12px' : '0',
        }}>
          A modern accounting firm with real CPAs, real-time books, and an
          obsession for the specific business you run.
        </p>
        <div style={{ display: 'flex', gap: 12, marginTop: 40, justifyContent: 'center', flexDirection: isMobile ? 'column' : 'row', padding: isMobile ? '0 12px' : '0' }}>
          <button onClick={onBook} style={{
            ...nStyles.btn, background: N.accent, color: N.bg, padding: '14px 26px', fontWeight: 600,
            boxShadow: `0 0 30px ${N.accentGlow}, inset 0 0 0 1px rgba(255,255,255,0.2)`,
            flex: isMobile ? 1 : 'auto',
          }}>
            Book a consult {!isMobile && '→'}
          </button>
          <button style={{
            ...nStyles.btn, background: 'rgba(16,21,31,0.6)', color: N.ink,
            border: `1px solid ${N.lineStrong}`, padding: '14px 26px',
            backdropFilter: 'blur(12px)',
            flex: isMobile ? 1 : 'auto',
          }}>
            <span style={{ ...nStyles.mono, color: N.accent }}>$</span> {!isMobile && 'view '} pricing
          </button>
        </div>

        {/* Terminal hero */}
        <div style={{
          marginTop: isMobile ? 40 : 80, maxWidth: 1100, marginInline: 'auto',
          background: N.surface, borderRadius: 12,
          border: `1px solid ${N.lineStrong}`,
          boxShadow: `0 40px 100px -20px rgba(0,0,0,0.6), 0 0 0 1px ${N.line}, 0 0 80px ${N.accentGlow}`,
          overflow: 'hidden',
          margin: isMobile ? '40px 12px 0' : '80px auto 0',
        }}>
          {/* tabs */}
          <div style={{ display: 'flex', alignItems: 'center', padding: '12px 16px', borderBottom: `1px solid ${N.line}`, gap: 12, overflowX: 'auto' }}>
            <div style={{ display: 'flex', gap: 6, flexShrink: 0 }}>
              <div style={{ width: 11, height: 11, borderRadius: '50%', background: 'rgba(242,185,124,0.7)' }} />
              <div style={{ width: 11, height: 11, borderRadius: '50%', background: 'rgba(184,200,194,0.4)' }} />
              <div style={{ width: 11, height: 11, borderRadius: '50%', background: N.accent }} />
            </div>
            {!isMobile && (
              <div style={{ display: 'flex', gap: 2, marginLeft: 12 }}>
                {['~/books/silverline-dental', 'q1-p&l.csv', 'payroll-filings'].map((t, i) => (
                  <div key={i} style={{
                    padding: '6px 14px', fontSize: 12, ...nStyles.mono,
                    color: i === 0 ? N.ink : N.inkMute,
                    background: i === 0 ? N.surface2 : 'transparent',
                    borderRadius: '6px 6px 0 0',
                  }}>{t}</div>
                ))}
              </div>
            )}
            {!isMobile && (
              <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8, ...nStyles.mono, fontSize: 11, color: N.inkMute }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: N.success }} />
                synced 14s ago
              </div>
            )}
          </div>
          {/* body */}
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? '200px 1fr' : '240px 1fr 280px', minHeight: isMobile ? 'auto' : 360 }}>
            {/* sidebar */}
            {!isMobile && (
              <div style={{ borderRight: `1px solid ${N.line}`, padding: '20px 0', display: isMobile ? 'none' : 'block' }}>
                {[
                  ['Overview', true], ['Books', false], ['Payroll', false],
                  ['Tax filings', false], ['Documents', false], ['Advisor', false],
                ].map(([l, on], i) => (
                  <div key={i} style={{
                    padding: '10px 20px', fontSize: 13,
                    color: on ? N.ink : N.inkSoft,
                    borderLeft: on ? `2px solid ${N.accent}` : '2px solid transparent',
                    background: on ? N.surface2 : 'transparent',
                    display: 'flex', justifyContent: 'space-between',
                  }}>
                    <span>{l}</span>
                    {on && <span style={{ ...nStyles.mono, fontSize: 10, color: N.accent }}>●</span>}
                  </div>
                ))}
                <div style={{ padding: 20, marginTop: 20, borderTop: `1px solid ${N.line}` }}>
                  <div style={{ ...nStyles.mono, fontSize: 10, color: N.inkMute, letterSpacing: '0.1em' }}>ENTITY</div>
                  <div style={{ fontSize: 13, marginTop: 6 }}>Silverline Dental Group</div>
                  <div style={{ ...nStyles.mono, fontSize: 10, color: N.inkMute, marginTop: 2 }}>EIN ••• 0281</div>
                </div>
              </div>
            )}
            {/* main */}
            <div style={{ padding: isMobile ? 16 : 24 }}>
              <div style={{ display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2,1fr)' : 'repeat(3,1fr)', gap: 12, marginBottom: 20 }}>
                {[
                  { l: 'CASH ON HAND', v: '$184,220', d: '+12.4%', c: N.success },
                  { l: 'NET PROFIT', v: '$42,180', d: '+8.1%', c: N.success },
                  { l: 'TAX SAVED YTD', v: '$18,340', d: 'vs last yr', c: N.success },
                ].map((k, i) => (
                  <div key={i} style={{ padding: isMobile ? 12 : 16, border: `1px solid ${N.line}`, borderRadius: 6, background: N.bg }}>
                    <div style={{ ...nStyles.mono, fontSize: isMobile ? 9 : 10, color: N.inkMute, letterSpacing: '0.1em' }}>{k.l}</div>
                    <div style={{ fontSize: isMobile ? 20 : 26, fontWeight: 600, marginTop: 8, letterSpacing: '-0.02em' }}>{k.v}</div>
                    <div style={{ fontSize: isMobile ? 10 : 11, color: k.c, marginTop: 4, ...nStyles.mono }}>{k.d}</div>
                  </div>
                ))}
              </div>
              <div style={{ padding: 16, border: `1px solid ${N.line}`, borderRadius: 6, background: N.bg }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
                  <span style={{ fontSize: 13 }}>Revenue · 12mo</span>
                  <span style={{ ...nStyles.mono, fontSize: 10, color: N.inkMute }}>MAY '25 — APR '26</span>
                </div>
                <svg viewBox="0 0 500 120" style={{ width: '100%', height: 140 }}>
                  <defs>
                    <linearGradient id="g1" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0%" stopColor={N.accent} stopOpacity="0.3" />
                      <stop offset="100%" stopColor={N.accent} stopOpacity="0" />
                    </linearGradient>
                  </defs>
                  {[20, 40, 60, 80, 100].map(y => (
                    <line key={y} x1="0" y1={y} x2="500" y2={y} stroke={N.line} strokeDasharray="2 4" />
                  ))}
                  <polyline fill="url(#g1)" stroke="none"
                    points="0,90 42,82 83,85 125,70 167,74 208,60 250,66 292,48 333,52 375,38 417,42 458,24 500,28 500,120 0,120" />
                  <polyline fill="none" stroke={N.accent} strokeWidth="2"
                    points="0,90 42,82 83,85 125,70 167,74 208,60 250,66 292,48 333,52 375,38 417,42 458,24 500,28" />
                  <circle cx="458" cy="24" r="4" fill={N.accent} />
                  <circle cx="458" cy="24" r="8" fill={N.accent} opacity="0.3" />
                </svg>
              </div>
            </div>
            {/* right rail */}
            {!isMobile && (
              <div style={{ borderLeft: `1px solid ${N.line}`, padding: 20, display: isMobile ? 'none' : 'block' }}>
                <div style={{ ...nStyles.mono, fontSize: 10, color: N.inkMute, letterSpacing: '0.1em', marginBottom: 12 }}>ACTIVITY</div>
                {[
                  ['Books closed · March', '2h ago', N.success],
                  ['Q1 estimates filed', 'yesterday', N.success],
                  ['Return ready for review', '3d ago', N.accent],
                  ['Bank sync · Chase', '3d ago', N.inkMute],
                ].map(([a, b, c], i) => (
                  <div key={i} style={{ padding: '10px 0', borderTop: i ? `1px solid ${N.line}` : 'none', fontSize: 12 }}>
                    <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                      <span style={{ width: 6, height: 6, borderRadius: '50%', background: c }} />
                      <span>{a}</span>
                    </div>
                    <div style={{ ...nStyles.mono, fontSize: 10, color: N.inkMute, marginTop: 3, marginLeft: 14 }}>{b}</div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ================================================================ */
/*  LOGOS                                                            */
/* ================================================================ */
function Logos({ isMobile, isTablet, nStyles }) {
  const logos = ['MAPLE DENTAL', 'ROSS & CO.', 'HORIZON AUTO', 'BRIGHTPATH LEGAL', 'CANFIELD GROUP', 'SILVA CONSTRUCT', 'NEXGEN HEALTH', 'EASTGATE FOODS'];
  return (
    <section style={{ padding: isMobile ? '40px 0' : '56px 0', borderBottom: `1px solid ${N.line}` }}>
      <div style={nStyles.container}>
        <div style={{ ...nStyles.mono, fontSize: isMobile ? 9 : 11, color: N.inkMute, letterSpacing: '0.14em', textAlign: 'center', marginBottom: 32 }}>
          TRUSTED BY 1,240+ BUSINESS OWNERS ACROSS THE US & CANADA
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : isTablet ? 'repeat(4, 1fr)' : 'repeat(8, 1fr)', gap: isMobile ? 16 : 24, alignItems: 'center' }}>
          {logos.map((l, i) => (
            <div key={i} style={{
              ...nStyles.mono, fontSize: isMobile ? 12 : 14, color: N.inkSoft,
              textAlign: 'center', opacity: 0.6,
            }}>{l}</div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ================================================================ */
/*  SERVICES                                                         */
/* ================================================================ */
function Services({ isMobile, isTablet, nStyles }) {
  const [active, setActive] = React.useState(0);
  const panelRef = React.useRef(null);

  function handleSelect(i) {
    setActive(i);
    if (isMobile && panelRef.current) {
      setTimeout(() => panelRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' }), 50);
    }
  }

  const svc = [
    {
      id: 'tax', t: 'Tax preparation', n: '01',
      d: 'Federal, state, and multi-state. Filed by the CPA who actually prepared it.',
      code: [
        '> fortis tax --year 2025 --entity s-corp',
        '  ✓ Federal 1120-S · prepared',
        '  ✓ MA Form 355S · prepared',
        '  ✓ K-1s generated for 3 shareholders',
        '  → pending your e-signature',
      ],
    },
    {
      id: 'books', t: 'Bookkeeping', n: '02',
      d: 'Monthly close by day 10. Every line categorized, reconciled, explained.',
      code: [
        '> fortis close --month 2026-03',
        '  ✓ 284 transactions categorized',
        '  ✓ 4 accounts reconciled',
        '  ✓ accruals posted · deferred revenue',
        '  → closed · 1,482ms',
      ],
    },
    {
      id: 'payroll', t: 'Payroll', n: '03',
      d: 'Run payroll in one command. W-2s, 1099s, multi-state — handled.',
      code: [
        '> fortis payroll run --period current',
        '  ✓ 14 employees · $62,840 gross',
        '  ✓ 4 states · tax deposits queued',
        '  ✓ direct deposits scheduled Apr 30',
        '  → done.',
      ],
    },
    {
      id: 'cfo', t: 'CFO advisory', n: '04',
      d: 'Fractional CFO for business owners. Forecasts, financial models, and strategic clarity.',
      code: [
        '> fortis forecast --horizon 18',
        '  ✓ driver-based model · built',
        '  ✓ base / bull / bear scenarios',
        '  ✓ management report · generated',
        '  → review with James · Thu 2pm',
      ],
    },
    {
      id: 'entity', t: 'Business formation', n: '05',
      d: 'LLC, S-corp, C-corp. Entity, EIN, state filings, and opening books.',
      code: [
        '> fortis incorporate --state DE --type c-corp',
        '  ✓ Certificate of Incorporation filed',
        '  ✓ EIN assigned · 88-•••-2041',
        '  ✓ 83(b) elections mailed',
        '  → opening books ready.',
      ],
    },
  ];
  const s = svc[active];
  return (
    <section style={{ padding: isMobile ? '80px 0' : '140px 0', borderBottom: `1px solid ${N.line}` }}>
      <div style={nStyles.container}>
        <div style={{ marginBottom: isMobile ? 40 : 64 }}>
          <div style={{ ...nStyles.mono, fontSize: 11, color: N.accent, letterSpacing: '0.14em', marginBottom: 20 }}>
            § SERVICES
          </div>
          <h2 style={{ fontSize: isMobile ? 32 : 56, fontWeight: 500, margin: 0, letterSpacing: '-0.035em', maxWidth: 720 }}>
            Five disciplines. <span style={{ color: N.inkMute }}>One firm.</span>
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.4fr', gap: isMobile ? 20 : 40 }}>
          <div style={{ borderTop: `1px solid ${N.line}` }}>
            {svc.map((x, i) => (
              <button key={x.id} onClick={() => handleSelect(i)} style={{
                width: '100%', textAlign: 'left', padding: '24px 0',
                borderBottom: `1px solid ${N.line}`,
                background: 'transparent', border: 'none', borderBottom: `1px solid ${N.line}`,
                display: 'flex', alignItems: 'center', gap: 20, cursor: 'pointer',
                color: 'inherit',
              }}>
                <span style={{ ...nStyles.mono, fontSize: 11, color: active === i ? N.accent : N.inkMute, width: 28 }}>{x.n}</span>
                <span style={{
                  fontSize: 26, fontWeight: 500,
                  color: active === i ? N.ink : N.inkSoft,
                  letterSpacing: '-0.02em',
                  flex: 1,
                }}>{x.t}</span>
                <span style={{
                  ...nStyles.mono, fontSize: 14,
                  color: active === i ? N.accent : N.inkMute,
                }}>{active === i ? '●' : '○'}</span>
              </button>
            ))}
          </div>
          <div ref={panelRef} style={{
            background: N.surface, borderRadius: 10, overflow: 'hidden',
            border: `1px solid ${N.line}`,
          }}>
            <div style={{ padding: '14px 18px', borderBottom: `1px solid ${N.line}`, display: 'flex', gap: 10, alignItems: 'center' }}>
              <div style={{ display: 'flex', gap: 6 }}>
                <div style={{ width: 10, height: 10, borderRadius: '50%', background: 'rgba(242,185,124,0.7)' }} />
                <div style={{ width: 10, height: 10, borderRadius: '50%', background: 'rgba(184,200,194,0.4)' }} />
                <div style={{ width: 10, height: 10, borderRadius: '50%', background: N.accent }} />
              </div>
              <div style={{ ...nStyles.mono, fontSize: 11, color: N.inkMute, marginLeft: 8 }}>
                fortis@cli — {s.id} — 82×22
              </div>
            </div>
            <div style={{ padding: 24, ...nStyles.mono, fontSize: 13, lineHeight: 1.8 }}>
              {s.code.map((line, i) => {
                const isCmd = line.startsWith('>');
                const isOk = line.includes('✓');
                const isArrow = line.trim().startsWith('→');
                return (
                  <div key={i} style={{
                    color: isCmd ? N.ink : isOk ? N.inkSoft : isArrow ? N.accent : N.inkSoft,
                  }}>
                    {isCmd && <span style={{ color: N.accent, marginRight: 6 }}>$</span>}
                    {isCmd ? line.slice(1) : line}
                  </div>
                );
              })}
              <div style={{ color: N.accent, marginTop: 10 }}>
                <span style={{ display: 'inline-block', width: 8, height: 16, background: N.accent, verticalAlign: 'text-bottom', animation: 'blink 1s steps(2) infinite' }} />
              </div>
            </div>
            <div style={{ padding: 24, borderTop: `1px solid ${N.line}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <p style={{ fontSize: 15, color: N.inkSoft, margin: 0, maxWidth: 400 }}>{s.d}</p>
              <button style={{
                ...nStyles.btn, background: 'transparent',
                color: N.accent, border: `1px solid ${N.accent}`,
              }}>Docs →</button>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @keyframes blink { 50% { opacity: 0; } }
        @keyframes pulse { 0%,100% { opacity: 0.9 } 50% { opacity: 0.5 } }
        @keyframes sweep { 0% { transform: translateX(-100%) } 100% { transform: translateX(100%) } }
      `}</style>
    </section>
  );
}

/* ================================================================ */
/*  PLATFORM / FEATURES                                              */
/* ================================================================ */
function Platform({ isMobile, isTablet, nStyles }) {
  const features = [
    { t: 'Real-time close', d: 'Your books update as transactions post. No more waiting until the 15th of next month.', ic: '⏱' },
    { t: 'Advisor-first', d: 'Every number tells a story. Your dedicated CPA translates data into decisions — proactively, not reactively.', ic: '◑' },
    { t: 'Direct-line advisor', d: 'Message a real CPA. Under 4h reply SLA during business hours.', ic: '◐' },
    { t: 'Audit-ready always', d: 'Every entry has a paper trail. Pull an audit package in one click.', ic: '◆' },
    { t: 'Multi-entity', d: 'LLC, S-corp, C-corp, holding co — consolidate across entities natively.', ic: '⬡' },
    { t: 'SOC 2 Type II', d: 'Bank-grade encryption. Quarterly pen tests. Your data, never for sale.', ic: '✱' },
  ];
  return (
    <section style={{ padding: isMobile ? '80px 0' : '140px 0', borderBottom: `1px solid ${N.line}` }}>
      <div style={nStyles.container}>
        <div style={{ marginBottom: isMobile ? 40 : 64, maxWidth: 720 }}>
          <div style={{ ...nStyles.mono, fontSize: 11, color: N.accent, letterSpacing: '0.14em', marginBottom: 20 }}>
            § PLATFORM
          </div>
          <h2 style={{ fontSize: isMobile ? 32 : 56, fontWeight: 500, margin: 0, letterSpacing: '-0.035em' }}>
            Infrastructure your<br/>accountant <span style={{ color: N.accent }}>doesn't have</span>.
          </h2>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)',
          gap: 1, background: N.line,
          border: `1px solid ${N.line}`, borderRadius: 10, overflow: 'hidden',
        }}>
          {features.map((f, i) => (
            <div key={i} style={{
              padding: isMobile ? '24px 20px' : '36px 32px', background: N.bg,
              display: 'flex', flexDirection: 'column', gap: 14, minHeight: isMobile ? 'auto' : 220,
            }}>
              <div style={{
                width: 36, height: 36, borderRadius: 8,
                border: `1px solid ${N.line}`, background: N.surface,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: N.accent, ...nStyles.mono, fontSize: 16,
              }}>{f.ic}</div>
              <h3 style={{ fontSize: isMobile ? 16 : 20, fontWeight: 500, margin: 0, letterSpacing: '-0.01em' }}>{f.t}</h3>
              <p style={{ fontSize: 14, color: N.inkSoft, margin: 0, lineHeight: 1.55 }}>{f.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ================================================================ */
/*  ABOUT / TEAM                                                     */
/* ================================================================ */
function Team({ isMobile, isTablet, nStyles }) {
  const people = [
    { n: 'Marguerite Ellison', h: '@marguerite', r: 'Managing Partner · CPA', tag: 'tax.advisory' },
    { n: 'David Okafor', h: '@david', r: 'Tax Director · EA', tag: 'cross.border.tax' },
    { n: 'Priya Raman', h: '@priya', r: 'Head of Bookkeeping', tag: 'bookkeeping.ops' },
    { n: 'James Beaumont', h: '@james', r: 'Fractional CFO', tag: 'cfo.strategy' },
  ];
  return (
    <section style={{ padding: isMobile ? '80px 0' : '140px 0', borderBottom: `1px solid ${N.line}` }}>
      <div style={nStyles.container}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.2fr', gap: isMobile ? 32 : 64, alignItems: isMobile ? 'start' : 'flex-end', marginBottom: isMobile ? 40 : 64 }}>
          <div>
            <div style={{ ...nStyles.mono, fontSize: 11, color: N.accent, letterSpacing: '0.14em', marginBottom: 20 }}>§ TEAM</div>
            <h2 style={{ fontSize: isMobile ? 32 : 56, fontWeight: 500, margin: 0, letterSpacing: '-0.035em' }}>
              Capped at 400<br/>clients per partner.
            </h2>
          </div>
          <p style={{ fontSize: isMobile ? 15 : 17, color: N.inkSoft, lineHeight: 1.6, margin: 0 }}>
            The person who signs your return is the person who picks up when you call.
            We decline work that isn't a fit, so the clients we take get full attention.
            Mississauga-based. Serving businesses across the US and Canada since 2015.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)', gap: 16 }}>
          {people.map((p, i) => (
            <div key={i} style={{
              background: N.surface, borderRadius: 10, padding: 20,
              border: `1px solid ${N.line}`,
            }}>
              <NPlaceholder label={`portrait.${p.h.slice(1)}.jpg`} height={240} />
              <div style={{ marginTop: 16 }}>
                <div style={{ fontSize: 16, fontWeight: 500 }}>{p.n}</div>
                <div style={{ ...nStyles.mono, fontSize: 11, color: N.accent, marginTop: 2 }}>{p.h}</div>
                <div style={{ fontSize: 12, color: N.inkMute, marginTop: 12, display: 'flex', justifyContent: 'space-between' }}>
                  <span>{p.r}</span>
                  <span style={{ ...nStyles.mono, color: N.inkSoft }}>{p.tag}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ================================================================ */
/*  PRICING                                                          */
/* ================================================================ */
function Pricing({ onBook, isMobile, isTablet, nStyles }) {
  const [annual, setAnnual] = React.useState(true);
  const tiers = [
    {
      n: 'Individual', p: annual ? 49 : 59,
      d: 'Personal tax + advisory for W-2 earners, investors, and independents.',
      f: ['1040 + state returns', 'Quarterly estimates', 'Audit support', 'CPA on call'],
      cta: 'Start free',
    },
    {
      n: 'Business', p: annual ? 349 : 399, popular: true,
      d: 'Monthly books + payroll + entity tax for operating companies.',
      f: ['Everything in Individual', 'Monthly bookkeeping', 'Payroll up to 10', 'Entity tax return', 'Dedicated advisor', 'API access'],
      cta: 'Start 30-day trial',
    },
    {
      n: 'Enterprise', p: annual ? 1290 : 1490,
      d: 'Fractional CFO + full-service advisory for established and growing businesses.',
      f: ['Everything in Business', 'Fractional CFO hours', 'Forecasting + KPIs', 'Management reporting packages', 'Capital & growth planning', 'Multi-entity'],
      cta: 'Talk to a partner',
    },
  ];
  return (
    <section style={{ padding: isMobile ? '80px 0' : '140px 0', borderBottom: `1px solid ${N.line}` }}>
      <div style={nStyles.container}>
        <div style={{ textAlign: 'center', marginBottom: isMobile ? 32 : 56 }}>
          <div style={{ ...nStyles.mono, fontSize: 11, color: N.accent, letterSpacing: '0.14em', marginBottom: 20 }}>§ PRICING</div>
          <h2 style={{ fontSize: isMobile ? 32 : 56, fontWeight: 500, margin: 0, letterSpacing: '-0.035em' }}>
            Flat-fee. <span style={{ color: N.inkMute }}>No hourly surprises.</span>
          </h2>
          <div style={{
            display: 'inline-flex', marginTop: 32, padding: 4,
            background: N.surface, borderRadius: 8, gap: 2,
            border: `1px solid ${N.line}`,
          }}>
            {['Monthly', 'Annual — save 15%'].map((l, i) => {
              const on = (i === 1) === annual;
              return (
                <button key={i} onClick={() => setAnnual(i === 1)} style={{
                  padding: isMobile ? '6px 12px' : '8px 18px', borderRadius: 6, border: 'none', fontSize: isMobile ? 12 : 13,
                  background: on ? N.accent : 'transparent',
                  color: on ? '#0A0A0B' : N.inkSoft,
                  cursor: 'pointer', fontWeight: 500, fontFamily: 'inherit',
                }}>{l}</button>
              );
            })}
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)', gap: 16 }}>
          {tiers.map((t, i) => (
            <div key={i} style={{
              padding: 32, borderRadius: 10,
              background: N.surface,
              border: `1px solid ${t.popular ? N.accent : N.line}`,
              position: 'relative',
              ...(t.popular ? { boxShadow: `0 0 40px ${N.accentGlow}` } : {}),
            }}>
              {t.popular && (
                <div style={{
                  position: 'absolute', top: -11, left: 24,
                  background: N.accent, color: N.bg,
                  padding: '3px 10px', borderRadius: 4, fontSize: 10,
                  letterSpacing: '0.08em', textTransform: 'uppercase',
                  fontWeight: 600, ...nStyles.mono,
                }}>MOST POPULAR</div>
              )}
              <div style={{ ...nStyles.mono, fontSize: 12, color: N.accent, letterSpacing: '0.1em' }}>{t.n.toUpperCase()}</div>
              <div style={{ margin: '16px 0 8px', display: 'flex', alignItems: 'baseline', gap: 4 }}>
                <span style={{ fontSize: 16, color: N.inkMute }}>$</span>
                <span style={{ fontSize: 56, fontWeight: 600, letterSpacing: '-0.03em' }}>{t.p}</span>
                <span style={{ fontSize: 14, color: N.inkMute, marginLeft: 4 }}>/ mo</span>
              </div>
              <p style={{ fontSize: 14, color: N.inkSoft, margin: '0 0 24px', minHeight: 44 }}>{t.d}</p>
              <button onClick={onBook} style={{
                ...nStyles.btn, width: '100%', justifyContent: 'center',
                background: t.popular ? N.accent : N.surface2,
                color: t.popular ? '#0A0A0B' : N.ink,
                border: t.popular ? 'none' : `1px solid ${N.lineStrong}`,
              }}>{t.cta}</button>
              <div style={{ marginTop: 24, paddingTop: 20, borderTop: `1px solid ${N.line}` }}>
                {t.f.map((f, j) => (
                  <div key={j} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 13, padding: '7px 0', color: N.inkSoft }}>
                    <span style={{ color: N.accent, ...nStyles.mono }}>✓</span> {f}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ================================================================ */
/*  TESTIMONIAL                                                      */
/* ================================================================ */
function Testimonial({ isMobile, isTablet, nStyles }) {
  return (
    <section style={{ padding: isMobile ? '80px 0' : '120px 0', borderBottom: `1px solid ${N.line}` }}>
      <div style={nStyles.container}>
        <div style={{ maxWidth: 900, margin: '0 auto', textAlign: 'center', padding: isMobile ? '0 12px' : '0' }}>
          <div style={{ ...nStyles.mono, fontSize: 11, color: N.accent, letterSpacing: '0.14em', marginBottom: 32 }}>§ FIELD NOTES</div>
          <blockquote style={{
            fontSize: isMobile ? 20 : 34, lineHeight: 1.35, fontWeight: 400,
            margin: 0, letterSpacing: '-0.02em',
          }}>
            We switched to Fortis after our previous firm missed a <span style={{ color: N.accent }}>$38k SR&D credit</span>
            {' '}two years running. First year with Fortis, they found it, filed an amendment, and had a cheque from the CRA in 8 weeks.
          </blockquote>
          <div style={{ marginTop: 40, display: 'flex', gap: 14, alignItems: 'center', justifyContent: 'center' }}>
            <div style={{
              width: 44, height: 44, borderRadius: '50%',
              background: N.surface, border: `1px solid ${N.line}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              ...nStyles.mono, fontSize: 13, color: N.accent,
            }}>MA</div>
            <div style={{ textAlign: 'left' }}>
              <div style={{ fontSize: 14, fontWeight: 500 }}>Michael Adesanya</div>
              <div style={{ ...nStyles.mono, fontSize: 11, color: N.inkMute, marginTop: 2 }}>Owner · Adesanya Engineering Group</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ================================================================ */
/*  CTA + FOOTER                                                     */
/* ================================================================ */
function CTA({ onBook, isMobile, isTablet, nStyles }) {
  return (
    <section style={{ padding: isMobile ? '60px 0 40px' : '120px 0 80px' }}>
      <div style={nStyles.container}>
        <div style={{
          position: 'relative', overflow: 'hidden',
          borderRadius: 16, padding: isMobile ? '40px 24px' : '80px 64px',
          background: N.surface,
          border: `1px solid ${N.line}`,
        }}>
          <div style={{
            position: 'absolute', top: -100, right: -100, width: 400, height: 400,
            background: `radial-gradient(circle, ${N.accentGlow}, transparent 60%)`,
            filter: 'blur(40px)',
          }} />
          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.3fr 1fr', gap: isMobile ? 32 : 40, alignItems: isMobile ? 'start' : 'center' }}>
            <div>
              <div style={{ ...nStyles.mono, fontSize: 11, color: N.accent, letterSpacing: '0.14em', marginBottom: 16 }}>$ fortis init</div>
              <h2 style={{ fontSize: isMobile ? 32 : 56, fontWeight: 500, margin: 0, letterSpacing: '-0.035em', lineHeight: 1.05 }}>
                Books open in 14 days.<br/>
                <span style={{ color: N.accent }}>Or your setup's free.</span>
              </h2>
              <p style={{ fontSize: isMobile ? 14 : 16, color: N.inkSoft, marginTop: 20, maxWidth: 500 }}>
                Start with a 30-minute consult. We'll map your stack, scope the work, and quote a fixed fee. No sales theater.
              </p>
            </div>
            <div style={{ textAlign: isMobile ? 'left' : 'right' }}>
              <button onClick={onBook} style={{
                ...nStyles.btn, background: N.accent, color: N.bg,
                padding: '16px 28px', fontSize: 15, fontWeight: 600,
                boxShadow: `0 0 40px ${N.accentGlow}`,
                width: isMobile ? '100%' : 'auto',
              }}>Book a consult {!isMobile && '→'}</button>
              <div style={{ ...nStyles.mono, fontSize: 11, color: N.inkMute, marginTop: 14, textAlign: isMobile ? 'left' : 'right' }}>
                avg response · 47 min
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ isMobile, isTablet, nStyles }) {
  return (
    <footer style={{ padding: isMobile ? '40px 0 30px' : '60px 0 40px', borderTop: `1px solid ${N.line}` }}>
      <div style={nStyles.container}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? '1fr 1fr' : '1.8fr 1fr 1fr 1fr 1fr', gap: isMobile ? 32 : 32, paddingBottom: 40 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
              <svg width="24" height="24" viewBox="0 0 40 40">
                <path d="M4 4 H36 V13 H13 V18 H28 V27 H13 V36 H4 Z" fill={N.slate} />
                <path d="M10 10 H30 V15 H15 V20 H25 V25 H15 V30 H10 Z" fill={N.teal} />
                <rect x="16" y="26" width="8" height="8" fill={N.sage} />
              </svg>
              <span style={{ fontSize: 15, fontWeight: 600, letterSpacing: '0.08em' }}>FORTIS</span>
            </div>
            <div style={{ fontSize: 13, color: N.inkMute, maxWidth: 280, lineHeight: 1.6 }}>
              Accounting engineered. Based in Mississauga, ON.<br/>
              Serving businesses across the US and Canada.
            </div>
            <div style={{ display: 'flex', gap: 8, marginTop: 20 }}>
              {['SOC2', 'AICPA', 'IRS e-file'].map((b, i) => (
                <div key={i} style={{ ...nStyles.tag, fontSize: 10 }}>{b}</div>
              ))}
            </div>
          </div>
          {[
            { h: 'SERVICES', l: [['Overview','Services.html'],['Bookkeeping','Bookkeeping.html'],['Tax','Tax.html'],['Payroll','Payroll.html'],['CFO Advisory','CFO Advisory.html']] },
            { h: 'WHO WE SERVE', l: [['All industries','Clients.html'],['Restaurants','restaurants.html'],['Dental & Medical','dental.html'],['Law Firms','law-firms.html'],['Trade & Construction','construction.html'],['eCommerce','eCommerce.html']] },
            { h: 'COMPANY', l: [['About','About.html'],['How it works','How It Works.html'],['Client portal','Client Portal.html']] },
            { h: 'CONTACT', l: [['hello@fortisaccounting.co','mailto:hello@fortisaccounting.co'],['+1 (909) 647 5586','tel:+19096475586'],['Mississauga, ON · Canada','#'],['US + CA operations','#']] },
          ].map((c, i) => (
            <div key={i}>
              <div style={{ ...nStyles.mono, fontSize: 11, letterSpacing: '0.14em', color: N.accent, marginBottom: 14 }}>{c.h}</div>
              {c.l.map(([t, h], j) => (
                <a key={j} href={h} style={{ display: 'block', fontSize: 13, padding: '4px 0', color: N.inkSoft, textDecoration: 'none' }}>{t}</a>
              ))}
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 24, borderTop: `1px solid ${N.line}`, fontSize: 12, color: N.inkMute, ...nStyles.mono }}>
          <div>© 2026 Fortis Accounting, LLC · v2.26.4</div>
          <div style={{ display: 'flex', gap: 24 }}>
            <span>system ● all clear</span>
            <span>privacy</span>
            <span>terms</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ================================================================ */
/*  ROOT                                                             */
/* ================================================================ */
function DirectionNeon({ onBook }) {
  const isMobile = useMediaQuery('(max-width: 768px)');
  const isTablet = useMediaQuery('(max-width: 1024px)');
  const nStyles = getResponsiveStyles(isMobile, isTablet);

  return (
    <div style={nStyles.page}>
      <Nav onBook={onBook} nStyles={nStyles} isMobile={isMobile} isTablet={isTablet} />
      <Hero onBook={onBook} nStyles={nStyles} isMobile={isMobile} isTablet={isTablet} />
      <Logos isMobile={isMobile} isTablet={isTablet} nStyles={nStyles} />
      <Services isMobile={isMobile} isTablet={isTablet} nStyles={nStyles} />
      <Platform isMobile={isMobile} isTablet={isTablet} nStyles={nStyles} />
      <Team isMobile={isMobile} isTablet={isTablet} nStyles={nStyles} />
      <Pricing onBook={onBook} isMobile={isMobile} isTablet={isTablet} nStyles={nStyles} />
      <Testimonial isMobile={isMobile} isTablet={isTablet} nStyles={nStyles} />
      <CTA onBook={onBook} isMobile={isMobile} isTablet={isTablet} nStyles={nStyles} />
      <Footer isMobile={isMobile} isTablet={isTablet} nStyles={nStyles} />
    </div>
  );
}

window.DirectionNeon = DirectionNeon;
window.NEON_THEME = N;