/* Workshop/Trust · Test-drive form · Closing · Footer */

function Workshop(){
  const pts=[
    {ic:"wrench",t:"Meisterwerkstatt",d:"Inspektion, Reparatur, Reifen & TÜV-Vorbereitung für alle Marken."},
    {ic:"shield",t:"IHK-Ausbildungsbetrieb",d:"Anerkannter Betrieb der IHK Hannover — Wissen, das bleibt."},
    {ic:"spark",t:"Service in Tagen, nicht Wochen",d:"Kurze Wege, ehrliche Diagnose, schnelle Termine."}
  ];
  return (
    <section className="sec on-surface" id="werkstatt">
      <div className="wrap">
        <div className="section-kicker"><span className="num">04</span><span className="line"/></div>
        <div className="work-grid">
          <div className="work-copy reveal">
            <span className="eyebrow">Werkstatt &amp; Service</span>
            <h2 style={{marginTop:16}}>Schrauben ist<br/>Vertrauenssache</h2>
            <p>Hinter dem Tresen stehen die Inhaber selbst: Carsten Maluche im Verkauf und Service, Thomas Maluche als Meister in der Werkstatt. Kein Callcenter, keine Warteschleife — Sie sprechen mit den Menschen, die Ihr Fahrzeug auch anfassen.</p>
            <div className="work-points">
              {pts.map(p=>(
                <div className="work-point" key={p.t}>
                  <div className="ic">{I[p.ic]()}</div>
                  <div><div className="wt">{p.t}</div><div className="wd">{p.d}</div></div>
                </div>
              ))}
            </div>
            <div className="ihk">
              <img src="assets/dealer/ihk-badge.jpg" alt="IHK Hannover — Wir bilden aus"/>
              <div>
                <div className="it">Mitglied der IHK Hannover</div>
                <div className="id">Wir bilden aus — Nachwuchs für das Zweirad-Handwerk.</div>
              </div>
            </div>
          </div>
          <div className="work-media reveal">
            <div className="wm big">
              <image-slot id="work-ambiance" src="assets/dealer/showroom.jpg" shape="rect" fit="cover" placeholder="Werkstatt-/Showroom-Foto ablegen"></image-slot>
              <div className="wm-tag">Unsere Werkstatt &amp; Showroom</div>
            </div>
            <div className="wm por">
              <img src="assets/dealer/team-thomas.jpg" alt="Thomas Maluche"/>
              <div className="wm-name">Thomas Maluche<small>Kfz-Meister · Werkstatt</small></div>
            </div>
            <div className="wm por">
              <img src="assets/dealer/team-carsten.jpg" alt="Carsten Maluche"/>
              <div className="wm-name">Carsten Maluche<small>Verkauf · Service</small></div>
            </div>
          </div>
        </div>

        <div className="testi reveal">
          <div className="gr-head">
            <div className="gr-badge">
              {I.google({className:"gr-g"})}
              <div>
                <div className="gr-rating"><strong>{D.reviews.rating}</strong><span className="gr-stars">{[0,1,2,3,4].map(i=> <span key={i}>{I.star()}</span>)}</span></div>
                <div className="gr-src">{D.reviews.count} {D.reviews.source}</div>
              </div>
            </div>
            <a className="gr-link" href="https://www.google.com/search?q=Der+Mopedladen+Hannover" target="_blank" rel="noopener">Alle Rezensionen ansehen {I.arrowUR()}</a>
          </div>
          <div className="testi-grid">
            {D.reviews.items.map(t=>(
              <div className="quote" key={t.a}>
                <div className="q-top">
                  <span className="q-av">{t.initials}</span>
                  <div className="q-id"><div className="q-name">{t.a}</div><div className="q-when">{t.when}</div></div>
                  {I.google({className:"q-g"})}
                </div>
                <div className="stars">{[0,1,2,3,4].map(i=> <span key={i}>{I.star()}</span>)}</div>
                <p>{t.q}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function TestDriveForm({preselect,formRef}){
  const empty={model:"",date:"",name:"",email:"",phone:"",fin:"",msg:"",consent:false};
  const [v,setV]=useState(empty);
  const [errs,setErrs]=useState({});
  const [done,setDone]=useState(false);
  useEffect(()=>{ if(preselect) setV(s=>({...s,model:preselect})); },[preselect]);
  const set=(k,val)=>setV(s=>({...s,[k]:val}));
  const validate=()=>{
    const e={};
    if(!v.model) e.model=1;
    if(!v.name.trim()) e.name=1;
    if(!/^\S+@\S+\.\S+$/.test(v.email)) e.email=1;
    if(v.phone.replace(/\D/g,"").length<6) e.phone=1;
    if(!v.consent) e.consent=1;
    setErrs(e); return Object.keys(e).length===0;
  };
  const submit=(ev)=>{ev.preventDefault(); if(validate()) setDone(true);};
  return (
    <section className="sec form-sec" id="kontakt" ref={formRef}>
      <div className="wrap">
        <div className="section-kicker"><span className="num" style={{color:"#6c6c72"}}>06</span><span className="line" style={{background:"#2a2a2d"}}/></div>
        <div className="form-grid">
          <div className="form-intro reveal">
            <span className="eyebrow on-dark">Probefahrt &amp; Beratung</span>
            <h2 style={{marginTop:16}}>Erst fahren,<br/>dann entscheiden</h2>
            <p>Sagen Sie uns, welches Modell Sie interessiert und wann es Ihnen passt — wir halten das Fahrzeug bereit und melden uns zur Bestätigung.</p>
            <div className="form-contact">
              <div className="fc-row"><div className="ic">{I.pin()}</div><div><div className="fl">Adresse</div><div className="fv">{D.contact.street}, {D.contact.city}</div></div></div>
              <div className="fc-row"><div className="ic">{I.phone()}</div><div><div className="fl">Telefon</div><div className="fv">{D.contact.tel}</div></div></div>
              <div className="fc-row"><div className="ic">{I.clock()}</div><div><div className="fl">Öffnungszeiten</div><div className="fv">Mo–Fr 9:30–13:00 &amp; 14:00–18:00 · Sa 10:00–14:00</div></div></div>
              <div className="fc-row"><div className="ic">{I.spark()}</div><div><div className="fl">Finanzierung</div><div className="fv">ab 0,99 % eff. Jahreszins</div></div></div>
            </div>
          </div>

          <div className="form-card reveal">
            {!done ? (
              <form onSubmit={submit} noValidate>
                <div className={"field"+(errs.model?" invalid":"")}>
                  <label>Wunschmodell <span className="req">*</span></label>
                  <select className="select" value={v.model} onChange={e=>set("model",e.target.value)}>
                    <option value="">Modell wählen…</option>
                    {D.inventory.map(it=> <option key={it.id} value={it.id}>{it.brand} {it.model}</option>)}
                    <option value="beratung">Allgemeine Beratung</option>
                  </select>
                  <div className="err">Bitte ein Modell wählen.</div>
                </div>
                <div className="row2">
                  <div className="field">
                    <label>Wunschtermin</label>
                    <input className="input" type="date" value={v.date} onChange={e=>set("date",e.target.value)}/>
                  </div>
                  <div className="field">
                    <label>Finanzierung gewünscht?</label>
                    <div className="fin-toggle">
                      {[["nein","Barkauf"],["ja","Finanzieren"]].map(([val,lab])=>(
                        <div className="fin-opt" key={val}>
                          <input type="radio" id={"fin-"+val} name="fin" checked={v.fin===val} onChange={()=>set("fin",val)}/>
                          <label htmlFor={"fin-"+val}>{lab}</label>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
                <div className={"field"+(errs.name?" invalid":"")}>
                  <label>Name <span className="req">*</span></label>
                  <input className="input" placeholder="Vor- und Nachname" value={v.name} onChange={e=>set("name",e.target.value)}/>
                  <div className="err">Bitte Ihren Namen angeben.</div>
                </div>
                <div className="row2">
                  <div className={"field"+(errs.email?" invalid":"")}>
                    <label>E-Mail <span className="req">*</span></label>
                    <input className="input" type="email" placeholder="name@mail.de" value={v.email} onChange={e=>set("email",e.target.value)}/>
                    <div className="err">Gültige E-Mail angeben.</div>
                  </div>
                  <div className={"field"+(errs.phone?" invalid":"")}>
                    <label>Telefon <span className="req">*</span></label>
                    <input className="input" type="tel" placeholder="0511 …" value={v.phone} onChange={e=>set("phone",e.target.value)}/>
                    <div className="err">Bitte Rufnummer angeben.</div>
                  </div>
                </div>
                <div className="field">
                  <label>Nachricht</label>
                  <textarea className="textarea" placeholder="Fragen, Zahlung in Zahlung, Wunschfarbe …" value={v.msg} onChange={e=>set("msg",e.target.value)}/>
                </div>
                <label className={"consent"+(errs.consent?" invalid":"")} style={errs.consent?{color:"#e06a4f"}:{}}>
                  <input type="checkbox" checked={v.consent} onChange={e=>set("consent",e.target.checked)}/>
                  <span>Ich bin mit der Verarbeitung meiner Daten zur Kontaktaufnahme einverstanden (Datenschutz).</span>
                </label>
                <button type="submit" className="btn btn-primary" style={{width:"100%"}}>Anfrage senden {I.arrow()}</button>
              </form>
            ) : (
              <div className="form-success">
                <div className="sc">{I.check()}</div>
                <h3>Anfrage erhalten!</h3>
                <p>Danke{v.name?(", "+v.name.split(" ")[0]):""}. Wir bestätigen Ihren Probefahrt-Termin telefonisch — meist noch am selben Werktag.</p>
                <button className="btn btn-outline" onClick={()=>{setV(empty);setDone(false);}}>Weitere Anfrage</button>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function Closing({onBook}){
  return (
    <section className="closing">
      <image-slot id="closing-ambiance" class="closing-slot" src="assets/dealer/showroom.jpg" shape="rect" fit="cover" placeholder="Showroom-/Ladenfoto ablegen"></image-slot>
      <div className="wrap closing-inner">
        <h2>Komm vorbei.<br/>Probier’s aus.</h2>
        <p>Sorststraße 6 in Hannover-Hainholz — Kaffee steht bereit, die Schlüssel auch.</p>
        <div className="closing-actions">
          <button className="btn btn-primary" onClick={onBook}>Probefahrt buchen {I.arrow()}</button>
          <a className="btn btn-light" href={"tel:"+D.contact.telHref}>{I.phone()} Anrufen</a>
        </div>
      </div>
    </section>
  );
}

function Footer({onNav}){
  const c=D.contact;
  const map="https://maps.google.com/maps?q="+encodeURIComponent(c.street+", "+c.city)+"&z=15&output=embed";
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="foot-top">
          <div className="foot-brand">
            <img src="assets/logo/logo.png" alt="Der Mopedladen"/>
            <p>Ihr Roller- &amp; Motorradspezialist in Hannover-Hainholz. Verkauf, Service und Meisterwerkstatt für acht Marken.</p>
            <div className="foot-brands">
              {D.brands.map(b=> <img key={b.n} src={b.f} alt={b.n}/>)}
            </div>
          </div>
          <div className="foot-col">
            <h4>Entdecken</h4>
            <a href="#fahrzeuge" onClick={(e)=>{e.preventDefault();onNav("#fahrzeuge");}}>Fahrzeuge</a>
            <a href="#segmente" onClick={(e)=>{e.preventDefault();onNav("#segmente");}}>Segmente</a>
            <a href="#ersatzteile" onClick={(e)=>{e.preventDefault();onNav("#ersatzteile");}}>Ersatzteile</a>
            <a href="#werkstatt" onClick={(e)=>{e.preventDefault();onNav("#werkstatt");}}>Werkstatt</a>
            <a href="#news" onClick={(e)=>{e.preventDefault();onNav("#news");}}>News &amp; Blog</a>
            <a href="#kontakt" onClick={(e)=>{e.preventDefault();onNav("#kontakt");}}>Probefahrt</a>
          </div>
          <div className="foot-col">
            <h4>Kontakt</h4>
            <div className="fi"><strong>{c.name}</strong></div>
            <div className="fi">{c.street}<br/>{c.city}</div>
            <a href={"tel:"+c.telHref}>Tel {c.tel}</a>
            <div className="fi">Fax {c.fax}</div>
            <a href={"mailto:"+c.email}>{c.email}</a>
            <div className="foot-fin">{I.spark()} {c.finance}</div>
          </div>
          <div className="foot-col">
            <h4>Öffnungszeiten</h4>
            {c.hours.map(h=>(
              <div className="hours-row" key={h.d}><span>{h.d}</span><span>{h.t}</span></div>
            ))}
            <div className="foot-map"><iframe title="Karte" src={map} loading="lazy"></iframe></div>
          </div>
        </div>
        <div className="foot-bottom">
          <div className="copy">© {new Date().getFullYear()} {c.name} · {c.hra} · USt-IdNr. {c.ust}</div>
          <div className="legal">
            <a href="#kontakt" onClick={(e)=>{e.preventDefault();onNav("#kontakt");}}>Impressum</a>
            <a href="#kontakt" onClick={(e)=>{e.preventDefault();onNav("#kontakt");}}>Datenschutz</a>
            <a href="#top" onClick={(e)=>{e.preventDefault();onNav("#top");}}>Nach oben ↑</a>
          </div>
        </div>
      </div>
    </footer>
  );
}
window.Workshop=Workshop; window.TestDriveForm=TestDriveForm; window.Closing=Closing; window.Footer=Footer;