// pages/contact.jsx — Contact with form, embedded OpenStreetMap, info

function ContactPage() {
  const { t, lang } = useApp();
  const [form, setForm] = useState({ name: "", email: "", topic: t.contact.form.topics[0], message: "" });
  const [sent, setSent] = useState(false);
  const [error, setError] = useState(null);
  const [submitting, setSubmitting] = useState(false);
  const update = (k, v) => setForm((f) => ({ ...f, [k]: v }));

  const submit = async (e) => {
    e.preventDefault();
    setError(null);
    setSubmitting(true);
    try {
      const r = await fetch(`${window.API_BASE}/api/contact`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });
      if (!r.ok) throw new Error(await r.text());
      track("contact_form_submit", { topic: form.topic });
      setSent(true);
      setTimeout(() => setSent(false), 6000);
      setForm({ name: "", email: "", topic: t.contact.form.topics[0], message: "" });
    } catch (err) {
      setError(lang === "pl" ? "Nie udalo sie wyslac wiadomosci. Sprobuj ponownie." : "Could not send the message. Please try again.");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="page-enter">
      <section className="page-hero" style={{ padding: "180px 0 80px" }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 24 }}>{t.contact.eyebrow}</div>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(48px, 7vw, 92px)", fontWeight: 400, lineHeight: 1, maxWidth: "18ch" }}>
            {t.contact.title_a}<br /><em style={{ fontStyle: "italic", color: "var(--accent)" }}>{t.contact.title_b}</em>
          </h1>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 80, alignItems: "start" }}>
            <form onSubmit={submit} style={{ background: "var(--paper)", padding: 48, border: "1px solid var(--line)" }}>
              <p className="lead" style={{ marginBottom: 40 }}>{t.contact.body}</p>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 16 }}>
                <div className="field">
                  <label>{t.contact.form.name}</label>
                  <input type="text" value={form.name} onChange={(e) => update("name", e.target.value)} required />
                </div>
                <div className="field">
                  <label>{t.contact.form.email}</label>
                  <input type="email" value={form.email} onChange={(e) => update("email", e.target.value)} required />
                </div>
                <div className="field" style={{ gridColumn: "1 / -1" }}>
                  <label>{t.contact.form.topic}</label>
                  <select value={form.topic} onChange={(e) => update("topic", e.target.value)}>
                    {t.contact.form.topics.map((tp) => <option key={tp} value={tp}>{tp}</option>)}
                  </select>
                </div>
                <div className="field" style={{ gridColumn: "1 / -1" }}>
                  <label>{t.contact.form.message}</label>
                  <textarea rows={6} value={form.message} onChange={(e) => update("message", e.target.value)} required />
                </div>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 32, flexWrap: "wrap", gap: 16 }}>
                {sent ? (
                  <div style={{ display: "flex", alignItems: "center", gap: 12, color: "var(--accent)", fontSize: 13 }}>
                    <Ic.check />
                    <span>{t.contact.form.sent}</span>
                  </div>
                ) : error ? (
                  <div style={{ fontSize: 13, color: "#c0392b" }}>{error}</div>
                ) : <span />}
                <button
                  type="submit"
                  className="btn"
                  disabled={submitting}
                  style={{ opacity: submitting ? 0.6 : 1, cursor: submitting ? "wait" : "pointer" }}
                >
                  {submitting ? (lang === "pl" ? "Wysylanie..." : "Sending...") : t.common.send} <Ic.arrow />
                </button>
              </div>
            </form>

            <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
              <InfoBlock icon={Ic.pin} label={t.contact.addressLabel}>
                {t.contact.address.map((l, i) => <div key={i}>{l}</div>)}
              </InfoBlock>
              <InfoBlock icon={Ic.key} label={t.contact.phoneLabel}>
                <a href={"tel:" + t.contact.phone.replace(/\s/g, "")} style={{ color: "var(--ink)", textDecoration: "none" }}>{t.contact.phone}</a>
              </InfoBlock>
              <InfoBlock icon={Ic.book} label={t.contact.emailLabel}>
                <a href={"mailto:" + t.contact.email} style={{ color: "var(--ink)", textDecoration: "none" }}>{t.contact.email}</a>
              </InfoBlock>
              <InfoBlock icon={Ic.calendar} label={t.contact.hoursLabel}>
                {t.contact.hours}
              </InfoBlock>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div style={{ position: "relative", height: 480, background: "var(--bg-2)", overflow: "hidden" }}>
            <iframe
              title={lang === "pl" ? "Mapa — Long Street Aparthostel, ul. Długa 43/6, Kraków" : "Map — Long Street Aparthostel, ul. Długa 43/6, Kraków"}
              src="https://www.openstreetmap.org/export/embed.html?bbox=19.9309%2C50.0673%2C19.9429%2C50.0733&layer=mapnik&marker=50.0703%2C19.9369"
              style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: 0 }}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            ></iframe>
            <div style={{
              position: "absolute", top: 32, left: 32,
              background: "var(--paper)", padding: 28,
              maxWidth: 320, border: "1px solid var(--line)",
            }}>
              <div className="eyebrow" style={{ marginBottom: 16 }}>{lang === "pl" ? "Jak nas znaleźć" : "Find us"}</div>
              <h3 className="h3" style={{ marginBottom: 14 }}>Long Street Aparthostel</h3>
              <p style={{ fontSize: 13, color: "var(--ink-2)", marginBottom: 20 }}>
                {lang === "pl"
                  ? "ul. Długa 43/6, 31-047 Kraków. Parking publiczny przy sąsiednich ulicach — 120 zł / dzień."
                  : "Długa 43/6, 31-047 Kraków. Public parking on neighbouring streets — 120 PLN per day."}
              </p>
              <a className="btn-line" href="https://www.google.com/maps/search/?api=1&query=Długa+43%2F6%2C+31-047+Kraków" target="_blank" rel="noopener">
                {lang === "pl" ? "Otwórz w mapach" : "Open in maps"} <Ic.arrow />
              </a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function InfoBlock({ icon: I, label, children }) {
  return (
    <div style={{ display: "flex", gap: 20, paddingBottom: 28, borderBottom: "1px dashed var(--line)" }}>
      <div style={{ width: 48, height: 48, border: "1px solid var(--accent)", display: "grid", placeItems: "center", color: "var(--accent)", flexShrink: 0 }}>
        <I />
      </div>
      <div>
        <div className="uppercase" style={{ color: "var(--ink-3)", marginBottom: 8 }}>{label}</div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 22, lineHeight: 1.3, color: "var(--ink)" }}>
          {children}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ContactPage });