/* ============================================================
   Curriculum page
   ============================================================ */
const { useState: useCurState } = React;

const PILLARS = [
  { icon: "🧠", title: "Cognitive Skills", body: "Pattern-spotting, problem-solving and memory games disguised as the most fun part of the day.", c: "var(--pink)" },
  { icon: "🗣️", title: "Language & Literacy", body: "Phonics, vocab, storytelling and read-alouds in English and Hindi.", c: "var(--tangerine)" },
  { icon: "🤸", title: "Physical Development", body: "Gross & fine motor — climbing walls, scissor work, balance beams, finger painting.", c: "var(--mint)" },
  { icon: "💛", title: "Social–Emotional", body: "Naming feelings, taking turns, friendship circles and gentle conflict resolution.", c: "var(--sky)" },
  { icon: "🎭", title: "Creative Expression", body: "Music, drama, dance, dress-up and gloriously messy art. No 'wrong' way to make.", c: "var(--grape)" },
  { icon: "🪔", title: "Cultural Roots", body: "Festivals, regional stories, classical music and the joyful chaos of community life.", c: "var(--yellow)" },
];

const PROGRAMS_DEEP = [
  {
    color: "var(--pink)", emoji: "🧸", title: "Playgroup", age: "1.5 – 2.5 Years", ratio: "1:4",
    lead: "A gentle, predictable, hug-filled introduction to time-away-from-grown-ups. Lots of textures, lots of songs, zero pressure.",
    outcomes: ["Separation confidence", "Basic motor skills", "Routines & rituals", "First friendships", "Sensory exploration", "Self-feeding"],
    schedule: [
      ["9:00",  "Welcome circle & songs", "Bonding"],
      ["9:30",  "Free play stations", "Choice"],
      ["10:00", "Sensory bin time", "Sensory"],
      ["10:30", "Snack & hand-wash", "Care"],
      ["11:00", "Story & puppets", "Language"],
      ["11:30", "Outdoor splash time", "Gross motor"],
      ["12:00", "Wind down & goodbyes", "Calm"],
    ],
  },
  {
    color: "var(--tangerine)", emoji: "🎨", title: "Nursery", age: "2.5 – 3.5 Years", ratio: "1:8",
    lead: "Words explode, friendships form, and 'why?' becomes the most-asked question of the day. We say yes to all of it.",
    outcomes: ["Vocabulary boost", "Group play", "Color & shape recognition", "Pre-writing strokes", "Storytelling", "Confidence building"],
    schedule: [
      ["9:00",  "Greeting & weather chat", "Language"],
      ["9:30",  "Phonics adventure", "Literacy"],
      ["10:00", "Snack & convo time", "Social"],
      ["10:30", "Themed art project", "Creative"],
      ["11:00", "Music & movement", "Body"],
      ["11:30", "Outdoor play", "Gross motor"],
      ["12:00", "Reflection circle", "Social–Emo"],
    ],
  },
  {
    color: "var(--mint)", emoji: "📚", title: "Junior KG", age: "3.5 – 4.5 Years", ratio: "1:8",
    lead: "The phonics-and-pre-math years, woven into projects that feel like the world's best playtime.",
    outcomes: ["Letter sounds & blending", "Numbers 1–20", "Logical sequencing", "Independent dressing", "Project work", "Empathy building"],
    schedule: [
      ["8:45",  "Morning yoga & meditation", "Wellness"],
      ["9:15",  "Phonics & blending games", "Literacy"],
      ["9:45",  "Math manipulatives", "Numeracy"],
      ["10:15", "Snack & helper duties", "Care"],
      ["10:45", "Project pod time", "Inquiry"],
      ["11:30", "Outdoor team games", "Body"],
      ["12:15", "Show-and-tell wrap", "Language"],
    ],
  },
  {
    color: "var(--sky)", emoji: "🚀", title: "Senior KG", age: "4.5 – 5.5 Years", ratio: "1:8",
    lead: "Confident readers, curious mathematicians, kind friends — getting ready to walk into Grade 1 with a smile.",
    outcomes: ["Independent reading", "Addition & subtraction", "Public speaking", "Research projects", "Conflict resolution", "Time awareness"],
    schedule: [
      ["8:30",  "Morning planner & journal", "Self"],
      ["9:00",  "Reading workshop", "Literacy"],
      ["9:45",  "Math investigations", "Numeracy"],
      ["10:30", "Snack & news circle", "Social"],
      ["11:00", "Project deep-dive", "Inquiry"],
      ["11:45", "Outdoor strategy games", "Body"],
      ["12:30", "Reflection & friendship", "Social–Emo"],
    ],
  },
];

