// Header with logo, nav, language toggle
window.Header=function Header({lang,setLang,route}){
  const t=useT(lang);
  const [open,setOpen]=React.useState(false);
  const A=({to,children})=>(
    <a href={"#"+to} className={route===to?"active":""} onClick={()=>setOpen(false)}>{children}</a>
  );
  return (
    <header className="site-header">
      <div className="container">
        <a href="#/" className="brand" aria-label="Dynasty Dream">
          <img src="assets/logo.png" alt="Dynasty Dream Ltd"/>
          <div>
            <b>Dynasty Dream</b>
            <small>Mauritius · Ltd</small>
          </div>
        </a>
        <nav className={"nav"+(open?" open":"")}>
          <A to="/voyageurs">{t.nav_traveler}</A>
          <A to="/proprietaires">{t.nav_owner}</A>
          <A to="/tarifs">{t.nav_pricing}</A>
          <A to="/contact">{t.nav_contact}</A>
        </nav>
        <div className="nav-right">
          <div className="lang" role="group" aria-label="Language">
            <button className={lang==="fr"?"on":""} onClick={()=>setLang("fr")}>FR</button>
            <button className={lang==="en"?"on":""} onClick={()=>setLang("en")}>EN</button>
          </div>
          <a href="#/contact" className="btn btn-primary btn-sm">{t.cta_book}</a>
          <button className="menu-toggle" onClick={()=>setOpen(o=>!o)} aria-label="Menu">
            <Icon.menu size={20}/>
          </button>
        </div>
      </div>
    </header>
  );
};