/* Landing page sections */

function HeroSection({ onEnroll }) {
  const [mouse, setMouse] = useState({ x: 0, y: 0 });
  useEffect(() => {
    const handler = (e) => {
      const x = (e.clientX / window.innerWidth - 0.5) * 2;
      const y = (e.clientY / window.innerHeight - 0.5) * 2;
      setMouse({ x, y });
    };
    window.addEventListener('mousemove', handler);
    return () => window.removeEventListener('mousemove', handler);
  }, []);

  return (
    <section style={{ position: 'relative', overflow: 'hidden', paddingTop: 60, paddingBottom: 0, background: 'linear-gradient(180deg, #FFEDD8 0%, #FFD9B8 50%, #FFE7C8 100%)' }}>
      {/* Big "PLAY" backdrop word like reference */}
      <div aria-hidden style={{
        position: 'absolute', top: '8%', right: '-6%',
        fontFamily: "'Fredoka', sans-serif",
        fontWeight: 700,
        fontSize: 'clamp(220px, 26vw, 380px)',
        color: 'rgba(255, 106, 26, 0.10)',
        letterSpacing: '-0.04em',
        lineHeight: 1,
        userSelect: 'none'
      }}>MAHIR
DHUHA</div>

      {/* parallax clouds */}
      <Cloud size={140} style={{ top: '12%', left: '5%', transform: `translate(${mouse.x * 12}px, ${mouse.y * 8}px)`, transition: 'transform 0.4s' }} />
      <Cloud size={90} style={{ top: '22%', right: '20%', transform: `translate(${mouse.x * -16}px, ${mouse.y * 10}px)`, transition: 'transform 0.4s' }} />
      <Cloud size={110} style={{ top: '52%', left: '18%', transform: `translate(${mouse.x * 8}px, ${mouse.y * -10}px)`, transition: 'transform 0.4s', opacity: 0.85 }} />

      {/* doodle decorations */}
      <Star size={32} color="var(--yellow)" style={{ top: '14%', left: '46%', animation: 'float 5s ease-in-out infinite' }} />
      <Star size={20} color="var(--orange)" style={{ top: '35%', left: '8%', animation: 'float 4s ease-in-out infinite' }} />
      <span className="dot" style={{ width: 18, height: 18, background: 'var(--rose)', top: '30%', left: '42%' }} />
      <span className="dot" style={{ width: 12, height: 12, background: 'var(--mint)', top: '60%', right: '12%' }} />
      <ScribbleArrow style={{ top: '45%', left: '38%', transform: 'rotate(-10deg)' }} />

      <div className="container" style={{ position: 'relative', zIndex: 2, display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 40, alignItems: 'center', paddingTop: 60, paddingBottom: 60, minHeight: '78vh' }}>
        <div className="pop-in">
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '8px 16px', background: '#fff', borderRadius: 999, boxShadow: 'var(--shadow-sm)', marginBottom: 24 }}>
            <span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', background: 'var(--mint)', boxShadow: '0 0 0 4px rgba(200, 235, 106, 0.35)' }} />
            <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--charcoal)' }}>Enrollment 2026 is open!</span>
          </div>

          <h1 style={{ fontSize: 'clamp(44px, 6.2vw, 84px)', lineHeight: 0.98, letterSpacing: '-0.03em', fontWeight: 600 }}>
            Building<br />
            <span style={{ position: 'relative', display: 'inline-block' }}>
              <span style={{ color: 'var(--orange)' }}>life skills</span>
              <svg viewBox="0 0 200 16" style={{ position: 'absolute', left: 0, right: 0, bottom: -8, width: '100%', height: 14 }}>
                <path d="M2 10 Q50 2 100 8 T 198 6" stroke="var(--orange)" strokeWidth="4" fill="none" strokeLinecap="round" />
              </svg>
            </span>,<br />
            guided by faith
          </h1>

          <p style={{ marginTop: 28, fontSize: 19, maxWidth: 520, lineHeight: 1.6 }}>
            Tadika Mahir Dhuha is an Islamic English preschool nurturing curious minds aged 2–6 across <b>Bukit Jelutong</b>, <b>Kota Damansara</b> & <b>Cyberjaya</b>. Bismillah, mari kita mula!
          </p>

          <div style={{ display: 'flex', gap: 14, marginTop: 36, flexWrap: 'wrap' }}>
            <button className="btn btn-primary" onClick={onEnroll} style={{ padding: '16px 28px', fontSize: 15 }}>
              Enroll for 2026 →
            </button>
            <a href="programmes.html" className="btn btn-ghost" style={{ padding: '16px 28px', fontSize: 15 }}>
              Our Programmes
            </a>
          </div>

          <div style={{ display: 'flex', gap: 32, marginTop: 48, flexWrap: 'wrap' }}>
            <Trust label="KPM Registered" icon="🏛️" />
            <Trust label="5★ Rating" icon="⭐" />
            <Trust label="Trained Teachers" icon="👩‍🏫" />
          </div>
        </div>

        {/* Right: hero image area */}
        <div style={{ position: 'relative', aspectRatio: '1 / 1.05', maxWidth: 540, justifySelf: 'end', width: '100%' }}>
          {/* Big colourful ring behind kids */}
          <svg viewBox="0 0 400 400" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', animation: 'spin-slow 30s linear infinite' }}>
            <defs>
              <linearGradient id="ringGrad" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stopColor="#FF6A1A" />
                <stop offset="33%" stopColor="#FFD84D" />
                <stop offset="66%" stopColor="#C8EB6A" />
                <stop offset="100%" stopColor="#A8DEEC" />
              </linearGradient>
            </defs>
            <circle cx="200" cy="200" r="155" fill="none" stroke="url(#ringGrad)" strokeWidth="32" strokeLinecap="round" strokeDasharray="14 22" />
          </svg>

          {/* Cloud-shaped photo with real kids cutout */}
          <div style={{ position: 'absolute', top: '8%', left: '8%', right: '8%', bottom: '8%' }}>
            <div className="cloud-image" style={{ width: '100%', height: '100%', background: 'linear-gradient(135deg, #FFC58A 0%, #FF8A3D 100%)', boxShadow: 'var(--shadow-lg)', position: 'relative', overflow: 'hidden' }}>
              <svg viewBox="0 0 400 420" preserveAspectRatio="xMidYMax slice" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
                <defs>
                  <radialGradient id="sun2" cx="0.7" cy="0.2" r="0.6">
                    <stop offset="0%" stopColor="#FFEEBB" stopOpacity="0.9" />
                    <stop offset="100%" stopColor="#FFEEBB" stopOpacity="0" />
                  </radialGradient>
                </defs>
                <rect width="400" height="420" fill="url(#sun2)" />
                <g fill="#fff" opacity="0.55">
                  <circle cx="60" cy="50" r="3" />
                  <circle cx="120" cy="30" r="2" />
                  <circle cx="240" cy="160" r="3" />
                  <circle cx="40" cy="180" r="2.5" />
                  <circle cx="320" cy="60" r="2.5" />
                </g>
              </svg>
              <img src="kids-original.png" alt="Mahir Dhuha kids" style={{ position: 'absolute', bottom: 0, left: '50%', transform: 'translateX(-50%)', width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center bottom' }} />
            </div>
          </div>

          {/* Floating badges */}
          <div className="float" style={{ position: 'absolute', top: '6%', right: '-4%', background: '#fff', padding: '12px 18px', borderRadius: 20, boxShadow: 'var(--shadow-md)', display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 36, height: 36, borderRadius: 12, background: 'var(--mint)', display: 'grid', placeItems: 'center', fontSize: 20 }}>📚</div>
            <div>
              <div style={{ fontSize: 11, color: 'var(--charcoal-soft)', fontWeight: 600 }}>STUDENTS</div>
              <div style={{ fontSize: 18, fontWeight: 700, fontFamily: 'Fredoka' }}><Counter to={1500} suffix="+" /></div>
            </div>
          </div>
          <div className="float" style={{ animationDelay: '1s', position: 'absolute', bottom: '12%', left: '-6%', background: '#fff', padding: '12px 18px', borderRadius: 20, boxShadow: 'var(--shadow-md)', display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 36, height: 36, borderRadius: 12, background: 'var(--sky)', display: 'grid', placeItems: 'center', fontSize: 20 }}>📍</div>
            <div>
              <div style={{ fontSize: 11, color: 'var(--charcoal-soft)', fontWeight: 600 }}>BRANCHES</div>
              <div style={{ fontSize: 18, fontWeight: 700, fontFamily: 'Fredoka' }}>3 in Selangor</div>
            </div>
          </div>

          <Kite style={{ top: '-2%', left: '-6%', animation: 'wiggle 6s ease-in-out infinite' }} />
          <Planet style={{ bottom: '-4%', right: '0', animation: 'float 6s ease-in-out infinite' }} />
        </div>
      </div>

      {/* Cloud bottom transition like the reference */}
      <CloudDivider />
    </section>);
}

