/* global React, Ic, Stars, CarCard, CarImage, useReveal, fmtPrice */
const { useState:useStateH, useEffect:useEffectH, useRef:useRefH } = React;

/* --------------------- BOOKING WIDGET --------------------- */
function BookingWidget({ embedded }){
  const B=window.BUSINESS;
  const [f,setF]=useStateH({loc:"",dd:"",dh:"",rd:"",rh:""});
  const set=(k)=>(e)=>setF(s=>({...s,[k]:e.target.value}));
  const submit=(e)=>{
    e.preventDefault();
    const params=new URLSearchParams();
    Object.entries(f).forEach(([k,v])=>{ if(v) params.set(k,v); });
    location.hash="#/voitures"+(params.toString()?"?"+params.toString():"");
  };
  return <form onSubmit={submit} className={embedded?"":"card"} style={embedded?{}:{padding:"26px 26px 24px",position:"relative",overflow:"hidden"}}>
    {!embedded && <div className="halo halo-gold-soft" style={{width:300,height:300,top:-180,right:-80}}></div>}
    <div style={{display:"flex",alignItems:"center",gap:11,marginBottom:20,position:"relative"}}>
      <span style={{width:38,height:38,borderRadius:10,background:"rgba(230,199,110,.1)",border:"1px solid rgba(230,199,110,.3)",display:"flex",alignItems:"center",justifyContent:"center",color:"var(--gold-2)"}}><Ic.cal style={{width:19,height:19}}/></span>
      <div>
        <div style={{fontFamily:"'Sora',sans-serif",fontWeight:700,fontSize:18}}>Réservez votre voiture</div>
        <div style={{color:"var(--muted)",fontSize:13}}>Réponse rapide · sans engagement</div>
      </div>
    </div>
    <div style={{display:"grid",gridTemplateColumns:"1.5fr 1fr .8fr 1fr .8fr auto",gap:14,alignItems:"end",position:"relative"}} className="booking-grid">
      <div className="field">
        <label>Lieu de départ</label>
        <div className="control"><Ic.pin/>
          <select value={f.loc} onChange={set("loc")} required>
            <option value="">Choisissez un lieu</option>
            {window.LOCATIONS.map(l=> <option key={l} value={l}>{l}</option>)}
          </select>
        </div>
      </div>
      <div className="field"><label>Date de départ</label><div className="control"><Ic.cal/><input type="date" value={f.dd} onChange={set("dd")} required/></div></div>
      <div className="field"><label>Heure</label><div className="control"><Ic.clock/><input type="time" value={f.dh} onChange={set("dh")}/></div></div>
      <div className="field"><label>Date de retour</label><div className="control"><Ic.cal/><input type="date" value={f.rd} onChange={set("rd")} required/></div></div>
      <div className="field"><label>Heure</label><div className="control"><Ic.clock/><input type="time" value={f.rh} onChange={set("rh")}/></div></div>
      <button type="submit" className="btn btn-gold" style={{height:52}}><Ic.search/> Rechercher</button>
    </div>
  </form>;
}

