/* ============================================================
   Contact page
   ============================================================ */
const { useState: useContactState } = React;


const ContactContent = () => {
  const [sent, setSent] = useContactState(false);
  const onSubmit = (e) => {
    e.preventDefault();
    setSent(true);
    const r = e.target.getBoundingClientRect();
    fireConfetti(r.left + r.width / 2, r.top + 80);
  };

  return (
    <>
      <PageHero
        eyebrow="Say hello"
        title="We'd |love| to hear from you."
        titleColor="var(--pink)"
        subtitle="Questions, tours, late-night doubts about the application form — we read every message."
        bg="color-mix(in oklab, var(--tangerine) 45%, var(--paper))"
        icon="heart"
      />

      <section style={{ paddingTop: 40 }}>
        <div className="wrap">
          <div className="contact-grid">
            {/* Info card */}
            <div className="contact-info reveal">
              <div className="contact-row">
                <div className="cic" style={{ "--c": "var(--pink)" }}>📞</div>
                <div>
                  <h4>Call us</h4>
                  <p><a href="tel:+917201086596">+91 72010 86596</a></p>
                </div>
              </div>
              <div className="contact-row">
                <div className="cic" style={{ "--c": "var(--mint)" }}>✉️</div>
                <div>
                  <h4>Email us</h4>
                  <p><a href="mailto:hello@xceladreamland.com">hello@xceladreamland.com</a></p>
                </div>
              </div>
              <div className="contact-row">
                <div className="cic" style={{ "--c": "var(--yellow)" }}>📍</div>
                <div>
                  <h4>Visit the main campus</h4>
                  <p>B-1 Momin Park No. 2<br/>Opp. Khwaja Garib Nawaz Masjid<br/>Tandalja, Vadodara – 390012</p>
                </div>
              </div>
              <div className="contact-row">
                <div className="cic" style={{ "--c": "var(--sky)" }}>⏰</div>
                <div>
                  <h4>Office hours</h4>
                  <p>Monday – Friday · 8:30 AM – 6:00 PM<br/>Saturdays open for tours by appointment</p>
                </div>
              </div>
              <div className="contact-row">
                <div className="cic" style={{ "--c": "var(--grape)" }}>💬</div>
                <div>
                  <h4>WhatsApp</h4>
                  <p><a href="https://wa.me/917201086596">+91 72010 86596</a> · usually replies within an hour</p>
                </div>
              </div>
            </div>

            {/* Google Maps embed */}
            <div className="map-frame reveal" style={{ padding: 0, overflow: "hidden" }}>
              <iframe
                title="Xcela Dreamland location"
                src="https://maps.google.com/maps?q=B-1+Momin+Park+No+2+Tandalja+Vadodara+390012&output=embed&z=16"
                width="100%" height="100%"
                style={{ border: 0, display: "block", height: "100%" }}
                allowFullScreen
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
              />
              <div className="map-card">
                <div>
                  <div style={{ fontFamily: "Fredoka", fontWeight: 700, fontSize: 17 }}>Xcela Dreamland · Vadodara</div>
                  <div style={{ fontSize: 13, color: "var(--ink-soft)" }}>Momin Park No. 2, Tandalja, Vadodara</div>
                </div>
                <a
                  href="https://www.google.com/maps/search/B-1+Momin+Park+No+2+Tandalja+Vadodara+390012"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="btn btn-yellow"
                  style={{ fontSize: 14, padding: "8px 14px", boxShadow: "3px 3px 0 var(--ink)" }}
                >Open in Maps →</a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Contact form */}
      <section>
        <div className="wrap">
          <div className="section-head reveal">
            <span className="eyebrow"><span className="dot" /> Send a message</span>
            <h2>Drop us a <span className="stamp stamp-mint">line</span></h2>
            <p>We aim to reply within one business day.</p>
          </div>

          <form className="application reveal" onSubmit={onSubmit} style={{ maxWidth: 820, margin: "0 auto" }}>
            {sent ? (
              <div style={{ textAlign: "center", padding: 30 }}>
                <div className="bob" style={{ display: "inline-block" }}>
                  <Sticker shape="smile" size={120} fill="var(--yellow)" />
                </div>
                <h3 style={{ marginTop: 20, fontSize: 32 }}>Message sent! 💛</h3>
                <p style={{ color: "var(--ink-soft)", marginTop: 8, fontSize: 17 }}>
                  Someone from our team will reach out shortly.
                </p>
                <button type="button" onClick={() => setSent(false)} className="btn btn-mint" style={{ marginTop: 22 }}>
                  Send another →
                </button>
              </div>
            ) : (
              <>
                <div className="field-grid">
                  <div className="field">
                    <label>Your name *</label>
                    <input type="text" required placeholder="Anjali Menon" />
                  </div>
                  <div className="field">
                    <label>Email or phone *</label>
                    <input type="text" required placeholder="anjali@example.com" />
                  </div>
                  <div className="field full">
                    <label>What's on your mind?</label>
                    <select>
                      <option>I'd like to book a tour</option>
                      <option>I have an admissions question</option>
                      <option>I'm an existing parent</option>
                      <option>Press / media</option>
                      <option>Careers</option>
                      <option>Something else</option>
                    </select>
                  </div>
                  <div className="field full">
                    <label>Message *</label>
                    <textarea required placeholder="Type away…"></textarea>
                  </div>
                </div>
                <div style={{ marginTop: 24, display: "flex", justifyContent: "center" }}>
                  <button type="submit" className="btn">Send message →</button>
                </div>
              </>
            )}
          </form>
        </div>
      </section>


    </>
  );
};

renderPage("contact.html", ContactContent);