// ── Nav V2 — editorial light navbar with pill demo CTA ────────
const PAGE_IDS = new Set(['scenarios', 'faq', 'contact']);

function Mk2Nav({ onNav, currentPage = 'home' }) {
  const links = [
    { id: 'solution',  label: 'Solution',   scroll: true  },
    { id: 'useCases',  label: 'Pour qui ?', scroll: true  },
    { id: 'scenarios', label: 'Scénarios',  scroll: false },
    { id: 'faq',       label: 'FAQ',        scroll: false },
    { id: 'contact',   label: 'Contact',    scroll: false },
  ];

  const isActive = (id) => {
    if (PAGE_IDS.has(id)) return currentPage === id;
    return currentPage === 'home';
  };

  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(246,241,234,0.88)',
      backdropFilter: 'saturate(180%) blur(14px)',
      borderBottom: '1px solid var(--mk2-hair)',
    }}>
      <div className="mk2-container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 72 }}>

        {/* Logo */}
        <a href="#" onClick={(e) => { e.preventDefault(); onNav?.('home'); }}
          style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}>
          <Mk2Mark size={48}/>
          <span className="mk2-display" style={{ fontSize: 26, letterSpacing: '-0.03em', lineHeight: 1 }}>miikaa</span>
        </a>

        {/* Links */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
          {links.map(({ id, label }) => {
            const active = isActive(id);
            return (
              <a key={id} href={PAGE_IDS.has(id) ? `#${id}` : `#`}
                onClick={(e) => { e.preventDefault(); onNav?.(id); }}
                style={{
                  position: 'relative',
                  color: active ? 'var(--mk2-ember)' : 'var(--mk2-text-2)',
                  fontSize: 14,
                  fontWeight: active ? 500 : 450,
                  textDecoration: 'none',
                  display: 'inline-flex',
                  alignItems: 'center',
                  paddingBottom: 4,
                  transition: 'color 0.18s',
                }}
                onMouseEnter={e => { e.currentTarget.style.color = 'var(--mk2-ember)'; }}
                onMouseLeave={e => { e.currentTarget.style.color = active ? 'var(--mk2-ember)' : 'var(--mk2-text-2)'; }}
              >
                {label}
                {active && (
                  <span style={{
                    position: 'absolute', bottom: -2, left: 0, right: 0,
                    height: 1.5, borderRadius: 1,
                    background: 'var(--mk2-ember)',
                  }}/>
                )}
              </a>
            );
          })}
        </div>

        {/* CTA */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <a href="#" style={{ fontSize: 13, color: 'var(--mk2-muted)', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            <Mk2Globe size={14}/> FR
          </a>
          <button className="mk2-btn mk2-btn-primary" onClick={() => onNav?.('contact')}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#9BE88C' }}/>
            Obtenir une démo
          </button>
        </div>
      </div>
    </nav>
  );
}

// Logo mark — deux points (ii de Miikaa)
function Mk2Mark({ size = 30, color = 'var(--mk2-ink)' }) {
  const dot = size * 0.18;
  const gap = size * 0.32;
  const w = dot * 2 + gap;
  return (
    <svg width={w} height={dot} viewBox={`0 0 ${w} ${dot}`} style={{ display: 'inline-block', verticalAlign: 'middle' }}>
      <circle cx={dot / 2} cy={dot / 2} r={dot / 2} fill={color}/>
      <circle cx={dot + gap + dot / 2} cy={dot / 2} r={dot / 2} fill={color}/>
    </svg>
  );
}

window.Mk2Nav = Mk2Nav;
window.Mk2Mark = Mk2Mark;
window.PAGE_IDS = PAGE_IDS;