/* ================================================================ */
/*  SHARED CHROME — palette, nav, footer, helpers                    */
/*  All pages import this via <script src>.                          */
/* ================================================================ */

const N = {
  bg: '#04060A',
  surface: '#0D1524',
  surface2: '#1A2540',
  surface3: '#253149',
  line: 'rgba(217,229,236,0.12)',
  lineStrong: 'rgba(217,229,236,0.22)',
  ink: '#FFFFFF',
  inkSoft: '#D9E5EC',
  inkMute: '#5A6B76',
  slate: '#8FA0D8',
  teal: '#4FB8D8',
  sage: '#E8F8F0',
  accent: '#00FFE0',
  accentDim: '#00DECE',
  accentGlow: 'rgba(0,255,224,0.55)',
  accentGlowStrong: 'rgba(0,255,224,0.85)',
  success: '#00FFE0',
  warn: '#F2B97C',
  danger: '#FF6B6B',
};

const nStyles = {
  page: {
    background: N.bg,
    color: N.ink,
    fontFamily: '"Space Grotesk", "Inter", system-ui, sans-serif',
    fontSize: 15,
    lineHeight: 1.55,
    width: '100%',
    minHeight: '100%',
  },
  mono: { fontFamily: '"JetBrains Mono", ui-monospace, "SF Mono", monospace' },
  container: { maxWidth: 1240, margin: '0 auto', padding: '0 48px' },
  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', textDecoration: 'none',
  },
  glow: { boxShadow: `0 0 0 1px ${N.accent}, 0 0 24px rgba(0,255,224,0.55)` },
  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 rgba(217,229,236,0.12)`, background: '#0D1524',
    color: '#D9E5EC',
  },
  h1: { fontSize: 72, fontWeight: 500, margin: 0, letterSpacing: '-0.04em', lineHeight: 1.02 },
  h2: { fontSize: 48, fontWeight: 500, margin: 0, letterSpacing: '-0.03em', lineHeight: 1.08 },
  h3: { fontSize: 28, fontWeight: 500, margin: 0, letterSpacing: '-0.02em', lineHeight: 1.2 },
  label: { fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: '0.14em', color: '#00FFE0', textTransform: 'uppercase' },
};

function useMediaQuery(query) {
  const [matches, setMatches] = React.useState(() => window.matchMedia(query).matches);
  React.useEffect(() => {
    const media = window.matchMedia(query);
    const listener = (e) => setMatches(e.matches);
    media.addEventListener('change', listener);
    return () => media.removeEventListener('change', listener);
  }, [query]);
  return matches;
}

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>
  );
}

/* ---------- LOGO ---------- */
function FortisLogo({ size = 34, showWordmark = true, version = 'v2.26' }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <div style={{ position: 'relative', filter: `drop-shadow(0 0 10px ${N.accentGlow})` }}>
        <svg width={size} height={size} viewBox="0 0 40 40">
          <defs>
            <linearGradient id={`fortis-outer-${size}`} 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-${size}`} 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-${size})`} />
          <path d="M10 10 H30 V15 H15 V20 H25 V25 H15 V30 H10 Z" fill={`url(#fortis-inner-${size})`} opacity="0.95" />
          <rect x="16" y="26" width="8" height="8" fill={N.accent} />
        </svg>
      </div>
      {showWordmark && (
        <>
          <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>
          {version && (
            <span style={{ ...nStyles.mono, fontSize: 10, color: N.accent, padding: '2px 7px', border: `1px solid ${N.accent}`, borderRadius: 3, marginLeft: 6, background: N.accentGlow.replace('0.55', '0.08'), letterSpacing: '0.1em' }}>{version}</span>
          )}
        </>
      )}
    </div>
  );
}