function Trust({ icon, label }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <span style={{ fontSize: 22 }}>{icon}</span>
      <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--charcoal)' }}>{label}</span>
    </div>);

}

function KidsIllustration() {
  // SVG kids illustration — two children silhouettes inspired by hijabi girl + boy
  return (
    <svg viewBox="0 0 400 420" preserveAspectRatio="xMidYMax slice" style={{ width: '100%', height: '100%', display: 'block' }}>
      <defs>
        <linearGradient id="bgg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#FFC58A" />
          <stop offset="100%" stopColor="#FF8A3D" />
        </linearGradient>
        <radialGradient id="sun" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0%" stopColor="#FFEEBB" />
          <stop offset="100%" stopColor="#FFEEBB" stopOpacity="0" />
        </radialGradient>
      </defs>
      <rect width="400" height="420" fill="url(#bgg)" />
      <circle cx="320" cy="80" r="100" fill="url(#sun)" />
      <circle cx="320" cy="80" r="34" fill="#FFE2A0" opacity="0.9" />

      {/* simple sparkle shapes */}
      <g fill="#fff" opacity="0.6">
        <circle cx="80" cy="60" r="3" />
        <circle cx="140" cy="40" r="2" />
        <circle cx="260" cy="180" r="3" />
        <circle cx="60" cy="200" r="2.5" />
      </g>

      {/* Girl with hijab (left) */}
      <g transform="translate(60 130)">
        {/* hijab back */}
        <path d="M0 90 Q -10 30 60 10 Q 130 0 145 70 Q 150 130 130 220 L 0 220 Z" fill="#5B4B8A" />
        {/* face */}
        <ellipse cx="72" cy="92" rx="42" ry="50" fill="#FFD9B0" />
        {/* hijab front edge */}
        <path d="M30 80 Q 35 35 75 30 Q 120 30 125 85 Q 122 100 105 100 Q 90 80 75 80 Q 55 80 40 100 Q 28 100 30 80 Z" fill="#7A66B8" />
        {/* eyes */}
        <ellipse cx="56" cy="100" rx="4" ry="6" fill="#2A2A2A" />
        <ellipse cx="92" cy="100" rx="4" ry="6" fill="#2A2A2A" />
        <circle cx="57" cy="98" r="1.4" fill="#fff" />
        <circle cx="93" cy="98" r="1.4" fill="#fff" />
        {/* cheeks */}
        <circle cx="48" cy="115" r="6" fill="#FFB8B8" opacity="0.7" />
        <circle cx="100" cy="115" r="6" fill="#FFB8B8" opacity="0.7" />
        {/* smile */}
        <path d="M62 122 Q 74 132 86 122" stroke="#2A2A2A" strokeWidth="3" fill="none" strokeLinecap="round" />
        {/* body */}
        <path d="M10 220 Q 70 195 140 220 L 145 290 L 5 290 Z" fill="#fff" />
        <path d="M70 200 L 70 290" stroke="#FF6A1A" strokeWidth="2" opacity="0.4" />
      </g>

      {/* Boy (right) */}
      <g transform="translate(190 110)">
        {/* hair */}
        <path d="M30 70 Q 25 25 80 18 Q 140 25 145 75 Q 145 90 130 90 L 40 90 Q 30 90 30 70 Z" fill="#2A2A2A" />
        {/* face */}
        <ellipse cx="86" cy="100" rx="48" ry="56" fill="#FFD9B0" />
        {/* fringe */}
        <path d="M40 80 Q 50 60 80 60 Q 110 55 130 78 Q 130 92 110 88 Q 100 78 88 80 Q 70 80 60 90 Q 45 92 40 80 Z" fill="#2A2A2A" />
        {/* ears */}
        <ellipse cx="40" cy="105" rx="6" ry="9" fill="#FFD9B0" />
        <ellipse cx="132" cy="105" rx="6" ry="9" fill="#FFD9B0" />
        {/* eyes */}
        <ellipse cx="68" cy="108" rx="4.5" ry="6.5" fill="#2A2A2A" />
        <ellipse cx="106" cy="108" rx="4.5" ry="6.5" fill="#2A2A2A" />
        <circle cx="69.5" cy="106" r="1.6" fill="#fff" />
        <circle cx="107.5" cy="106" r="1.6" fill="#fff" />
        {/* cheeks */}
        <circle cx="56" cy="125" r="7" fill="#FFB8B8" opacity="0.7" />
        <circle cx="118" cy="125" r="7" fill="#FFB8B8" opacity="0.7" />
        {/* smile (big) */}
        <path d="M68 132 Q 86 152 106 132" stroke="#2A2A2A" strokeWidth="3.5" fill="none" strokeLinecap="round" />
        <path d="M70 134 Q 86 148 104 134 L 104 138 Q 86 150 70 138 Z" fill="#fff" />
        {/* polo shirt */}
        <path d="M10 230 Q 86 200 165 230 L 175 320 L 0 320 Z" fill="#FF6A1A" />
        <path d="M70 215 L 86 230 L 102 215 L 100 240 L 72 240 Z" fill="#fff" />
        {/* collar accent */}
        <path d="M0 230 L 15 245 L 25 235" stroke="#C8EB6A" strokeWidth="6" fill="none" strokeLinecap="round" />
        <path d="M175 230 L 160 245 L 150 235" stroke="#C8EB6A" strokeWidth="6" fill="none" strokeLinecap="round" />
        {/* arm raised pointing */}
        <path d="M150 220 Q 200 160 195 100 Q 200 85 215 88 Q 225 92 222 110 Q 218 175 175 235 Z" fill="#FFD9B0" />
        {/* finger */}
        <circle cx="215" cy="92" r="8" fill="#FFD9B0" />
      </g>

      {/* foreground squiggles */}
      <path d="M30 380 Q 100 350 200 380 T 380 380" stroke="#fff" strokeWidth="3" fill="none" strokeDasharray="2 8" opacity="0.7" />
    </svg>);

}

