// Work With Me — application form + qualifications, real copy from the live page

const WorkWithMePage = () => {
  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 coaching application — Aligned Attachments",
        from_name: "Aligned Attachments Website",
        form_type: "Coaching application (Work With Me)",
        name: fd.get("name"),
        email: fd.get("email"),
        main_focus: fd.get("main_focus"),
        newsletter_opt_in: fd.get("opt_in") ? "Yes" : "No",
      });
      setStatus("done");
    } catch (err) {
      setStatus("error");
    }
  };

  return (
    <main>
      <section className="page-header" style={{ paddingBottom: 40 }}>
        <div className="container-narrow">
          <Eyebrow>2 Spots Left For 1:1 Attachment Theory Coaching</Eyebrow>
          <h1 style={{ fontSize: 56 }}>Discover your <em>true potential.</em></h1>
        </div>
      </section>

      <section className="section section-cream" style={{ paddingTop: 0 }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: ".95fr 1.05fr", gap: 56, alignItems: "start" }}>
          <div>
            <div className="body-lg">
              <p style={{ marginTop: 0 }}>
                You've done the reading. Listened to the podcasts. Maybe even told yourself,
                <em> "This time will be different."</em>
              </p>
              <p>
                But when it comes to your relationships, something still feels stuck. You shut
                down. You overthink. You give too much or pull away too soon. You're tired of
                feeling like your nervous system is working against you.
              </p>
              <p>
                If you're ready to finally feel secure, set boundaries without guilt, and
                stop repeating the past, <strong style={{ color: "var(--aa-ink-1000)" }}>I have 2 spots left for private coaching this month.</strong>
              </p>
              <blockquote style={{
                fontFamily: "var(--aa-font-display)", fontStyle: "italic", fontWeight: 500,
                fontSize: 26, lineHeight: 1.4, color: "var(--aa-teal-800)",
                margin: "30px 0", padding: "8px 0 8px 24px",
                borderLeft: "3px solid var(--aa-mint-400)",
              }}>
                This is the deep work.
              </blockquote>
              <p>
                Integrated Attachment Theory coaching, emotional regulation strategies, and
                reparenting techniques designed to rewire your patterns at the root — not
                just manage symptoms on the surface.
              </p>
            </div>

            <div style={{ marginTop: 32, padding: 28, borderRadius: 18, background: "var(--aa-mint-200)" }}>
              <div className="h-caps" style={{ fontSize: 14, letterSpacing: "0.14em", marginBottom: 14 }}>
                What You'll Gain By Coaching With Me
              </div>
              <ul style={{ margin: 0, paddingLeft: 0, listStyle: "none", fontFamily: "var(--aa-font-body)", fontSize: 15.5, lineHeight: 1.65, color: "var(--aa-ink-800)", display: "flex", flexDirection: "column", gap: 12 }}>
                {[
                  "Personalized 1:1 Integrated Attachment Theory Coaching to help you rewire old patterns and heal at the root",
                  "Tools for emotional regulation and reparenting techniques that fit your specific relationship triggers",
                  "A proven process to reprogram your subconscious mind and build safer, healthier relationships, starting with the one you have with yourself",
                ].map((t, i) => (
                  <li key={i} style={{ paddingLeft: 26, position: "relative" }}>
                    <span style={{ position: "absolute", left: 0, top: 0, color: "var(--aa-ink-1000)", fontWeight: 700 }}>✓</span>
                    {t}
                  </li>
                ))}
              </ul>
              <p className="body-md" style={{ marginTop: 16, marginBottom: 0, fontStyle: "italic", color: "var(--aa-ink-700)" }}>
                Sessions are conducted via Zoom. A meeting link will be provided prior to each session.
              </p>
            </div>
          </div>

          <div className="card-soft" style={{ padding: 40 }}>
            <h2 className="h-display" style={{ fontSize: 32, margin: "0 0 8px" }}>Grab a spot before they're gone.</h2>
            <p className="body-md" style={{ margin: "0 0 28px" }}>
              I personally read every application. You'll hear back within 48 hours.
            </p>
            {status === "done" ? (
              <div style={{ background: "var(--aa-mint-200)", padding: "32px 24px", borderRadius: 14, textAlign: "center" }}>
                <div className="h-caps" style={{ fontSize: 14, letterSpacing: "0.14em", marginBottom: 10 }}>
                  Application Received
                </div>
                <p className="body-md" style={{ margin: 0 }}>
                  Thank you. I'll be in touch within 48 hours from
                  Brittney.Edwards@alignedattachments.com.
                </p>
              </div>
            ) : (
              <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                <label className="field">
                  <span className="field-label">Name *</span>
                  <input type="text" name="name" required placeholder="First and last name"/>
                </label>
                <label className="field">
                  <span className="field-label">Email *</span>
                  <input type="email" name="email" required placeholder="you@example.com"/>
                </label>
                <label className="field">
                  <span className="field-label">What's your main focus? *</span>
                  <textarea name="main_focus" rows={5} required placeholder="e.g., emotional regulation, reprogramming negative beliefs, healing attachment wounds, creating healthy boundaries…"/>
                </label>
                <label className="checkbox-row">
                  <input type="checkbox" name="opt_in" defaultChecked/>
                  <span>I'd like to receive free tools and updates via email.</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 application goes straight to Brittney. 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…" : "Claim My Spot"}
                </button>
                {status === "error" ? <FormError/> : null}
              </form>
            )}
          </div>
        </div>
      </section>

      <section className="section section-white">
        <div className="container-narrow" style={{ textAlign: "center" }}>
          <Eyebrow>Not Ready Yet?</Eyebrow>
          <h2 className="h-display" style={{ fontSize: 36, margin: "14px 0 16px" }}>
            Or found this page after the last spot was taken?
          </h2>
          <p className="body-lg" style={{ marginBottom: 28 }}>
            Join the waitlist and I'll personally reach out when sessions reopen.
            This is your opportunity to create a legacy of healthy connections for you
            and your loved ones.
          </p>
          <NewsletterForm onSubmitMsg="You're on the list — I'll email you when spots open."/>
        </div>
      </section>
    </main>
  );
};

window.WorkWithMePage = WorkWithMePage;