/* 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 ( Mahir Dhuha Islamic English Preschool ); } function Header({ active, onEnroll }) { const [open, setOpen] = useState(false); return (
); } function PlaygroundScene() { return ( ); } function Footer() { return ( ); } 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 (
{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 ; if (s.type === 'dot') return ; if (s.type === 'ring') return ; if (s.type === 'star') return ; return null; })}
); } function Cloud({ size = 100, style, color = '#fff' }) { // Simple cloud shape via SVG return ( ); } function Star({ size = 28, color = 'var(--yellow)', style }) { return ( ); } function ScribbleArrow({ style, color = 'var(--orange)' }) { return ( ); } function Kite({ style }) { // small drawn kite mascot return ( ); } function Pencil({ style }) { return ( ); } function Planet({ style, color = 'var(--lilac)' }) { return ( ); } /* 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 (
e.stopPropagation()}> {!submitted ? <>
Enrollment 2026

Let's get your little one started 🌟

Fill in a few details and our team will reach out within 24 hours, InsyaAllah.

handleChange('parent', e.target.value)} placeholder="Puan Aisha" />
handleChange('phone', e.target.value)} placeholder="012-345 6789" />
handleChange('child', e.target.value)} placeholder="Adam" />
handleChange('email', e.target.value)} placeholder="parent@example.com" />