// Contact / Proefrit aanvragen
const { useState, useEffect, useContext } = React;

const PageContact = ({ setPage }) => {
  const langCtx = useContext(window.LangContext || React.createContext({ lang:"nl", t: (nl)=>nl }));
  const t = langCtx.t || ((nl) => nl);
  const [model, setModel] = useState("");
  const [sent, setSent] = useState(false);

  return (
    <div className="page">
      <section style={{padding:"56px 0 40px", background:"var(--paper)", borderBottom:"1px solid var(--line)"}}>
        <div className="wrap" style={{textAlign:"center"}}>
          <div className="eyebrow" style={{marginBottom:14}}>{t("Contact · advies · proefrit","Contact · advice · test ride")}</div>
          <h1 className="h-display" style={{fontSize:"clamp(40px,6vw,72px)"}}>
            {t("Praat met","Talk to")} <span className="accent">{t("een mens.","a human.")}</span>
          </h1>
          <p style={{color:"var(--ink-dim)", maxWidth:540, margin:"22px auto 0", fontSize:17}}>
            {t(
              "Snelste route: WhatsApp. Geen chatbot — je praat met ons en we reageren zo snel mogelijk.",
              "Fastest route: WhatsApp. No chatbot — you talk to us and we reply as soon as we can."
            )}
          </p>
        </div>
      </section>

      <section style={{padding:"40px 0 96px"}}>
        <div className="wrap" style={{display:"grid", gridTemplateColumns:"1fr 1.1fr", gap:32, alignItems:"start"}} className="ct-grid">
          {/* Channels */}
          <div style={{display:"flex", flexDirection:"column", gap:16}}>
            {/* WhatsApp */}
            <div className="card" style={{padding:32, background:"linear-gradient(180deg, rgba(37,211,102,0.06) 0%, var(--paper) 100%)", borderColor:"rgba(37,211,102,.3)"}}>
              <div className="gap-12" style={{marginBottom:14}}>
                <div style={{width:44, height:44, borderRadius:10, background:"var(--whatsapp)", color:"#fff", display:"grid", placeItems:"center", boxShadow:"0 8px 24px rgba(37,211,102,.3)"}}>
                  <Icon name="whatsapp" size={22} fill="#fff" stroke="none"/>
                </div>
                <div>
                  <h3 className="h-display" style={{fontSize:20}}>{t("WhatsApp ons direct","WhatsApp us directly")}</h3>
                  <div className="gap-8" style={{marginTop:4}}>
                    <span style={{width:6, height:6, borderRadius:50, background:"var(--ok)", boxShadow:"0 0 8px var(--ok)"}}/>
                    <span className="mono" style={{fontSize:11, letterSpacing:".1em", color:"var(--ok)", textTransform:"uppercase"}}>{t("Stuur ons een bericht","Message us")}</span>
                  </div>
                </div>
              </div>

              {/* Chat preview */}
              <div style={{background:"var(--bg)", borderRadius:10, padding:12, border:"1px solid var(--line)"}}>
                <div style={{display:"flex", justifyContent:"flex-end", marginBottom:8}}>
                  <div style={{background:"#dcf8c6", color:"#111", padding:"8px 12px", borderRadius:"10px 2px 10px 10px", maxWidth:"75%", fontSize:13.5}}>
                    {t("Hoi! Welk model is beter voor bezorgwerk?","Hi! Which model is better for courier work?")}
                  </div>
                </div>
                <div style={{display:"flex", marginBottom:6}}>
                  <div style={{background:"#fff", color:"#111", padding:"8px 12px", borderRadius:"2px 10px 10px 10px", maxWidth:"78%", fontSize:13.5, border:"1px solid var(--line)"}}>
                    {t("De GT2000 — 30Ah accu doet 2 shifts zonder bijladen. Postcode? Dan plan ik een proefrit 🛵","The GT2000 — 30Ah battery does 2 shifts without recharging. What's your postcode? I'll book a test ride 🛵")}
                  </div>
                </div>
                <div style={{color:"var(--ink-mute)", fontSize:11, textAlign:"center", marginTop:4}}>{t("Voorbeeld van een WhatsApp-gesprek","Example WhatsApp chat")}</div>
              </div>

              <a href={getWhatsAppHref(t("Ik wil advies over een Zyro Electric fiets","I would like advice about a Zyro Electric bike"))} target="_blank" rel="noopener" className="btn btn-whats btn-lg btn-block" style={{marginTop:18}}>
                <Icon name="whatsapp" size={16} fill="#06281a"/> {t("Open WhatsApp · ","Open WhatsApp · ") + getWhatsAppDisplay()}
              </a>
            </div>

            <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:14}}>
              <div className="card" style={{padding:20}}>
                <Icon name="shield" size={18} style={{color:"var(--accent)", marginBottom:12}}/>
                <div className="mono" style={{fontSize:10, letterSpacing:".12em", color:"var(--ink-mute)"}}>{t("BEDRIJF","COMPANY")}</div>
                <div style={{fontWeight:600, fontSize:14, margin:"4px 0"}}>Zyro Electric Nederland</div>
                <div style={{fontSize:12, color:"var(--ink-mute)"}}>KvK 96908327</div>
              </div>
              <div className="card" style={{padding:20}}>
                <Icon name="mail" size={18} style={{color:"var(--accent)", marginBottom:12}}/>
                <div className="mono" style={{fontSize:10, letterSpacing:".12em", color:"var(--ink-mute)"}}>{t("E-MAIL","EMAIL")}</div>
                <div style={{fontWeight:600, fontSize:14, margin:"4px 0"}}>info@zyro-electric.nl</div>
                <div style={{fontSize:12, color:"var(--ink-mute)"}}>{t("Meestal binnen 1 werkdag","Usually within 1 business day")}</div>
              </div>
              <div className="card" style={{padding:20, gridColumn:"1 / -1"}}>
                <Icon name="pin" size={18} style={{color:"var(--accent)", marginBottom:12}}/>
                <div className="mono" style={{fontSize:10, letterSpacing:".12em", color:"var(--ink-mute)"}}>{t("SHOWROOM UTRECHT","SHOWROOM UTRECHT")}</div>
                <div style={{fontWeight:600, fontSize:14, margin:"4px 0"}}>Paranadreef 257 · 3563 WK Utrecht</div>
                <div style={{fontSize:12, color:"var(--ink-mute)"}}>{t("Ophalen en bezichtiging op afspraak — stuur ons een bericht","Pickup and viewing by appointment — send us a message")}</div>
              </div>
            </div>
          </div>

          {/* Form */}
          <div className="card" style={{padding:32}}>
            <div className="eyebrow" style={{marginBottom:14}}>{t("Of vul het formulier in","Or fill in the form")}</div>
            <h2 className="h-display" style={{fontSize:30, marginBottom:24}}>{t("Proefrit / advies aanvragen","Request a test ride / advice")}</h2>

            {sent ? (
              <div style={{padding:"40px 0", textAlign:"center"}}>
                <div style={{width:72, height:72, borderRadius:50, background:"var(--accent-soft)", color:"var(--accent)", display:"grid", placeItems:"center", margin:"0 auto 22px"}}>
                  <Icon name="check" size={32}/>
                </div>
                <h3 className="h-display" style={{fontSize:26, marginBottom:10}}>{t("Bericht verstuurd!","Message sent!")}</h3>
                <p style={{color:"var(--ink-dim)", maxWidth:380, margin:"0 auto"}}>
                  {t("Bedankt — we nemen zo snel mogelijk contact met je op. Spoed? Stuur ons een WhatsApp.","Thanks — we'll get back to you as soon as we can. Urgent? Send us a WhatsApp.")}
                </p>
                <button className="btn btn-ghost" style={{marginTop:22}} onClick={()=>setSent(false)}>{t("Nog een vraag stellen","Ask another question")}</button>
              </div>
            ) : (
              <>
                <div className="grid-2" style={{marginBottom:14}}>
                  <div className="field">
                    <label className="field-label">{t("Naam","Name")}</label>
                    <input className="input" type="text" placeholder={t("Jouw naam","Your name")}/>
                  </div>
                  <div className="field">
                    <label className="field-label">{t("Telefoon","Phone")}</label>
                    <input className="input" type="tel" placeholder="+31 6 ..."/>
                  </div>
                </div>
                <div className="field" style={{marginBottom:14}}>
                  <label className="field-label">{t("E-mail","Email")}</label>
                  <input className="input" type="email" placeholder={t("naam@email.nl","name@email.com")}/>
                </div>
                <div className="grid-2" style={{marginBottom:14}}>
                  <div className="field">
                    <label className="field-label">{t("Interesse in model","Interested in model")}</label>
                    <select className="select" value={model} onChange={e=>setModel(e.target.value)}>
                      <option value="">{t("Selecteer model…","Select model…")}</option>
                      <option>Zyro V20 Pro Special Edition</option>
                      <option>Zyro GT2000 Black Edition</option>
                      <option>{t("Beide / niet zeker","Both / not sure")}</option>
                      <option>{t("Alleen accessoires","Accessories only")}</option>
                    </select>
                  </div>
                  <div className="field">
                    <label className="field-label">{t("Gewenste proefritdatum","Preferred test ride date")}</label>
                    <input className="input" type="date"/>
                  </div>
                </div>
                <div className="field" style={{marginBottom:18}}>
                  <label className="field-label">{t("Bericht","Message")}</label>
                  <textarea className="textarea" placeholder={t("Vertel iets over je rijgewoonten — hoe ver, hoe vaak, voorkeuren.","Tell us about your riding habits — how far, how often, preferences.")} rows={5}/>
                </div>
                <label style={{display:"flex", alignItems:"flex-start", gap:10, marginBottom:18, fontSize:12.5, color:"var(--ink-dim)"}}>
                  <input type="checkbox" style={{marginTop:3, accentColor:"var(--accent)"}}/>
                  <span>{t("Ik ga akkoord dat Zyro mijn gegevens gebruikt om mijn vraag te beantwoorden. Geen nieuwsbrief, geen spam.","I agree that Zyro may use my data to answer my question. No newsletter, no spam.")}</span>
                </label>
                <div className="gap-12">
                  <button className="btn btn-primary btn-lg" style={{flex:1}} onClick={()=>setSent(true)}>
                    {t("Verstuur aanvraag","Send request")} <Icon name="arrow" size={16}/>
                  </button>
                  <a href={getWhatsAppHref(t("Ik wil advies over een Zyro Electric fiets","I would like advice about a Zyro Electric bike"))} target="_blank" rel="noopener" className="btn btn-whats btn-lg">
                    <Icon name="whatsapp" size={15} fill="#06281a"/>
                  </a>
                </div>
              </>
            )}
          </div>
        </div>
        <style>{`@media (max-width:900px){.ct-grid{grid-template-columns:1fr !important}}`}</style>
      </section>
    </div>
  );
};
window.PageContact = PageContact;