// Vehicle card (car / scooter / bike)
window.VehicleCard=function VehicleCard({v,lang}){
  const t=useT(lang);
  const fr=lang==="fr";
  const title=fr?v.titleFR:v.titleEN;
  const desc=fr?v.descFR:v.descEN;
  return (
    <article className="card">
      <div className="card-img">
        <PH hue={v.hue} label={title} small={v.type} img={IMG.veh[v.id]} svg={PHart.hills}/>
        <span className="chip">{v.type}</span>
      </div>
      <div className="card-body">
        <h3>{title}</h3>
        <p className="card-desc">{desc}</p>
        <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:6,fontSize:12,color:"var(--ink-2)",marginTop:6}}>
          {v.specs.slice(0,4).map(([k,val],i)=>(
            <div key={i}>
              <span style={{color:"var(--muted)",letterSpacing:".08em"}}>{k}</span>
              <div style={{color:"var(--ink)",fontWeight:600}}>{val}</div>
            </div>
          ))}
        </div>
      </div>
      <div className="card-foot">
        <div className="price">{fmtMUR(v.price,lang)}<small>{t.per_day}</small></div>
        <a className="btn btn-primary btn-sm" href={WA_LINK} target="_blank">{t.cta_book}<Icon.arrow/></a>
      </div>
    </article>
  );
};