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

/* ============================================================
   CONTACT PAGE — full form + book-a-call CTA + addresses
   ============================================================ */
function ContactPage({ setRoute }) {
  const [form, setForm] = useStateC({
    first: "", last: "", email: "", phone: "", msg: "",
  });
  const [sent, setSent] = useStateC(false);
  const [sending, setSending] = useStateC(false);

  // Replace YOUR_FORM_ID with the ID from formspree.io (e.g. "xyzabcde")
  const FORMSPREE_ID = "mnjlyzjy";

  const submit = async (e) => {
    e.preventDefault();
    if (!form.first || !form.last || !form.email || !form.msg) return;
    setSending(true);
    try {
      const res = await fetch(`https://formspree.io/f/${FORMSPREE_ID}`, {
        method: "POST",
        headers: { "Content-Type": "application/json", "Accept": "application/json" },
        body: JSON.stringify({
          name: `${form.first} ${form.last}`,
          email: form.email,
          phone: form.phone || "—",
          message: form.msg,
        }),
      });
      if (res.ok) setSent(true);
    } finally {
      setSending(false);
    }
  };

  // Replace this with the real Calendly / SavvyCal / Cal.com link before launch.
  const BOOK_CALL_URL = "https://calendly.com/thetraderdaddy1/10min";

  return (
    <div className="page">
      <section className="page-hero">
        <div className="container">
          <span className="t-mono-label">// CONTACT</span>
          <h1 className="t-h1" style={{ marginTop: 16, maxWidth: 800 }}>
            Get in touch. <span className="t-serif-italic" style={{ color: "var(--acc)" }}>We reply within 24 hours.</span>
          </h1>
          <p className="t-lede" style={{ marginTop: 24, maxWidth: 600 }}>
            Send us a message — or skip ahead and book a free 10-minute call to talk through what you're looking for.
          </p>
        </div>
      </section>

      <section style={{ paddingTop: 32 }}>
        <div className="container contact-layout">

          {/* ——— LEFT: form ——— */}
          <div className="contact-form-wrap">
            {sent ? (
              <div className="form-sent">
                <div className="t-mono-label" style={{ color: "var(--acc)" }}>// MESSAGE RECEIVED</div>
                <h2 className="t-h2" style={{ marginTop: 16 }}>Thanks, {form.first}.</h2>
                <p className="t-lede" style={{ marginTop: 16 }}>
                  We'll reply to <span style={{ color: "var(--ink-0)" }}>{form.email}</span> within 24 hours.
                </p>
                <p className="t-body" style={{ marginTop: 24, color: "var(--ink-2)" }}>
                  Want to skip the queue? Book a free 10-minute call below.
                </p>
                <a href={BOOK_CALL_URL} target="_blank" rel="noopener noreferrer" className="btn btn-primary" style={{ marginTop: 16 }}>
                  Book a 10-min call
                  <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 8 H13 M9 4 L13 8 L9 12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </a>
              </div>
            ) : (
              <form onSubmit={submit} className="contact-form">
                <div className="t-mono-label">// SEND A MESSAGE</div>

                <div className="field-row">
                  <label className="field">
                    <span className="t-mono-label">FIRST NAME</span>
                    <input type="text" value={form.first} onChange={(e) => setForm({ ...form, first: e.target.value })} placeholder="Jane" required/>
                  </label>
                  <label className="field">
                    <span className="t-mono-label">LAST NAME</span>
                    <input type="text" value={form.last} onChange={(e) => setForm({ ...form, last: e.target.value })} placeholder="Doe" required/>
                  </label>
                </div>

                <div className="field-row">
                  <label className="field">
                    <span className="t-mono-label">EMAIL</span>
                    <input type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} placeholder="you@domain.com" required/>
                  </label>
                  <label className="field">
                    <span className="t-mono-label">PHONE</span>
                    <input type="tel" value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} placeholder="(555) 123-4567"/>
                  </label>
                </div>

                <label className="field">
                  <span className="t-mono-label">MESSAGE</span>
                  <textarea rows="6" value={form.msg} onChange={(e) => setForm({ ...form, msg: e.target.value })} placeholder="What's on your mind?" required/>
                </label>

                <button type="submit" className="btn btn-primary" style={{ alignSelf: "flex-start" }} disabled={sending}>
                  {sending ? "Sending…" : "Submit"}
                </button>
              </form>
            )}
          </div>

          {/* ——— RIGHT: book-a-call + offices ——— */}
          <aside className="contact-aside">
            <div className="book-call-card">
              <div className="t-mono-label" style={{ color: "var(--acc)" }}>// SKIP THE QUEUE</div>
              <h3 className="t-h2" style={{ fontSize: 28, marginTop: 16 }}>
                Want to set up a <span className="t-serif-italic">trading session?</span>
              </h3>
              <ul className="book-call-list">
                <li>Want us to trade alongside you?</li>
                <li>Want to watch us trade in person?</li>
                <li>Just want to talk through your goals?</li>
              </ul>
              <a href={BOOK_CALL_URL} target="_blank" rel="noopener noreferrer" className="btn btn-primary" style={{ marginTop: 24, width: "100%", justifyContent: "center" }}>
                Book a free 10-min call
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 8 H13 M9 4 L13 8 L9 12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </a>
              <div className="t-mono" style={{ marginTop: 12, fontSize: 11, color: "var(--ink-3)", textAlign: "center" }}>
                NO PITCH · NO CARD · 10 MINUTES
              </div>
            </div>

            <div className="contact-block">
              <span className="t-mono-label">CALL US</span>
              <a href="tel:18778280062" style={{ display: "block", marginTop: 8, fontSize: 22, color: "var(--ink-0)" }} className="t-mono">
                1-877-828-0062
              </a>
              <div className="t-mono" style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 4 }}>Mon – Fri · 09:00 – 17:00 ET</div>
            </div>

            <div className="contact-block">
              <span className="t-mono-label">OFFICES</span>
              <div className="office">
                <div style={{ color: "var(--ink-0)", fontSize: 15 }}>New York</div>
                <div className="t-mono" style={{ fontSize: 12, color: "var(--ink-2)", marginTop: 4 }}>433 5th Avenue, New York, NY</div>
              </div>
              <div className="office">
                <div style={{ color: "var(--ink-0)", fontSize: 15 }}>New Jersey</div>
                <div className="t-mono" style={{ fontSize: 12, color: "var(--ink-2)", marginTop: 4 }}>50 Chestnut Street, Morristown, NJ</div>
              </div>
            </div>

            <div className="contact-block">
              <span className="t-mono-label">DESK HOURS</span>
              <div style={{ marginTop: 8, color: "var(--ink-1)", fontSize: 14 }}>
                Live sessions run market hours · WhatsApp &amp; Discord 24/5
              </div>
            </div>
          </aside>
        </div>

        {/* DISCLAIMER */}
        <div className="container" style={{ marginTop: 64 }}>
          <div className="contact-disclaimer t-mono">
            <span style={{ color: "var(--ink-2)" }}>Disclaimer:</span> This company does not provide financial or investment advice.
            <a href="#privacy" onClick={(e) => { e.preventDefault(); setRoute("privacy"); window.scrollTo(0,0); }} style={{ color: "var(--acc)", marginLeft: 6 }}>Click to see full disclaimer</a>.
            All sales are final.
          </div>
        </div>
      </section>
    </div>
  );
}

window.ContactPage = ContactPage;