// Top nav

function Nav({ current }) {
  const { Icon } = window;
  const links = [
    ['Acheter', 'acheter.html'],
    ['Vendre', 'vendre.html'],
    ['Paiement', 'paiement.html'],
    ['Tarifs', 'tarifs.html'],
    ['À propos', 'a-propos.html'],
    ['Contact', 'contact.html'],
  ];
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'color-mix(in srgb, var(--bg) 80%, transparent)',
      backdropFilter: 'blur(20px) saturate(140%)',
      WebkitBackdropFilter: 'blur(20px) saturate(140%)',
      borderBottom: '1px solid var(--border)',
    }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 64 }}>
        <a href="index.html" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <Icon.Logo />
          <span style={{ fontWeight: 600, fontSize: 16, letterSpacing: '-0.02em' }}>MesMarChands</span>
          <span className="chip" style={{ height: 20, fontSize: 10, padding: '0 7px', marginLeft: 4 }}>FR</span>
        </a>
        <div style={{ display: 'flex', alignItems: 'center', gap: 28, fontSize: 14, color: 'var(--ink-2)' }}>
          {links.map(([l, href]) => {
            const active = current === l;
            return (
              <a key={l} href={href} className="nav-link" style={{
                position: 'relative',
                color: active ? 'var(--ink)' : 'var(--ink-2)',
                fontWeight: active ? 600 : 400,
              }}>
                {l}
                {active && (
                  <span style={{
                    position: 'absolute', left: 0, right: 0, bottom: -22,
                    height: 2, background: 'var(--accent)', borderRadius: 2,
                  }} />
                )}
              </a>
            );
          })}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <a className="btn btn-sm btn-ghost">Connexion</a>
          <a className="btn btn-sm btn-primary">Ouvrir ma boutique <Icon.Arrow /></a>
        </div>
      </div>
    </nav>
  );
}

window.Nav = Nav;