const Nav = ({ variant = 'light' }) => {
  const dark = variant === 'dark';
  const [menuOpen, setMenuOpen] = React.useState(false);

  const navLinks = [
    { label: 'Accueil', href: 'https://www.fundora.fr/' },
    { label: 'Fundora Plus', href: 'https://www.fundora.fr/fundora-plus' },
    { label: 'Nos services', href: 'https://www.fundora.fr/nos-services' },
    { label: 'À propos', href: 'https://www.fundora.fr/a-propos' },
    { label: 'Blog', href: 'https://www.fundora.fr/news' },
  ];

  return (
    <nav className="lp-nav" style={{
      position: 'sticky', top: 0, zIndex: 50,
      height: 80, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '0 40px', background: dark ? '#1E1E1E' : '#fff',
      borderBottom: dark ? '1px solid #2a2a2a' : '1px solid #EEE',
      fontFamily: 'var(--font-sans)'
    }}>
      <a href="https://www.fundora.fr/" rel="noopener" style={{ display: 'flex', alignItems: 'center' }}>
        <img
          src="assets/logo-fundora-black.svg"
          alt="Fundora"
          style={{ height: 26, filter: dark ? 'invert(1)' : 'none' }}
        />
      </a>

      {/* Desktop links */}
      <div className="nav-links" style={{ display: 'flex', gap: 32, alignItems: 'center' }}>
        {navLinks.map(l => (
          <a key={l.label} href={l.href} target="_blank" rel="noopener" style={{
            fontSize: 14, fontWeight: 500,
            color: dark ? '#E6E6E6' : '#1E1E1E',
            textDecoration: 'none'
          }}>{l.label}</a>
        ))}
      </div>

      <div style={{ display: 'flex', gap: 12 }}>
        <a
          href="https://invest.fundora.fr/?utm_source=LP%20dette&utm_campaign=bridge%20cr%C3%A9dit"
          target="_blank" rel="noopener"
          className="nav-cta-secondary"
          style={{
            background: 'transparent',
            border: `1px solid ${dark ? '#E6E6E6' : '#1E1E1E'}`,
            color: dark ? '#fff' : '#1E1E1E',
            borderRadius: 999, padding: '10px 20px',
            fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
            textDecoration: 'none', display: 'inline-flex', alignItems: 'center'
          }}>Connexion</a>
        <a
          href="https://invest.fundora.fr/?utm_source=LP%20dette&utm_campaign=bridge%20cr%C3%A9dit"
          target="_blank" rel="noopener"
          style={{
            background: dark ? '#fff' : '#1E1E1E',
            color: dark ? '#1E1E1E' : '#fff',
            border: 'none', borderRadius: 999, padding: '10px 20px',
            fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
            textDecoration: 'none', display: 'inline-flex', alignItems: 'center'
          }}>Inscription</a>
      </div>
    </nav>
  );
};
window.Nav = Nav;