// Contact page
function App() {
  const [form, setForm] = React.useState({ name:'', email:'', phone:'', country:'', curriculum:'', grade:'', timezone:'', message:'' });
  const [errors, setErrors] = React.useState({});
  const [submitted, setSubmitted] = React.useState(false);
  const set = (k, v) => { setForm(f => ({ ...f, [k]: v })); if (errors[k]) setErrors(e => ({ ...e, [k]: null })); };

  const validate = () => {
    const e = {};
    if (!form.name.trim() || form.name.trim().length < 2) e.name = 'Please enter your full name';
    if (!form.email.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim())) e.email = 'Please enter a valid email address';
    if (!form.phone.trim() || !/^[+]?[\d\s().\-]{7,20}$/.test(form.phone.trim())) e.phone = 'Please enter a valid phone number';
    if (!form.country) e.country = 'Please select your country';
    if (!form.curriculum) e.curriculum = 'Please select a curriculum';
    return e;
  };

  const submit = (e) => {
    e.preventDefault();
    const errs = validate();
    if (Object.keys(errs).length > 0) { setErrors(errs); return; }
    const lines = ['Hi JK Sir, I would like to book a free mathematics assessment.','',
      'Name: '+form.name,'Email: '+form.email,'WhatsApp: '+form.phone,'Country: '+form.country,
      'Curriculum: '+form.curriculum,
      form.grade?'Grade: '+form.grade:null,form.timezone?'Time Zone: '+form.timezone:null,form.message?'Message: '+form.message:null
    ].filter(Boolean).join('\n');
    window.open('https://wa.me/919928793096?text='+encodeURIComponent(lines),'_blank');
    setSubmitted(true);
  };

  const iStyle = { width:'100%', padding:'13px 16px', fontSize:16, border:'1.5px solid rgba(124,58,237,0.15)', borderRadius:12, fontFamily:'var(--font-sans)', color:'var(--ink-secondary)', background:'#fafafa', outline:'none', boxSizing:'border-box' };
  const iErrStyle = { ...iStyle, border:'1.5px solid #ef4444', background:'#fff5f5' };
  const lStyle = { display:'block', fontSize:12, fontWeight:700, color:'var(--ink-secondary)', marginBottom:6, textTransform:'uppercase', letterSpacing:'0.5px' };
  const FieldErr = ({ f }) => errors[f] ? <div role="alert" style={{ fontSize:12, color:'#ef4444', marginTop:4 }}>⚠ {errors[f]}</div> : null;
  const curricula = ["IB Math AA (Analysis & Approaches)","IB Math AI (Applications & Interpretation)","IGCSE Mathematics","USA Common Core","AP Calculus AB & BC","SAT Mathematics","ACT Mathematics","Australian Curriculum","Canadian Curriculum","CBSE Mathematics","IIT JEE Main & Advanced","GATE Mathematics","Math Olympiad","Other"];

  return (
    <>
      <SharedNav />
      <main id="main">
        <div className="mm-page-hero" style={{ background: "linear-gradient(135deg,#0c0520 0%,#2d1b69 50%,#0c0520 100%)" }}>
          <div className="mm-page-container">
            <Breadcrumb crumbs={[{ label: "Contact" }]} />
            <h1>Book Your Free Mathematics Assessment</h1>
            <p>Fill in the form below, or message JK Sir directly on WhatsApp. We respond within 1 hour and schedule your first free session within 24–48 hours.</p>
            <div style={{ display: "flex", gap: 16, flexWrap: "wrap", marginTop: 8 }}>
              <a href="https://wa.me/919928793096" target="_blank" rel="noopener noreferrer" style={{ display: "inline-flex", alignItems: "center", gap: 8, background: "#25d366", borderRadius: 12, padding: "10px 20px", fontSize: 15, fontWeight: 700, color: "#fff" }}>
                💬 WhatsApp +91 9928793096
              </a>
              <a href="mailto:jayeshrwt@gmail.com" style={{ display: "inline-flex", alignItems: "center", gap: 8, background: "rgba(255,255,255,0.12)", border: "1px solid rgba(255,255,255,0.25)", borderRadius: 12, padding: "10px 20px", fontSize: 15, fontWeight: 600, color: "#fff" }}>
                ✉ jayeshrwt@gmail.com
              </a>
            </div>
          </div>
        </div>

        <section className="mm-section mm-section-soft">
          <div className="mm-page-container">
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 56, alignItems: "start" }}>
              {/* Left info */}
              <div>
                <div className="mm-section-badge">✨ Free Assessment</div>
                <h2 className="mm-section-title">What happens next?</h2>
                <div style={{ display: "flex", flexDirection: "column", gap: 20, marginTop: 24 }}>
                  {[["1️⃣","We contact you within 1 hour","JK Sir personally reads every enquiry and responds directly."],["2️⃣","Free assessment is scheduled","We arrange a 30-minute session at a time that works in your time zone."],["3️⃣","Personalised plan created","Based on your child's level, curriculum, and goals — a clear roadmap is built."],["4️⃣","Regular classes begin","Consistent weekly sessions with progress reports and parent updates."]].map(([ic,t,d]) => (
                    <div key={t} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                      <span style={{ fontSize: 22, flexShrink: 0, lineHeight: 1.2 }}>{ic}</span>
                      <div>
                        <div style={{ fontSize: 15, fontWeight: 700, color: "var(--ink-95)", marginBottom: 4 }}>{t}</div>
                        <div style={{ fontSize: 14, color: "var(--ink-muted)", lineHeight: 1.55 }}>{d}</div>
                      </div>
                    </div>
                  ))}
                </div>
                <div style={{ marginTop: 32, padding: "20px", background: "#fff", borderRadius: 16, border: "1px solid rgba(124,58,237,0.10)" }}>
                  <div style={{ fontSize: 13, fontWeight: 700, color: "#7c3aed", marginBottom: 12, textTransform: "uppercase", letterSpacing: "0.5px" }}>Contact Details</div>
                  {[["📞","WhatsApp / Call","+91 9928793096","tel:+919928793096"],["✉","Email","jayeshrwt@gmail.com","mailto:jayeshrwt@gmail.com"],["🌍","Availability","All time zones worldwide",null]].map(([ic,label,val,href]) => (
                    <div key={label} style={{ display: "flex", gap: 10, marginBottom: 10, alignItems: "flex-start" }}>
                      <span style={{ fontSize: 16 }}>{ic}</span>
                      <div>
                        <div style={{ fontSize: 11, fontWeight: 700, color: "var(--ink-faint)", textTransform: "uppercase", letterSpacing: "0.5px" }}>{label}</div>
                        {href ? <a href={href} style={{ fontSize: 14, fontWeight: 600, color: "#7c3aed" }}>{val}</a> : <div style={{ fontSize: 14, fontWeight: 600, color: "var(--ink-secondary)" }}>{val}</div>}
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* Right form */}
              <div style={{ background: "#fff", borderRadius: 24, padding: "40px 36px", boxShadow: "0 8px 48px rgba(124,58,237,0.10)", border: "1.5px solid rgba(124,58,237,0.10)", position: "relative", overflow: "hidden" }}>
                <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 4, background: "linear-gradient(90deg,#7c3aed,#4f46e5,#0ea5e9)" }} />

                {submitted ? (
                  <div style={{ textAlign: "center", padding: "40px 20px" }}>
                    <div style={{ fontSize: 56, marginBottom: 16 }}>🎉</div>
                    <h3 style={{ margin: "0 0 12px", fontSize: 22, fontWeight: 800, color: "var(--ink-95)", fontFamily: "var(--font-sans)" }}>Assessment Request Sent!</h3>
                    <p style={{ margin: "0 0 8px", fontSize: 15, color: "var(--ink-secondary)", lineHeight: 1.6 }}>JK Sir will respond within <strong>1 hour</strong>. Didn't open WhatsApp? <a href="https://wa.me/919928793096" target="_blank" rel="noopener noreferrer" style={{ color: "#7c3aed", fontWeight: 600 }}>Click here →</a></p>
                    <button onClick={() => setSubmitted(false)} style={{ marginTop: 20, padding: "10px 22px", background: "rgba(124,58,237,0.08)", border: "1px solid rgba(124,58,237,0.2)", borderRadius: 10, fontSize: 14, fontWeight: 600, color: "#7c3aed", cursor: "pointer", fontFamily: "var(--font-sans)" }}>Submit Another Enquiry</button>
                  </div>
                ) : (
                  <>
                    <h3 style={{ margin: "0 0 6px", fontSize: 20, fontWeight: 800, color: "var(--ink-95)", fontFamily: "var(--font-sans)" }}>Book a Free Assessment</h3>
                    <p style={{ margin: "0 0 22px", fontSize: 14, color: "var(--ink-muted)" }}>We'll reach out within 1 hour to confirm your session.</p>
                    {Object.keys(errors).length > 0 && <div role="alert" style={{ background: "#fff5f5", border: "1px solid #fecaca", borderRadius: 10, padding: "10px 14px", marginBottom: 16, fontSize: 13, color: "#dc2626" }}>⚠ Please fix the highlighted fields.</div>}
                    <form onSubmit={submit} noValidate aria-label="Book a free mathematics assessment" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                        <div><label htmlFor="cn" style={lStyle}>Name *</label><input id="cn" type="text" required autoComplete="name" value={form.name} onChange={e=>set('name',e.target.value)} placeholder="Full name" style={errors.name?iErrStyle:iStyle} aria-invalid={!!errors.name} /><FieldErr f="name"/></div>
                        <div><label htmlFor="ce" style={lStyle}>Email *</label><input id="ce" type="email" required autoComplete="email" value={form.email} onChange={e=>set('email',e.target.value)} placeholder="you@email.com" style={errors.email?iErrStyle:iStyle} aria-invalid={!!errors.email} /><FieldErr f="email"/></div>
                      </div>
                      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                        <div><label htmlFor="cp" style={lStyle}>WhatsApp *</label><input id="cp" type="tel" required autoComplete="tel" value={form.phone} onChange={e=>set('phone',e.target.value)} placeholder="+1 234 567 8900" style={errors.phone?iErrStyle:iStyle} aria-invalid={!!errors.phone} /><FieldErr f="phone"/></div>
                        <div><label htmlFor="cc" style={lStyle}>Country *</label><select id="cc" required value={form.country} onChange={e=>set('country',e.target.value)} style={errors.country?iErrStyle:iStyle} aria-invalid={!!errors.country}><option value="">Select country</option>{["USA","Canada","Australia","UAE","Hong Kong","Singapore","India","UK","Other"].map(c=><option key={c} value={c}>{c}</option>)}</select><FieldErr f="country"/></div>
                      </div>
                      <div><label htmlFor="ccurr" style={lStyle}>Curriculum *</label><select id="ccurr" required value={form.curriculum} onChange={e=>set('curriculum',e.target.value)} style={errors.curriculum?iErrStyle:iStyle} aria-invalid={!!errors.curriculum}><option value="">Select curriculum</option>{curricula.map(c=><option key={c} value={c}>{c}</option>)}</select><FieldErr f="curriculum"/></div>
                      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                        <div><label htmlFor="cg" style={lStyle}>Grade</label><select id="cg" value={form.grade} onChange={e=>set('grade',e.target.value)} style={iStyle}><option value="">Select grade</option>{["Grade 6","Grade 7","Grade 8","Grade 9","Grade 10","Grade 11","Grade 12","University","Other"].map(g=><option key={g} value={g}>{g}</option>)}</select></div>
                        <div><label htmlFor="ctz" style={lStyle}>Time Zone</label><select id="ctz" value={form.timezone} onChange={e=>set('timezone',e.target.value)} style={iStyle}><option value="">Select time zone</option>{["EST (USA East)","CST (USA Central)","PST (USA West)","AEST (Australia)","UAE / GST","SGT / HKT","IST (India)","GMT (UK)","Other"].map(tz=><option key={tz} value={tz}>{tz}</option>)}</select></div>
                      </div>
                      <div><label htmlFor="cm" style={lStyle}>Message</label><textarea id="cm" rows={3} value={form.message} onChange={e=>set('message',e.target.value)} placeholder="Tell us about your child's goals, challenges, or any specific topics..." style={{ ...iStyle, resize: "none", lineHeight: 1.5 }} /></div>
                      <button type="submit" style={{ width: "100%", padding: "15px", background: "linear-gradient(90deg,#7c3aed,#4f46e5)", border: "none", borderRadius: 12, fontSize: 16, fontWeight: 700, color: "#fff", cursor: "pointer", fontFamily: "var(--font-sans)", boxShadow: "0 8px 24px rgba(124,58,237,0.28)" }}>
                        🚀 Book My FREE Assessment
                      </button>
                      <div style={{ display: "flex", flexWrap: "wrap", gap: "4px 14px", justifyContent: "center" }}>
                        {["✔ Free Consultation","✔ No Commitment","✔ Response Within 1 Hour"].map(t => <span key={t} style={{ fontSize: 11, color: "var(--ink-muted)", fontWeight: 600 }}>{t}</span>)}
                      </div>
                    </form>
                  </>
                )}
              </div>
            </div>
          </div>
        </section>
        <BookCTA heading="Prefer to Talk First?" subtext="Send a WhatsApp message and JK Sir will personally get back to you within 1 hour — no automated replies." context="Contact page" primaryLabel="WhatsApp JK Sir" />
      </main>
      <SharedFooter />
    </>
  );
}