const { useState, useEffect } = React;

function Nav() {
  const [stuck, setStuck] = useState(false);

  useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      setStuck((prev) => {
        // Hystérésis : seuil plus bas pour désactiver que pour activer
        if (prev) return y > 30;
        return y > 80;
      });
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { label: 'Notre offre', href: '#offre' },
    { label: 'Timeline', href: '#timeline' },
    { label: 'Bénéfices', href: '#benefices' },
  ];

  return (
    <div className={`nav-wrap ${stuck ? 'stuck' : ''}`}>
      <nav className={`nav ${stuck ? 'stuck' : ''}`}>
        <a href="#" className="nav-brand">
          <img src="assets/logo.png" alt="Qorpo" className="nav-brand-logo" />
          <span className="nav-brand-text">Qorpo</span>
        </a>
        {links.map((l) => (
          <a key={l.label} href={l.href} className="nav-link">
            <span className="dot"></span>
            {l.label}
          </a>
        ))}
        <a href="#contact" className="nav-cta">
          Prendre RDV
          <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
            <path d="M1 9L9 1M9 1H2M9 1V8" stroke="currentColor" strokeWidth="1.3"/>
          </svg>
        </a>
      </nav>
    </div>
  );
}

window.Nav = Nav;