function Nav({ onOpenModal }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 24);
    on();
    window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);

  return (
    <header className={`fixed top-0 inset-x-0 z-50 transition-all ${scrolled ? 'navglass' : ''}`}>
      <div className="mx-auto max-w-7xl px-3 sm:px-6 lg:px-8 h-[64px] sm:h-[72px] grid grid-cols-[1fr_auto_1fr] items-center gap-2 sm:gap-4">
        {/* LEFT — logo */}
        <div className="justify-self-start">
          <a href="#top" className="inline-flex items-center gap-1.5 sm:gap-2.5 group">
            <span className="relative inline-flex items-center justify-center transition-transform group-hover:scale-105 w-8 h-8 sm:w-10 sm:h-10">
              <span className="absolute inset-0 rounded-full bg-violet-600/25 blur-md group-hover:bg-violet-600/50 transition-colors"></span>
              <img src={window.__resources.flowoLogo} alt="Flowo" className="relative w-full h-full object-contain" style={{ filter: 'drop-shadow(0 2px 12px rgba(124,58,237,0.45))' }} />
            </span>
            <span className="font-display font-semibold tracking-tight text-paper-50 text-[19px] sm:text-[26px] md:text-[28px] leading-none">Flowo</span>
          </a>
        </div>

        {/* CENTER — action principale : configurateur (mise en avant) */}
        <div className="justify-self-center">
          <a
            href="/configurateur"
            className="btn-primary !py-2 sm:!py-2.5 !pl-3.5 sm:!pl-4 !pr-4 sm:!pr-5 !text-[12px] sm:!text-[13.5px] !gap-1.5 whitespace-nowrap"
            aria-label="Configurer mon offre"
          >
            <Icon.Spark className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
            <span className="hidden xs:inline sm:inline">Configurer mon offre</span>
            <span className="xs:hidden sm:hidden">Configurer</span>
            <Icon.Arrow className="w-3 h-3 sm:w-3.5 sm:h-3.5" />
          </a>
        </div>

        {/* RIGHT — action secondaire : réserver un appel */}
        <div className="justify-self-end">
          <a
            href="mailto:contact@helloflowo.ch?subject=Appel%20découverte%20Flowo"
            className="btn-ghost !py-2 sm:!py-2.5 !px-3 sm:!px-4 !text-[11.5px] sm:!text-[12.5px] !gap-1.5"
            aria-label="Réserver un appel"
          >
            <svg viewBox="0 0 24 24" className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z" /></svg>
            <span className="hidden sm:inline">Réserver un appel</span>
            <span className="sm:hidden">Appel</span>
          </a>
        </div>
      </div>
    </header>
  );
}

window.Nav = Nav;