/* global React, Ic, Stars, PageHeader, BookingWidget */
const { useState:useStateP2, useEffect:useEffectP2 } = React;

/* ============================ ABOUT ============================ */
function AboutPage(){
  useEffectP2(()=>window.scrollTo(0,0),[]);
  const B=window.BUSINESS;
  const values=[
    [Ic.heart,"Accueil chaleureux","Un conseil sincère et une équipe disponible, qui prend le temps de comprendre votre besoin."],
    [Ic.whatsapp,"Réservation simple","En ligne, par téléphone ou WhatsApp — la réservation la plus fluide d'Alger."],
    [Ic.sparkle,"Voitures propres","Des véhicules récents, contrôlés et désinfectés avant chaque remise de clés."],
    [Ic.tag,"Prix transparents","Pas de mauvaise surprise : un tarif clair, assurance et kilométrage inclus."],
  ];
  return <div className="page-anim">
    <PageHeader crumb="À propos" eyebrow="À propos de nous" title={<>Votre satisfaction,<br/><span className="gold">notre priorité</span></>} sub="Hamza LVH, c'est avant tout une histoire de confiance entre une agence familiale et ses clients."/>
    <section style={{paddingBottom:20}}>
      <div className="wrap">
        <div className="about-photos" style={{display:"grid",gridTemplateColumns:"1.4fr 1fr",gap:18,marginBottom:64}}>
          <div className="reveal" style={{borderRadius:"var(--r-lg)",overflow:"hidden",border:"1px solid var(--border)",position:"relative"}}>
            <img src="assets/devanture-nuit.jpg" alt="Agence Hamza LVH de nuit" style={{width:"100%",height:"100%",minHeight:300,objectFit:"cover"}}/>
            <div style={{position:"absolute",inset:0,background:"linear-gradient(180deg,transparent 50%,rgba(11,11,13,.6))"}}></div>
            <span className="badge-gold" style={{position:"absolute",bottom:18,left:18}}><Ic.pin style={{width:14,height:14}}/> Bordj El Bahri, Alger</span>
          </div>
          <div className="reveal d1" style={{borderRadius:"var(--r-lg)",overflow:"hidden",border:"1px solid var(--border)"}}>
            <img src="assets/agence-interieur.jpg" alt="Intérieur de l'agence" style={{width:"100%",height:"100%",minHeight:300,objectFit:"cover"}}/>
          </div>
        </div>
        <div className="about-story" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:48,marginBottom:72,alignItems:"center"}}>
          <div className="reveal">
            <div className="eyebrow" style={{marginBottom:16}}>Notre histoire</div>
            <h2 className="h-sec" style={{fontSize:"clamp(26px,3.4vw,40px)",marginBottom:20}}>Une agence à taille humaine</h2>
          </div>
          <div className="reveal d1" style={{color:"var(--muted)",fontSize:16,lineHeight:1.8,display:"flex",flexDirection:"column",gap:16}}>
            <p>Implantée à Bordj El Bahri, Hamza LVH accompagne particuliers et professionnels d'Alger dans tous leurs déplacements. Notre conviction est simple : la location de voiture doit être <strong style={{color:"var(--text)"}}>simple, rapide et fiable</strong>.</p>
            <p>De la citadine économique au SUV familial, en passant par la berline premium, nous sélectionnons des véhicules récents et impeccablement entretenus. Et parce que chaque client compte, nous mettons un point d'honneur à offrir un accueil chaleureux et un service sur-mesure.</p>
          </div>
        </div>
      </div>
    </section>
    <section className="section" style={{paddingTop:0}}>
      <div className="wrap">
        <div className="values-grid" style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:20}}>
          {values.map(([I,t,d],i)=> <div key={i} className={"card lift reveal d"+(i%4)} style={{padding:"28px 24px"}}>
            <span style={{width:50,height:50,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)",marginBottom:18}}><I style={{width:24,height:24}}/></span>
            <div style={{fontFamily:"'Sora',sans-serif",fontWeight:700,fontSize:17,marginBottom:8}}>{t}</div>
            <p style={{color:"var(--muted)",fontSize:14,lineHeight:1.6}}>{d}</p>
          </div>)}
        </div>
      </div>
    </section>
    <section style={{paddingBottom:96}}>
      <div className="wrap">
        <div className="card reveal" style={{padding:"clamp(28px,4vw,52px)",textAlign:"center",position:"relative",overflow:"hidden",borderColor:"rgba(230,199,110,.25)"}}>
          <div className="halo halo-gold" style={{width:480,height:480,top:-260,left:"50%",transform:"translateX(-50%)"}}></div>
          <div style={{position:"relative"}}>
            <h2 className="h-sec" style={{fontSize:"clamp(24px,3vw,36px)",marginBottom:14}}>Une question ? <span className="gold">Parlons-en</span></h2>
            <p className="sub" style={{margin:"0 auto 28px",textAlign:"center"}}>Notre équipe vous répond avec plaisir, 7j/7.</p>
            <div style={{display:"flex",gap:12,justifyContent:"center",flexWrap:"wrap"}}>
              <a href="#/voitures" className="btn btn-gold"><Ic.cars/> Découvrir la flotte</a>
              <a href="#/contact" className="btn btn-ghost">Nous contacter</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>;
}

