/* Shared components: Header, Footer, EnrollmentModal, FloatingShapes, helpers */
const useState = React.useState;
const useEffect = React.useEffect;
const useRef = React.useRef;

const PHONE = "011 5771 7095";
const PHONE_TEL = "+601157717095";
const WA_LINK = "https://wa.me/601157717095";

const NAV_LINKS = [
{ href: "index.html", label: "Home", key: "home" },
{ href: "about.html", label: "About Us", key: "about" },
{ href: "programmes.html", label: "Programmes", key: "programmes" },
{ href: "gallery.html", label: "Gallery", key: "gallery" },
{ href: "fees.html", label: "Fees", key: "fees" },
{ href: "find-us.html", label: "Find Us", key: "find" }];


function Brand({ inverse }) {
  return (
    <a href="index.html" className="brand">
      <img src="logo.png" alt="Mahir Dhuha" className="brand-logo" />
      <span className="tag" style={inverse ? { color: 'rgba(255,255,255,0.78)' } : {}}>Islamic English Preschool</span>
    </a>);

}

function Header({ active, onEnroll }) {
  const [open, setOpen] = useState(false);
  return (
    <header className="site-header">
      <div className="container">
        <Brand />
        <nav className={`nav ${open ? 'open' : ''}`}>
          {NAV_LINKS.map((l) =>
          <a key={l.key} href={l.href} className={active === l.key ? 'active' : ''}>{l.label}</a>
          )}
        </nav>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <button className="btn btn-primary header-cta" onClick={onEnroll}>
            <span>Enroll Now</span>
            <span aria-hidden>→</span>
          </button>
          <button className="menu-toggle" onClick={() => setOpen((o) => !o)} aria-label="Menu">
            {open ? '✕' : '☰'}
          </button>
        </div>
      </div>
    </header>);

}

