/* ===========================================================
   Oyo Phone — Contact (particuliers) — desktop + mobile
   =========================================================== */

function ContactInfoCard(){
  return (
    <div className="bmc-card" style={{padding:'30px 30px',boxShadow:'var(--shadow-sm)'}}>
      <div style={{display:'flex',flexDirection:'column',gap:18}}>
        <InfoRow ic={<><path d="M12 21s-7-5.5-7-11a7 7 0 0 1 14 0c0 5.5-7 11-7 11z"/><circle cx="12" cy="10" r="2.6"/></>} k="Adresse" v="75 Cours de Verdun, 01100 Oyonnax"/>
        <InfoRow ic={<><path d="M4 5c0 9 6 15 15 15a2 2 0 0 0 2-2v-2.4a1 1 0 0 0-.8-1l-3.4-.7a1 1 0 0 0-1 .5l-.8 1.4A12 12 0 0 1 8.7 9l1.4-.8a1 1 0 0 0 .5-1L9.9 3.8A1 1 0 0 0 8.9 3H6.5A2 2 0 0 0 4 5z"/></>} k="Téléphone" v="07 73 32 55 79"/>
        <WhatsAppContactLink/>
        <InfoRow ic={<><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/></>} k="Horaires" v="Lun–Sam · 9h-12h / 14h-19h"/>
      </div>
      <div style={{height:1,background:'var(--line)',margin:'22px 0'}}/>
      <GoogleRating size={17}/>
    </div>
  );
}

function ContactDesktop(){
  return (
    <div className="bmc">
      <Nav active="Contact"/>
      <section style={{background:'var(--bg)',padding:'92px 56px 96px',borderBottom:'1px solid var(--line)',minHeight:540,display:'flex',alignItems:'center'}}>
        <div className="bmc-rise" style={{width:'100%'}}>
          <span className="bmc-eyebrow">Contact</span>
          <h1 style={{fontSize:64,lineHeight:1.02,marginTop:18,fontWeight:700,maxWidth:780}}>Une panne ? Parlons-en.</h1>
          <p style={{fontSize:19,color:'var(--slate)',marginTop:20,maxWidth:680,lineHeight:1.65}}>
            Décrivez votre problème en deux lignes, ou passez directement à l'atelier.
            Diagnostic et devis toujours gratuits — particuliers comme professionnels.
          </p>
          <div style={{display:'flex',gap:13,marginTop:26}}>
            <a className="bmc-btn bmc-btn--primary" href="#">07 73 32 55 79</a>
            <a className="bmc-btn" href="https://wa.me/33642125924" target="_blank" rel="noreferrer" style={{background:'#25D366',color:'#fff',boxShadow:'0 16px 34px rgba(37,211,102,.24)'}}><WhatsAppLogo size={19}/> WhatsApp</a>
            <a className="bmc-btn bmc-btn--ghost" href={window.BMC_MAPS_URL} target="_blank" rel="noreferrer">Itinéraire →</a>
          </div>
        </div>
      </section>

      <section style={{padding:'58px 56px'}}>
        <div style={{display:'grid',gridTemplateColumns:'1.25fr .9fr',gap:48,alignItems:'start'}}>
          <form className="bmc-card" style={{padding:'34px 34px',boxShadow:'var(--shadow)'}} onSubmit={BMCSubmitForm}>
            <h2 style={{fontSize:24,marginBottom:6}}>Demande de devis gratuit</h2>
            <p style={{fontSize:14.5,color:'var(--slate)',marginBottom:24}}>On vous rappelle rapidement.</p>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:18}}>
              <Field label="Nom" ph="Votre nom"/>
              <Field label="Téléphone" ph="06 00 00 00 00" type="tel"/>
              <Field label="E-mail" ph="vous@email.fr" type="email"/>
              <Field label="Appareil" ph="iPhone 13, Switch, MacBook…"/>
              <Field label="Décrivez la panne" ph="Écran cassé, ne charge plus, tombé dans l'eau…" type="area" wide/>
            </div>
            <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:14,marginTop:24}}>
              <span style={{fontSize:12.5,color:'var(--slate-2)',maxWidth:280,lineHeight:1.5}}>Réponse sous 24h. Vos données restent confidentielles.</span>
              <button className="bmc-btn bmc-btn--primary" style={{border:'none'}} type="submit">Envoyer ma demande →</button>
            </div>
          </form>
          <div style={{display:'flex',flexDirection:'column',gap:20}}>
            <ContactInfoCard/>
            <ExteriorPhoto h={240}/>
          </div>
        </div>
      </section>

      {/* rappel B2B mis en avant */}
      <ProTeaser/>
      <Footer/>
    </div>
  );
}

function ContactMobile(){
  return (
    <div className="bmc">
      <NavMobile/>
      <section style={{background:'var(--bg)',padding:'44px 20px 46px',borderBottom:'1px solid var(--line)',minHeight:360,display:'flex',flexDirection:'column',justifyContent:'center'}}>
        <span className="bmc-eyebrow">Contact</span>
        <h1 style={{fontSize:38,lineHeight:1.04,marginTop:12,fontWeight:700}}>Une panne ? Parlons-en.</h1>
        <p style={{fontSize:15,color:'var(--slate)',marginTop:12,lineHeight:1.6}}>
          Décrivez votre problème, ou passez à l'atelier. Diagnostic et devis gratuits.
        </p>
        <a className="bmc-btn bmc-btn--primary" style={{marginTop:18,width:'100%'}} href="#">07 73 32 55 79</a>
        <a className="bmc-btn" style={{marginTop:10,width:'100%',background:'#25D366',color:'#fff'}} href="https://wa.me/33642125924" target="_blank" rel="noreferrer"><WhatsAppLogo size={19}/> WhatsApp · +33 6 42 12 59 24</a>
        <a className="bmc-btn bmc-btn--ghost" style={{marginTop:10,width:'100%'}} href={window.BMC_MAPS_URL} target="_blank" rel="noreferrer">Itinéraire →</a>
      </section>
      <section style={{padding:'30px 20px'}}>
        <form className="bmc-card" style={{padding:'22px 20px',display:'flex',flexDirection:'column',gap:14}} onSubmit={BMCSubmitForm}>
          <h2 style={{fontSize:21}}>Devis gratuit</h2>
          <Field label="Nom" ph="Votre nom"/>
          <Field label="Téléphone" ph="06 00 00 00 00" type="tel"/>
          <Field label="E-mail" ph="vous@email.fr" type="email"/>
          <Field label="Appareil" ph="iPhone 13, Switch, MacBook…"/>
          <Field label="Décrivez la panne" ph="Écran cassé, ne charge plus…" type="area"/>
          <button className="bmc-btn bmc-btn--primary" style={{border:'none',width:'100%'}} type="submit">Envoyer →</button>
        </form>
        <div style={{marginTop:18}}><ContactInfoCard/></div>
        <ExteriorPhoto h={170} style={{borderRadius:14,marginTop:18}}/>
      </section>
      <MFooter/>
    </div>
  );
}

Object.assign(window,{ContactDesktop,ContactMobile,ContactInfoCard});