// Full-bleed hero with rotating background images
window.Hero=function Hero({lang,mode}){
  const t=useT(lang);
  const slides=IMG.hero;
  const [i,setI]=React.useState(0);
  React.useEffect(()=>{
    if(mode!=="rotator") return;
    const id=setInterval(()=>setI(v=>(v+1)%slides.length),5000);
    return ()=>clearInterval(id);
  },[mode,slides.length]);
  return (
    <section className="hero">
      <div className="hero-bg">
        {mode==="rotator"?(
          <div className="hero-bg-rot">
            {slides.map((src,k)=>(
              <div key={k} className={k===i?"on":""}>
                <img src={src} alt="" loading={k===0?"eager":"lazy"}/>
              </div>
            ))}
          </div>
        ):<img src={slides[0]} alt="" loading="eager"/>}
      </div>
      <span className="hero-tag"><i></i>{t.hero_live}</span>
      {mode==="rotator"&&(
        <div className="hero-dots">
          {slides.map((_,k)=><button key={k} className={k===i?"on":""} onClick={()=>setI(k)} aria-label={"slide "+(k+1)}/>)}
        </div>
      )}
      <div className="hero-body">
        <div>
          <div className="eyebrow eb-line">{t.hero_eb}</div>
          <h1 style={{marginTop:18}}>{t.hero_t1}<br/><em>{t.hero_t2}</em></h1>
          <p className="hero-sub">{t.hero_sub}</p>
          <div className="hero-cta">
            <a className="btn btn-primary" href="#/voyageurs">{t.exc_browse}<Icon.arrow/></a>
            <a className="btn btn-ghost" href="#/proprietaires">{t.nav_owner}</a>
          </div>
        </div>
        <div className="hero-stats">
          <div><b>10+</b><span>{t.hero_s1}</span></div>
          <div><b>4.9★</b><span>{t.hero_s2}</span></div>
          <div><b>24/7</b><span>{t.hero_s3}</span></div>
        </div>
      </div>
    </section>
  );
};