// contact.jsx — contact page
function ContactPage({ t, lang }) {
  const [form, setForm] = React.useState({ name: "", email: "", subject: "", message: "" });
  const [sent, setSent] = React.useState(false);
  const submit = (e) => { e.preventDefault(); setSent(true); };

  return (
    <main>
      <section style={{ padding: "100px 0 60px" }}>
        <div className="wrap">
          <div className="eyebrow">{t(COPY.contact.eyebrow)}</div>
          <h1 className="display" style={{ fontSize: "clamp(40px, 7.5vw, 124px)", margin: "24px 0 0", overflowWrap: "break-word" }}>
            {t(COPY.contact.title).replace(".", "")}<em>.</em>
          </h1>
          <p className="lead" style={{ marginTop: 32, maxWidth: 560 }}>{t(COPY.contact.sub)}</p>
        </div>
      </section>

      <section style={{ padding: "60px 0 100px", borderTop: "1px solid var(--c-rule)" }}>
        <div className="wrap mobile-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80 }}>
          {/* left — info */}
          <div>
            <div style={{ marginBottom: 48 }}>
              <h3 className="cap" style={{ marginBottom: 12, color: "var(--c-ink-3)" }}>{t(["Palenque", "Distillery"])}</h3>
              <p style={{ margin: 0, fontFamily: "var(--serif)", fontSize: 22, lineHeight: 1.4 }}>
                Av. 25 de Agosto 903<br/>
                Tecali de Herrera<br/>
                Puebla, México · 75240
              </p>
            </div>

            <div style={{ marginBottom: 48 }}>
              <h3 className="cap" style={{ marginBottom: 12, color: "var(--c-ink-3)" }}>{t(["Hablemos", "Direct"])}</h3>
              <p style={{ margin: 0, fontFamily: "var(--serif)", fontSize: 22, lineHeight: 1.5 }}>
                hola@coyoteemplumado.mx<br/>
                +52 222 000 0000
              </p>
            </div>

            <div style={{ marginBottom: 48 }}>
              <h3 className="cap" style={{ marginBottom: 12, color: "var(--c-ink-3)" }}>{t(["Horario de palenque", "Distillery hours"])}</h3>
              <table style={{ borderCollapse: "collapse", fontFamily: "var(--mono)", fontSize: 12 }}>
                <tbody>
                  {[
                    [t(["Lun–Vie", "Mon–Fri"]), "10:00 — 17:00"],
                    [t(["Sábado", "Saturday"]), "11:00 — 15:00"],
                    [t(["Domingo", "Sunday"]), t(["Cerrado", "Closed"])],
                  ].map((r, i) => (
                    <tr key={i}>
                      <td style={{ padding: "6px 32px 6px 0", color: "var(--c-ink-3)", letterSpacing: ".1em", textTransform: "uppercase" }}>{r[0]}</td>
                      <td style={{ padding: "6px 0" }}>{r[1]}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
              <p style={{ marginTop: 16, fontSize: 12, color: "var(--c-ink-3)", maxWidth: 320 }}>
                {t(["Visitas con cita previa. Escríbenos al menos una semana antes.", "Visits by appointment. Write to us at least a week in advance."])}
              </p>
            </div>

            <div>
              <h3 className="cap" style={{ marginBottom: 12, color: "var(--c-ink-3)" }}>{t(["Síguenos", "Follow"])}</h3>
              <div style={{ display: "flex", gap: 20, fontFamily: "var(--serif)", fontSize: 18 }}>
                <a>Instagram</a><a>YouTube</a><a>Spotify</a>
              </div>
            </div>
          </div>

          {/* right — form */}
          <div>
            {sent ? (
              <div style={{ padding: "48px 40px", border: "1px solid var(--c-oxblood)", background: "var(--c-paper)" }}>
                <CoyoteMark size={40} color="var(--c-oxblood)" />
                <h3 style={{ fontFamily: "var(--serif)", fontSize: 36, fontWeight: 400, margin: "16px 0 8px", color: "var(--c-oxblood)" }}>
                  {t(["Salud.", "Salud."])}
                </h3>
                <p style={{ margin: 0, color: "var(--c-ink-2)", fontSize: 15 }}>{t(COPY.contact.sent)}</p>
              </div>
            ) : (
              <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 28 }}>
                <Field label={t(COPY.contact.fields.name)}>
                  <input value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} required />
                </Field>
                <Field label={t(COPY.contact.fields.email)}>
                  <input type="email" value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} required />
                </Field>
                <Field label={t(COPY.contact.fields.subject)}>
                  <div style={{ display: "flex", flexWrap: "wrap", gap: 10, paddingTop: 8 }}>
                    {COPY.contact.subjects.map((s, i) => {
                      const v = t(s);
                      const active = form.subject === v;
                      return (
                        <span key={i} onClick={() => setForm({ ...form, subject: v })}
                          style={{
                            padding: "8px 14px",
                            border: "1px solid " + (active ? "var(--c-ink)" : "var(--c-rule)"),
                            background: active ? "var(--c-ink)" : "transparent",
                            color: active ? "var(--c-paper)" : "var(--c-ink-2)",
                            fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase",
                            cursor: "default",
                          }}>{v}</span>
                      );
                    })}
                  </div>
                </Field>
                <Field label={t(COPY.contact.fields.message)}>
                  <textarea rows={6} value={form.message} onChange={e => setForm({ ...form, message: e.target.value })} required />
                </Field>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 16, flexWrap: "wrap", gap: 12 }}>
                  <span style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--c-ink-3)", letterSpacing: ".18em", textTransform: "uppercase" }}>
                    {t(["Respuesta en 48 horas", "Reply within 48 hours"])}
                  </span>
                  <button className="btn dark solid" type="submit">{t(COPY.contact.send)} →</button>
                </div>
              </form>
            )}

            <style>{`
              form input, form textarea {
                width: 100%; background: transparent; border: 0;
                border-bottom: 1px solid var(--c-rule);
                padding: 8px 0 12px; font-family: var(--serif);
                font-size: 22px; color: var(--c-ink); outline: none;
                transition: border-color .2s;
                resize: vertical;
              }
              form input:focus, form textarea:focus { border-bottom-color: var(--c-oxblood); }
            `}</style>
          </div>
        </div>
      </section>
    </main>
  );
}

function Field({ label, children }) {
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
      <span className="cap" style={{ color: "var(--c-ink-3)" }}>{label}</span>
      {children}
    </label>
  );
}

window.ContactPage = ContactPage;