/* Programmes page — tabbed */

const PROGRAMMES = [
{
  key: 'playschool', label: 'Playschool', age: '2 – 3 years', color: 'sky', emoji: '🧸',
  tagline: 'A gentle, joyful first step',
  intro: "For our youngest learners,\nA soft, secure introduction to school built on routine, play, and lots of cuddles.",
  schedule: [{ name: 'Midday', hours: 'Mon–Thu 7am–2pm · Fri 8am–12.30pm' }, { name: 'Full Day', hours: 'Mon–Fri 7am–6.30pm', tag: 'Most popular' }],
  pillars: [
  { icon: '👶', title: 'Settling in', desc: 'Gentle separation from parents with familiar routines and trusted teachers.' },
  { icon: '🎵', title: 'Songs & rhymes', desc: 'Daily Islamic nasyid, English songs and Malay rhymes — a love for language begins early.' },
  { icon: '🤲', title: 'Tiny doa', desc: 'Doa makan, doa tidur, doa naik kereta — small habits, big iman.' },
  { icon: '🧩', title: 'Sensory play', desc: 'Sand, water, dough, blocks — exploring the world through hands and senses.' }],

  typicalDay: ['Welcome circle & doa', 'Letters & sound', 'Outdoor / sensory play', 'Number time', 'Snack & rest', 'Thematic play', 'Story & song', 'Free play & pickup']
},
{
  key: 'nursery', label: 'Nursery', age: '4 years', color: 'mint', emoji: '🎨',
  tagline: 'Curiosity unleashed',
  intro: 'Phonics foundations, fine motor skills, and Islamic adab — all delivered through themed, hands-on play.',
  schedule: [{ name: 'Basic', hours: 'Mon–Fri 8am–12pm', tag: 'Half day' }, { name: 'Midday', hours: 'Mon–Thu 8am–2pm · Fri 8am–12.30pm' }, { name: 'Full Day', hours: 'Mon–Fri 7am–6pm' }],
  pillars: [
  { icon: '🔤', title: 'Phonics', desc: 'Jolly Phonics-based programme — children begin blending and reading simple words.' },
  { icon: '🔢', title: 'Early Maths', desc: 'Numbers, patterns, shapes through manipulatives and games.' },
  { icon: '📿', title: 'Quran & Iqra', desc: 'Iqra reading, surah memorisation, hadith of the week.' },
  { icon: '🔬', title: 'Science wonder', desc: 'Weekly science experiments — children become little scientists.' }],

  typicalDay: ['Islamic Studies', 'Phonics & Literacy', 'Maths & Science experiments', 'Hafazan', 'Snack & outdoor play', 'Music & Movement', 'Arts & Craft', 'Sensory play', 'Lunch & pickup']
},
{
  key: 'reception', label: 'Reception', age: '5 years', color: 'rose', emoji: '📖',
  tagline: 'Reading takes off',
  intro: 'Reading fluency, early Maths, Quran tahfiz, and confident communication — building blocks for primary school.',
  schedule: [{ name: 'Midday', hours: 'Mon–Thu 8am–2.30pm · Fri 8am–12.30pm' }, { name: 'Full Day', hours: 'Mon–Fri 7am–6pm', tag: 'Most popular' }],
  pillars: [
  { icon: '📚', title: 'Reading fluency', desc: 'Levelled readers, comprehension and creative writing in English.' },
  { icon: '✍️', title: 'Handwriting', desc: 'Cursive and print, building beautiful, confident writing.' },
  { icon: '🕌', title: 'Tahfiz', desc: 'Memorisation of short surahs with tajweed basics.' },
  { icon: '🌍', title: 'World awareness', desc: 'Geography, cultures, and the wonders of Allah\'s creation.' }],

  typicalDay: ['Islamic Studies & Solat', 'Phonics & Literacy', 'Maths', 'Outdoor break', 'Hafazan', 'Theme project', 'Lunch', 'Specials (Speech & Drama, Arts, PE)', 'Reflection & pickup']
},
{
  key: 'year1', label: 'Year One', age: '6 years', color: 'yellow', emoji: '🎓',
  tagline: 'School-ready & shining',
  intro: 'A bridge year,\nChildren are well prepared for primary, confident in acquired skills and grounded in their faith.',
  schedule: [{ name: 'Midday', hours: 'Mon–Thu 8am–3pm · Fri 8am–12.30pm' }, { name: 'Full Day', hours: 'Mon–Fri 7am–6pm', tag: 'Most popular' }],
  pillars: [
  { icon: '🏆', title: 'Primary readiness', desc: 'BM, English, Maths and Science aligned with Year 1 KSSR expectations.' },
  { icon: '🗣️', title: 'Confident speakers', desc: 'Show & tell, debates, presentations where every child finds their voice.' },
  { icon: '🕋', title: 'Hajj cilik', desc: 'A signature programme where children experience the rites of hajj in miniature.' },
  { icon: '👨‍👩‍👧', title: 'Graduation', desc: 'A meaningful send-off into primary school, Insya\'Allah well-prepared.' }],

  typicalDay: ['Islamic Studies & Practice', 'Hafazan', 'Reading & Literacy', 'Bahasa Melayu & Pemahaman', 'Performing Arts', 'Mathematics & Science experiments', 'Arts & Craft', 'Outdoor break & Physical Education', 'Extra curriculum (Club Activities)']
},
{
  key: 'transit', label: 'Transit', age: 'After school', color: 'lilac', emoji: '🚌',
  tagline: 'Safe, structured, snacked',
  intro: 'For families needing after-school care — homework guidance, hot meals, Quran time, and supervised play until pickup.',
  schedule: [{ name: 'After-school', hours: 'After school – 6.30pm' }],
  pillars: [
  { icon: '📝', title: 'Homework support', desc: 'Trained teachers help with daily homework and revision.' },
  { icon: '🍱', title: 'Halal hot meals', desc: 'Nutritious, freshly cooked lunch and tea provided.' },
  { icon: '📿', title: 'Quran time', desc: 'Daily Quran reading and revision keeps the connection alive.' },
  { icon: '🎨', title: 'Free play', desc: 'Art, board games, outdoor play — childhood after the school bell.' }],

  typicalDay: ['Pickup from school', 'Lunch', 'Rest / Quran', 'Homework', 'Tea', 'Free play / activities', 'Parent pickup']
}];


