/* ============================================================
   CONTACT PAGE — validated form + info + map
   ============================================================ */

const MAP_QUERY = "Helmond, Noord-Brabant, Nederland"; // ← pas dit aan naar uw exacte adres
const MAP_SRC = `https://maps.google.com/maps?q=${encodeURIComponent(MAP_QUERY)}&z=13&output=embed`;

function Field({ id, label, type = "text", required, value, error, onChange, placeholder, textarea, options }) {
  const common = {
    id, name: id, value, placeholder,
    onChange: (e) => onChange(e.target.value),
    "aria-invalid": !!error, "aria-required": !!required,
  };
  return (
    <div className={`field ${error ? "invalid" : ""}`}>
      <label htmlFor={id}>{label}{required && <span className="req"> *</span>}</label>
      {textarea ? <textarea {...common} rows={6}></textarea>
        : options ? <select {...common}>{options.map((o) => <option key={o} value={o === options[0] ? "" : o}>{o}</option>)}</select>
        : <input type={type} {...common} />}
      <span className="field__err">{error}</span>
    </div>
  );
}

function ContactForm() {
  const [f, setF] = React.useState({ name: "", email: "", phone: "", subject: "", message: "", website: "" });
  const [errs, setErrs] = React.useState({});
  const [sent, setSent] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [submitError, setSubmitError] = React.useState(null);
  const set = (k) => (v) => { setF((s) => ({ ...s, [k]: v })); setErrs((e) => ({ ...e, [k]: undefined })); };

  const validate = () => {
    const e = {};
    if (!f.name.trim()) e.name = "Vul uw naam in.";
    if (!f.email.trim()) e.email = "Vul uw e-mailadres in.";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(f.email)) e.email = "Dit is geen geldig e-mailadres.";
    if (f.phone && !/^[+()/\d\s-]{6,}$/.test(f.phone)) e.phone = "Controleer uw telefoonnummer.";
    if (!f.message.trim()) e.message = "Laat een korte boodschap achter.";
    else if (f.message.trim().length < 10) e.message = "Vertel ons iets meer (min. 10 tekens).";
    return e;
  };

  const onSubmit = async (ev) => {
    ev.preventDefault();
    const e = validate();
    setErrs(e);
    if (Object.keys(e).length !== 0) {
      const first = document.querySelector(".field.invalid input, .field.invalid textarea");
      if (first) first.focus();
      return;
    }
    setSubmitting(true);
    setSubmitError(null);
    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(f),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok || !data.ok) {
        throw new Error(data.error || "Er ging iets mis. Probeer het opnieuw.");
      }
      setSent(true);
      setF({ name: "", email: "", phone: "", subject: "", message: "", website: "" });
    } catch (err) {
      setSubmitError(err.message || "Er ging iets mis. Probeer het opnieuw.");
    } finally {
      setSubmitting(false);
    }
  };

  if (sent) {
    return (
      <div className="form__success" role="status">
        <span className="ic"><Icon name="check" size={18} /></span>
        <div>
          <strong style={{ display: "block", marginBottom: 4, fontSize: "1.05rem", color: "var(--ink)" }}>Bedankt voor uw aanvraag!</strong>
          We hebben uw bericht goed ontvangen en nemen binnen één werkdag contact met u op. Liever direct? Bel ons op <a href={BRAND.phoneHref} style={{ color: "var(--gold-deep)", fontWeight: 600 }}>{BRAND.phone}</a>.
          <div style={{ marginTop: 18 }}><button className="btn btn--ghost" onClick={() => setSent(false)}>Nieuw bericht opstellen</button></div>
        </div>
      </div>
    );
  }

  return (
    <form className="form" onSubmit={onSubmit} noValidate>
      <div className="form__row">
        <Field id="name" label="Naam" required value={f.name} error={errs.name} onChange={set("name")} placeholder="Uw voor- en achternaam" />
        <Field id="email" label="E-mail" type="email" required value={f.email} error={errs.email} onChange={set("email")} placeholder="naam@voorbeeld.be" />
      </div>
      <div className="form__row">
        <Field id="phone" label="Telefoon" type="tel" value={f.phone} error={errs.phone} onChange={set("phone")} placeholder="+32 ..." />
        <Field id="subject" label="Type project" value={f.subject} onChange={set("subject")}
          options={["Kies een type (optioneel)", "Veranda", "Glazenschuifwand", "Carport", "Lamellendak", "Iets anders"]} />
      </div>
      <Field id="message" label="Uw bericht" required textarea value={f.message} error={errs.message} onChange={set("message")} placeholder="Vertel ons over uw woning, afmetingen, wensen en eventuele timing…" />
      <div aria-hidden="true" style={{ position: "absolute", left: "-10000px", width: 1, height: 1, overflow: "hidden" }}>
        <label htmlFor="website">Website</label>
        <input
          type="text"
          id="website"
          name="website"
          tabIndex={-1}
          autoComplete="off"
          value={f.website}
          onChange={(e) => setF((s) => ({ ...s, website: e.target.value }))}
        />
      </div>
      {submitError && (
        <div role="alert" style={{ marginTop: 16, padding: "12px 16px", borderRadius: 8, background: "#fdecec", color: "#8a1f1f", fontSize: ".95rem" }}>
          {submitError}
        </div>
      )}
      <div className="form__submit">
        <button type="submit" className="btn" disabled={submitting}>
          {submitting ? "Verzenden…" : <>Verstuur aanvraag <span className="arrow"><Icon name="arrow" size={18} /></span></>}
        </button>
        <span className="form__note">We reageren binnen één werkdag. Uw gegevens blijven vertrouwelijk.</span>
      </div>
    </form>
  );
}

