/* Contact page, consolidated */
const { useState: cUS } = React;

function ContactPage() {
  const [form, setForm] = cUS({ first: "", last: "", email: "", message: "" });
  const [sent, setSent] = cUS(false);

  const [sending, setSending] = cUS(false);
  const submit = async (e) => {
    e.preventDefault();
    setSending(true);
    await submitForm(
      { first: form.first, last: form.last, email: form.email, message: form.message },
      "Contact"
    );
    setSending(false);
    setSent(true);
  };

  return (
    <>
      <header className="contact-hero">
        <PawS className="paw" style={{ top: 80, right: "8%", width: 60, height: 60, color: "#fff", opacity: 0.1 }} />
        <PawS className="paw" style={{ bottom: 40, left: "6%", width: 52, height: 52, color: "#fff", opacity: 0.1 }} />
        <div className="wrap" style={{ maxWidth: 820, textAlign: "center", margin: "0 auto" }}>
          <div className="eyebrow" style={{ color: "var(--purple-400)", marginBottom: 16 }}><PawGlyphS />Get in touch</div>
          <h1 className="display" style={{ fontSize: "clamp(48px, 7vw, 88px)", margin: "0 0 18px", color: "#fff", lineHeight: 0.98 }}>
            We'd love to <em>hear from you.</em>
          </h1>
          <p style={{ fontSize: 17, color: "var(--on-dark-2)", margin: "0 auto", lineHeight: 1.55, maxWidth: 560 }}>
            Real humans answer every message, usually within a business day.
          </p>
        </div>
      </header>

      <section className="contact-section">
        <PawS className="paw paw-light" style={{ bottom: 40, right: "4%", width: 56, height: 56 }} />
        <div className="wrap contact-grid">
          {/* LEFT, Reach out copy + email card */}
          <div className="contact-copy">
            <div className="reach-rule">
              <div className="eyebrow-dark" style={{ marginBottom: 16 }}>Reach out</div>
              <p className="reach-body">
                Want to adopt, foster, or sponsor? Hoping to give a survivor a second chance, share a story, or get a dog out of the trade?
              </p>
              <p className="reach-body">
                Write us. A real person answers, usually within a business day.
              </p>
            </div>
          </div>

          {/* RIGHT, Form */}
          <div className="contact-form-card reveal">
            {sent ? (
              <div style={{ textAlign: "center", padding: "40px 10px" }}>
                <div style={{ width: 64, height: 64, borderRadius: "50%", background: "var(--purple-soft)", display: "grid", placeItems: "center", margin: "0 auto 20px", fontSize: 28, color: "var(--purple-700)" }}>♥</div>
                <h2 className="display" style={{ fontSize: 30, margin: "0 0 10px", color: "var(--ink)" }}>Message received!</h2>
                <p style={{ color: "var(--ink-2)", fontSize: 15, margin: "0 0 24px", lineHeight: 1.6 }}>
                  Thanks for reaching out. We'll respond within one business day.
                </p>
                <button className="btn btn-accent" onClick={() => { setSent(false); setForm({ first: "", last: "", email: "", message: "" }); }}>
                  Send another →
                </button>
              </div>
            ) : (
              <form onSubmit={submit}>
                <BotcheckS />
                <div className="eyebrow-dark" style={{ marginBottom: 10 }}>Send a message</div>
                <h2 className="display contact-form-title">We'd Love to Hear From You</h2>

                <div className="cf-form-row">
                  <div>
                    <label className="f-label">First name <span className="req">*</span></label>
                    <input required className="f-input" value={form.first} onChange={e => setForm({ ...form, first: e.target.value })} />
                  </div>
                  <div>
                    <label className="f-label">Last name <span className="req">*</span></label>
                    <input required className="f-input" value={form.last} onChange={e => setForm({ ...form, last: e.target.value })} />
                  </div>
                </div>

                <div>
                  <label className="f-label">Email <span className="req">*</span></label>
                  <input required type="email" className="f-input" value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} />
                </div>

                <div>
                  <label className="f-label">Message</label>
                  <textarea rows={5} className="f-input" value={form.message} onChange={e => setForm({ ...form, message: e.target.value })} />
                </div>

                <button type="submit" className="btn btn-accent cf-submit" disabled={sending}>
                  {sending ? "Sending..." : "Send message"}
                </button>
              </form>
            )}
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { ContactPage });