function ProgrammesHero() {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', paddingTop: 60, paddingBottom: 0, background: 'linear-gradient(180deg, #DCF2F8 0%, #FFE7C8 100%)' }}>
      <Cloud size={130} style={{ top: '15%', left: '6%', animation: 'float-slow 8s ease-in-out infinite' }} />
      <Cloud size={90} style={{ top: '30%', right: '12%', animation: 'float-slow 6s ease-in-out infinite' }} />
      <Star size={28} color="var(--orange)" style={{ top: '20%', right: '30%', animation: 'float 4s ease-in-out infinite' }} />
      <Planet style={{ top: '50%', right: '8%' }} color="var(--mint)" />
      <Kite style={{ bottom: '10%', left: '8%' }} />

      <div className="container" style={{ position: 'relative', zIndex: 2, padding: '80px 32px 100px', textAlign: 'center' }}>
        <span className="section-eyebrow"><span className="dot-marker" /> Programmes</span>
        <h1 style={{ fontSize: 'clamp(44px, 6vw, 80px)', fontWeight: 600, lineHeight: 1, letterSpacing: '-0.02em' }}>
          A programme for <span style={{ color: 'var(--orange)' }}>every</span> stage
        </h1>
        <p className="section-lead" style={{ margin: '24px auto 0' }}>From toddler steps to school-ready strides, five carefully designed pathways, each grounded in Islamic values and delivered fully in English.

        </p>
      </div>
      <div style={{ position: 'relative', height: 80, marginTop: -20 }}>
        <svg viewBox="0 0 1440 100" preserveAspectRatio="none" style={{ width: '100%', height: '100%' }}>
          <path d="M0,100 L0,60 Q60,30 140,55 Q200,15 280,45 Q360,10 440,40 Q520,5 600,35 Q680,0 760,30 Q840,5 920,35 Q1000,15 1080,40 Q1160,10 1240,45 Q1320,20 1400,50 Q1440,55 1440,100 Z" fill="#FFF8EE" />
        </svg>
      </div>
    </section>);

}