/* ---------- NAV ---------- */
const NAV_LINKS = [
  { label: 'Services', href: 'Services.html', submenu: [
    { label: 'Overview', href: 'Services.html' },
    { label: 'Bookkeeping', href: 'Bookkeeping.html' },
    { label: 'Tax', href: 'Tax.html' },
    { label: 'Payroll', href: 'Payroll.html' },
    { label: 'CFO Advisory', href: 'CFO Advisory.html' },
  ]},
  { label: 'Who We Serve', href: 'Clients.html', submenu: [
    { label: 'All industries', href: 'Clients.html' },
    { label: '—', sep: true },
    { label: 'Restaurants', href: 'restaurants.html' },
    { label: 'Dental Practices', href: 'dental.html' },
    { label: 'Medical Practices', href: 'medical.html' },
    { label: 'Law Firms', href: 'law-firms.html' },
    { label: 'Real Estate', href: 'real-estate.html' },
    { label: 'Construction', href: 'construction.html' },
    { label: 'Auto Repair', href: 'auto-repair.html' },
    { label: 'HVAC & Plumbing', href: 'hvac-plumbing.html' },
    { label: 'Salons & Spas', href: 'salons.html' },
    { label: 'Fitness Studios', href: 'fitness.html' },
    { label: 'Trucking', href: 'trucking.html' },
    { label: 'Wholesale & Distribution', href: 'wholesale.html' },
    { label: 'Marketing Agencies', href: 'marketing-agencies.html' },
    { label: 'IT / MSP', href: 'it-services.html' },
    { label: 'Manufacturing', href: 'manufacturing.html' },
    { label: '—', sep: true },
    { label: 'Multi-Unit Franchises', href: 'Multi-Unit Franchises.html' },
    { label: 'eCommerce', href: 'eCommerce.html' },
  ]},
  { label: 'How It Works', href: 'How It Works.html' },
  { label: 'About', href: 'About.html' },
];