/* --------------------- HERO --------------------- */
function Hero(){
  const B=window.BUSINESS;
  const heroRef=useRefH(null);
  useEffectH(()=>{
    const el=heroRef.current; if(!el) return;
    let raf;
    const onScroll=()=>{
      cancelAnimationFrame(raf);
      raf=requestAnimationFrame(()=>{
        const y=window.scrollY;
        el.querySelectorAll('[data-par]').forEach(n=>{
          const s=parseFloat(n.dataset.par);
          n.style.transform=`translate3d(0,${y*s}px,0)`;
        });
      });
    };
    window.addEventListener('scroll',onScroll,{passive:true});
    return ()=>window.removeEventListener('scroll',onScroll);
  },[]);
  const featured=window.FLEET.find(c=>c.id==="mg-gt");
  const badges=[[Ic.shield,"Assurance tous risques","incluse"],[Ic.clock,"Disponibilité","24h/24 · 7j/7"],[Ic.tag,"Meilleurs prix","garantis"]];
  return <section ref={heroRef} className="vignette" style={{position:"relative",paddingTop:"calc(var(--nav-h) + 40px)",overflow:"hidden",minHeight:"92vh"}}>
    <div className="grid-lines" style={{position:"absolute",inset:0,opacity:.5,maskImage:"radial-gradient(120% 80% at 60% 30%,#000,transparent 80%)"}}></div>
    <div className="halo halo-gold" data-par="0.18" style={{width:680,height:680,top:-160,right:-120}}></div>
    <div className="halo halo-gold-soft" data-par="0.1" style={{width:420,height:420,bottom:-120,left:-140}}></div>
    <div className="wrap" style={{position:"relative",zIndex:2}}>
      <div className="hero-grid" style={{display:"grid",gridTemplateColumns:"1.05fr 1fr",gap:56,alignItems:"center",minHeight:"66vh"}}>
        <div>
          <div className="eyebrow reveal in" style={{marginBottom:22}}>La route vous appartient</div>
          <h1 className="reveal in d1" style={{fontSize:"clamp(38px,5.6vw,76px)",fontWeight:800,lineHeight:.98,letterSpacing:"-.02em"}}>
            <span className="chrome" style={{display:"block",textTransform:"uppercase"}}>Location de voiture</span>
            <span className="gold" style={{display:"block",textTransform:"uppercase"}}>Hamza LVH</span>
          </h1>
          <p className="sub reveal in d2" style={{marginTop:24,fontSize:18}}>
            Profitez d'une expérience de location simple, rapide et fiable. Des voitures propres, récentes et prêtes à vous accompagner à travers Alger.
          </p>
          <div className="reveal in d3" style={{display:"flex",flexWrap:"wrap",gap:14,marginTop:32}}>
            <a href="#/reservation" className="btn btn-gold"><Ic.key/> Réserver maintenant</a>
            <a href="#/voitures" className="btn btn-ghost"><Ic.cars/> Voir nos voitures</a>
          </div>
          <div className="reveal in d4 hero-badges" style={{display:"flex",gap:14,marginTop:42,flexWrap:"wrap"}}>
            {badges.map(([I,a,b],i)=> <div key={i} style={{display:"flex",alignItems:"center",gap:12}}>
              <span style={{width:42,height:42,borderRadius:11,border:"1px solid rgba(230,199,110,.28)",background:"rgba(230,199,110,.06)",display:"flex",alignItems:"center",justifyContent:"center",color:"var(--gold-2)",flexShrink:0}}><I style={{width:20,height:20}}/></span>
              <div style={{fontSize:13.5,lineHeight:1.3}}><div style={{color:"var(--text)",fontWeight:600}}>{a}</div><div style={{color:"var(--muted)"}}>{b}</div></div>
            </div>)}
          </div>
        </div>
        {/* featured car */}
        <div className="reveal in d2 hero-visual" style={{position:"relative"}}>
          <div className="halo halo-gold" style={{width:480,height:380,top:"50%",left:"50%",transform:"translate(-50%,-50%)",filter:"blur(80px)"}}></div>
          <div className="card" style={{position:"relative",overflow:"hidden",borderColor:"rgba(230,199,110,.28)",boxShadow:"var(--shadow-gold)"}}>
            <div style={{aspectRatio:"4/3",overflow:"hidden",position:"relative"}}>
              <CarImage car={featured}/>
              <div style={{position:"absolute",inset:0,background:"linear-gradient(180deg,transparent 50%,rgba(11,11,13,.7))"}}></div>
              <div style={{position:"absolute",left:18,bottom:16}}>
                <div style={{fontFamily:"'Sora',sans-serif",fontWeight:700,fontSize:20}}>{featured.name}</div>
                <div className="gold" style={{fontFamily:"'Sora',sans-serif",fontWeight:800,fontSize:18}}>{fmtPrice(featured.price)} DA <span style={{color:"var(--muted)",WebkitTextFillColor:"var(--muted)",fontWeight:400,fontSize:13}}>/ jour</span></div>
              </div>
              <span className="badge-gold" style={{position:"absolute",top:16,right:16}}><Ic.sparkle style={{width:14,height:14}}/> Coup de cœur</span>
            </div>
          </div>
          {/* floating rating chip */}
          <div className="card hero-float" style={{position:"absolute",right:-20,bottom:-26,padding:"14px 18px",display:"flex",alignItems:"center",gap:13,borderColor:"rgba(230,199,110,.3)"}}>
            <div style={{textAlign:"center"}}>
              <div className="gold" style={{fontFamily:"'Sora',sans-serif",fontWeight:800,fontSize:26,lineHeight:1}}>{B.rating}</div>
              <Stars n={4.8} size={12}/>
            </div>
            <div style={{borderLeft:"1px solid var(--border)",paddingLeft:13,fontSize:13,color:"var(--muted)",lineHeight:1.35,whiteSpace:"nowrap"}}>
              <div style={{color:"var(--text)",fontWeight:600,fontFamily:"'Sora',sans-serif"}}>Avis Google</div>
              {B.reviewsCount}+ clients ravis
            </div>
          </div>
          <div className="card hero-float2" style={{position:"absolute",left:-22,top:30,padding:"12px 16px",display:"flex",alignItems:"center",gap:11,borderColor:"var(--border)"}}>
            <span style={{width:34,height:34,borderRadius:9,background:"rgba(37,211,102,.12)",display:"flex",alignItems:"center",justifyContent:"center",color:"var(--whatsapp)",flexShrink:0}}><Ic.whatsapp style={{width:18,height:18}}/></span>
            <div style={{fontSize:12.5,lineHeight:1.3,whiteSpace:"nowrap"}}><div style={{color:"var(--text)",fontWeight:600}}>Réservez en 2 min</div><div style={{color:"var(--muted)"}}>via WhatsApp</div></div>
          </div>
        </div>
      </div>
      {/* booking widget */}
      <div className="reveal in d3" style={{marginTop:40}}><BookingWidget/></div>
    </div>
  </section>;
}

