/* global React, Ic, Stars, CarCard, CarImage, fmtPrice */
const { useState:useStateP, useEffect:useEffectP, useMemo:useMemoP } = React;
function getCar(id){ return window.FLEET.find(c=>c.id===id); }
function parseQuery(route){
const q=route.split('?')[1]; return q? Object.fromEntries(new URLSearchParams(q)) : {};
}
/* --------------------- PAGE HEADER --------------------- */
function PageHeader({ eyebrow, title, sub, crumb }){
return
{eyebrow &&
{eyebrow}
}
{title}
{sub &&
{sub}
}
;
}
/* ============================ CATALOG ============================ */
function CatalogPage({ route }){
const q=parseQuery(route);
const [search,setSearch]=useStateP("");
const [fuel,setFuel]=useStateP("Tous");
const [box,setBox]=useStateP("Tous");
const [cat,setCat]=useStateP("Toutes");
const [maxP,setMaxP]=useStateP(12000);
const [sort,setSort]=useStateP("pop");
const cats=["Toutes",...Array.from(new Set(window.FLEET.map(c=>c.category)))];
const filtered=useMemoP(()=>{
let r=window.FLEET.filter(c=>
(search===""||(c.name+" "+c.brand).toLowerCase().includes(search.toLowerCase())) &&
(fuel==="Tous"||c.fuel===fuel) &&
(box==="Tous"||c.gearbox===box) &&
(cat==="Toutes"||c.category===cat) &&
c.price<=maxP
);
if(sort==="asc") r=[...r].sort((a,b)=>a.price-b.price);
else if(sort==="desc") r=[...r].sort((a,b)=>b.price-a.price);
else r=[...r].sort((a,b)=>(b.popular?1:0)-(a.popular?1:0));
return r;
},[search,fuel,box,cat,maxP,sort]);
const reset=()=>{setSearch("");setFuel("Tous");setBox("Tous");setCat("Toutes");setMaxP(12000);setSort("pop");};
const Seg=({val,cur,set,opts})=>
{opts.map(o=> )}
;
return
Nos voitures} sub="Une sélection de véhicules propres, récents et entretenus. Filtrez selon vos besoins et réservez en quelques clics."/>
{/* filters */}
{/* results */}
{filtered.length} véhicule{filtered.length>1?"s":""} disponible{filtered.length>1?"s":""}
{filtered.length?
{filtered.map((c,i)=> )}
:
Aucun véhicule ne correspond à vos critères.
}
;
}
/* ============================ VEHICLE DETAIL ============================ */
function VehicleDetailPage({ route }){
const id=route.split('/')[2];
const car=getCar(id);
const B=window.BUSINESS;
useEffectP(()=>{ window.scrollTo(0,0); },[id]);
if(!car) return ;
const waMsg=encodeURIComponent(`Bonjour Hamza LVH, je souhaite réserver la ${car.name} (${car.year}) à ${fmtPrice(car.price)} DA/jour. Est-elle disponible ?`);
const specs=[[Ic.cal,"Année",car.year],[Ic.fuel,"Carburant",car.fuel],[Ic.gear,"Boîte",car.gearbox],[Ic.seat,"Places",car.seats+" places"],[Ic.tag,"Catégorie",car.category],[Ic.cars,"Marque",car.brand]];
const similar=window.FLEET.filter(c=>c.id!==car.id && (c.category===car.category||c.brand===car.brand)).slice(0,3);
const incl=["Assurance tous risques","Kilométrage illimité (Alger)","Assistance 24/7","Véhicule désinfecté & contrôlé","2e conducteur offert"];
return
{/* gallery */}
{car.category}
{car.real && Photo réelle de l'agence}
{!car.real &&
VISUEL DE DÉMONSTRATION — PHOTO HD À VENIR
}
{/* tags */}
{car.tags.map(t=> {t})}
{/* info */}
{similar.length>0 &&
Véhicules similaires
{similar.map(c=> )}
}
;
}
/* ============================ RESERVATION ============================ */
function ReservationPage({ route }){
const q=parseQuery(route);
const B=window.BUSINESS;
const [f,setF]=useStateP({vehicle:q.vehicle||"",loc:q.loc||"",dd:q.dd||"",dh:q.dh||"",rd:q.rd||"",rh:q.rh||"",name:"",phone:"",email:"",msg:"",consent:false});
const [errs,setErrs]=useStateP({});
const [sent,setSent]=useStateP(false);
const set=(k)=>(e)=>{ const v=e.target.type==="checkbox"?e.target.checked:e.target.value; setF(s=>({...s,[k]:v})); setErrs(s=>({...s,[k]:undefined})); };
useEffectP(()=>{ window.scrollTo(0,0); },[]);
const car=f.vehicle?getCar(f.vehicle):null;
const days=useMemoP(()=>{
if(!f.dd||!f.rd) return 0;
const d=(new Date(f.rd)-new Date(f.dd))/86400000;
return d>=0?Math.max(1,Math.round(d)):0;
},[f.dd,f.rd]);
const total=car&&days?car.price*days:0;
const validate=()=>{
const e={};
if(!f.vehicle) e.vehicle="Choisissez un véhicule";
if(!f.loc) e.loc="Indiquez un lieu";
if(!f.dd) e.dd="Requis"; if(!f.rd) e.rd="Requis";
if(f.dd&&f.rd&&new Date(f.rd){ e.preventDefault(); if(validate()){ setSent(true); window.scrollTo({top:0,behavior:"smooth"}); } };
const waMsg=()=>{
const t=`Bonjour Hamza LVH ! Demande de réservation :%0A`+
`- Véhicule : ${car?car.name:f.vehicle||"à définir"}%0A`+
`- Lieu : ${f.loc||"-"}%0A`+
`- Du : ${f.dd||"-"} ${f.dh||""}%0A`+
`- Au : ${f.rd||"-"} ${f.rh||""}%0A`+
(days?`- Durée : ${days} jour(s)${total?` (~${fmtPrice(total)} DA)`:""}%0A`:"")+
`- Nom : ${f.name||"-"}%0A- Tél : ${f.phone||"-"}`+
(f.msg?`%0A- Message : ${f.msg}`:"");
return B.whatsappLink+"?text="+t;
};
const Err=({k})=> errs[k]? {errs[k]} : null;
if(sent) return
Demande envoyée} crumbHide/>
Merci {f.name.split(' ')[0]} !
Votre demande de réservation {car?<>pour la {car.name}:""} a bien été enregistrée.
Notre équipe vous recontacte très vite pour confirmer. Pour aller plus vite, finalisez sur WhatsApp.
{(car&&days)?
Durée
{days} jour{days>1?"s":""}
Estimation
{fmtPrice(total)} DA
:null}
;
return
Réservez votre voiture} sub="Remplissez le formulaire ci-dessous : nous confirmons votre réservation dans les plus brefs délais."/>
{/* summary */}
;
}
function Row({l,v}){ return {l}{v}
; }
Object.assign(window,{ PageHeader, CatalogPage, VehicleDetailPage, ReservationPage, getCar, parseQuery });