/* ============================ CONTACT ============================ */
function ContactPage(){
  useEffectP2(()=>window.scrollTo(0,0),[]);
  const B=window.BUSINESS;
  const [f,setF]=useStateP2({name:"",email:"",phone:"",msg:""});
  const [sent,setSent]=useStateP2(false);
  const set=(k)=>(e)=>setF(s=>({...s,[k]:e.target.value}));
  const submit=(e)=>{ e.preventDefault(); setSent(true); };
  const cards=[
    [Ic.phone,"Téléphone",[<a key="1" href={"tel:"+B.phonePrimaryTel} style={{color:"var(--text)"}}>{B.phones[0]}</a>,<a key="2" href="tel:+213772382532" style={{color:"var(--text)"}}>{B.phones[1]}</a>]],
    [Ic.whatsapp,"WhatsApp",[<a key="1" href={B.whatsappLink} target="_blank" rel="noopener" style={{color:"var(--whatsapp)"}}>{B.whatsapp}</a>]],
    [Ic.mail,"Email",[<a key="1" href={"mailto:"+B.email} style={{color:"var(--text)",wordBreak:"break-all"}}>{B.email}</a>]],
    [Ic.pin,"Adresse",[B.addressFull,<span key="2" className="mono" style={{fontSize:12,color:"var(--muted-2)"}}>Plus Code {B.plusCode}</span>]],
  ];
  return <div className="page-anim">
    <PageHeader crumb="Contact" eyebrow="Contact" title={<>Nous <span className="gold">contacter</span></>} sub="Une question, un devis, une réservation ? Écrivez-nous ou passez directement à l'agence."/>
    <section style={{paddingBottom:60}}>
      <div className="wrap contact-grid" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:32,alignItems:"start"}}>
        <div style={{display:"flex",flexDirection:"column",gap:16}}>
          <div className="contact-cards" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:14}}>
            {cards.map(([I,t,lines],i)=> <div key={i} className="card lift" style={{padding:"20px 20px"}}>
              <span style={{width:44,height:44,borderRadius:12,background:"rgba(230,199,110,.08)",border:"1px solid rgba(230,199,110,.22)",display:"flex",alignItems:"center",justifyContent:"center",color:i===1?"var(--whatsapp)":"var(--gold-2)",marginBottom:14}}><I style={{width:21,height:21}}/></span>
              <div style={{fontSize:12,letterSpacing:".14em",textTransform:"uppercase",color:"var(--muted-2)",marginBottom:8,fontFamily:"'Sora',sans-serif"}}>{t}</div>
              <div style={{display:"flex",flexDirection:"column",gap:3,fontSize:14.5}}>{lines}</div>
            </div>)}
          </div>
          <div className="card" style={{overflow:"hidden"}}>
            <iframe title="Carte Hamza LVH — Bordj El Bahri" width="100%" height="280" style={{border:0,display:"block",filter:"grayscale(.4) invert(.92) hue-rotate(180deg) contrast(.9)"}} loading="lazy" referrerPolicy="no-referrer-when-downgrade"
              src="https://maps.google.com/maps?q=Bordj%20El%20Bahri%2C%20Alger&t=&z=13&ie=UTF8&iwloc=&output=embed"></iframe>
            <div style={{padding:"14px 18px",display:"flex",justifyContent:"space-between",alignItems:"center",flexWrap:"wrap",gap:10}}>
              <span style={{fontSize:13.5,color:"var(--muted)"}}><Ic.pin style={{width:15,height:15,color:"var(--gold-2)",display:"inline",verticalAlign:"-2px",marginRight:6}}/>{B.addressFull}</span>
              <a href={B.maps} target="_blank" rel="noopener" style={{fontSize:13,color:"var(--gold-2)",fontWeight:600}}>Ouvrir dans Maps →</a>
            </div>
          </div>
        </div>
        <div className="card" style={{padding:"clamp(24px,3vw,34px)"}}>
          {sent? <div style={{textAlign:"center",padding:"30px 10px"}}>
            <div style={{width:68,height:68,borderRadius:"50%",background:"var(--gold-grad)",color:"#1A1407",display:"flex",alignItems:"center",justifyContent:"center",margin:"0 auto 20px"}}><Ic.check style={{width:34,height:34}}/></div>
            <h3 style={{fontFamily:"'Sora',sans-serif",fontWeight:700,fontSize:24,marginBottom:10}}>Message envoyé !</h3>
            <p className="sub" style={{margin:"0 auto 22px",textAlign:"center"}}>Merci, nous revenons vers vous rapidement. Pour une réponse immédiate, écrivez-nous sur WhatsApp.</p>
            <a href={B.whatsappLink} target="_blank" rel="noopener" className="btn btn-wa"><Ic.whatsapp/> Ouvrir WhatsApp</a>
          </div> : <form onSubmit={submit} style={{display:"flex",flexDirection:"column",gap:18}}>
            <div style={{fontFamily:"'Sora',sans-serif",fontWeight:700,fontSize:18}}>Envoyez-nous un message</div>
            <div className="field"><label>Nom complet</label><div className="control"><Ic.users/><input required value={f.name} onChange={set("name")} placeholder="Votre nom"/></div></div>
            <div className="form-row2" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16}}>
              <div className="field"><label>Email</label><div className="control"><Ic.mail/><input type="email" required value={f.email} onChange={set("email")} placeholder="vous@email.com"/></div></div>
              <div className="field"><label>Téléphone</label><div className="control"><Ic.phone/><input required value={f.phone} onChange={set("phone")} placeholder="0X XX XX XX XX"/></div></div>
            </div>
            <div className="field"><label>Message</label><div className="control area"><textarea rows="5" required value={f.msg} onChange={set("msg")} placeholder="Comment pouvons-nous vous aider ?"></textarea></div></div>
            <button type="submit" className="btn btn-gold btn-block"><Ic.arrow/> Envoyer le message</button>
          </form>}
        </div>
      </div>
    </section>
  </div>;
}

