// Kontakt page

function PageKontakt({ navigate, showToast }) {
  const [form, setForm] = useState({ name: "", email: "", subject: "", message: "" });
  const [errors, setErrors] = useState({});
  const [submitting, setSubmitting] = useState(false);

  const update = (k, v) => {
    setForm((f) => ({ ...f, [k]: v }));
    if (errors[k]) setErrors((e) => ({ ...e, [k]: null }));
  };

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = "Bitte geben Sie Ihren Namen an.";
    if (!form.email.trim()) e.email = "E-Mail-Adresse fehlt.";else
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email))
    e.email = "Bitte eine gültige E-Mail-Adresse.";
    if (!form.subject.trim()) e.subject = "Bitte ein Thema angeben.";
    if (!form.message.trim() || form.message.trim().length < 10)
    e.message = "Bitte schreiben Sie ein paar Sätze (mind. 10 Zeichen).";
    return e;
  };

  const submit = async (ev) => {
    ev.preventDefault();
    const e = validate();
    setErrors(e);
    if (Object.keys(e).length > 0) return;
    setSubmitting(true);

    // Daten an Formspree senden (zuverlässiger Versand an info@biotope-studio.org).
    const data = new URLSearchParams();
    data.append("name", form.name);
    data.append("email", form.email);
    data.append("subject", form.subject);
    data.append("message", form.message);
    data.append("_replyto", form.email);
    data.append("website", ""); // Honeypot gegen Spam-Bots

    try {
      const res = await fetch("https://formspree.io/f/mjgqvdlo", {
        method: "POST",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
          "Accept": "application/json",
        },
        body: data.toString(),
      });
      let payload = null;
      try { payload = await res.json(); } catch (_) {}
      if (res.ok && (!payload || !payload.errors)) {
        setForm({ name: "", email: "", subject: "", message: "" });
        showToast("Vielen Dank! Ihre Nachricht wurde gesendet.");
      } else {
        throw new Error((payload && payload.error) || "send-failed");
      }
    } catch (err) {
      // Fallback (z. B. lokale Vorschau ohne Server): E-Mail-Programm öffnen.
      const body =
        `Name: ${form.name}\n` +
        `E-Mail: ${form.email}\n\n` +
        `${form.message}\n`;
      window.location.href =
        `mailto:info@biotope-studio.org` +
        `?subject=${encodeURIComponent(form.subject)}` +
        `&body=${encodeURIComponent(body)}`;
      showToast("E-Mail-Programm geöffnet – bitte die Nachricht dort absenden.");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <main>
      <section className="hero-slim">
        <div className="bg" style={{ backgroundImage: `url(${IMG.kontaktHero})` }} />
        <div className="overlay" />
        <span className="eyebrow on-dark">Kontakt</span>
        <h1 style={{ marginTop: 12 }}>Lassen Sie uns sprechen.</h1>
        <p className="lead">
          Egal ob konkrete Anfrage oder erste Idee – schreiben Sie uns. Wir
          melden uns in der Regel innerhalb von 1–2 Werktagen.
        </p>
      </section>

      <section className="section-pad" style={{ background: "#fff" }}>
        <div className="container">
          <div className="grid-2" style={{ alignItems: "start", gap: 100 }}>
            {/* Left: details */}
            <div>
              <span className="eyebrow">Direkt erreichen</span>
              <h2 style={{ margin: "14px 0 32px" }}>
                Felix Kwasny<br />
                Biotope-Studio
              </h2>

              <div>
                <a
                  href="mailto:info@biotope-studio.org"
                  className="contact-detail"
                  style={{ textDecoration: "none" }}>
                  
                  <span className="ico"><Icon.Mail /></span>
                  <span style={{ flex: 1 }}>
                    <span className="label">E-Mail</span>
                    <span className="value">info@biotope-studio.org</span>
                  </span>
                </a>

                <a
                  href="tel:+491749653346"
                  className="contact-detail"
                  style={{ textDecoration: "none" }}>
                  
                  <span className="ico"><Icon.Phone /></span>
                  <span style={{ flex: 1 }}>
                    <span className="label">Telefon</span>
                    <span className="value">+49 174 9653346</span>
                  </span>
                </a>

                <div className="contact-detail">
                  <span className="ico"><Icon.Pin /></span>
                  <span style={{ flex: 1 }}>
                    <span className="label">Standort</span>
                    <span className="value">Hamburg, Deutschland</span>
                  </span>
                </div>

                <a
                  href="https://www.instagram.com/biotope_studio"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="contact-detail"
                  style={{ textDecoration: "none" }}>
                  
                  <span className="ico"><Icon.Instagram size={22} /></span>
                  <span style={{ flex: 1 }}>
                    <span className="label">Instagram</span>
                    <span className="value">@biotope_studio</span>
                  </span>
                </a>
              </div>

              <div
                style={{
                  marginTop: 36,
                  padding: "20px 24px",
                  background: "var(--cream)",
                  borderRadius: 14,
                  borderLeft: "3px solid var(--green)",
                  color: "var(--ink)",
                  fontSize: "0.97rem"
                }}>
                
                <strong style={{ fontWeight: 500 }}>Hinweis:</strong> Ich melde
                mich in der Regel innerhalb von 1–2 Werktagen.
              </div>
            </div>

            {/* Right: form */}
            <form
              onSubmit={submit}
              noValidate
              style={{
                background: "var(--cream)",
                padding: "44px 40px",
                borderRadius: 20,
                display: "flex",
                flexDirection: "column",
                gap: 22,
                border: "1px solid var(--line)"
              }}>
              
              <div>
                <span className="eyebrow">Nachricht senden</span>
                <h3 style={{ marginTop: 8, fontSize: "1.6rem" }}>
                  Schreiben Sie uns.
                </h3>
              </div>

              <div className={"form-field " + (errors.name ? "error" : "")}>
                <label htmlFor="name">Name</label>
                <input
                  id="name"
                  type="text"
                  value={form.name}
                  onChange={(e) => update("name", e.target.value)}
                  placeholder="Vor- und Nachname" />
                
                {errors.name && <span className="form-error-text">{errors.name}</span>}
              </div>

              <div className={"form-field " + (errors.email ? "error" : "")}>
                <label htmlFor="email">E-Mail</label>
                <input
                  id="email"
                  type="email"
                  value={form.email}
                  onChange={(e) => update("email", e.target.value)}
                  placeholder="ihre@adresse.de" />
                
                {errors.email && <span className="form-error-text">{errors.email}</span>}
              </div>

              <div className={"form-field " + (errors.subject ? "error" : "")}>
                <label htmlFor="subject">Betreff</label>
                <input
                  id="subject"
                  type="text"
                  value={form.subject}
                  onChange={(e) => update("subject", e.target.value)}
                  placeholder="Worum geht es?" />
                
                {errors.subject && <span className="form-error-text">{errors.subject}</span>}
              </div>

              <div className={"form-field " + (errors.message ? "error" : "")}>
                <label htmlFor="message">Nachricht</label>
                <textarea
                  id="message"
                  rows="5"
                  value={form.message}
                  onChange={(e) => update("message", e.target.value)}
                  placeholder="Erzählen Sie uns kurz von Ihrem Vorhaben…" />
                
                {errors.message && <span className="form-error-text">{errors.message}</span>}
              </div>

              <button
                type="submit"
                className="btn btn-primary"
                disabled={submitting}
                style={{
                  alignSelf: "flex-start",
                  padding: "16px 30px",
                  opacity: submitting ? 0.7 : 1,
                  cursor: submitting ? "wait" : "pointer"
                }}>
                
                {submitting ? "Wird gesendet…" :
                <>
                    Nachricht senden <Icon.Send />
                  </>
                }
              </button>
            </form>
          </div>
        </div>
      </section>
    </main>);

}

window.PageKontakt = PageKontakt;