/* ============================================================
   Admissions page
   ============================================================ */
const { useState: useAdmState } = React;

const STEPS = [
  { num: 1, icon: "💬", title: "Reach Out", body: "Drop us a line, give us a call, or pop a message on WhatsApp. We reply same-day.", c: "var(--pink)" },
  { num: 2, icon: "🚶", title: "Campus Tour", body: "Walk through with your child. Meet the teachers. Watch kids in their natural habitat.", c: "var(--yellow)" },
  { num: 3, icon: "📝", title: "Apply", body: "Submit the simple form and a few documents. We'll have a warm chat about your little one.", c: "var(--mint)" },
  { num: 4, icon: "🎉", title: "Welcome!", body: "Acceptance letter, welcome kit, and a first day that will start with confetti. (Promise.)", c: "var(--sky)" },
];

const DATES = [
  { m: "Jan", d: 15, what: "Applications Open",       c: "var(--pink)"   },
  { m: "Feb", d: 28, what: "Campus Tour Days",        c: "var(--yellow)" },
  { m: "Mar", d: 15, what: "Priority Round Closes",   c: "var(--mint)"   },
  { m: "Apr", d: 10, what: "Welcome Letters Sent",    c: "var(--sky)"    },
  { m: "May", d: 20, what: "Orientation Picnic",      c: "var(--grape)"  },
  { m: "Jun", d: 12, what: "First Day of School! 🎉", c: "var(--tangerine)" },
];

const DOCS = [
  "Child's birth certificate",
  "Recent passport-size photographs (4)",
  "Parents' photo ID & address proof",
  "Vaccination record",
  "Aadhar card (child & parents)",
  "Most recent medical check-up",
];

const AdmissionsContent = () => {
  const [submitted, setSubmitted] = useAdmState(false);

  const onSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
    const r = e.target.getBoundingClientRect();
    fireConfetti(r.left + r.width / 2, r.top + 80);
  };

  return (
    <>
      <PageHero
        eyebrow="Admissions 2026–27"
        title="Joining Xcela is |easier| than you'd think."
        titleColor="var(--tangerine)"
        subtitle="No competitive interviews, no panel grilling — just a friendly chat and a beautiful first day."
        bg="color-mix(in oklab, var(--yellow) 60%, var(--paper))"
        icon="balloon"
      />

      {/* 4-step process */}
      <section style={{ paddingTop: 40 }}>
        <div className="wrap">
          <div className="section-head reveal">
            <span className="eyebrow"><span className="dot" /> Four Tiny Steps</span>
            <h2>From <em>"maybe?"</em> to <span className="stamp stamp-mint">first day</span></h2>
            <p>The whole journey usually takes under three weeks.</p>
          </div>
          <div className="steps">
            {STEPS.map((s, i) => (
              <div key={i} className="step reveal" style={{ "--c": s.c, transitionDelay: `${i * 80}ms` }}>
                <div className="step-num">{s.num}</div>
                <div className="step-icon">{s.icon}</div>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Important Dates */}
      <section>
        <div className="wrap">
          <div className="section-head reveal">
            <span className="eyebrow"><span className="dot" /> Mark Your Calendar</span>
            <h2>Important <span className="stamp stamp-pink" style={{ color: "white" }}>dates</span></h2>
          </div>
          <div className="dates-grid">
            {DATES.map((d, i) => (
              <div key={i} className="date-card reveal" style={{ "--c": d.c, transitionDelay: `${i * 50}ms` }}>
                <div className="month">{d.m}</div>
                <div className="day">{d.d}</div>
                <div className="what">{d.what}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Documents needed */}
      <section>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 50, alignItems: "start" }}>
          <div className="reveal">
            <span className="eyebrow"><span className="dot" /> What to Bring</span>
            <h2 style={{ marginTop: 18, fontSize: "clamp(32px, 4vw, 44px)" }}>A small <span className="stamp stamp-mint">paper trail</span></h2>
            <p style={{ marginTop: 14, color: "var(--ink-soft)", fontSize: 17, lineHeight: 1.55 }}>
              Bring originals to the tour for verification, and digital copies for our records. We'll do the heavy lifting from there.
            </p>
            <div className="bob" style={{ marginTop: 24, display: "inline-block" }}>
              <Sticker shape="flower" size={120} fill="var(--pink)" />
            </div>
          </div>
          <div className="reveal">
            <div className="docs">
              {DOCS.map((d, i) => (
                <div key={i} className="doc">
                  <span className="doc-check">✓</span>
                  <span>{d}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Application form */}
      <section id="apply">
        <div className="wrap">
          <div className="section-head reveal">
            <span className="eyebrow"><span className="dot" /> Start Application</span>
            <h2>Send us a <span className="stamp stamp-pink" style={{ color: "white" }}>hello</span></h2>
            <p>Five minutes, six fields, zero pressure. We'll call you within a day.</p>
          </div>

          <form className="application reveal" onSubmit={onSubmit}>
            {submitted ? (
              <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 }}>Got it! 🎉</h3>
                <p style={{ color: "var(--ink-soft)", marginTop: 8, fontSize: 17 }}>
                  We'll reach out within 24 hours to set up your tour.
                </p>
                <button type="button" onClick={() => setSubmitted(false)} className="btn btn-mint" style={{ marginTop: 22 }}>
                  Send another →
                </button>
              </div>
            ) : (
              <>
                <h3>Parent details</h3>
                <p style={{ color: "var(--ink-soft)", fontSize: 14.5 }}>* required</p>
                <div className="field-grid">
                  <div className="field">
                    <label>Parent name *</label>
                    <input type="text" required placeholder="Priya Desai" />
                  </div>
                  <div className="field">
                    <label>Phone *</label>
                    <input type="tel" required placeholder="+91 98765 43210" />
                  </div>
                  <div className="field full">
                    <label>Email *</label>
                    <input type="email" required placeholder="hello@example.com" />
                  </div>

                  <div className="field full" style={{ marginTop: 8 }}>
                    <h3 style={{ fontSize: 20, marginBottom: 0 }}>About your kiddo</h3>
                  </div>

                  <div className="field">
                    <label>Child's name *</label>
                    <input type="text" required placeholder="Aryan" />
                  </div>
                  <div className="field">
                    <label>Date of birth *</label>
                    <input type="date" required />
                  </div>
                  <div className="field">
                    <label>Program of interest *</label>
                    <select required>
                      <option value="">Pick one…</option>
                      <option>Playgroup (1.5–2.5)</option>
                      <option>Nursery (2.5–3.5)</option>
                      <option>Junior KG (3.5–4.5)</option>
                      <option>Senior KG (4.5–5.5)</option>
                      <option>Not sure — help me choose</option>
                    </select>
                  </div>
                  <div className="field">
                    <label>Preferred start month</label>
                    <select>
                      <option>April 2026</option>
                      <option>June 2026</option>
                      <option>September 2026</option>
                      <option>Flexible</option>
                    </select>
                  </div>
                  <div className="field full">
                    <label>Anything else you'd like to share?</label>
                    <textarea placeholder="Allergies, learning needs, sibling at school, questions you'd love a real human to answer…"></textarea>
                  </div>
                </div>
                <div style={{ marginTop: 24, display: "flex", gap: 14, flexWrap: "wrap" }}>
                  <button type="submit" className="btn">Send Application →</button>
                  <a href="contact.html" className="btn btn-ghost">Talk to us first</a>
                </div>
              </>
            )}
          </form>
        </div>
      </section>
    </>
  );
};

renderPage("admissions.html", AdmissionsContent);