/* ============================ CONDITIONS ============================ */
function ConditionsPage(){
  useEffectP2(()=>window.scrollTo(0,0),[]);
  const sections=[
    ["Conditions de location","Le locataire doit présenter une pièce d'identité valide et un permis de conduire en cours de validité depuis au moins 2 ans. L'âge minimum requis est de 21 ans. Une caution, restituée au retour du véhicule, est demandée selon la catégorie du véhicule loué."],
    ["Assurance & responsabilité","Tous nos véhicules sont assurés tous risques. En cas de sinistre responsable, une franchise reste à la charge du locataire, dont le montant est précisé au contrat. Le locataire s'engage à conduire de manière responsable et à respecter le code de la route."],
    ["Carburant & kilométrage","Le véhicule est remis avec un niveau de carburant donné et doit être restitué au même niveau. Nos locations sont en kilométrage illimité au sein de la wilaya d'Alger. Pour les trajets inter-wilayas, merci de nous en informer au préalable."],
    ["Durée, retard & restitution","La durée de location est définie au contrat. Tout retard de restitution non signalé pourra être facturé. Le véhicule doit être rendu dans le même état de propreté qu'au départ ; des frais de nettoyage peuvent s'appliquer en cas de saleté excessive."],
    ["Annulation","L'annulation est gratuite jusqu'à 24 heures avant la date de prise en charge. Au-delà, un montant équivalent à une journée de location pourra être retenu. Toute annulation doit être communiquée par téléphone ou WhatsApp."],
    ["Paiement","Le règlement s'effectue en espèces à l'agence lors de la remise des clés. Un acompte peut être demandé pour garantir une réservation en période de forte affluence."],
    ["En cas de panne ou d'accident","Notre assistance est joignable 24h/24 et 7j/7. En cas de panne, d'accident ou de vol, le locataire doit nous contacter immédiatement. Un constat amiable doit être établi pour tout accident."],
  ];
  return <div className="page-anim">
    <PageHeader crumb="Conditions" eyebrow="Informations" title={<>Conditions <span className="gold">générales</span></>} sub="Tout ce qu'il faut savoir avant de louer chez Hamza LVH. Une question ? Contactez-nous, nous répondons avec plaisir."/>
    <section style={{paddingBottom:96}}>
      <div className="wrap" style={{maxWidth:880}}>
        <div style={{display:"flex",flexDirection:"column",gap:16}}>
          {sections.map(([t,d],i)=> <div key={i} className="card reveal" style={{padding:"26px 28px",display:"flex",gap:20}}>
            <span className="mono gold" style={{fontSize:14,fontWeight:700,paddingTop:2,opacity:.9}}>{String(i+1).padStart(2,"0")}</span>
            <div><h3 style={{fontFamily:"'Sora',sans-serif",fontWeight:700,fontSize:19,marginBottom:10}}>{t}</h3><p style={{color:"var(--muted)",lineHeight:1.75}}>{d}</p></div>
          </div>)}
        </div>
        <div className="card reveal" style={{marginTop:24,padding:"24px 28px",display:"flex",justifyContent:"space-between",alignItems:"center",gap:16,flexWrap:"wrap",borderColor:"rgba(230,199,110,.25)"}}>
          <div><div style={{fontFamily:"'Sora',sans-serif",fontWeight:700,fontSize:17}}>Une question sur nos conditions ?</div><div style={{color:"var(--muted)",fontSize:14}}>Notre équipe vous éclaire en quelques minutes.</div></div>
          <a href="#/contact" className="btn btn-gold">Nous contacter <Ic.arrow/></a>
        </div>
      </div>
    </section>
  </div>;
}

