// Layershop.eu — Contact page
function ContactPage() {
  const Nav = window.Nav;
  const Footer = window.Footer;
  const LayerStripes = window.LayerStripes;
  const CookieBanner = window.CookieBanner;

  const [form, setForm] = React.useState({ name: "", email: "", msg: "", company: "", notRobot: false });
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [serverError, setServerError] = React.useState("");
  const formTsRef = React.useRef(Date.now());

  const update = (k) => (e) => {
    const val = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
    setForm(f => ({ ...f, [k]: val }));
    setErrors(err => ({ ...err, [k]: undefined }));
  };

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = "Vul je naam in.";
    if (!form.email.trim()) e.email = "Vul je e-mailadres in.";
    else if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) e.email = "Geen geldig e-mailadres.";
    if (!form.msg.trim()) e.msg = "Schrijf een bericht.";
    if (!form.notRobot) e.notRobot = "Bevestig dat je geen robot bent.";
    if (form.company) e.company = "Spam gedetecteerd.";
    return e;
  };

  const onSubmit = async (ev) => {
    ev.preventDefault();
    setServerError("");
    const e = validate();
    setErrors(e);
    if (Object.keys(e).length > 0) return;
    setSending(true);
    try {
      const fd = new FormData();
      fd.append("name", form.name);
      fd.append("companyField", "");
      fd.append("email", form.email);
      fd.append("msg", form.msg);
      fd.append("company", form.company);
      if (form.notRobot) fd.append("notRobot", "on");
      fd.append("form_ts", String(formTsRef.current));
      const res = await fetch("send.php", { method: "POST", body: fd });
      let data = null;
      try { data = await res.json(); } catch (_) {}
      if (res.ok && data && data.ok) {
        setSent(true);
      } else {
        setServerError((data && data.msg) ? data.msg : "Verzenden mislukt. Probeer opnieuw.");
      }
    } catch (err) {
      setServerError("Verbinding mislukt. Probeer het later opnieuw.");
    } finally {
      setSending(false);
    }
  };

  return (
    <div style={{ background: "#FBF7F2", minHeight: "100vh", color: "#0E1330" }}>
      <Nav/>

      <section style={{ position: "relative", padding: "80px 32px 40px", overflow: "hidden" }}>
        <LayerStripes color="#F04E23" opacity={0.07} gap={4} stroke={1} />
        <div style={{ maxWidth: 920, margin: "0 auto", position: "relative" }}>
          <div style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#1E2A8A",
            letterSpacing: 2, textTransform: "uppercase",
            padding: "8px 14px", border: "1px solid #1E2A8A", borderRadius: 999, marginBottom: 24
          }}>
            <span style={{ width: 6, height: 6, background: "#F04E23", borderRadius: "50%" }}></span>
            CONTACT
          </div>
          <h1 style={{
            fontFamily: "'Space Grotesk', sans-serif", fontSize: "clamp(40px, 5vw, 72px)",
            fontWeight: 700, lineHeight: 0.95, letterSpacing: -2, margin: "0 0 20px", color: "#0E1330"
          }}>
            Stuur ons een <span style={{ color: "#F04E23" }}>bericht</span>.
          </h1>
          <p style={{
            fontFamily: "'Inter', sans-serif", fontSize: 19, lineHeight: 1.55,
            color: "#0E1330", opacity: 0.8, maxWidth: 620, margin: 0
          }}>
            Heb je een vraag, wil je de mogelijkheden bespreken of even sparren over een idee? Laat hier je bericht achter.
          </p>
        </div>
      </section>

      <section style={{ padding: "0 32px 8px" }}>
        <div style={{ maxWidth: 920, margin: "0 auto" }}>
          <div style={{
            background: "#1E2A8A", color: "#FBF7F2", borderRadius: 6,
            padding: "20px 24px", display: "flex", alignItems: "center",
            justifyContent: "space-between", gap: 20, flexWrap: "wrap",
            position: "relative", overflow: "hidden"
          }}>
            <LayerStripes color="#F04E23" opacity={0.12} gap={4} stroke={1} />
            <div style={{ position: "relative", flex: "1 1 320px" }}>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: 2, color: "#F04E23", marginBottom: 6 }}>
                TIP · DIRECT EEN OFFERTE
              </div>
              <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 18, lineHeight: 1.3 }}>
                Heb je een idee of foto en wil je weten wat het kost? Vraag direct een offerte aan.
              </div>
            </div>
            <a href="offerte.html" style={{
              position: "relative",
              fontFamily: "'Inter', sans-serif", fontSize: 14, fontWeight: 600,
              background: "#F04E23", color: "#fff", padding: "12px 20px", borderRadius: 999,
              textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 8,
              whiteSpace: "nowrap"
            }}>
              Offerte aanvragen
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                <path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </a>
          </div>
        </div>
      </section>

      <section style={{ padding: "20px 32px 80px" }}>
        <div style={{ maxWidth: 920, margin: "0 auto" }}>
          {sent ? (
            <div style={{
              background: "#fff", border: "1.5px solid #1E2A8A", padding: 32, borderRadius: 8,
              fontFamily: "'Inter', sans-serif", fontSize: 16, lineHeight: 1.6
            }}>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#F04E23", letterSpacing: 2, marginBottom: 8 }}>VERZONDEN</div>
              <h3 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 26, fontWeight: 700, margin: "0 0 8px" }}>
                Bedankt voor je bericht.
              </h3>
              <p style={{ margin: 0, opacity: 0.8 }}>
                We reageren doorgaans binnen één werkdag.
              </p>
            </div>
          ) : (
            <form onSubmit={onSubmit} noValidate style={{
              background: "#fff", border: "1px solid rgba(14,19,48,0.1)", borderRadius: 8,
              padding: 32, display: "flex", flexDirection: "column", gap: 20
            }}>
              {/* Honeypot */}
              <div style={{ position: "absolute", left: "-9999px" }} aria-hidden="true">
                <input type="text" tabIndex={-1} autoComplete="off" value={form.company} onChange={update("company")} />
              </div>

              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                <CField label="Naam *" error={errors.name}>
                  <input type="text" value={form.name} onChange={update("name")} style={inputStyle} />
                </CField>
                <CField label="E-mailadres *" error={errors.email}>
                  <input type="email" value={form.email} onChange={update("email")} style={inputStyle} />
                </CField>
              </div>

              <CField label="Bericht *" error={errors.msg}>
                <textarea value={form.msg} onChange={update("msg")} rows={6} style={{ ...inputStyle, resize: "vertical", fontFamily: "'Inter', sans-serif" }} />
              </CField>

              <div style={{ display: "flex", alignItems: "center", gap: 10, fontFamily: "'Inter', sans-serif", fontSize: 14 }}>
                <input id="notRobot" type="checkbox" checked={form.notRobot} onChange={update("notRobot")} style={{ width: 18, height: 18, accentColor: "#F04E23", cursor: "pointer" }}/>
                <label htmlFor="notRobot" style={{ cursor: "pointer", color: "#0E1330" }}>Ik ben geen robot</label>
                {errors.notRobot && <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#F04E23" }}>{errors.notRobot}</span>}
              </div>

              {serverError && (
                <div style={{
                  fontSize: 14, color: "#F04E23", padding: "12px 14px",
                  border: "1px solid rgba(240,78,35,0.4)", background: "rgba(240,78,35,0.06)", borderRadius: 6
                }}>{serverError}</div>
              )}

              <div style={{ display: "flex", justifyContent: "flex-end" }}>
                <button type="submit" disabled={sending} style={{
                  fontFamily: "'Inter', sans-serif", fontSize: 16, fontWeight: 600,
                  background: "#F04E23", color: "#fff", padding: "14px 26px",
                  border: "none", borderRadius: 999, cursor: sending ? "wait" : "pointer",
                  display: "inline-flex", alignItems: "center", gap: 10,
                  boxShadow: "0 6px 24px rgba(240,78,35,0.3)", opacity: sending ? 0.8 : 1
                }}>
                  {sending ? "Versturen..." : "Verstuur bericht"}
                  {!sending && (
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                      <path d="M3 8h10M8 3l5 5-5 5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  )}
                </button>
              </div>
            </form>
          )}

          <div style={{
            marginTop: 56, paddingTop: 32,
            borderTop: "1px solid rgba(14,19,48,0.1)",
            display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32
          }}>
            <div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#F04E23", letterSpacing: 2, marginBottom: 12 }}>WERKWIJZE</div>
              <h3 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 22, fontWeight: 700, margin: "0 0 8px", color: "#0E1330" }}>
                Antwoord binnen één werkdag.
              </h3>
              <p style={{ fontFamily: "'Inter', sans-serif", fontSize: 15, lineHeight: 1.6, color: "#0E1330", opacity: 0.75, margin: 0 }}>
                Berichten worden doorgaans binnen één werkdag beantwoord.
              </p>
            </div>
            <div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#F04E23", letterSpacing: 2, marginBottom: 12 }}>BEDRIJFSGEGEVENS</div>
              <h3 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 22, fontWeight: 700, margin: "0 0 8px", color: "#0E1330" }}>
                Layershop
              </h3>
              <p style={{ fontFamily: "'Inter', sans-serif", fontSize: 15, lineHeight: 1.6, color: "#0E1330", opacity: 0.75, margin: 0 }}>
                Noord-Brabant, NL<br/>
                Kamer van Koophandel 89199073
              </p>
            </div>
          </div>
        </div>
      </section>

      <Footer/>
      {CookieBanner ? <CookieBanner/> : null}
    </div>
  );
}

const inputStyle = {
  width: "100%", padding: "12px 14px", fontSize: 15,
  fontFamily: "'Inter', sans-serif",
  border: "1px solid rgba(14,19,48,0.18)", borderRadius: 6,
  outline: "none", background: "#FBF7F2", color: "#0E1330", boxSizing: "border-box"
};

function CField({ label, error, children }) {
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      <span style={{ fontFamily: "'Inter', sans-serif", fontSize: 13, fontWeight: 500, color: "#0E1330" }}>{label}</span>
      {children}
      {error && <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#F04E23", letterSpacing: 1 }}>{error}</span>}
    </label>
  );
}

window.ContactPage = ContactPage;