/* Kontakt page with form */
const { useState: kS } = React;

function ContactPage() {
  useReveal();
  const [form, setForm] = kS({ name: "", email: "", phone: "", service: "Innenanstrich", msg: "", consent: false });
  const [submitted, setSubmitted] = kS(false);
  const [errors, setErrors] = kS({});

  function set(k, v) { setForm(f => ({ ...f, [k]: v })); }

  function validate() {
    const e = {};
    if (!form.name.trim()) e.name = "Bitte geben Sie Ihren Namen an.";
    if (!form.email.trim() || !/^\S+@\S+\.\S+$/.test(form.email)) e.email = "Bitte eine gültige E-Mail.";
    if (!form.msg.trim() || form.msg.length < 10) e.msg = "Beschreiben Sie Ihr Vorhaben kurz (mind. 10 Zeichen).";
    if (!form.consent) e.consent = "Bitte stimmen Sie der Datenverarbeitung zu.";
    setErrors(e);
    return Object.keys(e).length === 0;
  }

  function submit(ev) {
    ev.preventDefault();
    if (validate()) setSubmitted(true);
  }

  const inputStyle = {
    width: "100%", padding: "14px 16px", border: "1px solid var(--line-strong)", background: "var(--bg)",
    fontFamily: "var(--sans)", fontSize: 15, color: "var(--fg)", borderRadius: 0, outline: "none",
    transition: "border-color .2s"
  };
  const labelStyle = { fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".15em", textTransform: "uppercase", color: "var(--fg-soft)", marginBottom: 8, display: "block" };
  const errStyle = { color: "#a04030", fontSize: 12, marginTop: 6, fontFamily: "var(--mono)", letterSpacing: ".05em" };

  return (
    <>
      <Nav active="kontakt" />
      <section style={{ borderBottom: "1px solid var(--line)" }}>
        <div className="container" style={{ padding: "clamp(48px, 7vw, 96px) var(--pad)" }}>
          <div className="h-eyebrow" style={{ marginBottom: 24 }}>— Kontakt</div>
          <h1 className="display" style={{ fontSize: "clamp(48px, 7vw, 96px)", maxWidth: 1000 }}>
            Sprechen wir <em style={{ color: "var(--accent)" }}>über Ihr Projekt.</em>
          </h1>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 64, alignItems: "start" }}>
            {/* Linke Spalte — Kontaktdaten */}
            <div className="reveal" style={{ display: "grid", gap: 32, position: "sticky", top: 100 }}>
              <div>
                <div className="h-eyebrow">Werkstatt</div>
                <p style={{ fontFamily: "var(--serif)", fontSize: 22, fontStyle: "italic", marginTop: 8, lineHeight: 1.4 }}>
                  Hauptstraße 14<br/>94474 Vilshofen an der Donau
                </p>
              </div>
              <div style={{ borderTop: "1px solid var(--line)", paddingTop: 24 }}>
                <div className="h-eyebrow">Telefon</div>
                <a href="tel:+4985419998877" style={{ fontFamily: "var(--serif)", fontSize: 24, fontStyle: "italic", display: "block", marginTop: 8 }}>+49 8541 999 88 77</a>
              </div>
              <div style={{ borderTop: "1px solid var(--line)", paddingTop: 24 }}>
                <div className="h-eyebrow">E-Mail</div>
                <a href="mailto:info@radlinger-malerei.de" style={{ fontFamily: "var(--serif)", fontSize: 18, fontStyle: "italic", display: "block", marginTop: 8 }}>info@radlinger-malerei.de</a>
              </div>
              <div style={{ borderTop: "1px solid var(--line)", paddingTop: 24 }}>
                <div className="h-eyebrow">Öffnungszeiten</div>
                <ul style={{ listStyle: "none", marginTop: 8, fontSize: 15, display: "grid", gap: 4 }}>
                  <li>Mo – Fr · 7.30 – 17.00</li>
                  <li>Sa · nach Vereinbarung</li>
                  <li>So · geschlossen</li>
                </ul>
              </div>
              <div style={{ borderTop: "1px solid var(--line)", paddingTop: 24 }}>
                <div className="h-eyebrow">Einzugsgebiet</div>
                <p style={{ fontSize: 15, color: "var(--fg-soft)", marginTop: 8, lineHeight: 1.55 }}>
                  Vilshofen, Aldersbach, Ortenburg, Hofkirchen, Pleinting, Passau, Deggendorf — und auf Anfrage auch darüber hinaus.
                </p>
              </div>
            </div>

            {/* Rechte Spalte — Formular */}
            <div className="reveal">
              {submitted ? (
                <div style={{ background: "var(--bg-2)", padding: 48, border: "1px solid var(--line)", textAlign: "center" }}>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 36, fontStyle: "italic", marginBottom: 16 }}>Vielen Dank!</div>
                  <p style={{ fontSize: 16, color: "var(--fg-soft)", lineHeight: 1.6, maxWidth: 480, margin: "0 auto" }}>
                    Ihre Anfrage ist bei uns angekommen. Wir melden uns innerhalb von 1–2 Werktagen telefonisch oder per E-Mail bei Ihnen.
                  </p>
                  <button onClick={() => { setSubmitted(false); setForm({ name: "", email: "", phone: "", service: "Innenanstrich", msg: "", consent: false }); }} className="btn btn-ghost" style={{ marginTop: 32 }}>
                    Neue Anfrage
                  </button>
                </div>
              ) : (
                <form onSubmit={submit} style={{ display: "grid", gap: 20 }}>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
                    <div>
                      <label style={labelStyle}>Name *</label>
                      <input type="text" value={form.name} onChange={e => set("name", e.target.value)} style={inputStyle} placeholder="Vor- und Nachname" />
                      {errors.name && <div style={errStyle}>{errors.name}</div>}
                    </div>
                    <div>
                      <label style={labelStyle}>Telefon</label>
                      <input type="tel" value={form.phone} onChange={e => set("phone", e.target.value)} style={inputStyle} placeholder="optional" />
                    </div>
                  </div>
                  <div>
                    <label style={labelStyle}>E-Mail *</label>
                    <input type="email" value={form.email} onChange={e => set("email", e.target.value)} style={inputStyle} placeholder="ihre@email.de" />
                    {errors.email && <div style={errStyle}>{errors.email}</div>}
                  </div>
                  <div>
                    <label style={labelStyle}>Art des Projekts</label>
                    <select value={form.service} onChange={e => set("service", e.target.value)} style={inputStyle}>
                      <option>Innenanstrich</option>
                      <option>Fassade / Außenanstrich</option>
                      <option>Lackierung (Holz / Metall)</option>
                      <option>Tapezieren</option>
                      <option>Beratung / Sonstiges</option>
                    </select>
                  </div>
                  <div>
                    <label style={labelStyle}>Beschreibung *</label>
                    <textarea value={form.msg} onChange={e => set("msg", e.target.value)} rows={6} style={{ ...inputStyle, resize: "vertical", fontFamily: "var(--sans)" }} placeholder="Was möchten Sie machen lassen? Räume, Quadratmeter, Wunschtermin ..." />
                    {errors.msg && <div style={errStyle}>{errors.msg}</div>}
                  </div>
                  <label style={{ display: "grid", gridTemplateColumns: "20px 1fr", gap: 12, fontSize: 13, color: "var(--fg-soft)", cursor: "pointer", alignItems: "start" }}>
                    <input type="checkbox" checked={form.consent} onChange={e => set("consent", e.target.checked)} style={{ marginTop: 3 }} />
                    <span>Ich bin damit einverstanden, dass meine Angaben zur Bearbeitung der Anfrage gespeichert werden.</span>
                  </label>
                  {errors.consent && <div style={errStyle}>{errors.consent}</div>}
                  <button type="submit" className="btn btn-primary" style={{ justifySelf: "start", marginTop: 12 }}>
                    Anfrage senden <span className="arrow">→</span>
                  </button>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>

      <Footer />
    </>
  );
}

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