function ContactPage({ openTour }) {
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', email: '', phone: '', message: '', topic: 'tour' });

  return (
    <main className="page-enter" data-screen-label="07 Contact">
      <section className="container" style={{ paddingTop: 24 }}>
        <div className="page-banner">
          <img src="media/contact-banner.webp" alt="Contact IDEA ELC" />
          <div className="pb-content">
            <div className="idea-rule" style={{ marginBottom: 16 }}><span/><span/><span/><span/></div>
            <div className="eyebrow" style={{ color: 'rgba(255,255,255,.75)' }}>Contact</div>
            <h1 style={{ marginTop: 12 }}>We'd love to hear from you.</h1>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 48 }}>
          {/* form */}
          <div style={{ background: 'white', borderRadius: 28, padding: 36, border: '1px solid var(--line)' }}>
            <h2 style={{ fontSize: 30 }}>Send us a message</h2>
            <p style={{ color: 'var(--ink-2)', marginTop: 8 }}>Tours and enrolment go through admissions. General enquiries through info@.</p>

            {!submitted ? (
              <form onSubmit={e => { e.preventDefault(); setSubmitted(true); }} style={{ marginTop: 24 }}>
                <div className="field">
                  <label>What would you like to talk about?</label>
                  <div className="tile-radio">
                    <button type="button" className={form.topic === 'tour' ? 'selected' : ''} onClick={() => setForm({ ...form, topic: 'tour' })}>
                      Book a tour<small>Visit the centre</small>
                    </button>
                    <button type="button" className={form.topic === 'admissions' ? 'selected' : ''} onClick={() => setForm({ ...form, topic: 'admissions' })}>
                      Admissions<small>Fees, places, paperwork</small>
                    </button>
                    <button type="button" className={form.topic === 'general' ? 'selected' : ''} onClick={() => setForm({ ...form, topic: 'general' })}>
                      General<small>Anything else</small>
                    </button>
                    <button type="button" className={form.topic === 'media' ? 'selected' : ''} onClick={() => setForm({ ...form, topic: 'media' })}>
                      Media / partners<small>Press, sponsors</small>
                    </button>
                  </div>
                </div>
                <div className="field-row">
                  <div className="field"><label>Your name</label>
                    <input required value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} placeholder="Full name" />
                  </div>
                  <div className="field"><label>Email</label>
                    <input required type="email" value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} placeholder="you@example.com" />
                  </div>
                </div>
                <div className="field"><label>Phone <span style={{ color: 'var(--muted)', fontWeight: 500 }}>(optional)</span></label>
                  <input value={form.phone} onChange={e => setForm({ ...form, phone: e.target.value })} placeholder="+971 …" />
                </div>
                <div className="field"><label>Message</label>
                  <textarea required rows="4" value={form.message} onChange={e => setForm({ ...form, message: e.target.value })} placeholder="Tell us about your child & what you'd like to know…" />
                </div>
                <div style={{ display: 'flex', gap: 10, marginTop: 8, flexWrap: 'wrap' }}>
                  <button type="submit" className="btn btn-primary"><Icon.Mail /> Send message</button>
                  <button type="button" className="btn btn-light" onClick={() => openTour()}><Icon.Calendar size={14} /> Or book a tour</button>
                </div>
                <p style={{ fontSize: 12, color: 'var(--muted)', marginTop: 14 }}>By submitting you agree to be contacted. We don't share details with third parties.</p>
              </form>
            ) : (
              <div style={{ marginTop: 24, padding: 28, background: '#F1FBEF', borderRadius: 18, border: '1px solid #D8EFD3' }}>
                <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'var(--c-green)', color: 'white', display: 'grid', placeItems: 'center', marginBottom: 14 }}>
                  <Icon.Check size={28} />
                </div>
                <h3>Thanks {form.name?.split(' ')[0]} — your message is in.</h3>
                <p style={{ color: 'var(--ink-2)', marginTop: 8 }}>This is a design prototype, so nothing was sent. We'll reply to <strong>{form.email}</strong> within one business day.</p>
                <button className="btn btn-light btn-sm" onClick={() => { setSubmitted(false); setForm({ name: '', email: '', phone: '', message: '', topic: 'tour' }); }} style={{ marginTop: 14 }}>Send another</button>
              </div>
            )}
          </div>

          {/* contact details + map */}
          <div style={{ display: 'grid', gap: 18 }}>
            <div style={{ background: 'var(--ink)', color: 'white', borderRadius: 24, padding: 28 }}>
              <div className="idea-rule" style={{ marginBottom: 16 }}><span/><span/><span/><span/></div>
              <h3 style={{ color: 'white', fontSize: 22 }}>Visit us</h3>
              <div style={{ marginTop: 14, display: 'grid', gap: 14, fontSize: 15 }}>
                <div style={{ display: 'flex', gap: 12 }}>
                  <Icon.Pin /> <div>Victory Heights<br/>Dubai Sports City, Dubai, UAE</div>
                </div>
                <div style={{ display: 'flex', gap: 12 }}><Icon.Phone /> <a href="tel:8004332352">800 4332 352</a> <span style={{ color: 'rgba(255,255,255,.55)', fontSize: 12 }}>(toll-free)</span></div>
                <div style={{ display: 'flex', gap: 12 }}><Icon.Phone /> <a href="tel:+97142766714">+971 4 276 6714</a> <span style={{ color: 'rgba(255,255,255,.55)', fontSize: 12 }}>(direct)</span></div>
                <div style={{ display: 'flex', gap: 12 }}><Icon.Mail /> <a href="mailto:admissions@ideaelc.ae">admissions@ideaelc.ae</a></div>
                <div style={{ display: 'flex', gap: 12 }}><Icon.Mail /> <a href="mailto:info@ideaelc.ae">info@ideaelc.ae</a></div>
                <div style={{ display: 'flex', gap: 12 }}><Icon.Clock /> Hours to be confirmed</div>
              </div>
              <div style={{ marginTop: 22, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                <a className="btn btn-wa btn-sm" href="https://wa.me/971000000000?text=Hi%20IDEA%20ELC%2C%20I%27d%20like%20to%20book%20a%20tour" target="_blank" rel="noopener">
                  <Icon.Whatsapp size={14} /> WhatsApp
                </a>
                <a className="btn btn-light btn-sm" href="https://www.facebook.com/IDEAearlylearningcenter" target="_blank" rel="noopener" style={{ background: 'transparent', color: 'white', borderColor: 'rgba(255,255,255,.3)' }}>
                  <Icon.Facebook size={14} /> Facebook
                </a>
              </div>
            </div>

            {/* Map placeholder */}
            <div style={{ position: 'relative', borderRadius: 24, overflow: 'hidden', aspectRatio: '4/3', background: 'linear-gradient(135deg, #E6EDF5, #DCE6F0)' }}>
              <svg viewBox="0 0 400 300" width="100%" height="100%" style={{ position: 'absolute', inset: 0 }}>
                <defs>
                  <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
                    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(27,38,65,.08)" strokeWidth="1"/>
                  </pattern>
                </defs>
                <rect width="400" height="300" fill="url(#grid)" />
                {/* Roads */}
                <path d="M0 200 L400 180" stroke="rgba(27,38,65,.18)" strokeWidth="8" fill="none" strokeLinecap="round" />
                <path d="M200 0 L210 300" stroke="rgba(27,38,65,.18)" strokeWidth="8" fill="none" strokeLinecap="round" />
                <path d="M0 80 L400 110" stroke="rgba(27,38,65,.12)" strokeWidth="4" fill="none" />
                {/* community labels */}
                <text x="40" y="60" fontSize="11" fill="rgba(27,38,65,.5)" fontFamily="Nunito">Motor City</text>
                <text x="280" y="60" fontSize="11" fill="rgba(27,38,65,.5)" fontFamily="Nunito">Arabian Ranches</text>
                <text x="50" y="270" fontSize="11" fill="rgba(27,38,65,.5)" fontFamily="Nunito">JVT</text>
                <text x="280" y="270" fontSize="11" fill="rgba(27,38,65,.5)" fontFamily="Nunito">Dubailand</text>
                {/* Pin */}
                <g transform="translate(195,150)">
                  <circle r="36" fill="rgba(230,63,53,.18)" />
                  <circle r="20" fill="rgba(230,63,53,.3)" />
                  <circle r="10" fill="var(--c-red)" stroke="white" strokeWidth="3" />
                </g>
                <rect x="170" y="170" width="120" height="36" rx="8" fill="white" stroke="rgba(0,0,0,.08)" />
                <text x="230" y="186" fontSize="11" textAnchor="middle" fontFamily="Fredoka" fontWeight="600" fill="var(--ink)">IDEA ELC</text>
                <text x="230" y="200" fontSize="9" textAnchor="middle" fill="var(--muted)" fontFamily="Nunito">Victory Heights, DSC</text>
              </svg>
              <div style={{ position: 'absolute', right: 14, bottom: 14, background: 'white', padding: '8px 12px', borderRadius: 999, fontSize: 12, fontWeight: 700, border: '1px solid var(--line)' }}>
                Map placeholder · embed pending coords
              </div>
            </div>

            <div style={{ background: 'var(--cream-2)', borderRadius: 20, padding: 22, fontSize: 14, color: 'var(--ink-2)' }}>
              <strong style={{ color: 'var(--ink)' }}>10 minutes</strong> from Arabian Ranches, Motor City, JGE, JVT, Remraam & Dubailand. Parking on-site.
            </div>
          </div>
        </div>
      </section>

      <div style={{ height: 60 }} />
    </main>
  );
}
window.ContactPage = ContactPage;