function CloudDivider() {
  return (
    <div style={{ position: 'relative', height: 100, marginTop: -40, zIndex: 3 }}>
      <svg viewBox="0 0 1440 100" preserveAspectRatio="none" style={{ width: '100%', height: '100%', display: 'block' }}>
        <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>);

}

/* Passionate team / About teaser */
function TeamTeaser() {
  return (
    <section style={{ padding: '80px 0', position: 'relative' }}>
      <Cloud size={70} style={{ top: '6%', left: '4%' }} />
      <span className="dot" style={{ width: 14, height: 14, background: 'var(--mint)', top: '12%', right: '8%' }} />
      <ScribbleArrow style={{ top: '60%', right: '10%', transform: 'rotate(160deg)' }} color="var(--rose)" />

      <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
        <div style={{ position: 'relative' }}>
          <span className="dot" style={{ width: 28, height: 28, background: 'var(--rose)', top: '-12px', left: '-12px' }} />
          <span className="dot" style={{ width: 16, height: 16, background: 'var(--mint)', bottom: '-8px', right: '20%' }} />
          <div className="cloud-image" style={{ background: '#FFE7C8', height: 380, position: 'relative' }}>
            {/* placeholder of pencils/students collage */}
            <svg viewBox="0 0 400 380" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%' }}>
              <defs>
                <linearGradient id="t1" x1="0" y1="0" x2="1" y2="1">
                  <stop offset="0%" stopColor="#FFD9B8" />
                  <stop offset="100%" stopColor="#FFA63D" />
                </linearGradient>
              </defs>
              <rect width="400" height="380" fill="url(#t1)" />
              {/* pencils standing in jar */}
              <rect x="120" y="220" width="160" height="120" fill="#7A4F2F" rx="10" />
              <rect x="130" y="230" width="140" height="20" fill="rgba(255,255,255,0.2)" rx="4" />
              {[...Array(10)].map((_, i) => {
                const colors = ['#FF6A1A', '#FFD84D', '#C8EB6A', '#A8DEEC', '#FFB8B8', '#C9B8FF', '#FF6A1A', '#FFD84D', '#C8EB6A', '#A8DEEC'];
                return (
                  <g key={i} transform={`translate(${130 + i * 14} ${100 + i % 3 * 4})`}>
                    <rect x="0" y="0" width="10" height="120" fill={colors[i]} />
                    <polygon points="0,0 5,-12 10,0" fill="#FFE5B8" />
                    <polygon points="3,-7 5,-12 7,-7" fill="#2A2A2A" />
                  </g>);

              })}
            </svg>
          </div>
        </div>

        <div>
          <span className="section-eyebrow" style={{ color: "rgb(242, 242, 242)" }}><span className="dot-marker" /> Our Passionate Team</span>
          <h2 className="section-title" style={{ color: "rgb(255, 253, 253)" }}>Trained, caring, <span className="accent" style={{ color: "rgb(12, 174, 0)" }}>deeply loving</span></h2>
          <p className="section-lead" style={{ marginBottom: 20, color: "rgb(255, 251, 251)" }}>
            Our teachers don't just teach — they nurture. Every educator at Mahir Dhuha is trained in early childhood Islamic pedagogy and English language instruction, balancing academic, social and emotional growth.
          </p>
          <p className="section-lead" style={{ marginBottom: 28, color: "rgb(255, 250, 250)" }}>
            From Quran reading to art, science experiments to outdoor play, your child is greeted each morning with a doa, a smile, and a hug. Anak kita, anak kita semua.
          </p>
          <a href="about.html" className="btn btn-primary">Meet the team →</a>
        </div>
      </div>
    </section>);

}

