const LeadCapture = () => {
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState("");

  const submit = async (e) => {
    e.preventDefault();

    setSending(true);
    setError("");

    const form = e.currentTarget;
    const formData = new FormData(form);

    try {
      const response = await fetch("send-mail.php", {
        method: "POST",
        body: formData,
      });

      const result = await response.json();

      if (result.success) {
        setSent(true);
        form.reset();
      } else {
        setError(result.message || "Something went wrong. Please try again.");
      }
    } catch (err) {
      setError("Something went wrong. Please try again.");
    } finally {
      setSending(false);
    }
  };

  return (
    <section className="lead" id="contact">
      <div className="container lead__grid">
        <div className="lead__copy">
          <span className="eyebrow eyebrow--ruled eyebrow--gold">For practice owners</span>

          <h2 className="h-display">
            Tell us who you&rsquo;re <em>hiring</em>.
          </h2>

          <p>
            Four ways to start a conversation with Natalie and the Stonecrest Recruiting team.
            We respond within one business day &mdash; with a shortlist that fits your market,
            not a stack of r&eacute;sum&eacute;s.
          </p>

          <div className="lead__options">
            <a className="lead__option" href="#book">
              <i data-lucide="calendar" className="lead__option-icon"></i>
              <span className="lead__option-title">Book a 20-min call</span>
              <span className="lead__option-meta">Tue & Thu &middot; same-week openings</span>
            </a>

            <a className="lead__option" href="sms:6513321306">
              <i data-lucide="message-square" className="lead__option-icon"></i>
              <span className="lead__option-title">Text us first</span>
              <span className="lead__option-meta">(651) 332-1306</span>
            </a>

            <a className="lead__option" href="tel:6513321306">
              <i data-lucide="phone" className="lead__option-icon"></i>
              <span className="lead__option-title">Call directly</span>
              <span className="lead__option-meta">Mon&ndash;Fri &middot; 9 AM &ndash; 5 PM CT</span>
            </a>

            <a className="lead__option" href="mailto:natalie@stonecrestrecruiting.com">
              <i data-lucide="mail" className="lead__option-icon"></i>
              <span className="lead__option-title">Send Natalie a note</span>
              <span className="lead__option-meta">natalie@stonecrestrecruiting.com</span>
            </a>
          </div>

          <div className="qr-block">
            <img
              className="qr-block__svg"
              alt="Scan to book"
              src="https://api.qrserver.com/v1/create-qr-code/?size=180x180&margin=0&color=161210&bgcolor=F5EFE6&data=sms%3A%2B16513321306%3Fbody%3DHi%20Natalie%2C%20I%27d%20like%20to%20learn%20about%20Stone%20Crest%20Recruiting."
              width="96"
              height="96"
            />

            <div className="qr-block__copy">
              <span className="qr-block__title">Or scan to text us.</span>
              <span className="qr-block__meta">Opens a pre-filled message to Natalie.</span>
              <span className="qr-block__url">(651) 332-1306</span>
            </div>
          </div>
        </div>

        <form className="lead__form" onSubmit={submit}>
          {!sent ? (
            <>
              <span className="eyebrow lead__form-eyebrow">Lead inquiry &middot; 4 fields</span>

              <h3>A quick <em>intro</em>.</h3>

              <div className="field">
                <label>Your name</label>
                <input
                  name="name"
                  placeholder="First and last"
                  required
                />
              </div>

              <div className="field">
                <label>Practice name</label>
                <input
                  name="practice_name"
                  placeholder="Your med spa or aesthetics practice"
                  required
                />
              </div>

              <div className="field--row">
                <div className="field">
                  <label>Email</label>
                  <input
                    type="email"
                    name="email"
                    placeholder="you@practice.com"
                    required
                  />
                </div>

                <div className="field">
                  <label>Mobile (for SMS)</label>
                  <input
                    name="mobile"
                    placeholder="(000) 000-0000"
                    required
                  />
                </div>
              </div>

              <div className="field">
                <label>Who are you hiring?</label>
                <select name="hiring_for" defaultValue="Aesthetic injector - RN / NP" required>
                  <option value="Aesthetic injector - RN / NP">
                    Aesthetic injector &mdash; RN / NP
                  </option>
                  <option value="Master esthetician">
                    Master esthetician
                  </option>
                  <option value="Functional wellness NP">
                    Functional wellness NP
                  </option>
                  <option value="Medical director / leadership">
                    Medical director / leadership
                  </option>
                  <option value="Building a bench - multiple roles">
                    Building a bench &mdash; multiple roles
                  </option>
                </select>
              </div>

              {error && (
                <p style={{ color: "#9b2c2c", fontSize: 13, margin: "4px 0 0" }}>
                  {error}
                </p>
              )}

              <button
                className="btn btn--gold"
                type="submit"
                disabled={sending}
                style={{ marginTop: 8, justifyContent: "center" }}
              >
                {sending ? "SENDING..." : "SEND INQUIRY"}
                {!sending && (
                  <span style={{ fontSize: 13, letterSpacing: 0 }}>&rarr;</span>
                )}
              </button>

              <span className="lead__form-meta">
                Natalie or a placement strategist will reach out within one business day.
              </span>
            </>
          ) : (
            <div className="lead__form-success">
              <i
                data-lucide="check"
                style={{
                  width: 36,
                  height: 36,
                  strokeWidth: 1.25,
                  color: "var(--aurum-gold-deep)",
                  margin: "0 auto 18px",
                }}
              ></i>

              <h3>We received your inquiry.</h3>

              <p style={{ color: "var(--aurum-stone)", marginTop: 8 }}>
                Natalie or a placement strategist will reach out within one business day.
                You&rsquo;ll get a confirmation at the email you provided.
              </p>

              <button
                className="btn btn--text"
                onClick={() => setSent(false)}
                type="button"
                style={{ marginTop: 16, color: "var(--aurum-gold-deep)" }}
              >
                Submit another &rarr;
              </button>
            </div>
          )}
        </form>
      </div>
    </section>
  );
};

Object.assign(window, { LeadCapture });