// Fixed, blurred navigation bar.
// Wordmark left · mono link labels (flex-1) · coral CTA · theme toggle - all
// bound to the same centered 1240 container so the row stays aligned on wide screens.
const Nav = ({ links = [
  { href: '#problem',      label: 'The Problem' },
  { href: '#solution',     label: 'The Solution' },
  { href: '#engagements',  label: 'Engagements' },
  { href: '#founders',     label: 'Founders' },
  { href: '#faq',          label: 'FAQ' },
]}) => {
  const toggleTheme = () => {
    const root = document.documentElement;
    const dark = root.getAttribute('data-theme') === 'dark';
    if (dark) root.removeAttribute('data-theme'); else root.setAttribute('data-theme', 'dark');
    try { localStorage.setItem('mdai-theme', dark ? 'light' : 'dark'); } catch (e) {}
  };
  return (
    <nav style={navStyles.bar}>
      <div style={navStyles.inner}>
        <a href="#" style={navStyles.brand}>MISSION DRIVEN AI</a>
        <div style={navStyles.links} className="mdai-nav-links">
          {links.map(l => (
            <a key={l.href} href={l.href} style={navStyles.link}>{l.label}</a>
          ))}
        </div>
        <a href="get-in-touch.html" style={navStyles.cta} className="mdai-nav-cta">
          Get In Touch
        </a>
        <button type="button" onClick={toggleTheme} style={navStyles.toggle}
          aria-label="Toggle light or dark theme" title="Toggle theme">◐</button>
      </div>
      <style>{`
        .mdai-nav-cta:hover { filter: brightness(0.92); }
        @media (max-width: 760px) { .mdai-nav-links { display: none; } }
      `}</style>
    </nav>
  );
};

const navStyles = {
  bar: {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
    background: 'rgba(245,243,238,0.78)',
    backdropFilter: 'blur(20px)',
    WebkitBackdropFilter: 'blur(20px)',
    borderBottom: '1px solid var(--border-gold)',
  },
  inner: {
    maxWidth: 1240, margin: '0 auto', padding: '0 32px', height: 64,
    display: 'flex', alignItems: 'center', gap: 16,
  },
  brand: {
    fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.18em',
    color: 'var(--fg-accent)', textDecoration: 'none', border: 0,
  },
  links: { flex: 1, display: 'flex', alignItems: 'center', gap: 24, marginLeft: 16 },
  link: {
    fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em',
    textTransform: 'uppercase', color: 'var(--fg-1)', opacity: 0.65,
    textDecoration: 'none', border: 0,
    transition: 'opacity 160ms cubic-bezier(0.22,0.61,0.36,1), color 160ms',
  },
  cta: {
    background: 'var(--coral)', color: 'var(--paper)',
    padding: '10px 18px', borderRadius: 4, whiteSpace: 'nowrap',
    fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em',
    textTransform: 'uppercase', fontWeight: 500, textDecoration: 'none', border: 0,
    transition: 'filter 160ms cubic-bezier(0.22,0.61,0.36,1)',
  },
  toggle: {
    width: 40, height: 40, borderRadius: 4, flex: '0 0 auto',
    border: '1px solid var(--border-gold)', background: 'var(--bg-elev-1)',
    color: 'var(--fg-accent)', fontFamily: 'var(--font-mono)', fontSize: 14,
    cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
    transition: 'all 160ms cubic-bezier(0.22,0.61,0.36,1)',
  },
};

Object.assign(window, { Nav });