/* Popular Classes / Programmes preview */
function ProgrammesPreview() {
  const items = [
  { age: '2 – 3 YEARS', name: 'Playschool', color: 'sky', emoji: '🧸', desc: 'A gentle first step into learning with songs, stories & sensory play.' },
  { age: '4 YEARS', name: 'Nursery', color: 'mint', emoji: '🎨', desc: 'Phonics foundations, fine motor skills, and Islamic adab through play.' },
  { age: '5 YEARS', name: 'Reception', color: 'yellow', emoji: '📖', desc: 'Reading fluency, early Maths, Quran tahfiz, and confident communication.' },
  { age: '6 YEARS', name: 'Year One', color: 'rose', emoji: '🎓', desc: 'School-ready in English & BM, with a strong Islamic and academic foundation.' }];

  return (
    <section style={{ padding: '60px 0 100px', position: 'relative', background: '#FFF8EE' }}>
      <Kite style={{ top: '20%', left: '2%', width: 60 }} />
      <span className="dot" style={{ width: 18, height: 18, background: 'var(--lilac)', top: '18%', right: '6%' }} />

      <div className="container" style={{ textAlign: 'center', marginBottom: 50 }}>
        <span className="section-eyebrow"><span className="dot-marker" /> Programmes</span>
        <h2 className="section-title">Our <span className="accent">amazing</span> classes</h2>
        <p className="section-lead" style={{ margin: '0 auto' }}>From toddler to school-ready, a programme for every stage of your child's journey.

        </p>
      </div>

      <div className="container" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 24 }}>
        {items.map((item, i) =>
        <a href={`programmes.html#${item.name.toLowerCase()}`} key={item.name} className="card pop-in" style={{ textAlign: 'center', padding: 24, animationDelay: `${i * 0.08}s`, textDecoration: 'none' }}>
            <div className="cloud-image-2" style={{
            height: 140,
            background: `linear-gradient(135deg, var(--${item.color === 'yellow' ? 'orange-warm' : item.color}), var(--${item.color === 'yellow' ? 'yellow' : item.color + '-soft'}))`,
            display: 'grid', placeItems: 'center', fontSize: 56,
            marginBottom: 18
          }}>{item.emoji}</div>
            <Pill color={item.color}>{item.age}</Pill>
            <h3 style={{ fontSize: 22, marginTop: 12, marginBottom: 8 }}>{item.name}</h3>
            <p style={{ fontSize: 14 }}>{item.desc}</p>
          </a>
        )}
      </div>
    </section>);

}

