// Contact page
const SUBMIT_COOLDOWN_MS = 60 * 1000; // 60 seconden tussen inzendingen
const MAX_FIELD_LENGTH = { name: 100, email: 254, phone: 30, kenteken: 20, message: 2000 };

function sanitize(str, max) {
  return String(str || "").trim().slice(0, max);
}

function Contact({ setPage }) {
  const { useState: useS } = React;
  const [form, setForm] = useS({ name: "", email: "", phone: "", kenteken: "", message: "" });
  const [honey, setHoney] = useS(""); // honeypot — bots vullen dit in, mensen nooit
  const [status, setStatus] = useS("idle"); // idle | sending | ok | error | cooldown

  function update(k) { return e => setForm(f => ({ ...f, [k]: e.target.value })); }

  async function handleSubmit(e) {
    e.preventDefault();

    // Honeypot check — als dit veld ingevuld is, is het een bot
    if (honey) { setStatus("ok"); return; } // stil negeren, geen foutmelding aan bot

    // Rate limiting — max 1 inzending per 60 seconden
    const lastSubmit = parseInt(sessionStorage.getItem("a2_last_submit") || "0");
    const now = Date.now();
    if (now - lastSubmit < SUBMIT_COOLDOWN_MS) {
      setStatus("cooldown");
      return;
    }

    // Input validatie — velden afkappen op max lengte
    const cleanForm = {
      name:    sanitize(form.name,    MAX_FIELD_LENGTH.name),
      email:   sanitize(form.email,   MAX_FIELD_LENGTH.email),
      phone:   sanitize(form.phone,   MAX_FIELD_LENGTH.phone),
      kenteken:sanitize(form.kenteken,MAX_FIELD_LENGTH.kenteken),
      message: sanitize(form.message, MAX_FIELD_LENGTH.message),
    };

    // Basisvalidatie
    if (!cleanForm.name || !cleanForm.email || !cleanForm.kenteken) return;
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(cleanForm.email)) return;

    setStatus("sending");
    sessionStorage.setItem("a2_last_submit", String(now));

    try {
      const res = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({
          access_key: "e1e3dd1f-8cf6-42ac-b137-d0bf47e24cbb",
          subject: `Nieuwe aanvraag van ${cleanForm.name} — A2-Motor.nl`,
          from_name: "A2 Motor website",
          naam: cleanForm.name,
          email: cleanForm.email,
          telefoon: cleanForm.phone || "—",
          kenteken_of_model: cleanForm.kenteken,
          bericht: cleanForm.message || "—",
          replyto: cleanForm.email,
          // Honeypot veld voor Web3Forms spam-filter
          _honey: honey,
        })
      });
      const data = await res.json();
      setStatus(data.success ? "ok" : "error");
    } catch {
      setStatus("error");
    }
  }

  return (
    <div>
      {/* Hero */}
      <section className="contact-hero">
        <div className="wrap">
          <div className="eyebrow">Contact</div>
          <h1>Samen jouw motor<br/>A2-klaar maken.</h1>
          <p className="lead">Stuur ons je kenteken of stel je vraag. We reageren dezelfde dag — liefst nog sneller.</p>
        </div>
      </section>

      {/* Main */}
      <div className="wrap contact-layout">

        {/* Form */}
        <div>
          <div className="eyebrow" style={{marginBottom: 28}}>Stuur een bericht</div>

          {status === "ok" ? (
            <div className="form-success">
              <div className="form-success-icon">
                <Icon.check />
              </div>
              <h3>Bericht ontvangen.</h3>
              <p>We nemen zo snel mogelijk contact met je op — meestal binnen een paar uur.</p>
              <button className="btn btn-primary" style={{marginTop: 24}} onClick={() => setStatus("idle")}>
                Nog een bericht sturen
              </button>
            </div>
          ) : (
            <form className="contact-form" onSubmit={handleSubmit}>
              {/* Honeypot — verborgen voor mensen, bots vullen dit in */}
              <input
                type="text"
                name="_honey"
                value={honey}
                onChange={e => setHoney(e.target.value)}
                style={{opacity:0,position:"absolute",top:0,left:0,height:0,width:0,zIndex:-1}}
                tabIndex={-1}
                autoComplete="off"
                aria-hidden="true"
              />
              <div className="form-row">
                <div className="form-group">
                  <label>Naam <span className="form-required">*</span></label>
                  <input type="text" required value={form.name} onChange={update("name")} placeholder="Jouw naam" />
                </div>
                <div className="form-group">
                  <label>E-mailadres <span className="form-required">*</span></label>
                  <input type="email" required value={form.email} onChange={update("email")} placeholder="jij@voorbeeld.nl" />
                </div>
              </div>
              <div className="form-row">
                <div className="form-group">
                  <label>Telefoonnummer</label>
                  <input type="tel" value={form.phone} onChange={update("phone")} placeholder="06 — 00 00 00 00" />
                </div>
                <div className="form-group">
                  <label>Kenteken of model <span className="form-required">*</span></label>
                  <input type="text" required value={form.kenteken} onChange={update("kenteken")} placeholder="bijv. AB-123-C of Yamaha MT-07" />
                </div>
              </div>
              <div className="form-group">
                <label>Bericht</label>
                <textarea value={form.message} onChange={update("message")} placeholder="Stel je vraag of vertel wat je wilt weten…" />
              </div>

              {status === "error" && (
                <p style={{color: "var(--bad)", fontSize: 14, margin: 0}}>
                  Er ging iets mis. Probeer het opnieuw of app ons direct via WhatsApp.
                </p>
              )}
              {status === "cooldown" && (
                <p style={{color: "var(--fg-2)", fontSize: 14, margin: 0}}>
                  Je hebt het formulier net ingestuurd. Wacht even een minuutje voor je opnieuw verzendt.
                </p>
              )}

              <div style={{display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap"}}>
                <button type="submit" className="btn btn-primary btn-lg" disabled={status === "sending"}>
                  {status === "sending" ? "Versturen…" : <span style={{display:"inline-flex",alignItems:"center",gap:10}}>Verstuur aanvraag <Icon.arrow /></span>}
                </button>
                <p className="form-note">Binnen één werkdag reactie. Liever direct? App ons.</p>
              </div>
            </form>
          )}
        </div>

        {/* Sidebar */}
        <div className="contact-sidebar">

          {/* WhatsApp card */}
          <div className="contact-card contact-card-dark">
            <div className="eyebrow" style={{color: "color-mix(in oklab, var(--bg) 55%, transparent)"}}>Snelste route</div>
            <h3>Liever direct contact?</h3>
            <p>Stuur je kenteken via WhatsApp — we reageren razendsnel en geven je meteen een eerlijk antwoord.</p>
            <a className="btn btn-wa btn-lg" href="https://wa.me/31646247313?text=Hallo%2C%20ik%20wil%20graag%20weten%20of%20mijn%20motor%20A2-geschikt%20is.%20Mijn%20kenteken%20is%3A%20" target="_blank" rel="noreferrer" style={{width:"100%", justifyContent:"center"}}>
              <Icon.whatsapp /> App ons op WhatsApp
            </a>
          </div>

          {/* Contact details */}
          <div className="contact-card">
            <h3>Contactgegevens</h3>
            <ul className="contact-detail-list">
              <li>
                <span className="contact-ico">✉</span>
                <div><strong>E-mail</strong>info@a2-motor.nl</div>
              </li>
              <li>
                <span className="contact-ico">☎</span>
                <div><strong>WhatsApp & bellen</strong><a href="tel:0646247313" style={{color:"inherit"}}>06-46247313</a></div>
              </li>
              <li>
                <span className="contact-ico">◎</span>
                <div><strong>Werkplaats</strong>Hunnenweg 21, Voorthuizen</div>
              </li>
              <li>
                <span className="contact-ico">◷</span>
                <div><strong>Openingstijden</strong>Ma – Za: 10:00 – 18:00</div>
              </li>
            </ul>
          </div>

          {/* Response times */}
          <div className="contact-card">
            <div className="eyebrow" style={{marginBottom: 4}}>Reactietijden</div>
            <div className="contact-times">
              <div className="contact-time">
                <dt>WhatsApp</dt>
                <dd>{"< 1 uur"}</dd>
              </div>
              <div className="contact-time">
                <dt>E-mail</dt>
                <dd>{"< 1 dag"}</dd>
              </div>
              <div className="contact-time">
                <dt>Offerte</dt>
                <dd>24 uur</dd>
              </div>
              <div className="contact-time">
                <dt>Klaar in</dt>
                <dd>5 dagen</dd>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  );
}
window.Contact = Contact;