/* global React */
const { useState: useStateCt } = React;

// Formspree endpoint — submissions are emailed to every recipient configured
// on this form in the Formspree dashboard (add all admins there).
const CONTACT_FORM_ENDPOINT = "https://formspree.io/f/xgoqgwnn";

function Contact({ navigate }) {
  const [submitted, setSubmitted] = useStateCt(false);
  const [sending, setSending] = useStateCt(false);
  const [error, setError] = useStateCt(null);
  const [form, setForm] = useStateCt({ name: "", email: "", phone: "", interest: "Agency ownership", message: "", smsConsent: false });

  const submit = async (e) => {
    e.preventDefault();
    setError(null);
    setSending(true);
    try {
      const res = await fetch(CONTACT_FORM_ENDPOINT, {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({
          name: form.name,
          email: form.email,
          phone: form.phone,
          "interested in": form.interest,
          message: form.message,
          "SMS consent": form.smsConsent ? "Yes" : "No",
          _subject: `New contact form submission from ${form.name}`
        })
      });
      if (!res.ok) throw new Error("Submission failed");
      setSubmitted(true);
    } catch (err) {
      setError("Something went wrong. Please call (972) 234-0699 or email us directly.");
    } finally {
      setSending(false);
    }
  };

  return (
    <div className="page">
      <section className="contact-grid">
        <div className="left">
          <div className="eyebrow" style={{ marginBottom: 14 }}>Contact us</div>
          <h1>Twenty minutes. No pressure.</h1>
          <p>Tell us a little about what you're considering and a district recruiter will get back inside one business day. Or just walk into the Dallas office — there's coffee.



          </p>

          <div className="contact-card-list">
            <div className="contact-info-card">
              <div className="ico">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
              </div>
              <div>
                <div className="label">Call us</div>
                <div className="val">(972) 234-0699</div>
                <div className="sub">Monday–Friday, 9:00–5:00 CT</div>
              </div>
            </div>
            <div className="contact-info-card">
              <div className="ico">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
              </div>
              <div>
                <div className="label">Email a recruiter</div>
                <div className="val">recruiting@dfwfarmersinsurance.com</div>
                <div className="sub">Replies within one business day</div>
              </div>
            </div>
            <div className="contact-info-card">
              <div className="ico">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
              </div>
              <div>
                <div className="label">Visit the office</div>
                <div className="val">12222 Merit Dr. Ste 270 Dallas, TX 75251</div>
                <div className="sub">Walk-ins welcome Tue/Thu afternoon</div>
              </div>
            </div>
          </div>

          {/* Opportunities list — quick reference */}
          <div style={{ marginTop: 32 }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>What we're recruiting for</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {[
              { title: "Direct agency ownership", desc: "For experienced pros prepared to step directly into ownership." },
              { title: "Associate Agent path", desc: "Performance-based progression toward ownership." },
              { title: "Protégé Mentorship path", desc: "Hands-on development before agency ownership." }].
              map((o) =>
              <a
                key={o.title}
                href="#/opportunities"
                onClick={(e) => {e.preventDefault();navigate("opportunities");}}
                style={{ display: "flex", alignItems: "center", gap: 16, padding: "16px 18px", border: "1px solid var(--color-hairline)", borderRadius: 14, background: "#fff", textDecoration: "none", color: "var(--color-ink)", transition: "border-color 120ms ease" }}
                onMouseEnter={(e) => e.currentTarget.style.borderColor = "var(--color-ink)"}
                onMouseLeave={(e) => e.currentTarget.style.borderColor = "var(--color-hairline)"}>

                  <div style={{ flex: "0 0 36px", width: 36, height: 36, borderRadius: 10, background: "var(--color-canvas-parchment)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--color-ink)" }}>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ font: "var(--type-body-strong)", letterSpacing: "var(--type-body-strong-ls)", color: "var(--color-ink)" }}>{o.title}</div>
                    <div style={{ font: "var(--type-caption)", letterSpacing: "var(--type-caption-ls)", color: "var(--color-ink-muted-80)", marginTop: 2 }}>{o.desc}</div>
                  </div>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--color-ink-muted-48)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flex: "0 0 14px" }}><polyline points="9 18 15 12 9 6"></polyline></svg>
                </a>
              )}
            </div>
            <a href="#/opportunities" onClick={(e) => {e.preventDefault();navigate("opportunities");}} style={{ display: "inline-flex", alignItems: "center", gap: 6, marginTop: 16, font: "var(--type-body)", letterSpacing: "var(--type-body-ls)", color: "var(--color-primary)" }}>
              See all paths to ownership
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
            </a>
          </div>
        </div>

        <div>
          {submitted ?
          <div className="contact-form" style={{ textAlign: "center", padding: 56 }}>
              <div style={{ width: 64, height: 64, borderRadius: 9999, background: "var(--color-primary)", color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", margin: "0 auto 24px" }}>
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
              </div>
              <h2 style={{ font: "600 32px/1.15 var(--font-display)", letterSpacing: "-0.5px", margin: "0 0 12px" }}>Got it, {form.name.split(" ")[0] || "there"}.</h2>
              <p style={{ font: "var(--type-body)", letterSpacing: "var(--type-body-ls)", color: "var(--color-ink-muted-80)", margin: "0 0 28px" }}>
                A district recruiter will reach out within one business day. If it's urgent,
                call (972) 234-0699.
              </p>
              <button className="btn-pill-outline" onClick={() => {setSubmitted(false);setForm({ name: "", email: "", phone: "", interest: "Agency ownership", message: "", smsConsent: false });}}>Send another</button>
            </div> :

          <form className="contact-form" onSubmit={submit}>
              <h3 style={{ font: "600 28px/1.18 var(--font-display)", letterSpacing: "-0.5px", margin: "0 0 20px" }}>Send a note.</h3>
              <div className="field">
                <label>Name</label>
                <input required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="Your full name" />
              </div>
              <div className="field-row">
                <div className="field">
                  <label>Email</label>
                  <input required type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} placeholder="you@email.com" />
                </div>
                <div className="field">
                  <label>Phone</label>
                  <input value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} placeholder="(214) 555-0123" />
                </div>
              </div>
              <div className="field">
                <label>I'm interested in</label>
                <select value={form.interest} onChange={(e) => setForm({ ...form, interest: e.target.value })}>
                  <option>Agency ownership</option>
                  <option>Associate Agent Path</option>
                  <option>Protégé Mentorship Path</option>
                  <option>Purchasing an existing agency</option>
                  <option>General information</option>
                </select>
              </div>
              <div className="field">
                <label>Anything else</label>
                <textarea value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })} placeholder="When you'd like to start, where you are in DFW, what you do now…" />
              </div>
              <label style={{ display: "flex", alignItems: "flex-start", gap: 10, font: "var(--type-caption)", letterSpacing: "var(--type-caption-ls)", color: "var(--color-ink-muted-80)", margin: "4px 0 18px", cursor: "pointer", textTransform: "none" }}>
                <input
                type="checkbox"
                required
                checked={form.smsConsent}
                onChange={(e) => setForm({ ...form, smsConsent: e.target.checked })}
                style={{ marginTop: 3, accentColor: "var(--color-primary)", flex: "0 0 auto" }} />
              
                <span>I agree to be contacted by Gary Edmonds Insurance Agency, Inc. by phone, email, and text message at the number provided. Message and data rates may apply. Reply STOP to opt out at any time. Consent is not a condition of applying to any program.




              </span>
              </label>
              <button type="submit" disabled={sending}>{sending ? "Sending…" : "Submit"}</button>
              {error && <p style={{ font: "var(--type-caption)", color: "#b00020", margin: "12px 0 0", textAlign: "center" }}>{error}</p>}
              <p style={{ font: "var(--type-fine-print)", letterSpacing: "var(--type-fine-print-ls)", color: "var(--color-ink-muted-48)", margin: "16px 0 0", textAlign: "center" }}>
                We never share your details. The district does not discriminate on
                the basis of race, gender, age, religion, or veteran status.
              </p>
            </form>
          }
        </div>
      </section>
    </div>);

}

window.Contact = Contact;