function ProgrammeTabs({ active, setActive }) {
  return (
    <div className="container" style={{ marginTop: -20, position: 'relative', zIndex: 5 }}>
      <div style={{ background: '#fff', borderRadius: 28, padding: 12, boxShadow: 'var(--shadow-md)', display: 'flex', gap: 6, overflowX: 'auto', scrollbarWidth: 'thin' }}>
        {PROGRAMMES.map((p) =>
        <button key={p.key} onClick={() => setActive(p.key)}
        style={{
          flex: '1 1 auto',
          minWidth: 130,
          padding: '14px 18px',
          borderRadius: 18,
          background: active === p.key ? `var(--${p.color === 'yellow' ? 'orange' : p.color})` : 'transparent',
          color: active === p.key ? '#fff' : 'var(--charcoal)',
          fontWeight: 700,
          fontSize: 14,
          transition: 'all 0.2s',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          gap: 8,
          whiteSpace: 'nowrap'
        }}>
            <span style={{ fontSize: 18 }}>{p.emoji}</span>
            <span>{p.label}</span>
          </button>
        )}
      </div>
    </div>);

}

/* Map keywords in step text → relevant emoji icon */
const STEP_ICONS = [
{ match: /islamic/i, icon: '🕌' },
{ match: /quran|doa|tahfiz|prayer|solat|hafazan/i, icon: '📿' },
{ match: /circle|welcome|morning/i, icon: '🌅' },
{ match: /\bthematic\b|\btheme\b|\bthemed\b/i, icon: '🎭' },
{ match: /performing/i, icon: '🎭' },
{ match: /club|extra/i, icon: '🎪' },
{ match: /sensory/i, icon: '🧩' },
{ match: /movement|dance/i, icon: '💃' },
{ match: /art|craft/i, icon: '🎨' },
{ match: /music|nasyid|song/i, icon: '🎵' },
{ match: /outdoor|recess|break|play/i, icon: '🏃' },
{ match: /snack|tea/i, icon: '🍪' },
{ match: /lunch/i, icon: '🍱' },
{ match: /rest|nap/i, icon: '😴' },
{ match: /specials|speech|drama/i, icon: '🎤' },
{ match: /story|song/i, icon: '🎵' },
{ match: /letter|sound|alphabet/i, icon: '🔤' },
{ match: /number/i, icon: '🔢' },
{ match: /english|literacy|phonics|reading/i, icon: '📖' },
{ match: /bm|bahasa/i, icon: '📝' },
{ match: /math/i, icon: '🧮' },
{ match: /science/i, icon: '🔬' },
{ match: /pe|sport/i, icon: '⚽' },
{ match: /homework/i, icon: '✏️' },
{ match: /pickup|free play/i, icon: '👋' },
{ match: /reflection/i, icon: '💭' }];

function iconFor(step) {
  for (const r of STEP_ICONS) if (r.match.test(step)) return r.icon;
  return '⭐';
}

function DayStepBox({ step, index }) {
  const [hover, setHover] = React.useState(false);
  const icon = iconFor(step);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative',
        background: '#fff',
        borderRadius: 16,
        padding: '16px 14px 14px',
        boxShadow: hover ? '0 10px 24px rgba(42,42,42,0.16)' : '0 3px 10px rgba(42,42,42,0.06)',
        border: '2px solid',
        borderColor: hover ? 'var(--orange)' : 'rgba(42,42,42,0.06)',
        cursor: 'default',
        transition: 'all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1)',
        transform: hover ? 'translateY(-3px)' : 'translateY(0)',
        overflow: 'visible'
      }}>
      {/* Floating icon — pops up on hover */}
      <span
        aria-hidden="true"
        style={{
          position: 'absolute',
          top: hover ? -22 : 8,
          right: hover ? -10 : 10,
          fontSize: hover ? 38 : 22,
          opacity: hover ? 1 : 0.55,
          transform: hover ? 'rotate(-12deg) scale(1)' : 'rotate(0) scale(1)',
          transition: 'all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1)',
          filter: hover ? 'drop-shadow(0 6px 10px rgba(42,42,42,0.25))' : 'none',
          pointerEvents: 'none',
          zIndex: 2
        }}>
        {icon}
      </span>
      <div style={{
        fontFamily: 'Fredoka',
        fontSize: 11,
        fontWeight: 600,
        color: 'var(--orange)',
        letterSpacing: '0.08em'
      }}>
        {String(index + 1).padStart(2, '0')}
      </div>
      <div style={{
        marginTop: 4,
        fontSize: 14,
        fontWeight: 600,
        color: 'var(--charcoal)',
        lineHeight: 1.3,
        paddingRight: 18
      }}>
        {step}
      </div>
    </div>);

}

