// Traveler service card (overview)
window.ServiceCard=function ServiceCard({s,lang}){
  const t=useT(lang);
  const fr=lang==="fr";
  const title=fr?s.titleFR:s.titleEN;
  const desc=fr?s.descFR:s.descEN;
  const price=fr?s.priceFR:s.priceEN;
  const arts={car:PHart.hills,scoot:PHart.palm,bike:PHart.palm,conc:PHart.waves};
  return (
    <article className="card">
      <div className="card-img">
        <PH hue={s.hue} label={title} img={IMG.svc[s.id]} svg={arts[s.id]}/>
      </div>
      <div className="card-body">
        <h3>{title}</h3>
        <p className="card-desc">{desc}</p>
        <ul className="card-feat">
          {s.features.slice(0,3).map((x,i)=><li key={i}>{x}</li>)}
        </ul>
      </div>
      <div className="card-foot">
        <div className="price" style={{fontSize:16}}>{price}</div>
        <a className="btn btn-ghost btn-sm" href={s.link}>{t.cta_details}<Icon.arrow/></a>
      </div>
    </article>
  );
};