/* --------------------- POPULAR FLEET --------------------- */
function PopularFleet(){
  const cars=window.FLEET.filter(c=>c.popular).slice(0,4);
  return <section className="section">
    <div className="wrap">
      <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-end",gap:20,marginBottom:40,flexWrap:"wrap"}}>
        <div>
          <div className="eyebrow reveal" style={{marginBottom:16}}>Notre flotte</div>
          <h2 className="h-sec reveal d1">Nos voitures <span className="gold">populaires</span></h2>
        </div>
        <a href="#/voitures" className="reveal d1" style={{display:"inline-flex",alignItems:"center",gap:9,color:"var(--gold-2)",fontWeight:600,fontFamily:"'Sora',sans-serif",textTransform:"uppercase",letterSpacing:".06em",fontSize:13.5,paddingBottom:6}}>
          Voir toutes les voitures <Ic.arrow style={{width:16,height:16}}/>
        </a>
      </div>
      <div className="fleet-grid" style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:24}}>
        {cars.map((c,i)=> <CarCard key={c.id} car={c} delay={"d"+(i%4)}/> )}
      </div>
    </div>
  </section>;
}

/* --------------------- STATS BAND --------------------- */
function StatsBand(){
  const B=window.BUSINESS;
  const stats=[[Ic.users,B.clients,"Clients satisfaits"],[Ic.cars,B.carsCount,"Voitures disponibles"],[Ic.star,B.rating+"/5","Note moyenne"],[Ic.clock,"24/7","À votre service"]];
  return <section style={{padding:"0 0 20px"}}>
    <div className="wrap">
      <div className="card reveal" style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",overflow:"hidden",background:"linear-gradient(180deg,#17191E,#101115)"}} >
        {stats.map(([I,v,l],i)=> <div key={i} className="stat-cell" style={{padding:"34px 28px",display:"flex",alignItems:"center",gap:18,borderLeft:i?"1px solid var(--border)":"none"}}>
          <span style={{width:52,height:52,borderRadius:14,background:"rgba(230,199,110,.08)",border:"1px solid rgba(230,199,110,.22)",display:"flex",alignItems:"center",justifyContent:"center",color:"var(--gold-2)",flexShrink:0}}><I style={{width:25,height:25}}/></span>
          <div>
            <div className="chrome" style={{fontFamily:"'Sora',sans-serif",fontWeight:800,fontSize:32,lineHeight:1}}>{v}</div>
            <div style={{color:"var(--muted)",fontSize:13.5,marginTop:4}}>{l}</div>
          </div>
        </div>)}
      </div>
    </div>
  </section>;
}

/* --------------------- ABOUT TEASER --------------------- */
function AboutTeaser(){
  const items=[
    [Ic.heart,"Accueil chaleureux","Notre équipe est à votre écoute pour vous conseiller et trouver la voiture qu'il vous faut."],
    [Ic.whatsapp,"Réservation simple","Réservez en ligne, par téléphone ou WhatsApp en toute simplicité, en quelques minutes."],
    [Ic.sparkle,"Voitures propres","Des véhicules récents, contrôlés et impeccablement entretenus avant chaque location."],
  ];
  return <section className="section">
    <div className="wrap">
      <div className="about-grid" style={{display:"grid",gridTemplateColumns:".9fr 1.1fr",gap:56,alignItems:"center"}}>
        <div>
          <div className="eyebrow reveal" style={{marginBottom:18}}>À propos de nous</div>
          <h2 className="h-sec reveal d1" style={{marginBottom:22}}>Votre satisfaction,<br/><span className="gold">notre priorité</span></h2>
          <p className="sub reveal d2" style={{marginBottom:18}}>
            Chez Hamza LVH, nous mettons tout en œuvre pour vous offrir un service de location de voiture professionnel, transparent et adapté à vos besoins.
          </p>
          <p className="sub reveal d2" style={{marginBottom:30}}>
            Que ce soit pour un déplacement professionnel ou personnel, nous avons la voiture qu'il vous faut — propre, récente et prête à partir.
          </p>
          <div className="reveal d3" style={{display:"flex",gap:14,flexWrap:"wrap"}}>
            <a href="#/a-propos" className="btn btn-gold">En savoir plus <Ic.arrow/></a>
            <a href="#/contact" className="btn btn-ghost">Nous contacter</a>
          </div>
        </div>
        <div className="reveal d2" style={{position:"relative"}}>
          <div className="halo halo-gold-soft" style={{width:420,height:420,top:"50%",right:-80,transform:"translateY(-50%)"}}></div>
          <div style={{position:"relative",borderRadius:"var(--r-lg)",overflow:"hidden",border:"1px solid rgba(230,199,110,.22)",boxShadow:"var(--shadow-card)"}}>
            <img src="assets/agence-interieur.jpg" alt="Agence Hamza LVH" style={{width:"100%",height:300,objectFit:"cover"}}/>
            <div style={{position:"absolute",inset:0,background:"linear-gradient(180deg,transparent 40%,rgba(11,11,13,.55))"}}></div>
          </div>
          <div style={{display:"flex",flexDirection:"column",gap:12,marginTop:14}}>
            {items.map(([I,t,d],i)=> <div key={i} className="card" style={{padding:"16px 18px",display:"flex",gap:14,alignItems:"flex-start"}}>
              <span style={{width:40,height:40,borderRadius:11,background:"rgba(230,199,110,.08)",border:"1px solid rgba(230,199,110,.22)",display:"flex",alignItems:"center",justifyContent:"center",color:"var(--gold-2)",flexShrink:0}}><I style={{width:19,height:19}}/></span>
              <div><div style={{fontFamily:"'Sora',sans-serif",fontWeight:600,fontSize:15.5,marginBottom:3}}>{t}</div><div style={{color:"var(--muted)",fontSize:13.5,lineHeight:1.5}}>{d}</div></div>
            </div>)}
          </div>
        </div>
      </div>
    </div>
  </section>;
}

/* --------------------- REVIEWS --------------------- */
function Reviews(){
  const B=window.BUSINESS;
  const r=window.REVIEWS.slice(0,3);
  return <section className="section" style={{background:"linear-gradient(180deg,transparent,rgba(20,22,26,.5),transparent)"}}>
    <div className="wrap">
      <div style={{textAlign:"center",marginBottom:44}}>
        <div className="eyebrow center reveal" style={{marginBottom:16}}>Ils nous font confiance</div>
        <h2 className="h-sec reveal d1">Avis <span className="gold">Google</span></h2>
        <div className="reveal d2" style={{display:"inline-flex",alignItems:"center",gap:12,marginTop:18,padding:"10px 20px",borderRadius:999,border:"1px solid var(--border)",background:"var(--surface)"}}>
          <span className="gold" style={{fontFamily:"'Sora',sans-serif",fontWeight:800,fontSize:24}}>{B.rating}</span>
          <Stars n={4.8}/>
          <span style={{color:"var(--muted)",fontSize:14}}>· {B.reviewsCount} avis</span>
        </div>
      </div>
      <div className="reviews-grid" style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:24}}>
        {r.map((rv,i)=> <div key={i} className={"card lift reveal d"+(i+1)} style={{padding:"28px 26px",display:"flex",flexDirection:"column",gap:16}}>
          <Ic.quote style={{width:34,height:34,color:"var(--gold-2)"}}/>
          <p style={{color:"var(--text)",fontSize:15,lineHeight:1.65,flex:1}}>“{rv.text}”</p>
          <div style={{display:"flex",alignItems:"center",gap:13,paddingTop:8,borderTop:"1px solid var(--border-soft)"}}>
            <span style={{width:44,height:44,borderRadius:"50%",background:"var(--gold-grad)",color:"#1A1407",display:"flex",alignItems:"center",justifyContent:"center",fontFamily:"'Sora',sans-serif",fontWeight:700,fontSize:15}}>{rv.initials}</span>
            <div style={{flex:1}}><div style={{fontWeight:600,fontSize:14.5}}>{rv.name}</div><div style={{color:"var(--muted-2)",fontSize:12.5}}>{rv.date}</div></div>
            <Stars n={rv.rating} size={13}/>
          </div>
        </div>)}
      </div>
    </div>
  </section>;
}

