// Voyageurs page — excursions + services + vehicles
window.VoyageursPage=function VoyageursPage({lang,allExc,allVeh}){
  const t=useT(lang);const fr=lang==="fr";
  const [open,setOpen]=React.useState(null);
  const [f,setF]=React.useState("all");
  const T=[["all",fr?"Toutes":"All"],["day",fr?"Journée":"Day"],
    ["half",fr?"Demi":"Half"],["free",fr?"Libre":"Free"],["guided",fr?"Guidée":"Guided"]];
  const list=allExc.filter(e=>f==="all"||e.type===f);
  return (
    <>
      <PageHero eb={t.exc_eb} title={t.exc_t} sub={t.exc_s} hue="deep"
        img={IMG.pages.voyageurs} label={fr?"Lagon turquoise":"Turquoise lagoon"}/>
      <section className="section" style={{paddingTop:0}} id="excursions">
        <div className="container">
          <div style={{display:"flex",gap:8,flexWrap:"wrap",marginBottom:32}}>
            {T.map(([k,l])=>(
              <button key={k} onClick={()=>setF(k)}
                className={"chip "+(f===k?"chip-gold":"")}
                style={{cursor:"pointer",border:0,padding:"10px 14px",fontSize:13}}>{l}</button>
            ))}
          </div>
          <div className="grid-3">{list.map(e=><ExcursionCard key={e.id} e={e} lang={lang} onOpen={setOpen}/>)}</div>
        </div>
      </section>
      <section className="section" style={{background:"var(--sand-2)"}} id="services">
        <div className="container">
          <SectionHead eb={t.svc_eb} title={t.svc_t} sub={t.svc_s}/>
          <Carousel>{TRAVELER_SERVICES.map(s=><ServiceCard key={s.id} s={s} lang={lang}/>)}</Carousel>
        </div>
      </section>
      <section className="section" id="cars">
        <div className="container">
          <SectionHead eb={t.veh_eb} title={t.veh_t} sub={t.veh_s}/>
          <div className="grid-3">{allVeh.map(v=><VehicleCard key={v.id} v={v} lang={lang}/>)}</div>
        </div>
      </section>
      {open?<ExcursionModal e={open} lang={lang} onClose={()=>setOpen(null)}/>:null}
    </>
  );
};