// Contact form — sends to stemirko@gmail.com (mailto fallback in prototype).

const Contact = ({ t, lang }) => {
  const [arrival, setArrival] = React.useState("");
  const [departure, setDeparture] = React.useState("");
  const [guests, setGuests] = React.useState("2");
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [note, setNote] = React.useState("");
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [sendError, setSendError] = React.useState(false);

  const validate = () => {
    const e = {};
    if (!arrival) e.arrival = t.form.error_required;
    if (!departure) e.departure = t.form.error_required;
    if (!name) e.name = t.form.error_required;
    if (!email) e.email = t.form.error_required;else
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) e.email = t.form.error_email;
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const onSubmit = (ev) => {
    ev.preventDefault();
    if (!validate()) return;
    setSending(true);
    setSendError(false);
    fetch("https://formspree.io/f/xzdogqdw", {
      method: "POST",
      headers: { "Content-Type": "application/json", "Accept": "application/json" },
      body: JSON.stringify({
        _subject: "Neue Anfrage — Wohnung Prags",
        Anreise: arrival,
        Abreise: departure,
        "Anzahl Gäste": guests,
        Name: name,
        "E-Mail": email,
        Nachricht: note || "–",
        _language: lang
      })
    })
    .then((res) => {
      setSending(false);
      if (res.ok) { setSent(true); }
      else { setSendError(true); }
    })
    .catch(() => {
      setSending(false);
      setSendError(true);
    });
  };

  const labelStyle = {
    fontFamily: "var(--font-sans)", fontSize: 10.5, letterSpacing: "0.22em",
    textTransform: "uppercase", color: "rgba(245,241,234,0.55)",
    display: "block", marginBottom: 10
  };
  const fieldStyle = (err) => ({
    fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 19, color: "var(--bone)",
    padding: "10px 0 14px", border: "none",
    borderBottom: `1px solid ${err ? "var(--gold)" : "rgba(245,241,234,0.22)"}`,
    background: "transparent", outline: "none", width: "100%",
    transition: "border-color 280ms"
  });
  const errStyle = {
    marginTop: 6, fontFamily: "var(--font-sans)", fontSize: 11,
    letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--gold)"
  };

  return (
    <section id="contact" data-screen-label="07 Kontakt" style={{
      background: "var(--ink)", color: "var(--bone)", padding: "140px 56px 120px"
    }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 96 }}>
        <Reveal>
          <Eyebrow tone="gold">· {t.contact_eyebrow} ·</Eyebrow>
          <div style={{ marginTop: 22 }}>
            <Headline lines={t.contact_title} size={56} light />
          </div>
          <div style={{ marginTop: 26 }}><HairlineGold width={48} /></div>
          <p style={{
            marginTop: 28, fontFamily: "var(--font-serif)", fontStyle: "italic",
            fontSize: 19, lineHeight: 1.5, color: "rgba(245,241,234,0.78)", maxWidth: 420
          }}>{t.contact_lead}</p>
          <div style={{ marginTop: 48 }}>
            <div style={{
              fontFamily: "var(--font-serif)", fontStyle: "italic",
              fontSize: 22, color: "var(--gold)"
            }}></div>
            <div style={{
              marginTop: 8, fontFamily: "var(--font-sans)", fontSize: 13,
              color: "rgba(245,241,234,0.5)"
            }}></div>
          </div>
        </Reveal>

        <Reveal delay={120}>
          {sent ?
          <div style={{
            border: "1px solid rgba(201,168,106,0.4)", padding: "60px 48px",
            background: "rgba(245,241,234,0.02)",
            display: "flex", flexDirection: "column", alignItems: "center", gap: 22,
            textAlign: "center"
          }}>
              <Diamond size={8} />
              <div style={{
              fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 32,
              color: "var(--bone)", lineHeight: 1.2, maxWidth: 480
            }}>{t.form.sent}</div>
              <RuleDiamond maxWidth={120} />
              <div style={{
              fontFamily: "var(--font-sans)", fontSize: 11, letterSpacing: "0.22em",
              textTransform: "uppercase", color: "rgba(245,241,234,0.55)"
            }}>Mirko · stemirko@gmail.com</div>
            </div> :

          <form onSubmit={onSubmit} style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 36 }}>
              <div>
                <label style={labelStyle}>{t.form.arrival}</label>
                <input type="date" value={arrival} onChange={(e) => setArrival(e.target.value)} style={fieldStyle(errors.arrival)} />
                {errors.arrival && <div style={errStyle}>{errors.arrival}</div>}
              </div>
              <div>
                <label style={labelStyle}>{t.form.departure}</label>
                <input type="date" value={departure} onChange={(e) => setDeparture(e.target.value)} style={fieldStyle(errors.departure)} />
                {errors.departure && <div style={errStyle}>{errors.departure}</div>}
              </div>
              <div>
                <label style={labelStyle}>{t.form.guests}</label>
                <select value={guests} onChange={(e) => setGuests(e.target.value)} style={{ ...fieldStyle(false), appearance: "none", colorScheme: "dark" }}>
                  {["1", "2", "3", "4", "5", "6"].map((n) => <option key={n} value={n}>{n}</option>)}
                </select>
              </div>
              <div>
                <label style={labelStyle}>{t.form.name}</label>
                <input type="text" value={name} onChange={(e) => setName(e.target.value)} style={fieldStyle(errors.name)} />
                {errors.name && <div style={errStyle}>{errors.name}</div>}
              </div>
              <div style={{ gridColumn: "1 / -1" }}>
                <label style={labelStyle}>{t.form.email}</label>
                <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} style={fieldStyle(errors.email)} />
                {errors.email && <div style={errStyle}>{errors.email}</div>}
              </div>
              <div style={{ gridColumn: "1 / -1" }}>
                <label style={labelStyle}>{t.form.note}</label>
                <textarea rows={3} value={note} onChange={(e) => setNote(e.target.value)} style={{ ...fieldStyle(false), resize: "vertical", minHeight: 80 }} />
              </div>
              <div style={{ gridColumn: "1 / -1", marginTop: 12, display: "flex", flexDirection: "column", gap: 16 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 24 }}>
                  <button type="submit" disabled={sending} style={{
                    fontFamily: "var(--font-sans)", fontSize: 11, fontWeight: 500,
                    letterSpacing: "0.22em", textTransform: "uppercase",
                    padding: "16px 36px",
                    background: sending ? "rgba(201,168,106,0.5)" : "var(--gold)",
                    color: "var(--ink)",
                    border: "1px solid var(--gold)", cursor: sending ? "wait" : "pointer",
                    transition: "background 280ms, color 280ms"
                  }}>{sending ? "Sende …" : t.form.submit}</button>
                </div>
                {sendError && <div style={{
                  fontFamily: "var(--font-sans)", fontSize: 12, letterSpacing: "0.14em",
                  color: "#e07c5a"
                }}>Senden fehlgeschlagen. Bitte versuchen Sie es erneut oder schreiben Sie direkt an stemirko@gmail.com</div>}
              </div>
            </form>
          }
        </Reveal>
      </div>
    </section>);

};

window.Contact = Contact;