const CurriculumContent = () => (
  <>
    <PageHero
      eyebrow="Our Curriculum"
      title="Six pillars. |One| joyful kid."
      titleColor="var(--pink)"
      subtitle="Our play-based curriculum weaves academics, art, body, heart and culture into a single, joyful school day."
      bg="color-mix(in oklab, var(--mint) 60%, var(--paper))"
      icon="rainbow"
    />

    {/* Six Pillars */}
    <section style={{ paddingTop: 40 }}>
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot" /> The Six Pillars</span>
          <h2>Built like a <span className="stamp stamp-pink" style={{ color: "white" }}>tree</span> — roots wide, branches strong</h2>
          <p>Every week, we hit all six on purpose. Even snack time has a job to do.</p>
        </div>

        <div className="pillars">
          {PILLARS.map((p, i) => (
            <div key={i} className="pillar reveal" style={{ "--c": p.c, transitionDelay: `${i * 60}ms` }}>
              <div className="pillar-icon">{p.icon}</div>
              <h3>{p.title}</h3>
              <p>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* Deep dive on each program */}
    <section>
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot" /> Programs in Depth</span>
          <h2>A look inside <span className="stamp stamp-mint">each program</span></h2>
        </div>

        {PROGRAMS_DEEP.map((p, i) => (
          <div key={i} className="program-deep reveal" style={{ "--c": p.color }}>
            <div className="splash" />
            <div className="program-deep-grid">
              <div className="program-deep-left">
                <span className="badge"><span style={{ fontSize: 22 }}>{p.emoji}</span> Ages {p.age}</span>
                <h2>{p.title}</h2>
                <p className="lead">{p.lead}</p>
                <div style={{ display: "flex", gap: 10, marginTop: 8 }}>
                  <span className="hero-stat-num" style={{ background: p.color, fontSize: 18 }}>{p.ratio}</span>
                  <span style={{ alignSelf: "center", fontSize: 14, color: "var(--ink-soft)" }}>Teacher : Child ratio</span>
                </div>
                <h4 style={{ marginTop: 18, fontSize: 18 }}>You'll see them learn to…</h4>
                <ul className="outcomes">
                  {p.outcomes.map((o, j) => <li key={j} style={{ "--c": p.color }}>{o}</li>)}
                </ul>
              </div>

              <div>
                <h4 style={{ marginBottom: 14, fontSize: 18 }}>A typical morning</h4>
                <div className="schedule">
                  {p.schedule.map((row, j) => (
                    <div key={j} className="schedule-row" style={{ "--c": p.color }}>
                      <span className="time">{row[0]}</span>
                      <span className="activity">{row[1]}</span>
                      <span className="tag">{row[2]}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>

    {/* CTA */}
    <CurriculumCTA />
  </>
);

const CurriculumCTA = () => (
  <section style={{ padding: 0 }}>
    <div className="cta reveal" style={{ background: "var(--sky)" }}>
      <div className="cta-deco float" style={{ top: 30, left: 40, "--r": "-12deg" }}>
        <Sticker shape="balloon" size={90} fill="var(--pink)" />
      </div>
      <div className="cta-deco bob" style={{ top: 50, right: 60 }}>
        <Sticker shape="star" size={70} fill="var(--mint)" />
      </div>
      <div className="cta-deco wiggle" style={{ bottom: 30, left: "30%" }}>
        <Sticker shape="lollipop" size={90} fill="var(--tangerine)" />
      </div>

      <span className="eyebrow"><span className="dot" /> See it in action</span>
      <h2 style={{ marginTop: 18 }}>Curriculum on paper is one thing.<br/>
        <span className="stamp stamp-pink" style={{ color: "white" }}>Seeing it</span> is another.
      </h2>
      <p>Visit a classroom mid-morning. Bring questions. Bring snacks. Bring your kiddo.</p>
      <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
        <a href="contact.html" className="btn" onClick={(e) => {
          const r = e.currentTarget.getBoundingClientRect();
          fireConfetti(r.left + r.width / 2, r.top + r.height / 2);
        }}>Book a Tour →</a>
        <a href="admissions.html" className="btn btn-mint">Start Application</a>
      </div>
    </div>
  </section>
);

renderPage("curriculum.html", CurriculumContent);