function Nav({ onBook, current }) {
  const isMobile = useMediaQuery('(max-width: 768px)');
  const [open, setOpen] = React.useState(null);
  const [menuOpen, setMenuOpen] = React.useState(false);

  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(4,6,10,0.78)',
      backdropFilter: 'blur(16px)',
      borderBottom: `1px solid ${N.line}`,
    }}>
      <div style={{
        ...nStyles.container,
        padding: isMobile ? '0 20px' : '0 48px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        height: isMobile ? 56 : 72,
      }}>
        <a href="Fortis Accounting.html" style={{ textDecoration: 'none', color: 'inherit' }}>
          <FortisLogo size={isMobile ? 28 : 34} showWordmark={!isMobile} version={isMobile ? null : 'v2.26'} />
        </a>

        {!isMobile && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 48 }}>
            <div style={{ display: 'flex', gap: 28, fontSize: 14, color: N.inkSoft }}>
              {NAV_LINKS.map(link => {
                const active = current === link.label;
                return (
                  <div
                    key={link.label}
                    style={{ position: 'relative' }}
                    onMouseEnter={() => link.submenu && setOpen(link.label)}
                    onMouseLeave={() => setOpen(null)}
                  >
                    <a href={link.href} style={{
                      color: active ? N.accent : 'inherit',
                      textDecoration: 'none', padding: '8px 0',
                      display: 'inline-flex', alignItems: 'center', gap: 4,
                      borderBottom: active ? `1px solid ${N.accent}` : '1px solid transparent',
                    }}>
                      {link.label}
                      {link.submenu && <span style={{ fontSize: 9, opacity: 0.6, marginTop: 2 }}>▼</span>}
                    </a>
                    {link.submenu && open === link.label && (
                      <div style={{
                        position: 'absolute', top: '100%', left: -16,
                        background: N.surface, border: `1px solid ${N.lineStrong}`,
                        borderRadius: 6, padding: 8, minWidth: 220,
                        boxShadow: `0 20px 60px rgba(0,0,0,0.6), 0 0 20px ${N.accentGlow}`,
                        marginTop: 0,
                      }}>
                        {link.submenu.map((s, si) => (
                          s.sep ? (
                            <div key={'sep'+si} style={{ height: 1, background: N.line, margin: '6px 8px' }} />
                          ) : (
                            <a key={s.label} href={s.href} style={{
                              display: 'block', padding: '10px 14px',
                              fontSize: 13, color: N.inkSoft, textDecoration: 'none', borderRadius: 4,
                            }}
                            onMouseEnter={e => { e.currentTarget.style.background = N.surface2; e.currentTarget.style.color = N.accent; }}
                            onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = N.inkSoft; }}
                            >{s.label}</a>
                          )
                        ))}
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        )}

        {!isMobile ? (
          <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,
              ...nStyles.mono, 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,
              boxShadow: `0 0 20px ${N.accentGlow}`, fontWeight: 600,
            }}>
              Book a consult
              <span style={{ ...nStyles.mono, fontSize: 10, opacity: 0.7 }}>↵</span>
            </button>
          </div>
        ) : (
          <button onClick={() => setMenuOpen(!menuOpen)} style={{
            background: 'transparent', border: 'none', color: N.accent,
            cursor: 'pointer', fontSize: 22, padding: 8, lineHeight: 1,
          }}>
            {menuOpen ? '✕' : '☰'}
          </button>
        )}
      </div>

      {isMobile && menuOpen && (
        <div style={{ background: N.surface, borderTop: `1px solid ${N.line}`, padding: '16px 20px' }}>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {NAV_LINKS.map(link => (
              <a key={link.label} href={link.href} style={{
                color: current === link.label ? N.accent : N.inkSoft,
                textDecoration: 'none', fontSize: 16, padding: '12px 0',
                borderBottom: `1px solid ${N.line}`,
              }}>{link.label}</a>
            ))}
            <a href="Client Portal.html" style={{
              color: N.accent, textDecoration: 'none', fontSize: 13,
              padding: '12px 0', borderBottom: `1px solid ${N.line}`,
              ...nStyles.mono, letterSpacing: '0.08em',
            }}>› CLIENT PORTAL</a>
            <button onClick={onBook} style={{
              ...nStyles.btn, background: N.accent, color: N.bg,
              fontWeight: 600, marginTop: 16, justifyContent: 'center', width: '100%',
            }}>Book a consult</button>
          </div>
        </div>
      )}
    </nav>
  );
}