/* ============================ FAQ ============================ */
function FaqPage(){
  useEffectP2(()=>window.scrollTo(0,0),[]);
  const [open,setOpen]=useStateP2(0);
  const B=window.BUSINESS;
  return <div className="page-anim">
    <PageHeader crumb="FAQ" eyebrow="Questions fréquentes" title={<>Questions <span className="gold">fréquentes</span></>} sub="Les réponses aux questions les plus courantes sur la location chez Hamza LVH."/>
    <section style={{paddingBottom:96}}>
      <div className="wrap" style={{maxWidth:820}}>
        <div style={{display:"flex",flexDirection:"column",gap:12}}>
          {window.FAQ.map((item,i)=>{ const isOpen=open===i; return <div key={i} className="card" style={{overflow:"hidden",borderColor:isOpen?"rgba(230,199,110,.3)":"var(--border)",transition:"border-color .3s"}}>
            <button onClick={()=>setOpen(isOpen?-1:i)} style={{width:"100%",display:"flex",justifyContent:"space-between",alignItems:"center",gap:16,padding:"22px 24px",textAlign:"left"}}>
              <span style={{fontFamily:"'Sora',sans-serif",fontWeight:600,fontSize:16.5}}>{item.q}</span>
              <span style={{width:32,height:32,borderRadius:9,border:"1px solid var(--border)",display:"flex",alignItems:"center",justifyContent:"center",color:"var(--gold-2)",flexShrink:0,transition:"transform .3s,background .3s",transform:isOpen?"rotate(180deg)":"none",background:isOpen?"rgba(230,199,110,.08)":"transparent"}}><Ic.chevDown style={{width:18,height:18}}/></span>
            </button>
            <div style={{maxHeight:isOpen?260:0,overflow:"hidden",transition:"max-height .4s cubic-bezier(.2,.7,.2,1)"}}>
              <p style={{padding:"0 24px 24px",color:"var(--muted)",lineHeight:1.75}}>{item.a}</p>
            </div>
          </div>; })}
        </div>
        <div className="card" style={{marginTop:24,padding:"28px",textAlign:"center"}}>
          <div style={{fontFamily:"'Sora',sans-serif",fontWeight:700,fontSize:18,marginBottom:8}}>Vous ne trouvez pas votre réponse ?</div>
          <p style={{color:"var(--muted)",marginBottom:20}}>Notre équipe est disponible 7j/7 pour vous renseigner.</p>
          <div style={{display:"flex",gap:12,justifyContent:"center",flexWrap:"wrap"}}>
            <a href={"tel:"+B.phonePrimaryTel} className="btn btn-gold"><Ic.phone/> {B.phonePrimary}</a>
            <a href={B.whatsappLink} target="_blank" rel="noopener" className="btn btn-wa"><Ic.whatsapp/> WhatsApp</a>
          </div>
        </div>
      </div>
    </section>
  </div>;
}

Object.assign(window,{ AboutPage, ContactPage, ConditionsPage, FaqPage });