function PlaygroundScene() {
  return (
    <svg className="playground-scene" viewBox="0 0 1600 360" preserveAspectRatio="xMidYMax slice" aria-hidden="true">
      <defs>
        <linearGradient id="pg-sky" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#BFE6FF" />
          <stop offset="60%" stopColor="#D8F1FF" />
          <stop offset="100%" stopColor="#F0FAFF" />
        </linearGradient>
        <linearGradient id="pg-grass" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#9FD56A" />
          <stop offset="100%" stopColor="#6FB347" />
        </linearGradient>
        <radialGradient id="pg-sun" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0%" stopColor="#FFF6C9" />
          <stop offset="60%" stopColor="#FFD25A" />
          <stop offset="100%" stopColor="#FFA63D" />
        </radialGradient>
        {/* Cloudy top edge — bumpy curve clipped to the svg viewbox */}
        <clipPath id="pg-cloud-clip">
          <path d="M0 60
                   Q 40 10, 90 30
                   T 180 35
                   Q 230 0, 290 28
                   T 380 30
                   Q 430 5, 500 32
                   T 600 28
                   Q 660 0, 730 30
                   T 830 32
                   Q 890 5, 960 30
                   T 1060 30
                   Q 1130 0, 1200 32
                   T 1300 30
                   Q 1360 5, 1430 32
                   T 1530 28
                   Q 1580 5, 1600 32
                   L 1600 360 L 0 360 Z" />















          
        </clipPath>
      </defs>

      {/* Sky with cloudy top edge */}
      <g clipPath="url(#pg-cloud-clip)">
        <rect width="1600" height="360" fill="url(#pg-sky)" />

      {/* Sun */}
      <g>
        <circle cx="1340" cy="90" r="62" fill="url(#pg-sun)" />
        {[...Array(10)].map((_, i) => {
            const a = i / 10 * Math.PI * 2;
            const x1 = 1340 + Math.cos(a) * 78;
            const y1 = 90 + Math.sin(a) * 78;
            const x2 = 1340 + Math.cos(a) * 100;
            const y2 = 90 + Math.sin(a) * 100;
            return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#FFD25A" strokeWidth="6" strokeLinecap="round" />;
          })}
      </g>

      {/* Rainbow */}
      <g opacity="0.85" transform="translate(1100, 200)">
        <path d="M0 100 A 180 180 0 0 1 360 100" fill="none" stroke="#FF7A66" strokeWidth="14" />
        <path d="M14 100 A 166 166 0 0 1 346 100" fill="none" stroke="#FFB36A" strokeWidth="14" />
        <path d="M28 100 A 152 152 0 0 1 332 100" fill="none" stroke="#FFE066" strokeWidth="14" />
        <path d="M42 100 A 138 138 0 0 1 318 100" fill="none" stroke="#9FD56A" strokeWidth="14" />
        <path d="M56 100 A 124 124 0 0 1 304 100" fill="none" stroke="#7DC9E2" strokeWidth="14" />
        <path d="M70 100 A 110 110 0 0 1 290 100" fill="none" stroke="#A99CE3" strokeWidth="14" />
      </g>

      {/* Distant clouds */}
      <g fill="#fff" opacity="0.85">
        <path d="M120 80 q-30 0 -30 -22 q0 -18 22 -20 q-2 -22 22 -22 q4 -14 20 -10 q10 -18 28 -8 q22 -4 24 18 q22 4 22 22 q0 22 -28 22 z" />
        <path d="M520 60 q-26 0 -26 -18 q0 -16 18 -18 q-2 -18 20 -18 q4 -12 18 -8 q10 -14 24 -6 q20 -2 20 16 q18 4 18 18 q0 18 -22 18 z" transform="scale(0.9)" />
        <path d="M880 90 q-26 0 -26 -18 q0 -16 18 -18 q-2 -18 20 -18 q4 -12 18 -8 q10 -14 24 -6 q20 -2 20 16 q18 4 18 18 q0 18 -22 18 z" />
      </g>

      {/* Birds */}
      <g fill="none" stroke="#FF6A1A" strokeWidth="3" strokeLinecap="round">
        <path d="M740 70 q10 -10 20 0 q10 -10 20 0" />
        <path d="M820 110 q8 -8 16 0 q8 -8 16 0" />
        <path d="M1000 60 q9 -9 18 0 q9 -9 18 0" />
      </g>

      {/* Distant hills */}
      <path d="M0 250 Q 200 200 400 240 T 800 250 T 1200 230 T 1600 250 L 1600 360 L 0 360 Z" fill="#7BC07A" opacity="0.55" />
      <path d="M0 280 Q 250 240 500 280 T 1000 280 T 1600 280 L 1600 360 L 0 360 Z" fill="#7BC07A" opacity="0.75" />

      {/* Ground */}
      <rect x="0" y="290" width="1600" height="70" fill="url(#pg-grass)" />
      {/* Grass blades */}
      <g stroke="#5BA236" strokeWidth="2.5" strokeLinecap="round">
        {[...Array(80)].map((_, i) => {
            const x = i * 20 + i % 3 * 4;
            return <line key={i} x1={x} y1={300 + i % 3 * 2} x2={x + 2} y2={290 + i % 3 * 2} />;
          })}
      </g>
      {/* Flowers */}
      {[140, 360, 540, 760, 940, 1180, 1420].map((x, i) =>
        <g key={i} transform={`translate(${x}, 305)`}>
          <line x1="0" y1="0" x2="0" y2="-14" stroke="#5BA236" strokeWidth="2.5" strokeLinecap="round" />
          <circle cx="0" cy="-16" r="4" fill={i % 2 === 0 ? "#FF7A66" : "#FFE066"} />
          <circle cx="-3" cy="-13" r="3" fill={i % 2 === 0 ? "#FFB36A" : "#FFD25A"} />
          <circle cx="3" cy="-13" r="3" fill={i % 2 === 0 ? "#FFB36A" : "#FFD25A"} />
          <circle cx="0" cy="-19" r="3" fill={i % 2 === 0 ? "#FFB36A" : "#FFD25A"} />
          <circle cx="0" cy="-16" r="2" fill="#fff" />
        </g>
        )}

      {/* Tree (left) */}
      <g transform="translate(80, 180)">
        <rect x="-8" y="40" width="16" height="80" fill="#8B5A3C" rx="3" />
        <circle cx="0" cy="30" r="48" fill="#6FB347" />
        <circle cx="-30" cy="40" r="32" fill="#7BC07A" />
        <circle cx="28" cy="42" r="34" fill="#7BC07A" />
        <circle cx="0" cy="60" r="36" fill="#5BA236" />
        {/* Apples */}
        <circle cx="-14" cy="22" r="4" fill="#FF7A66" />
        <circle cx="20" cy="40" r="4" fill="#FF7A66" />
        <circle cx="6" cy="58" r="4" fill="#FF7A66" />
      </g>

      {/* Slide */}
      <g transform="translate(280, 220)">
        {/* ladder */}
        <rect x="-6" y="-50" width="6" height="120" fill="#FFB36A" rx="2" />
        <rect x="50" y="-50" width="6" height="120" fill="#FFB36A" rx="2" />
        <line x1="-6" y1="-30" x2="56" y2="-30" stroke="#FFB36A" strokeWidth="4" />
        <line x1="-6" y1="0" x2="56" y2="0" stroke="#FFB36A" strokeWidth="4" />
        <line x1="-6" y1="30" x2="56" y2="30" stroke="#FFB36A" strokeWidth="4" />
        {/* slide ramp */}
        <path d="M0 -50 L 0 30 Q 0 60 30 70 L 100 70" fill="none" stroke="#FF6A1A" strokeWidth="14" strokeLinecap="round" />
        <path d="M0 -50 L 0 30 Q 0 60 30 70 L 100 70" fill="none" stroke="#FFB36A" strokeWidth="6" strokeLinecap="round" />
      </g>

      {/* Kid 1 — sliding (girl with hijab) */}
      <g transform="translate(360, 270)">
        {/* body */}
        <ellipse cx="0" cy="0" rx="14" ry="18" fill="#FFB36A" />
        {/* head + hijab */}
        <circle cx="0" cy="-22" r="14" fill="#F4C9A4" />
        <path d="M-15 -22 Q -16 -38 0 -38 Q 16 -38 15 -22 Q 14 -10 0 -10 Q -14 -10 -15 -22 Z" fill="#fff8e7" />
        <ellipse cx="-4" cy="-22" rx="1.5" ry="2" fill="#2A2A2A" />
        <ellipse cx="4" cy="-22" rx="1.5" ry="2" fill="#2A2A2A" />
        <path d="M-3 -16 Q 0 -13 3 -16" fill="none" stroke="#2A2A2A" strokeWidth="1.5" strokeLinecap="round" />
        {/* arms up */}
        <path d="M-12 -8 Q -22 -22 -18 -32" fill="none" stroke="#F4C9A4" strokeWidth="6" strokeLinecap="round" />
        <path d="M12 -8 Q 22 -22 18 -32" fill="none" stroke="#F4C9A4" strokeWidth="6" strokeLinecap="round" />
        {/* legs */}
        <path d="M-6 16 Q -8 26 -2 30" stroke="#2A4FB3" strokeWidth="6" fill="none" strokeLinecap="round" />
        <path d="M6 16 Q 8 26 2 30" stroke="#2A4FB3" strokeWidth="6" fill="none" strokeLinecap="round" />
      </g>

      {/* Swing */}
      <g transform="translate(620, 180)">
        {/* frame */}
        <line x1="-100" y1="120" x2="-30" y2="-10" stroke="#8B5A3C" strokeWidth="6" strokeLinecap="round" />
        <line x1="100" y1="120" x2="30" y2="-10" stroke="#8B5A3C" strokeWidth="6" strokeLinecap="round" />
        <line x1="-30" y1="-10" x2="30" y2="-10" stroke="#8B5A3C" strokeWidth="8" strokeLinecap="round" />
        {/* ropes */}
        <line x1="-15" y1="-8" x2="-12" y2="60" stroke="#5A3A22" strokeWidth="2" />
        <line x1="15" y1="-8" x2="12" y2="60" stroke="#5A3A22" strokeWidth="2" />
        {/* seat */}
        <rect x="-22" y="58" width="44" height="8" fill="#FF6A1A" rx="3" />
        {/* Kid 2 — boy sitting */}
        <g transform="translate(0, 40)">
          <circle cx="0" cy="-8" r="12" fill="#F4C9A4" />
          <path d="M-12 -10 Q -10 -22 0 -22 Q 10 -22 12 -10 Z" fill="#3A2A1F" />
          <ellipse cx="-4" cy="-8" rx="1.3" ry="1.8" fill="#2A2A2A" />
          <ellipse cx="4" cy="-8" rx="1.3" ry="1.8" fill="#2A2A2A" />
          <path d="M-3 -3 Q 0 0 3 -3" fill="none" stroke="#2A2A2A" strokeWidth="1.4" strokeLinecap="round" />
          <ellipse cx="0" cy="12" rx="14" ry="10" fill="#FF7A66" />
          <path d="M-12 12 Q -22 4 -20 -6" stroke="#F4C9A4" strokeWidth="5" fill="none" strokeLinecap="round" />
          <path d="M12 12 Q 22 4 20 -6" stroke="#F4C9A4" strokeWidth="5" fill="none" strokeLinecap="round" />
          <path d="M-6 22 L -4 36" stroke="#2A4FB3" strokeWidth="6" strokeLinecap="round" />
          <path d="M6 22 L 4 36" stroke="#2A4FB3" strokeWidth="6" strokeLinecap="round" />
        </g>
      </g>

      {/* See-saw */}
      <g transform="translate(900, 290)">
        <polygon points="-14,0 14,0 0,-22" fill="#8B5A3C" />
        <line x1="-100" y1="-30" x2="100" y2="-14" stroke="#FF6A1A" strokeWidth="9" strokeLinecap="round" />
        {/* Kid 3 — left side (girl pigtails) */}
        <g transform="translate(-90, -45)">
          <circle cx="0" cy="-10" r="11" fill="#F4C9A4" />
          <circle cx="-12" cy="-10" r="5" fill="#3A2A1F" />
          <circle cx="12" cy="-10" r="5" fill="#3A2A1F" />
          <path d="M-10 -14 Q -10 -22 0 -22 Q 10 -22 10 -14" fill="#3A2A1F" />
          <ellipse cx="-3" cy="-10" rx="1.2" ry="1.6" fill="#2A2A2A" />
          <ellipse cx="3" cy="-10" rx="1.2" ry="1.6" fill="#2A2A2A" />
          <path d="M-3 -5 Q 0 -2 3 -5" fill="none" stroke="#2A2A2A" strokeWidth="1.3" strokeLinecap="round" />
          <ellipse cx="0" cy="10" rx="13" ry="14" fill="#A99CE3" />
          <path d="M-6 22 L -8 34" stroke="#2A4FB3" strokeWidth="5" strokeLinecap="round" />
          <path d="M6 22 L 8 34" stroke="#2A4FB3" strokeWidth="5" strokeLinecap="round" />
        </g>
        {/* Kid 4 — right side (boy songkok) */}
        <g transform="translate(94, -25)">
          <circle cx="0" cy="-10" r="11" fill="#F4C9A4" />
          <rect x="-10" y="-22" width="20" height="10" fill="#1F2A4A" rx="2" />
          <ellipse cx="-3" cy="-10" rx="1.2" ry="1.6" fill="#2A2A2A" />
          <ellipse cx="3" cy="-10" rx="1.2" ry="1.6" fill="#2A2A2A" />
          <path d="M-3 -5 Q 0 -2 3 -5" fill="none" stroke="#2A2A2A" strokeWidth="1.3" strokeLinecap="round" />
          <ellipse cx="0" cy="10" rx="13" ry="14" fill="#7DC9E2" />
          <path d="M-6 22 L -8 34" stroke="#2A4FB3" strokeWidth="5" strokeLinecap="round" />
          <path d="M6 22 L 8 34" stroke="#2A4FB3" strokeWidth="5" strokeLinecap="round" />
        </g>
      </g>

      {/* Kite */}
      <g transform="translate(1180, 80)">
        <polygon points="0,-30 22,0 0,30 -22,0" fill="#FF7A66" />
        <line x1="0" y1="-30" x2="0" y2="30" stroke="#fff" strokeWidth="1.5" />
        <line x1="-22" y1="0" x2="22" y2="0" stroke="#fff" strokeWidth="1.5" />
        <path d="M0 30 Q 6 50 -2 60 Q 8 70 0 80 Q 6 92 -4 100" stroke="#FFB36A" strokeWidth="2" fill="none" strokeLinecap="round" />
        {/* string going down to a kid */}
        <path d="M0 -10 Q -100 80 -200 200" stroke="#fff" strokeWidth="1.5" fill="none" opacity="0.8" />
      </g>

      {/* Kid 5 — flying kite */}
      <g transform="translate(1010, 280)">
        <circle cx="0" cy="-12" r="11" fill="#F4C9A4" />
        <path d="M-11 -16 Q -8 -26 0 -26 Q 8 -26 11 -16" fill="#3A2A1F" />
        <ellipse cx="-3" cy="-12" rx="1.2" ry="1.6" fill="#2A2A2A" />
        <ellipse cx="3" cy="-12" rx="1.2" ry="1.6" fill="#2A2A2A" />
        <path d="M-3 -7 Q 0 -4 3 -7" fill="none" stroke="#2A2A2A" strokeWidth="1.3" strokeLinecap="round" />
        <ellipse cx="0" cy="6" rx="13" ry="13" fill="#FFE066" />
        {/* arm up holding string */}
        <path d="M-6 -2 Q -22 -20 -28 -28" stroke="#F4C9A4" strokeWidth="5" fill="none" strokeLinecap="round" />
        <path d="M6 -2 Q 14 4 12 14" stroke="#F4C9A4" strokeWidth="5" fill="none" strokeLinecap="round" />
        <path d="M-6 18 L -8 30" stroke="#2A4FB3" strokeWidth="5" strokeLinecap="round" />
        <path d="M6 18 L 8 30" stroke="#2A4FB3" strokeWidth="5" strokeLinecap="round" />
      </g>

      {/* Tree (right) */}
      <g transform="translate(1500, 200)">
        <rect x="-7" y="40" width="14" height="70" fill="#8B5A3C" rx="3" />
        <circle cx="0" cy="30" r="42" fill="#6FB347" />
        <circle cx="-26" cy="38" r="28" fill="#7BC07A" />
        <circle cx="24" cy="40" r="30" fill="#7BC07A" />
        <circle cx="0" cy="56" r="32" fill="#5BA236" />
      </g>

      {/* Butterflies */}
      <g transform="translate(450, 200)">
        <ellipse cx="-5" cy="0" rx="6" ry="8" fill="#A99CE3" opacity="0.9" />
        <ellipse cx="5" cy="0" rx="6" ry="8" fill="#A99CE3" opacity="0.9" />
        <line x1="0" y1="-6" x2="0" y2="6" stroke="#2A2A2A" strokeWidth="1.5" />
      </g>
      <g transform="translate(820, 230)">
        <ellipse cx="-4" cy="0" rx="5" ry="6" fill="#FFE066" />
        <ellipse cx="4" cy="0" rx="5" ry="6" fill="#FFE066" />
        <line x1="0" y1="-5" x2="0" y2="5" stroke="#2A2A2A" strokeWidth="1.2" />
      </g>
      </g>
    </svg>);
}