/* ---------- FOOTER ---------- */
function Footer() {
  const isMobile = useMediaQuery('(max-width: 768px)');
  const isTablet = useMediaQuery('(max-width: 1024px)');

  const cols = [
    { h: 'SERVICES', l: [
      { t: 'Overview', h: 'Services.html' },
      { t: 'Bookkeeping', h: 'Bookkeeping.html' },
      { t: 'Tax', h: 'Tax.html' },
      { t: 'Payroll', h: 'Payroll.html' },
      { t: 'CFO Advisory', h: 'CFO Advisory.html' },
    ]},
    { h: 'INDUSTRIES', l: [
      { t: 'Overview', h: 'Industries.html' },
      { t: 'Multi-Unit Franchises', h: 'Multi-Unit Franchises.html' },
      { t: 'eCommerce', h: 'eCommerce.html' },
    ]},
    { h: 'CLIENTS', l: [
      { t: 'All client types', h: 'Clients.html' },
      { t: 'Restaurants & Cafés', h: 'restaurants.html' },
      { t: 'Dental Practices', h: 'dental.html' },
      { t: 'Medical Practices', h: 'medical.html' },
      { t: 'Law Firms', h: 'law-firms.html' },
      { t: 'Real Estate', h: 'real-estate.html' },
    ]},
    { h: 'COMPANY', l: [
      { t: 'About', h: 'About.html' },
      { t: 'How it works', h: 'How It Works.html' },
      { t: 'Client portal', h: 'Client Portal.html' },
    ]},
    { h: 'CONTACT', l: [
      { t: 'hello@fortisaccounting.co', h: 'mailto:hello@fortisaccounting.co' },
      { t: '+1 (909) 647 5586', h: 'tel:+19096475586' },
      { t: 'Mississauga, ON · Canada', h: '#' },
      { t: 'US + CA operations', h: '#' },
    ]},
  ];

  return (
    <footer style={{ padding: isMobile ? '40px 0 24px' : '80px 0 40px', borderTop: `1px solid ${N.line}`, background: N.bg }}>
      <div style={{ ...nStyles.container, padding: isMobile ? '0 20px' : '0 48px' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : '1.8fr 1fr 1fr 1fr 1fr',
          gap: isMobile ? 32 : 40,
          paddingBottom: isMobile ? 32 : 48,
        }}>
          <div>
            <FortisLogo size={28} version={null} />
            <div style={{ fontSize: 13, color: N.inkMute, maxWidth: 300, lineHeight: 1.6, marginTop: 20 }}>
              Fully digital accounting, completely human service. Bookkeeping, tax, payroll and CFO advisory for ambitious small businesses in the US and Canada.
            </div>
            <div style={{ display: 'flex', gap: 8, marginTop: 24, flexWrap: 'wrap' }}>
              {['SOC2', 'CPA Canada', 'IRS e-file', 'Xero Gold'].map((b, i) => (
                <div key={i} style={{ ...nStyles.tag, fontSize: 10 }}>{b}</div>
              ))}
            </div>
          </div>
          {cols.map((c, i) => (
            <div key={i}>
              <div style={{ ...nStyles.mono, fontSize: 11, letterSpacing: '0.14em', color: N.accent, marginBottom: 18 }}>{c.h}</div>
              {c.l.map((x, j) => (
                <a key={j} href={x.h} style={{ display: 'block', fontSize: 13, padding: '5px 0', color: N.inkSoft, textDecoration: 'none' }}
                  onMouseEnter={e => e.currentTarget.style.color = N.accent}
                  onMouseLeave={e => e.currentTarget.style.color = N.inkSoft}
                >{x.t}</a>
              ))}
            </div>
          ))}
        </div>
        <div style={{
          display: 'flex', flexDirection: isMobile ? 'column' : 'row',
          gap: isMobile ? 12 : 0,
          justifyContent: 'space-between', paddingTop: 28,
          borderTop: `1px solid ${N.line}`, fontSize: 12, color: N.inkMute, ...nStyles.mono,
        }}>
          <div>© 2026 Fortis Accounting. All rights reserved. · v2.26.4</div>
          <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: N.accent, boxShadow: `0 0 8px ${N.accent}` }} />
              system · all clear
            </span>
            <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>privacy</a>
            <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>terms</a>
            <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>security</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ---------- PAGE WRAPPER ---------- */
function Page({ onBook, current, children }) {
  return (
    <div style={nStyles.page}>
      <Nav onBook={onBook} current={current} />
      {children}
      <Footer />
    </div>
  );
}

/* ---------- REUSABLE SECTIONS ---------- */
function SectionLabel({ children }) {
  return (
    <div style={{ ...nStyles.mono, fontSize: 11, color: N.accent, letterSpacing: '0.18em', marginBottom: 20, display: 'inline-flex', alignItems: 'center', gap: 10 }}>
      <span style={{ width: 20, height: 1, background: N.accent, boxShadow: `0 0 8px ${N.accent}` }} />
      {children}
    </div>
  );
}

function GridBg() {
  return (
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      backgroundImage: `
        linear-gradient(${N.line} 1px, transparent 1px),
        linear-gradient(90deg, ${N.line} 1px, transparent 1px)
      `,
      backgroundSize: '64px 64px',
      maskImage: 'radial-gradient(ellipse at center, #000 30%, transparent 85%)',
      WebkitMaskImage: 'radial-gradient(ellipse at center, #000 30%, transparent 85%)',
    }} />
  );
}