function ProgrammeDetail({ p, onEnroll }) {
  const tone = p.color === 'yellow' ? 'orange-warm' : p.color;
  return (
    <div className="pop-in" key={p.key}>
      <section style={{ padding: '60px 0' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }}>
          <div>
            <Pill color={p.color}>{p.age}</Pill>
            <h2 className="section-title" style={{ marginTop: 14 }}>{p.label}<br /><span style={{ color: `var(--${tone})` }}>{p.tagline}</span></h2>
            <p className="section-lead" style={{ whiteSpace: 'pre-line' }}>{p.intro}</p>
            <div style={{ display: 'flex', gap: 12, marginTop: 24, flexWrap: 'wrap' }}>
              <button className="btn btn-primary" onClick={onEnroll}>Enroll for 2026 →</button>
              <a href="fees.html" className="btn btn-ghost">View fees</a>
            </div>
          </div>
          <div style={{ position: 'relative' }}>
            <div className="cloud-image" style={{ height: 360, background: `linear-gradient(135deg, var(--${p.color}-soft, var(--${p.color})), var(--${p.color}))`, display: 'grid', placeItems: 'center', fontSize: 140 }}>{p.emoji}</div>
            <span className="dot" style={{ width: 28, height: 28, background: 'var(--orange)', top: '-10px', left: '-10px' }} />
            <span className="dot" style={{ width: 18, height: 18, background: 'var(--mint)', bottom: '-8px', right: '20%' }} />
          </div>
        </div>
      </section>

      <section style={{ padding: '40px 0 80px' }}>
        <div className="container">
          <h3 style={{ fontFamily: 'Fredoka', fontSize: 28, marginBottom: 24 }}>What we focus on</h3>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 20 }}>
            {p.pillars.map((pillar, i) =>
            <div key={i} className="card" style={{ padding: 24 }}>
                <div style={{ width: 52, height: 52, borderRadius: 16, background: `var(--${p.color}-soft, var(--${p.color}))`, display: 'grid', placeItems: 'center', fontSize: 26, marginBottom: 14 }}>{pillar.icon}</div>
                <h4 style={{ fontSize: 16, marginBottom: 6 }}>{pillar.title}</h4>
                <p style={{ fontSize: 13 }}>{pillar.desc}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      <section style={{ padding: '40px 0 80px' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
          <div className="card" style={{ padding: 32, background: '#fff' }}>
            <h3 style={{ fontFamily: 'Fredoka', fontSize: 24, marginBottom: 18 }}>📅 Available programmes</h3>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {p.schedule.map((s, i) =>
              <div key={i} style={{ padding: 18, borderRadius: 16, background: 'var(--cream)', border: '2px solid rgba(255,106,26,0.08)' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                    <strong style={{ fontFamily: 'Fredoka', fontSize: 17 }}>{s.name}</strong>
                    {s.tag && <Pill color="orange" style={{ fontSize: 10, padding: '3px 10px' }}>{s.tag}</Pill>}
                  </div>
                  <div style={{ fontSize: 14, color: 'var(--charcoal-soft)' }}>{s.hours}</div>
                </div>
              )}
            </div>
          </div>

          <div className="card" style={{ padding: 32, background: `linear-gradient(135deg, var(--${p.color}-soft, var(--${p.color})), var(--cream))` }}>
            <h3 style={{ fontFamily: 'Fredoka', fontSize: 24, marginBottom: 18 }}>🌞 A typical day</h3>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))', gap: 12 }}>
              {p.typicalDay.map((step, i) =>
              <DayStepBox key={i} step={step} index={i} />
              )}
            </div>
          </div>
        </div>
      </section>
    </div>);

}

function ProgrammesApp() {
  const initial = typeof window !== 'undefined' && window.location.hash.replace('#', '') || 'playschool';
  const [active, setActive] = useState(PROGRAMMES.find((p) => p.key === initial) ? initial : 'playschool');
  const [enrollOpen, setEnrollOpen] = useState(false);
  const current = PROGRAMMES.find((p) => p.key === active);
  return (
    <div className="page" data-screen-label="Programmes">
      <Header active="programmes" onEnroll={() => setEnrollOpen(true)} />
      <ProgrammesHero />
      <ProgrammeTabs active={active} setActive={(k) => {setActive(k);window.history.replaceState(null, '', `#${k}`);}} />
      <ProgrammeDetail p={current} onEnroll={() => setEnrollOpen(true)} />
      <Footer />
      <FloatingCTAs />
      <EnrollmentModal open={enrollOpen} onClose={() => setEnrollOpen(false)} />
    </div>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<ProgrammesApp />);