/* --------------------- FINAL CTA --------------------- */
function FinalCta(){
  const B=window.BUSINESS;
  return <section className="section" style={{paddingTop:20}}>
    <div className="wrap">
      <div className="card reveal" style={{position:"relative",overflow:"hidden",padding:"clamp(36px,5vw,68px)",textAlign:"center",borderColor:"rgba(230,199,110,.28)"}}>
        <div className="halo halo-gold" style={{width:520,height:520,top:-260,left:"50%",transform:"translateX(-50%)"}}></div>
        <div className="grid-lines" style={{position:"absolute",inset:0,opacity:.4,maskImage:"radial-gradient(80% 80% at 50% 50%,#000,transparent)"}}></div>
        <div style={{position:"relative"}}>
          <div className="eyebrow center" style={{marginBottom:18}}>Prêt à prendre la route ?</div>
          <h2 className="h-sec" style={{maxWidth:"18ch",margin:"0 auto 18px"}}>Réservez votre voiture <span className="gold">dès aujourd'hui</span></h2>
          <p className="sub" style={{margin:"0 auto 32px",textAlign:"center"}}>Disponibilité 24/7, prix transparents et accueil chaleureux. Votre prochaine voiture vous attend chez Hamza LVH.</p>
          <div style={{display:"flex",gap:14,justifyContent:"center",flexWrap:"wrap"}}>
            <a href="#/reservation" className="btn btn-gold"><Ic.key/> Réserver maintenant</a>
            <a href={B.whatsappLink} target="_blank" rel="noopener" className="btn btn-wa"><Ic.whatsapp/> Réserver via WhatsApp</a>
          </div>
        </div>
      </div>
    </div>
  </section>;
}

function HomePage(){
  return <div className="page-anim">
    <Hero/>
    <PopularFleet/>
    <StatsBand/>
    <AboutTeaser/>
    <Reviews/>
    <FinalCta/>
  </div>;
}

Object.assign(window,{ BookingWidget, HomePage });