function PageHero({ eyebrow, title, subtitle, accent, children }) {
  const isMobile = useMediaQuery('(max-width: 768px)');
  const _accent = accent || N.accent;
  return (
    <section style={{ position: 'relative', padding: isMobile ? '60px 0 48px' : '110px 0 90px', borderBottom: `1px solid ${N.line}`, overflow: 'hidden' }}>
      <GridBg />
      <div style={{
        position: 'absolute', top: -120, right: -120, width: 420, height: 420,
        background: `radial-gradient(circle, ${_accent}33 0%, transparent 60%)`,
        filter: 'blur(40px)', pointerEvents: 'none',
      }} />
      <div style={{ ...nStyles.container, padding: isMobile ? '0 20px' : '0 48px', position: 'relative' }}>
        <SectionLabel>{eyebrow}</SectionLabel>
        <h1 style={{ ...nStyles.h1, fontSize: isMobile ? 38 : 72, maxWidth: 960 }}>{title}</h1>
        {subtitle && (
          <p style={{ fontSize: isMobile ? 15 : 19, color: N.inkSoft, marginTop: isMobile ? 16 : 24, maxWidth: 720, lineHeight: 1.5 }}>
            {subtitle}
          </p>
        )}
        {children && <div style={{ marginTop: 36 }}>{children}</div>}
      </div>
    </section>
  );
}

function CTAStrip({ onBook, line1, line2 }) {
  const isMobile = useMediaQuery('(max-width: 768px)');
  return (
    <section style={{ padding: isMobile ? '60px 0' : '100px 0', borderTop: `1px solid ${N.line}`, background: N.bg, position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
        width: 900, height: 360,
        background: `radial-gradient(ellipse, ${N.accent}22 0%, transparent 70%)`,
        filter: 'blur(50px)', pointerEvents: 'none',
      }} />
      <div style={{ ...nStyles.container, padding: isMobile ? '0 20px' : '0 48px', position: 'relative' }}>
        <div style={{
          border: `1px solid ${N.lineStrong}`, borderRadius: 12, padding: isMobile ? '36px 24px' : 56,
          background: `linear-gradient(135deg, ${N.surface} 0%, ${N.surface2} 100%)`,
          boxShadow: `0 0 80px ${N.accentGlow}`,
          display: 'flex', flexDirection: isMobile ? 'column' : 'row',
          alignItems: isMobile ? 'flex-start' : 'center',
          justifyContent: 'space-between', gap: 32, flexWrap: 'wrap',
        }}>
          <div style={{ flex: '1 1 400px' }}>
            <SectionLabel>$ fortis init</SectionLabel>
            <h2 style={{ ...nStyles.h2, fontSize: isMobile ? 30 : 44 }}>
              {line1 || "Books open in 14 days."}<br/>
              <span style={{ color: N.accent }}>{line2 || "Or your setup's free."}</span>
            </h2>
          </div>
          <div style={{ textAlign: isMobile ? 'left' : 'right', width: isMobile ? '100%' : 'auto' }}>
            <button onClick={onBook} style={{
              ...nStyles.btn, background: N.accent, color: N.bg,
              padding: '18px 32px', fontSize: 15, fontWeight: 600,
              boxShadow: `0 0 40px ${N.accentGlow}`,
              width: isMobile ? '100%' : 'auto', justifyContent: 'center',
            }}>Book a consult →</button>
            <div style={{ ...nStyles.mono, fontSize: 11, color: N.inkMute, marginTop: 14 }}>
              avg response · 47 min
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- EXPORT ---------- */
Object.assign(window, {
  N, nStyles, useMediaQuery, NPlaceholder, FortisLogo, Nav, Footer, Page,
  SectionLabel, GridBg, PageHero, CTAStrip,
  NEON_THEME: N,
});