function Footer() {
  return (
    <footer className="site-footer">
      <div className="playground-scene-wrap">
        <PlaygroundScene />
      </div>
      <div className="footer-panel">
        <div className="container">
        <div className="footer-grid">
          <div>
            <Brand inverse />
            <p style={{ marginTop: 16, maxWidth: 320 }}>An Islamic English preschool nurturing little hearts to grow with faith, knowledge & love. Three branches across Klang Valley.

Established 2014
</p>
            <div className="socials" style={{ marginTop: 18 }}>
              <a className="social" href="https://www.facebook.com/MDBukitJelutong/" target="_blank" rel="noreferrer" aria-label="Facebook">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M22 12a10 10 0 10-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.5 2.9h-2.4v7A10 10 0 0022 12z" /></svg>
              </a>
              <a className="social" href="https://www.instagram.com/mahirdhuha.bj/" target="_blank" rel="noreferrer" aria-label="Instagram">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" /></svg>
              </a>
              <a className="social" href={`tel:${PHONE_TEL}`} aria-label="Call">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.9v3a2 2 0 01-2.2 2 19.8 19.8 0 01-8.6-3 19.5 19.5 0 01-6-6 19.8 19.8 0 01-3-8.6A2 2 0 014.1 2h3a2 2 0 012 1.7c.1.9.3 1.8.6 2.7a2 2 0 01-.5 2.1L8 9.6a16 16 0 006 6l1.1-1.1a2 2 0 012.1-.5c.9.3 1.8.5 2.7.6a2 2 0 011.7 2z" /></svg>
              </a>
            </div>
          </div>
          <div>
            <h4>Explore</h4>
            {NAV_LINKS.map((l) => <a key={l.key} href={l.href} style={{ display: 'block' }}>{l.label}</a>)}
          </div>
          <div>
            <h4>Branches</h4>
            <a href="find-us.html?b=bukit-jelutong" style={{ display: 'block' }}>Bukit Jelutong</a>
            <a href="find-us.html?b=kota-damansara" style={{ display: 'block' }}>Kota Damansara</a>
            <a href="find-us.html?b=cyberjaya" style={{ display: 'block' }}>Cyberjaya</a>
          </div>
          <div>
            <h4>Get in touch</h4>
            <p style={{ lineHeight: 1.9 }}>
              📞 {PHONE}<br />
              ✉ hello@mahirdhuha.my<br />
              🕘 Mon – Fri, 7am – 6.30pm
            </p>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Tadika Mahir Dhuha. Berdaftar dengan KPM.</span>
          <span>Built with ♥ for little learners</span>
        </div>
      </div>
      </div>
    </footer>);
}

