/* Shared chrome for marketing pages — nav + footer that link across the kit. */
(function(){

const NAV_LINKS = [
  { label: 'Platform', href: '/' },
  { label: 'Pricing', href: '/pricing' },
  { label: 'Regulation', href: '/regulations' },
  { label: 'StakeWatch', href: '/stakewatch' },
  { label: 'Pipeline', href: '/pipeline' },
];

const SiteNav = ({ active }) => (
  <nav style={{
    position: 'sticky', top: 0, zIndex: 100,
    background: 'rgba(10,10,11,.85)', backdropFilter: 'blur(20px)',
    borderBottom: '1px solid var(--ct-slate)',
    padding: '16px 48px',
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
  }}>
    <a href="/" style={{ display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none' }}>
      <div style={{
        width: 32, height: 32, background: 'var(--ct-green)', borderRadius: 6,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: 'var(--ct-carbon)', fontFamily: 'var(--ct-serif)', fontSize: 18,
      }}>C</div>
      <div style={{ fontFamily: 'var(--ct-serif)', fontSize: 19, color: 'var(--ct-white)', whiteSpace: 'nowrap' }}>Carbon Titan</div>
    </a>
    <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
      {NAV_LINKS.map(l => (
        <a key={l.label} href={l.href} style={{
          color: l.label === active ? 'var(--ct-green)' : 'var(--ct-cloud)',
          fontSize: 13.5, textDecoration: 'none', fontWeight: 500,
        }}>{l.label}</a>
      ))}
      <a href="/signin" style={{ color: 'var(--ct-smoke)', fontSize: 13.5, textDecoration: 'none' }}>Sign in</a>
      <a href="/request-access" style={{
        padding: '9px 18px', background: 'var(--ct-green)', color: 'var(--ct-carbon)',
        border: 'none', borderRadius: 6, fontSize: 13.5, fontWeight: 600, cursor: 'pointer',
        fontFamily: 'var(--ct-sans)', textDecoration: 'none',
      }}>Request access</a>
    </div>
  </nav>
);

const SiteFooter = () => (
  <footer style={{
    borderTop: '1px solid var(--ct-slate)', padding: '48px 48px 32px',
    background: 'var(--ct-graphite)',
  }}>
    <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.5fr repeat(4, 1fr)', gap: 48 }}>
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
          <div style={{
            width: 28, height: 28, background: 'var(--ct-green)', borderRadius: 5,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'var(--ct-carbon)', fontFamily: 'var(--ct-serif)', fontSize: 16,
          }}>C</div>
          <div style={{ fontFamily: 'var(--ct-serif)', fontSize: 17, color: 'var(--ct-white)', whiteSpace: 'nowrap' }}>Carbon Titan</div>
        </div>
        <p style={{ color: 'var(--ct-smoke)', fontSize: 12.5, lineHeight: 1.6, margin: 0, maxWidth: 280 }}>
          The system of record for corporate carbon. Delaware C-Corp · SOC 2 Type II in progress.
        </p>
      </div>
      {[
        { t: 'Platform', items: [['Overview','/'],['Pipeline','/pipeline'],['Pricing','/pricing'],['StakeWatch','/stakewatch']]},
        { t: 'Regulation', items: [['SBTi','/regulations/sbti'],['SB 253','/regulations/sb-253'],['CSRD','/regulations/csrd'],['ISSB S2','/regulations/issb-s2'],['All regulations','/regulations']]},
        { t: 'Company', items: [['About','/about'],['Contact','/contact'],['Request access','/request-access']]},
        { t: 'Legal', items: [['Privacy','/privacy'],['Terms','/terms']]},
      ].map(col => (
        <div key={col.t}>
          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--ct-smoke)', marginBottom: 14 }}>{col.t}</div>
          {col.items.map(([label,href]) => (
            <a key={label} href={href} style={{ display: 'block', color: 'var(--ct-cloud)', fontSize: 13, textDecoration: 'none', marginBottom: 8 }}>{label}</a>
          ))}
        </div>
      ))}
    </div>
    <div style={{
      maxWidth: 1280, margin: '40px auto 0', paddingTop: 24,
      borderTop: '1px solid var(--ct-slate)',
      display: 'flex', justifyContent: 'space-between',
      fontSize: 11.5, color: 'var(--ct-smoke)', fontFamily: 'var(--ct-mono)',
    }}>
      <div>© 2026 Carbon Titan, Inc.</div>
      <div>Environmental Compute Infrastructure</div>
    </div>
  </footer>
);

Object.assign(window, { SiteNav, SiteFooter });
})();