// Header — fixed top bar with scroll state
function Header() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <header className={'site-header' + (scrolled ? ' scrolled' : '')}>
      <div className="container bar">
        <a href="#" className="brand">
          <img src={window.R('logo','assets/logo/logo.png')} alt="Myrrae" />
          <span className="word"><em style={{fontStyle:'italic'}}>M</em>yrrae</span>
        </a>
        <nav>
          <a href="#essai">Essayage</a>
          <a href="#styliste">Styliste IA</a>
          <a href="#marques">Marques</a>
          <a href="#avis">Avis</a>
          <a href="#faq">FAQ</a>
        </nav>
        <div className="header-actions">
          <a href="contact.html" className="cta ghost">Nous contacter</a>
          <a href="#telecharger" className="cta">Télécharger</a>
        </div>
      </div>
    </header>
  );
}

window.Header = Header;