function FloatingShapes({ variant = 'default' }) {
  // Decorative shapes layered behind hero / content. variant changes mix.
  const shapes = variant === 'minimal' ? [
  { type: 'cloud', size: 120, top: '8%', left: '4%', delay: 0 },
  { type: 'cloud', size: 80, top: '20%', right: '8%', delay: 1.5 }] :
  [
  { type: 'cloud', size: 120, top: '8%', left: '4%', delay: 0 },
  { type: 'cloud', size: 80, top: '20%', right: '8%', delay: 1.5 },
  { type: 'cloud', size: 100, top: '60%', left: '2%', delay: 0.8 },
  { type: 'dot', color: 'var(--rose)', size: 16, top: '14%', left: '52%' },
  { type: 'dot', color: 'var(--mint)', size: 12, top: '32%', left: '14%' },
  { type: 'dot', color: 'var(--orange-warm)', size: 18, top: '70%', right: '14%' },
  { type: 'ring', color: 'var(--orange-warm)', size: 80, top: '40%', right: '4%' },
  { type: 'star', color: 'var(--yellow)', size: 26, top: '50%', left: '40%' }];

  return (
    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden' }}>
      {shapes.map((s, i) => {
        const baseStyle = {
          top: s.top, left: s.left, right: s.right,
          animation: `float-slow ${6 + i}s ease-in-out infinite`,
          animationDelay: `${s.delay || 0}s`
        };
        if (s.type === 'cloud') return <Cloud key={i} size={s.size} style={baseStyle} />;
        if (s.type === 'dot') return <span key={i} className="dot" style={{ ...baseStyle, width: s.size, height: s.size, background: s.color }} />;
        if (s.type === 'ring') return <span key={i} className="ring" style={{ ...baseStyle, width: s.size, height: s.size, color: s.color, opacity: 0.5 }} />;
        if (s.type === 'star') return <Star key={i} style={baseStyle} size={s.size} color={s.color} />;
        return null;
      })}
    </div>);

}

