// Excursion modal with timeline
window.ExcursionModal=function ExcursionModal({e,lang,onClose}){
  const t=useT(lang);
  React.useEffect(()=>{
    const k=ev=>ev.key==="Escape"&&onClose();
    document.addEventListener("keydown",k);
    document.body.style.overflow="hidden";
    return ()=>{document.removeEventListener("keydown",k);document.body.style.overflow=""};
  },[onClose]);
  if(!e) return null;
  const fr=lang==="fr";
  const title=fr?e.titleFR:e.titleEN;
  const desc=fr?e.descFR:e.descEN;
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={ev=>ev.stopPropagation()}>
        <div className="modal-media">
          <PH hue={e.hue} label={title} img={IMG.exc[e.id]} svg={PHart.waves}/>
          <span className="chip">{e.duration}</span>
          <button className="icon-btn modal-close" onClick={onClose}><Icon.close/></button>
        </div>
        <div className="modal-body">
          <div>
            <h2 style={{marginBottom:8}}>{title}</h2>
            <p style={{fontSize:15}}>{desc}</p>
          </div>
          <div className="modal-meta">
            <span><Icon.clock size={14}/>{e.duration}</span>
            <span><Icon.users size={14}/>{fr?"Max 8":"Max 8"}</span>
            <span><Icon.star size={14}/>4.9</span>
          </div>
          <div className="modal-section">
            <h4>{t.incl}</h4>
            <ul className="modal-incl">
              {e.included.map((x,i)=><li key={i}><Icon.check size={14}/><span>{x}</span></li>)}
            </ul>
          </div>
          <div className="modal-section">
            <h4>{t.timeline_title}</h4>
            <Timeline steps={e.timeline}/>
          </div>
          <div className="modal-foot">
            <div className="price">{fmtMUR(e.price,lang)}<small>{t.per_pax}</small></div>
            <a className="btn btn-primary" href={WA_LINK} target="_blank">
              <Icon.wa/>{t.book_wa}
            </a>
          </div>
        </div>
      </div>
    </div>
  );
};