function InfoCard() {
  const todayIdx = new Date().getDay(); // 0 zo .. 6 za
  const isToday = (i) => (i === 0 && todayIdx >= 1 && todayIdx <= 5) || (i === 1 && todayIdx === 6) || (i === 2 && todayIdx === 0);
  return (
    <div className="infocard">
      <h3>Direct contact</h3>
      <p className="sub">Liever even bellen of langskomen? U bent welkom.</p>
      <div className="info-list">
        <div className="info-row">
          <span className="ic"><Icon name="phone" size={20} /></span>
          <div><div className="k">Telefoon</div><div className="v"><a href={BRAND.phoneHref}>{BRAND.phone}</a></div></div>
        </div>
        <div className="info-row">
          <span className="ic"><Icon name="mail" size={20} /></span>
          <div><div className="k">E-mail</div><div className="v"><a href={`mailto:${BRAND.email}`}>{BRAND.email}</a></div></div>
        </div>
        <div className="info-row">
          <span className="ic"><Icon name="pin" size={20} /></span>
          <div><div className="k">Locatie</div><div className="v">{BRAND.address[0]}, {BRAND.address[1]}</div></div>
        </div>
      </div>
      <h3 style={{ marginTop: 30, fontSize: "1.15rem" }}><span style={{ display: "inline-flex", verticalAlign: "-4px", marginRight: 8, color: "var(--gold-deep)" }}><Icon name="clock" size={20} /></span>Openingsuren</h3>
      <div className="hours" style={{ marginTop: 14 }}>
        {BRAND.hours.map(([day, time], i) => (
          <div className={`h-row ${isToday(i) ? "today" : ""}`} key={day}>
            <span className="day">{day}{isToday(i) && " · vandaag"}</span>
            <span className={time === "Gesloten" ? "closed" : ""}>{time}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function ContactApp() {
  return (
    <React.Fragment>
      <Navbar active="contact" />
      <main>
        <section className="page-hero" data-screen-label="Contact — header">
          <div className="wrap">
            <div className="page-hero__crumb"><a href="index.html">Home</a> &nbsp;/&nbsp; Contact</div>
            <span className="eyebrow">Neem contact op</span>
            <h1>Vraag uw offerte aan</h1>
            <p>Vertel ons over uw project en ontvang vrijblijvend advies met een heldere prijsindicatie op maat. We denken graag met u mee.</p>
          </div>
        </section>

        <section className="section">
          <div className="wrap">
            <div className="contact__grid">
              <div>
                <span className="eyebrow">Stuur ons een bericht</span>
                <h2 className="h-section" style={{ marginTop: 16, marginBottom: 28 }}>Laat van u horen</h2>
                <ContactForm />
              </div>
              <InfoCard />
            </div>
          </div>
        </section>

        <section className="section section--tight" style={{ paddingTop: 0 }}>
          <div className="wrap">
            <div className="map" style={{ height: "clamp(320px, 46vh, 520px)" }}>
              <iframe src={MAP_SRC} title="Locatie Altun Works" loading="lazy" referrerPolicy="no-referrer-when-downgrade" allowFullScreen></iframe>
              <div className="map__tag">
                <span className="ic"><Icon name="pin" size={20} /></span>
                <div><div className="k" style={{ fontSize: 12, color: "var(--muted)" }}>Altun Works</div><div className="v">{BRAND.address[0]}, {BRAND.address[1]}</div></div>
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<ContactApp />);