function Cloud({ size = 100, style, color = '#fff' }) {
  // Simple cloud shape via SVG
  return (
    <svg viewBox="0 0 100 60" width={size} height={size * 0.6} style={{ position: 'absolute', filter: 'drop-shadow(0 6px 14px rgba(42,42,42,0.06))', ...style }}>
      <path d="M20 50 Q5 50 5 38 Q5 28 16 27 Q15 14 30 14 Q34 4 46 8 Q52 -1 64 7 Q78 5 80 20 Q95 22 95 36 Q95 50 80 50 Z" fill={color} />
    </svg>);

}

function Star({ size = 28, color = 'var(--yellow)', style }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} style={{ position: 'absolute', ...style }}>
      <path d="M12 2 L14.5 9 L22 9.5 L16 14 L18 22 L12 17.5 L6 22 L8 14 L2 9.5 L9.5 9 Z" fill={color} />
    </svg>);

}

function ScribbleArrow({ style, color = 'var(--orange)' }) {
  return (
    <svg viewBox="0 0 80 40" width="80" height="40" style={{ position: 'absolute', ...style }}>
      <path d="M4 28 Q 25 4 50 18 Q 65 26 72 14" stroke={color} strokeWidth="2.5" fill="none" strokeLinecap="round" strokeDasharray="2 6" />
      <path d="M68 8 L 72 14 L 66 18" stroke={color} strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}

function Kite({ style }) {
  // small drawn kite mascot
  return (
    <svg viewBox="0 0 100 140" width="80" height="112" style={{ position: 'absolute', ...style }}>
      <g transform="rotate(-15 50 40)">
        <path d="M50 5 L80 40 L50 75 L20 40 Z" fill="#FFB8B8" stroke="#2A2A2A" strokeWidth="2" />
        <path d="M50 5 L50 75 M20 40 L80 40" stroke="#2A2A2A" strokeWidth="1.5" />
        <path d="M50 75 Q 55 90 45 100 Q 55 115 40 130" stroke="#2A2A2A" strokeWidth="1.5" fill="none" />
        <circle cx="45" cy="100" r="3" fill="#FFD84D" />
        <circle cx="55" cy="115" r="3" fill="#C8EB6A" />
        <circle cx="40" cy="130" r="3" fill="#A8DEEC" />
      </g>
    </svg>);

}

function Pencil({ style }) {
  return (
    <svg viewBox="0 0 60 60" width="50" height="50" style={{ position: 'absolute', ...style }}>
      <g transform="rotate(35 30 30)">
        <rect x="22" y="6" width="16" height="36" fill="#FFD84D" stroke="#2A2A2A" strokeWidth="1.5" rx="2" />
        <rect x="22" y="6" width="16" height="6" fill="#FF6A1A" stroke="#2A2A2A" strokeWidth="1.5" />
        <polygon points="22,42 30,54 38,42" fill="#FFE5B8" stroke="#2A2A2A" strokeWidth="1.5" />
        <polygon points="26,48 30,54 34,48" fill="#2A2A2A" />
      </g>
    </svg>);

}

function Planet({ style, color = 'var(--lilac)' }) {
  return (
    <svg viewBox="0 0 100 60" width="90" height="54" style={{ position: 'absolute', ...style }}>
      <ellipse cx="50" cy="30" rx="45" ry="10" fill="none" stroke="#2A2A2A" strokeWidth="1.5" opacity="0.6" />
      <circle cx="50" cy="30" r="18" fill={color} stroke="#2A2A2A" strokeWidth="1.5" />
      <circle cx="44" cy="26" r="3" fill="#fff" opacity="0.6" />
    </svg>);

}

/* Enrollment modal */
function EnrollmentModal({ open, onClose }) {
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({ parent: '', child: '', age: '', branch: 'Bukit Jelutong', programme: 'Preschool', phone: '', email: '', notes: '' });
  useEffect(() => {
    if (open) setSubmitted(false);
    document.body.style.overflow = open ? 'hidden' : '';
    return () => {document.body.style.overflow = '';};
  }, [open]);
  if (!open) return null;
  const handleChange = (k, v) => setForm((f) => ({ ...f, [k]: v }));
  const handleSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Close">✕</button>
        {!submitted ?
        <>
            <div className="modal-header">
              <span className="section-eyebrow"><span className="dot-marker" /> Enrollment 2026</span>
              <h2>Let's get your little one started 🌟</h2>
              <p style={{ marginTop: 8 }}>Fill in a few details and our team will reach out within 24 hours, InsyaAllah.</p>
            </div>
            <form className="modal-body" onSubmit={handleSubmit}>
              <div className="form-row">
                <div className="field">
                  <label>Parent's name</label>
                  <input required value={form.parent} onChange={(e) => handleChange('parent', e.target.value)} placeholder="Puan Aisha" />
                </div>
                <div className="field">
                  <label>Phone (WhatsApp)</label>
                  <input required value={form.phone} onChange={(e) => handleChange('phone', e.target.value)} placeholder="012-345 6789" />
                </div>
              </div>
              <div className="form-row">
                <div className="field">
                  <label>Child's name</label>
                  <input required value={form.child} onChange={(e) => handleChange('child', e.target.value)} placeholder="Adam" />
                </div>
                <div className="field">
                  <label>Child's age</label>
                  <select value={form.age} onChange={(e) => handleChange('age', e.target.value)} required>
                    <option value="">Select age</option>
                    <option>2 years</option><option>3 years</option><option>4 years</option><option>5 years</option><option>6 years</option>
                  </select>
                </div>
              </div>
              <div className="form-row">
                <div className="field">
                  <label>Preferred branch</label>
                  <select value={form.branch} onChange={(e) => handleChange('branch', e.target.value)}>
                    <option>Bukit Jelutong</option>
                    <option>Kota Damansara</option>
                    <option>Cyberjaya</option>
                  </select>
                </div>
                <div className="field">
                  <label>Programme</label>
                  <select value={form.programme} onChange={(e) => handleChange('programme', e.target.value)}>
                    <option>Playschool (2-3 yo)</option>
                    <option>Preschool (4-6 yo)</option>
                    <option>Transit</option>
                  </select>
                </div>
              </div>
              <div className="field">
                <label>Email</label>
                <input type="email" value={form.email} onChange={(e) => handleChange('email', e.target.value)} placeholder="parent@example.com" />
              </div>
              <div className="field">
                <label>Anything we should know? <span style={{ color: 'var(--charcoal-soft)', fontWeight: 400 }}>(optional)</span></label>
                <textarea rows={3} value={form.notes} onChange={(e) => handleChange('notes', e.target.value)} placeholder="Allergies, special interests, sibling enrolled..." />
              </div>
              <button type="submit" className="btn btn-primary" style={{ width: '100%', justifyContent: 'center', padding: '16px', fontSize: 15, marginTop: 8 }}>
                Submit enrollment interest →
              </button>
              <p style={{ fontSize: 12, textAlign: 'center', marginTop: 14, color: 'var(--charcoal-soft)' }}>
                By submitting you agree to be contacted by our admissions team. No spam, janji.
              </p>
            </form>
          </> :

        <div className="modal-body" style={{ textAlign: 'center', padding: '60px 36px' }}>
            <div style={{ fontSize: 64, marginBottom: 16 }}>🌟</div>
            <h2>Terima kasih!</h2>
            <p style={{ marginTop: 12, marginBottom: 24 }}>
              We've received your interest for <b>{form.child || 'your little one'}</b> at <b>{form.branch}</b>. Our team will WhatsApp you within 24 hours.
            </p>
            <button className="btn btn-primary" onClick={onClose}>Close</button>
          </div>
        }
      </div>
    </div>);

}

