/* ============================================================
   Veranda Bouwer — Contact page
   ============================================================ */
function Contact({ go }) {
  useReveal();
  const [form, setForm] = useState({ type: "", breedte: "", diepte: "", name: "", email: "", phone: "", message: "" });
  const [errors, setErrors] = useState({});
  const [touched, setTouched] = useState({});
  const [sent, setSent] = useState(false);
  const [sending, setSending] = useState(false);
  const [submitError, setSubmitError] = useState("");
  const [hp, setHp] = useState(""); // honeypot

  const PROJECT_TYPES = ["Veranda", "Carport", "Glazen schuifwand", "Alleen staande veranda"];

  const maat = (v) => {
    const n = parseFloat(String(v).replace(",", "."));
    return isNaN(n) ? null : n;
  };

  const validators = {
    type: (v) => (!v ? "Maak een keuze" : ""),
    breedte: (v) => (!String(v).trim() ? "Vul de breedte in" : maat(v) === null ? "Vul een aantal meter in" : ""),
    diepte: (v) => (!String(v).trim() ? "Vul de diepte in" : maat(v) === null ? "Vul een aantal meter in" : ""),
    name: (v) => (!v.trim() ? "Vul uw naam in" : v.trim().length < 2 ? "Naam is te kort" : ""),
    email: (v) => (!v.trim() ? "Vul uw e-mailadres in" : !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v) ? "Ongeldig e-mailadres" : ""),
    phone: (v) => (!v.trim() ? "Vul uw telefoonnummer in" : !/^[+\d][\d\s()-]{6,}$/.test(v.trim()) ? "Ongeldig telefoonnummer" : ""),
    message: (v) => "",
  };

  const validate = (data = form) => {
    const e = {};
    Object.keys(validators).forEach((k) => { const msg = validators[k](data[k]); if (msg) e[k] = msg; });
    return e;
  };

  const onChange = (k) => (ev) => {
    const v = ev.target.value;
    const next = { ...form, [k]: v };
    setForm(next);
    if (touched[k]) setErrors((er) => ({ ...er, [k]: validators[k](v) }));
  };
  const onBlur = (k) => () => {
    setTouched((t) => ({ ...t, [k]: true }));
    setErrors((er) => ({ ...er, [k]: validators[k](form[k]) }));
  };

  const submit = async (ev) => {
    ev.preventDefault();
    const e = validate();
    setErrors(e);
    setTouched({ type: true, breedte: true, diepte: true, name: true, email: true, phone: true, message: true });
    if (Object.keys(e).length > 0) return;

    setSending(true);
    setSubmitError("");
    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ...form, website: hp }),
      });
      const data = await res.json().catch(() => ({}));
      if (res.ok && data.ok) {
        setSent(true);
      } else {
        setSubmitError(data.error || "Versturen mislukt. Probeer het opnieuw of bel ons.");
      }
    } catch (err) {
      setSubmitError("Verbindingsfout. Controleer uw internet en probeer opnieuw.");
    } finally {
      setSending(false);
    }
  };

  const field = (k, label, type = "text", placeholder = "") => (
    <div className={"field" + (errors[k] ? " invalid" : "")}>
      <label htmlFor={k}>{label} <span className="req">*</span></label>
      <input id={k} type={type} value={form[k]} placeholder={placeholder}
             onChange={onChange(k)} onBlur={onBlur(k)} />
      {errors[k] && <div className="err"><Icon name="x" size={14} /> {errors[k]}</div>}
    </div>
  );

  const selectField = (k, label, opts) => (
    <div className={"field" + (errors[k] ? " invalid" : "")}>
      <label htmlFor={k}>{label} <span className="req">*</span></label>
      <select id={k} value={form[k]} onChange={onChange(k)} onBlur={onBlur(k)}
              className={form[k] ? "" : "is-placeholder"}>
        <option value="" disabled>Maak een keuze…</option>
        {opts.map((o) => <option key={o} value={o}>{o}</option>)}
      </select>
      {errors[k] && <div className="err"><Icon name="x" size={14} /> {errors[k]}</div>}
    </div>
  );

  const infos = [
    { icon: "phone", h: "Telefoon", lines: [{ t: "+31 6 40749627", href: "tel:+31640749627" }], sub: "Ma–Vr 08:00–17:30" },
    { icon: "mail",  h: "E-mail",   lines: [{ t: "info@de-verandabouwer.nl", href: "mailto:info@de-verandabouwer.nl" }], sub: "Reactie binnen 1 werkdag" },
    { icon: "pin",   h: "Adres",    lines: [{ t: "Achterdijk 4" }, { t: "Helmond, Noord-Brabant" }], sub: "Bezoek op afspraak" },
  ];

  const hours = [
    ["Maandag", "08:00 – 17:30"], ["Dinsdag", "08:00 – 17:30"], ["Woensdag", "08:00 – 17:30"],
    ["Donderdag", "08:00 – 17:30"], ["Vrijdag", "08:00 – 17:30"], ["Zaterdag", "Op afspraak"], ["Zondag", "Gesloten"],
  ];

  return (
    <main>
      <section className="page-hero">
        <div className="wrap">
          <div className="crumbs reveal in">
            <a href="#" onClick={(e) => { e.preventDefault(); go("home"); }}>Home</a>
            <span className="sep">/</span><span>Contact</span>
          </div>
          <h1 className="reveal in">Laten we kennismaken</h1>
          <p className="reveal in">
            Een vraag, een idee of klaar voor een offerte? Vul het formulier in of bel ons gerust.
            We denken graag met u mee over uw ideale buitenruimte.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="wrap contact-grid">
          {/* FORM */}
          <div className="reveal">
            <div className="form-card">
              {sent ? (
                <div className="form-success">
                  <div className="check"><Icon name="check" size={34} /></div>
                  <h3>Bedankt, {form.name.split(" ")[0]}!</h3>
                  <p>Uw aanvraag is verzonden. We nemen binnen één werkdag contact met u op via {form.email}.</p>
                  <button className="btn btn-navy" style={{ marginTop: 24 }}
                          onClick={() => { setSent(false); setForm({ type: "", breedte: "", diepte: "", name: "", email: "", phone: "", message: "" }); setTouched({}); setErrors({}); }}>
                    Nieuw bericht opstellen
                  </button>
                </div>
              ) : (
                <form onSubmit={submit} noValidate>
                  <input type="text" name="website" value={hp} onChange={(e) => setHp(e.target.value)} tabIndex={-1} autoComplete="off" aria-hidden="true" style={{ position: "absolute", left: "-10000px", width: 1, height: 1, opacity: 0 }} />
                  <h3 className="h3" style={{ marginBottom: 6 }}>Vraag een offerte aan</h3>
                  <p style={{ color: "var(--muted)", fontSize: 14.5, marginBottom: 26 }}>Velden met <span style={{ color: "var(--red)" }}>*</span> zijn verplicht.</p>
                  {selectField("type", "Wat wilt u laten plaatsen?", PROJECT_TYPES)}
                  <div className="field-group-label">Gewenste afmeting</div>
                  <div className="field-row">
                    {field("breedte", "Breedte (meter)", "text", "3 - 8 meter")}
                    {field("diepte", "Diepte (meter)", "text", "2 - 5 meter")}
                  </div>
                  <div className="field-row">
                    {field("name", "Naam", "text", "Uw naam")}
                    {field("phone", "Telefoon", "tel", "+31 6 …")}
                  </div>
                  {field("email", "E-mail", "email", "naam@voorbeeld.nl")}
                  <div className={"field" + (errors.message ? " invalid" : "")}>
                    <label htmlFor="message">Toelichting <span style={{ color: "var(--muted)", fontWeight: 400 }}>(optioneel)</span></label>
                    <textarea id="message" value={form.message} placeholder="Bijzondere wensen, locatie of vragen? Laat het ons weten…"
                              onChange={onChange("message")} onBlur={onBlur("message")} />
                    {errors.message && <div className="err"><Icon name="x" size={14} /> {errors.message}</div>}
                  </div>
                  {submitError && (
                    <div className="err" style={{ marginTop: 12 }}>
                      <Icon name="x" size={14} /> {submitError}
                    </div>
                  )}
                  <button type="submit" className="btn btn-primary" disabled={sending} style={{ width: "100%", marginTop: 6, opacity: sending ? 0.7 : 1, cursor: sending ? "wait" : "pointer" }}>
                    {sending ? "Versturen…" : <>Verstuur aanvraag <Icon name="arrow" size={18} className="arr" /></>}
                  </button>
                </form>
              )}
            </div>
          </div>

          {/* INFO */}
          <div className="reveal d1">
            <div className="info-stack">
              {infos.map((it) => (
                <div className="info-card" key={it.h}>
                  <div className="ic-wrap"><Icon name={it.icon} size={22} /></div>
                  <div>
                    <h4>{it.h}</h4>
                    {it.lines.map((l, idx) => l.href
                      ? <a key={idx} href={l.href}>{l.t}</a>
                      : <p key={idx}>{l.t}</p>)}
                    <p style={{ fontSize: 13, marginTop: 4, color: "var(--muted)" }}>{it.sub}</p>
                  </div>
                </div>
              ))}
              <div className="hours-card">
                <h4><span className="ic"><Icon name="clock" size={18} /></span> Werktijden</h4>
                {hours.map(([d, t]) => (
                  <div key={d} className={"hours-row" + (t === "Gesloten" ? " closed" : "")}>
                    <span>{d}</span><span>{t}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* MAP */}
        <div className="wrap">
          <div className="map-wrap reveal">
            <div className="map-ph">
              <div className="road r1"></div>
              <div className="road r2"></div>
              <div className="road r3"></div>
              <div className="map-pin">
                <span className="pulse"></span>
                <span className="dot"></span>
              </div>
              <div className="map-card">
                <div className="ic-wrap"><Icon name="pin" size={20} /></div>
                <div>
                  <b>De Veranda Bouwer</b>
                  <small>Achterdijk 4, Helmond, Noord-Brabant</small>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { Contact });