/* global React, Placeholder, Reveal */
const { useState: useCS } = React;

function ContactPage() {
  const [form, setForm] = useCS({ name: "", email: "", phone: "", childAge: "", message: "" });
  const [errs, setErrs] = useCS({});
  const [done, setDone] = useCS(false);
  const [sending, setSending] = useCS(false);
  const [sendErr, setSendErr] = useCS("");

  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = (e) => {
    e.preventDefault();
    const er = {};
    if (!form.name.trim()) er.name = "Please share your name";
    if (!form.email.trim() || !form.email.includes("@")) er.email = "Valid email required";
    if (!form.message.trim()) er.message = "Tell us a little about what you need";
    setErrs(er);
    if (Object.keys(er).length !== 0) return;
    setSending(true); setSendErr("");
    fetch(window.FORMSPREE_ENDPOINT, {
      method: "POST",
      headers: { "Content-Type": "application/json", Accept: "application/json" },
      body: JSON.stringify({ _subject: "Message — Agape website", ...form })
    }).then((r) => {
      setSending(false);
      if (r.ok) setDone(true);
      else setSendErr("Something went wrong. Please call us at (806) 701-7946.");
    }).catch(() => {
      setSending(false);
      setSendErr("Something went wrong. Please call us at (806) 701-7946.");
    });
  };

  return (
    <div className="page">
      <section className="section-tight">
        <div className="container">
          <Reveal><div className="eyebrow">Contact</div></Reveal>
          <Reveal delay={100}>
            <h1 className="display" style={{ margin: "16px 0 20px", maxWidth: "16ch" }}>
              Let's talk. Or better yet, let's meet.
            </h1>
          </Reveal>
          <Reveal delay={200}>
            <p className="lede" style={{ maxWidth: "58ch" }}>
              The best way to know if Agape is right for your family is to walk through the door. Tours take about 30 minutes. Bring your child — we'd love to meet them too.
            </p>
          </Reveal>
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <div className="contact-grid">
            {/* Info */}
            <Reveal>
              <div>
                <div className="contact-info-item">
                  <div className="label">Call or text</div>
                  <a href="tel:+18067017946" className="val">(806) 701-7946</a>
                </div>
                <div className="contact-info-item">
                  <div className="label">Email</div>
                  <a href="mailto:debmac9122@gmail.com" className="val">debmac9122@gmail.com</a>
                </div>
                <div className="contact-info-item">
                  <div className="label">Visit</div>
                  <div className="val">1215 Slide Rd<br/>Lubbock, TX 79416</div>
                </div>
                <div className="contact-info-item">
                  <div className="label">Follow us</div>
                  <a href="https://www.facebook.com/profile.php?id=61584156976177" target="_blank" rel="noopener" className="val">Facebook</a>
                </div>
                <div className="contact-info-item">
                  <div className="label">Hours</div>
                  <div className="val" style={{ fontSize: 17, fontFamily: "var(--font-body)", fontWeight: 400, lineHeight: 1.6 }}>
                    Monday – Friday<br/>7:00 AM – 5:45 PM<br/>Closed weekends & federal holidays
                  </div>
                </div>
                <div className="map-placeholder">
                  <iframe
                    title="Map: 1215 Slide Rd, Lubbock, TX"
                    src="https://www.google.com/maps?q=1215+Slide+Rd,+Lubbock,+TX+79416&output=embed"
                    style={{ width: "100%", height: "100%", border: 0, display: "block" }}
                    loading="lazy"
                    referrerPolicy="no-referrer-when-downgrade"
                    allowFullScreen
                  />
                  <a
                    className="map-open"
                    href="https://www.google.com/maps/search/?api=1&query=1215+Slide+Rd,+Lubbock,+TX+79416"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    Open in Google Maps ↗
                  </a>
                </div>
              </div>
            </Reveal>

            {/* Form */}
            <Reveal delay={150}>
              <div className="card" style={{ padding: "clamp(28px, 4vw, 44px)" }}>
                <h2 className="display" style={{ margin: "0 0 8px", fontSize: 32 }}>Schedule a tour</h2>
                <p style={{ color: "var(--ink-2)", marginTop: 0, marginBottom: 20 }}>Pick a time that works for you — it takes about a minute.</p>
                <a className="btn btn-primary" href="https://calendly.com/agapelearningacademy13" target="_blank" rel="noopener">Book on our calendar</a>
                <div style={{ display: "flex", alignItems: "center", gap: 12, margin: "28px 0 24px" }}>
                  <div style={{ flex: 1, height: 1, background: "var(--line-soft)" }}></div>
                  <span style={{ fontSize: 13, color: "var(--ink-3)" }}>or send us a message</span>
                  <div style={{ flex: 1, height: 1, background: "var(--line-soft)" }}></div>
                </div>
                {done ? (
                  <div className="form-success">
                    <div className="check-icon">
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    </div>
                    <h4>Message received</h4>
                    <p>Thank you, {form.name.split(" ")[0]}. We'll be in touch within one business day.</p>
                  </div>
                ) : (
                  <form className="form-grid" onSubmit={submit}>
                    <div className="field full">
                      <label>Your name</label>
                      <input type="text" value={form.name} onChange={update("name")} className={errs.name ? "invalid" : ""} placeholder="Jane Doe" />
                      {errs.name && <span className="err">{errs.name}</span>}
                    </div>
                    <div className="field">
                      <label>Email</label>
                      <input type="email" value={form.email} onChange={update("email")} className={errs.email ? "invalid" : ""} placeholder="jane@example.com" />
                      {errs.email && <span className="err">{errs.email}</span>}
                    </div>
                    <div className="field">
                      <label>Phone (optional)</label>
                      <input type="tel" value={form.phone} onChange={update("phone")} placeholder="(806) 701-7946" />
                    </div>
                    <div className="field full">
                      <label>Child's age</label>
                      <select value={form.childAge} onChange={update("childAge")}>
                        <option value="">Select…</option>
                        <option>Infant (4wk – 12mo)</option>
                        <option>Toddler (1 – 2)</option>
                        <option>Preschool (3 – 4)</option>
                        <option>Pre-K (4 – 5)</option>
                        <option>Expecting</option>
                      </select>
                    </div>
                    <div className="field full">
                      <label>How can we help?</label>
                      <textarea value={form.message} onChange={update("message")} className={errs.message ? "invalid" : ""} placeholder="I'd like to tour next week, my child starts in August, etc." />
                      {errs.message && <span className="err">{errs.message}</span>}
                    </div>
                    <div className="full" style={{ marginTop: 4, display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
                      <button type="submit" className="btn btn-primary" disabled={sending}>{sending ? "Sending…" : "Send message"}</button>
                      {sendErr && <span className="err" style={{ color: "var(--heart)", fontSize: 13 }}>{sendErr}</span>}
                    </div>
                  </form>
                )}
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ContactPage });