/* Counter that animates when in view */
function Counter({ to, duration = 1600, suffix = '' }) {
  const [val, setVal] = useState(0);
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let raf;
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        const start = performance.now();
        const tick = (now) => {
          const t = Math.min(1, (now - start) / duration);
          const eased = 1 - Math.pow(1 - t, 3);
          setVal(Math.round(to * eased));
          if (t < 1) raf = requestAnimationFrame(tick);
        };
        raf = requestAnimationFrame(tick);
        observer.disconnect();
      }
    }, { threshold: 0.4 });
    observer.observe(el);
    return () => {observer.disconnect();cancelAnimationFrame(raf);};
  }, [to, duration]);
  return <span ref={ref}>{val.toLocaleString()}{suffix}</span>;
}

/* Hook for parallax scroll */
function useParallax(speed = 0.3) {
  const [y, setY] = useState(0);
  useEffect(() => {
    const handler = () => setY(window.scrollY * speed);
    window.addEventListener('scroll', handler, { passive: true });
    return () => window.removeEventListener('scroll', handler);
  }, [speed]);
  return y;
}

/* WhatsApp + Phone floating CTA */
function FloatingCTAs() {
  return (
    <div style={{ position: 'fixed', right: 20, bottom: 20, display: 'flex', flexDirection: 'column', gap: 12, zIndex: 40 }}>
      <a href={WA_LINK} className="btn btn-whatsapp" style={{ width: 56, height: 56, borderRadius: '50%', justifyContent: 'center', padding: 0, fontSize: 22 }} aria-label="WhatsApp" target="_blank" rel="noreferrer">
        <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor"><path d="M17.6 6.32A7.85 7.85 0 0012.05 4a7.94 7.94 0 00-6.88 11.9L4 20l4.22-1.11a7.93 7.93 0 003.83.98h.01c4.38 0 7.94-3.56 7.94-7.94 0-2.12-.83-4.11-2.4-5.61zM12.06 18.5h-.01a6.6 6.6 0 01-3.36-.92l-.24-.14-2.5.66.67-2.44-.16-.25a6.6 6.6 0 1112.24-3.49 6.59 6.59 0 01-6.64 6.58zm3.62-4.93c-.2-.1-1.18-.58-1.36-.65-.18-.07-.31-.1-.45.1s-.51.65-.63.79c-.12.13-.23.15-.43.05a5.4 5.4 0 01-1.6-.99 5.95 5.95 0 01-1.1-1.37c-.12-.2-.01-.31.09-.41.09-.09.2-.23.3-.35.1-.12.13-.2.2-.34.07-.13.03-.25-.02-.35-.05-.1-.45-1.08-.62-1.48-.16-.39-.33-.34-.45-.34l-.39-.01a.75.75 0 00-.54.25c-.18.2-.71.7-.71 1.7s.73 1.97.83 2.1c.1.14 1.43 2.18 3.46 3.06.48.21.86.33 1.16.43.49.16.93.13 1.28.08.39-.06 1.18-.48 1.35-.95.17-.46.17-.86.12-.94-.05-.08-.18-.13-.38-.23z" /></svg>
      </a>
      <a href={`tel:${PHONE_TEL}`} className="btn btn-primary" style={{ width: 56, height: 56, borderRadius: '50%', justifyContent: 'center', padding: 0 }} aria-label="Call">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.05-.24 11.36 11.36 0 003.58.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.45.57 3.58a1 1 0 01-.25 1.05l-2.2 2.16z" /></svg>
      </a>
    </div>);

}

