// Contact page

const ContactPage = () => {
  const [status, setStatus] = React.useState("idle"); // idle | sending | done | error

  const handleSubmit = async (e) => {
    e.preventDefault();
    const fd = new FormData(e.target);
    if (fd.get("botcheck")) return;
    setStatus("sending");
    try {
      await submitWeb3Form({
        subject: "New contact message — Aligned Attachments",
        from_name: "Aligned Attachments Website",
        form_type: "Contact form",
        name: fd.get("name"),
        email: fd.get("email"),
        phone: fd.get("phone") || "Not provided",
        message: fd.get("message"),
        newsletter_opt_in: fd.get("opt_in") ? "Yes" : "No",
      });
      setStatus("done");
    } catch (err) {
      setStatus("error");
    }
  };

  return (
    <main>
      <section className="page-header">
        <div className="container-narrow">
          <Eyebrow>Contact</Eyebrow>
          <h1>Contact your <em>Integrated Attachment Theory</em> coach.</h1>
          <p>
            Whether you have questions, need more details, or are ready to take the next
            step, I'd love to hear from you. Fill out the form below, and I'll get back
            to you shortly!
          </p>
        </div>
      </section>

      <section className="section section-cream" style={{ paddingTop: 16 }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: ".9fr 1.1fr", gap: 56, alignItems: "start" }}>
          <div className="card-soft" style={{ background: "var(--aa-mint-200)" }}>
            <Eyebrow>Get In Touch</Eyebrow>
            <h2 className="h-display" style={{ fontSize: 32, margin: "12px 0 18px" }}>
              Tell me how I can help you.
            </h2>
            <p className="body-md" style={{ marginBottom: 24 }}>
              I personally read every message. Expect a thoughtful response within
              one to two business days.
            </p>
            <div style={{ borderTop: "1px solid rgba(20,57,58,.18)", paddingTop: 22 }}>
              <div className="footer-col-title" style={{ marginBottom: 10 }}>Aligned Attachments</div>
              <div className="body-md" style={{ marginBottom: 10 }}>
                <a href="mailto:Brittney.Edwards@alignedattachments.com" style={{ color: "var(--aa-ink-1000)", textDecoration: "underline" }}>
                  Brittney.Edwards@alignedattachments.com
                </a>
              </div>
              <div className="body-md">
                <a href="mailto:support@alignedattachments.com" style={{ color: "var(--aa-ink-1000)", textDecoration: "underline" }}>
                  support@alignedattachments.com
                </a>
              </div>
            </div>
          </div>

          <div className="card-soft" style={{ padding: 40 }}>
            {status === "done" ? (
              <div style={{ textAlign: "center", padding: "32px 0" }}>
                <div className="h-caps" style={{ fontSize: 14, letterSpacing: "0.14em", marginBottom: 12, color: "var(--aa-teal-700)" }}>
                  Message Sent
                </div>
                <h3 className="h-display" style={{ fontSize: 28, margin: "0 0 12px" }}>Thanks for reaching out.</h3>
                <p className="body-md" style={{ margin: 0 }}>
                  I'll get back to you within one to two business days.
                </p>
              </div>
            ) : (
              <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                <label className="field">
                  <span className="field-label">Enter your full name *</span>
                  <input type="text" name="name" required placeholder="First and last name"/>
                </label>
                <label className="field">
                  <span className="field-label">Your best email address *</span>
                  <input type="email" name="email" required placeholder="you@example.com"/>
                </label>
                <label className="field">
                  <span className="field-label">Phone (optional)</span>
                  <input type="tel" name="phone" placeholder="(optional if you'd like me to call you)"/>
                </label>
                <label className="field">
                  <span className="field-label">Tell me how I can help you *</span>
                  <textarea name="message" rows={6} required placeholder="What's going on, and what are you hoping to work on?"/>
                </label>
                <label className="checkbox-row">
                  <input type="checkbox" name="opt_in" defaultChecked/>
                  <span>Get free tools, insights, and updates — plus early access to coaching!</span>
                </label>
                <input type="checkbox" name="botcheck" tabIndex={-1} autoComplete="off" style={{ display: "none" }} aria-hidden="true"/>
                <p style={{ fontFamily: "var(--aa-font-body)", fontSize: 12, color: "var(--aa-ink-500)", lineHeight: 1.5, margin: 0 }}>
                  Your message goes straight to Brittney's inbox. This form is protected against spam — your details are never shared.
                </p>
                <button type="submit" className="btn btn-dark" style={{ marginTop: 6 }} disabled={status === "sending"}>
                  {status === "sending" ? "Sending…" : "Submit"}
                </button>
                {status === "error" ? <FormError/> : null}
              </form>
            )}
          </div>
        </div>
      </section>
    </main>
  );
};

window.ContactPage = ContactPage;