/* Why Mahir Dhuha — 4 step grid */
function WhyMahirDhuha() {
  const steps = [
  { n: '01', title: 'Islamic from the heart', desc: 'Quran, doa, akhlak woven into every day. A real love for Allah s.w.t.', color: 'sky' },
  { n: '02', title: 'Full English syllabus', desc: 'Internationally-aligned curriculum delivered fully in English by trained teachers.', color: 'mint' },
  { n: '03', title: 'Play-based learning', desc: 'Hands-on, themed, joyful learning. Children look forward to coming every day.', color: 'rose' },
  { n: '04', title: 'Tiny classes', desc: 'Low ratios so every child is seen, heard and gently guided.', color: 'yellow' }];

  return (
    <section style={{ padding: '100px 0', position: 'relative', overflow: 'hidden', background: 'var(--sky-soft)' }}>
      <Planet style={{ top: '10%', right: '4%', opacity: 0.6 }} color="var(--mint)" />
      <Pencil style={{ bottom: '10%', left: '6%' }} />

      <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
        <div>
          <span className="section-eyebrow"><span className="dot-marker" /> Why parents choose us</span>
          <h2 className="section-title">We're <span className="accent">redefining</span> Islamic early-years education</h2>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18, marginTop: 32 }}>
            {steps.map((s, i) =>
            <div key={i} className="card pop-in" style={{ animationDelay: `${i * 0.1}s`, padding: 22 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
                  <div style={{ width: 44, height: 44, borderRadius: 14, background: `var(--${s.color}-soft)`, color: `var(--${s.color === 'yellow' ? 'orange' : s.color === 'sky' ? 'sky' : s.color})`, display: 'grid', placeItems: 'center', fontFamily: 'Fredoka', fontWeight: 700, fontSize: 18 }}>{s.n}</div>
                </div>
                <h4 style={{ fontSize: 17, marginBottom: 6 }}>{s.title}</h4>
                <p style={{ fontSize: 14 }}>{s.desc}</p>
              </div>
            )}
          </div>
        </div>

        <div style={{ position: 'relative' }}>
          <span style={{ position: 'absolute', top: -20, left: -20, width: 60, height: 60, borderRadius: '50%', background: 'var(--yellow)', zIndex: -1 }} />
          <span style={{ position: 'absolute', bottom: -20, right: -20, width: 80, height: 80, borderRadius: '50%', background: 'var(--mint-soft)', zIndex: -1 }} />
          <div className="cloud-image" style={{ height: 480 }}>
            <svg viewBox="0 0 400 480" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%' }}>
              <defs>
                <linearGradient id="cls" x1="0" y1="0" x2="1" y2="1">
                  <stop offset="0%" stopColor="#A8DEEC" />
                  <stop offset="100%" stopColor="#7AC8DC" />
                </linearGradient>
              </defs>
              <rect width="400" height="480" fill="url(#cls)" />
              {/* classroom: simple desk, kids reading */}
              <rect x="50" y="280" width="300" height="20" fill="#7A4F2F" />
              <rect x="60" y="300" width="20" height="60" fill="#9A6F4F" />
              <rect x="320" y="300" width="20" height="60" fill="#9A6F4F" />
              {/* book */}
              <g transform="translate(140 230)">
                <path d="M0 50 L 60 30 L 60 80 L 0 100 Z" fill="#fff" />
                <path d="M120 50 L 60 30 L 60 80 L 120 100 Z" fill="#fff" />
                <line x1="60" y1="30" x2="60" y2="80" stroke="#FF6A1A" strokeWidth="2" />
                <line x1="10" y1="55" x2="50" y2="40" stroke="#ddd" strokeWidth="1.5" />
                <line x1="10" y1="65" x2="50" y2="50" stroke="#ddd" strokeWidth="1.5" />
                <line x1="70" y1="40" x2="110" y2="55" stroke="#ddd" strokeWidth="1.5" />
                <line x1="70" y1="50" x2="110" y2="65" stroke="#ddd" strokeWidth="1.5" />
              </g>
              {/* two heads */}
              <g transform="translate(110 180)">
                <circle cx="20" cy="20" r="22" fill="#5B4B8A" />
                <circle cx="20" cy="22" r="16" fill="#FFD9B0" />
                <ellipse cx="14" cy="22" rx="2" ry="3" fill="#2A2A2A" />
                <ellipse cx="26" cy="22" rx="2" ry="3" fill="#2A2A2A" />
                <path d="M14 30 Q 20 34 26 30" stroke="#2A2A2A" strokeWidth="1.5" fill="none" />
              </g>
              <g transform="translate(260 175)">
                <circle cx="22" cy="22" r="24" fill="#2A2A2A" />
                <circle cx="22" cy="26" r="18" fill="#FFD9B0" />
                <path d="M4 22 Q 22 5 40 22" fill="#2A2A2A" />
                <ellipse cx="16" cy="26" rx="2" ry="3" fill="#2A2A2A" />
                <ellipse cx="28" cy="26" rx="2" ry="3" fill="#2A2A2A" />
                <path d="M16 34 Q 22 38 28 34" stroke="#2A2A2A" strokeWidth="1.5" fill="none" />
              </g>
              {/* sun */}
              <circle cx="340" cy="80" r="40" fill="#FFD84D" />
              <g stroke="#FFD84D" strokeWidth="3" strokeLinecap="round">
                <line x1="340" y1="20" x2="340" y2="35" />
                <line x1="280" y1="80" x2="295" y2="80" />
                <line x1="295" y1="35" x2="305" y2="45" />
                <line x1="385" y1="35" x2="375" y2="45" />
              </g>
              {/* cloud */}
              <ellipse cx="80" cy="80" rx="40" ry="20" fill="#fff" opacity="0.9" />
              <ellipse cx="120" cy="70" rx="30" ry="18" fill="#fff" opacity="0.9" />
            </svg>
          </div>
        </div>
      </div>
    </section>);

}

/* Animated counter strip */
function StatsStrip() {
  const stats = [
  { n: 12, suffix: '+', label: 'Years nurturing', color: 'orange' },
  { n: 1500, suffix: '+', label: 'Happy graduates', color: 'mint' },
  { n: 3, suffix: '', label: 'Branches in Selangor', color: 'sky' },
  { n: 5, suffix: '★', label: 'Parent rating', color: 'yellow' }];

  return (
    <section style={{ padding: '60px 0', position: 'relative' }}>
      <div className="container">
        <div style={{ background: 'var(--charcoal)', borderRadius: 36, padding: '60px 40px', position: 'relative', overflow: 'hidden' }}>
          <div aria-hidden style={{ position: 'absolute', top: -40, right: -40, width: 200, height: 200, borderRadius: '50%', background: 'rgba(255, 106, 26, 0.18)' }} />
          <div aria-hidden style={{ position: 'absolute', bottom: -60, left: -30, width: 180, height: 180, borderRadius: '50%', background: 'rgba(168, 222, 236, 0.10)' }} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 32, position: 'relative' }}>
            {stats.map((s, i) =>
            <div key={i} style={{ textAlign: 'center', color: '#fff' }}>
                <div style={{ fontFamily: 'Fredoka', fontSize: 60, fontWeight: 600, color: `var(--${s.color === 'orange' ? 'orange-warm' : s.color === 'yellow' ? 'yellow' : s.color === 'sky' ? 'sky' : 'mint'})`, lineHeight: 1 }}>
                  <Counter to={s.n} suffix={s.suffix} />
                </div>
                <div style={{ fontSize: 14, marginTop: 8, color: 'rgba(255,255,255,0.7)', fontWeight: 600, letterSpacing: '0.04em' }}>{s.label}</div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* Testimonial / parents */
function Testimonials() {
  const quotes = [
  { name: 'Puan Nadia, Bukit Jelutong', child: 'Adam, 5 yo', quote: 'Adam used to cling to me every drop-off. Now he runs in. The teachers know him completely — his fears, his loves, his quirks.', color: 'sky' },
  { name: 'Encik Faisal, Cyberjaya', child: 'Hana, 4 yo', quote: 'Alhamdulillah, Hana came home reciting her doa for the first time. The Islamic foundation is real, not a tagline.', color: 'mint' },
  { name: 'Puan Sarah, Kota Damansara', child: 'Yusuf, 6 yo', quote: 'The English programme is genuinely strong. Yusuf is school-ready and reads chapter books for fun.', color: 'rose' }];

  return (
    <section style={{ padding: '100px 0', position: 'relative', background: 'linear-gradient(180deg, #FFF8EE 0%, #FFF1DC 100%)' }}>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 50 }}>
          <span className="section-eyebrow"><span className="dot-marker" /> Parents say</span>
          <h2 className="section-title">Loved by <span className="accent">families</span> like yours</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24 }}>
          {quotes.map((q, i) =>
          <div key={i} className="card pop-in" style={{ animationDelay: `${i * 0.1}s`, padding: 30, position: 'relative' }}>
              <div style={{ fontFamily: 'Fredoka', fontSize: 60, color: `var(--${q.color})`, lineHeight: 0.6, marginBottom: 8 }}>"</div>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--charcoal)', marginBottom: 22 }}>{q.quote}</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 42, height: 42, borderRadius: '50%', background: `var(--${q.color})`, display: 'grid', placeItems: 'center', color: '#fff', fontWeight: 700, fontFamily: 'Fredoka' }}>{q.name[6]}</div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 700 }}>{q.name}</div>
                  <div style={{ fontSize: 12, color: 'var(--charcoal-soft)' }}>{q.child}</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* Final CTA */
function CTASection({ onEnroll }) {
  return (
    <section style={{ padding: '80px 0', position: 'relative', zIndex: 5 }}>
      <div className="container">
        <div style={{ background: 'linear-gradient(135deg, var(--orange) 0%, var(--orange-warm) 100%)', borderRadius: 36, padding: '70px 50px', position: 'relative', overflow: 'hidden', color: '#fff', textAlign: 'center' }}>
          <Cloud size={120} style={{ top: '-30px', left: '5%', opacity: 0.25 }} />
          <Cloud size={90} style={{ bottom: '-30px', right: '8%', opacity: 0.25 }} />
          <Star size={40} color="#FFD84D" style={{ top: '15%', right: '12%' }} />
          <Star size={26} color="#FFE7C8" style={{ bottom: '20%', left: '8%' }} />

          <span className="handwritten" style={{ fontSize: 36, color: '#FFE7C8', display: 'block', transform: 'rotate(-3deg)' }}>Bismillah,</span>
          <h2 style={{ fontSize: 'clamp(36px, 5vw, 64px)', color: '#fff', marginTop: 8, marginBottom: 14, fontWeight: 600 }}>Let's begin their journey 🌱</h2>
          <p style={{ fontSize: 18, color: 'rgba(255,255,255,0.92)', maxWidth: 520, margin: '0 auto 28px' }}>Enrollment for 2026 is open. Limited seats per branch
 Secure yours today.
          </p>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
            <button className="btn btn-ghost" onClick={onEnroll} style={{ padding: '16px 28px', background: '#fff', color: 'var(--orange)' }}>
              Enroll for 2026 →
            </button>
            <a href={WA_LINK} className="btn btn-whatsapp" target="_blank" rel="noreferrer" style={{ padding: '16px 28px' }}>
              WhatsApp us
            </a>
          </div>
        </div>
      </div>
    </section>);

}

function LandingApp() {
  const [enrollOpen, setEnrollOpen] = useState(false);
  return (
    <div className="page" data-screen-label="Landing">
      <Header active="home" onEnroll={() => setEnrollOpen(true)} />
      <HeroSection onEnroll={() => setEnrollOpen(true)} />
      <TeamTeaser />
      <ProgrammesPreview />
      <WhyMahirDhuha />
      <StatsStrip />
      <Testimonials />
      <CTASection onEnroll={() => setEnrollOpen(true)} />
      <Footer />
      <FloatingCTAs />
      <EnrollmentModal open={enrollOpen} onClose={() => setEnrollOpen(false)} />
    </div>);

}

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