/* Tag pill */
function Pill({ color, children, style }) {
  const palette = {
    sky: { bg: 'var(--sky)', fg: '#0a4858' },
    mint: { bg: 'var(--mint)', fg: '#3a4a14' },
    rose: { bg: 'var(--rose)', fg: '#7a2424' },
    orange: { bg: 'var(--orange)', fg: '#fff' },
    yellow: { bg: 'var(--yellow)', fg: '#5a4400' },
    lilac: { bg: 'var(--lilac)', fg: '#36246e' }
  }[color] || { bg: 'var(--orange-soft)', fg: 'var(--orange)' };
  return (
    <span style={{ display: 'inline-block', padding: '6px 18px', borderRadius: 999, background: palette.bg, color: palette.fg, fontSize: 12, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', ...style }}>{children}</span>);

}

/* Image placeholder cloud */
function ClueCloudPlaceholder({ label, color = 'var(--sky)', height = 280 }) {
  // SVG cloud-shaped placeholder with label
  return (
    <div style={{ position: 'relative', width: '100%', height }}>
      <svg viewBox="0 0 400 280" preserveAspectRatio="none" width="100%" height="100%" style={{ display: 'block' }}>
        <defs>
          <pattern id={`stripe-${label}`} patternUnits="userSpaceOnUse" width="14" height="14" patternTransform="rotate(45)">
            <rect width="14" height="14" fill={color} />
            <line x1="0" y1="0" x2="0" y2="14" stroke="rgba(255,255,255,0.35)" strokeWidth="6" />
          </pattern>
        </defs>
        <path d="M60 220 Q 10 220 12 170 Q 12 130 50 130 Q 40 70 110 80 Q 130 30 200 50 Q 240 10 300 50 Q 380 50 380 120 Q 400 160 360 200 Q 360 240 290 235 Q 240 260 180 240 Q 120 260 60 220 Z" fill={`url(#stripe-${label})`} />
      </svg>
      <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', fontFamily: 'monospace', fontSize: 13, color: 'var(--charcoal)', opacity: 0.65 }}>{label}</div>
    </div>);

}

/* Toast helper */
function useToast() {
  const [msg, setMsg] = useState(null);
  useEffect(() => {
    if (!msg) return;
    const t = setTimeout(() => setMsg(null), 2500);
    return () => clearTimeout(t);
  }, [msg]);
  return { msg, show: setMsg };
}

Object.assign(window, {
  Header, Footer, FloatingShapes, Cloud, Star, ScribbleArrow, Kite, Pencil, Planet,
  EnrollmentModal, FloatingCTAs, Brand, Counter, useParallax, Pill, ClueCloudPlaceholder, useToast,
  PHONE, PHONE_TEL, WA_LINK, NAV_LINKS
});