/* About Us page */

function AboutHero() {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', paddingTop: 60, paddingBottom: 0, background: 'linear-gradient(180deg, #FFE7C8 0%, #FFD9B8 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(--yellow)" style={{ top: '20%', right: '30%', animation: 'float 4s ease-in-out infinite' }} />
      <span className="dot" style={{ width: 18, height: 18, background: 'var(--rose)', top: '70%', left: '15%' }} />
      <span className="dot" style={{ width: 14, height: 14, background: 'var(--mint)', top: '40%', right: '8%' }} />

      <div className="container" style={{ position: 'relative', zIndex: 2, padding: '80px 32px 100px', textAlign: 'center' }}>
        <span className="section-eyebrow"><span className="dot-marker" /> Our story</span>
        <h1 style={{ fontSize: 'clamp(44px, 6vw, 80px)', fontWeight: 600, lineHeight: 1, letterSpacing: '-0.02em', maxWidth: 900, margin: '0 auto' }}>
          Building tomorrow's <span style={{ color: 'var(--orange)' }}>
leaders</span><br />
          one tiny smile at a time.
        </h1>
        <p className="section-lead" style={{ margin: '24px auto 0', textAlign: 'center' }}>
          We are a community of educators, parents and little learners — bound by a love for Allah, a love for learning, and a love for childhood itself.
        </p>
      </div>
      <CloudDivider />
    </section>);
}

function CloudDivider() {
  return (
    <div style={{ position: 'relative', height: 90, marginTop: -30, 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>);

}

function MissionVision() {
  return (
    <section style={{ padding: '60px 0 80px', position: 'relative' }}>
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 30 }}>
        <div className="card" style={{ padding: 40, background: 'linear-gradient(135deg, #FFE7C8 0%, #FFF8EE 100%)' }}>
          <div style={{ width: 60, height: 60, borderRadius: 20, background: 'var(--orange)', display: 'grid', placeItems: 'center', fontSize: 28, marginBottom: 18 }}>🎯</div>
          <h3 style={{ fontSize: 26, marginBottom: 12 }}>Our Mission</h3>
          <p style={{ fontSize: 16 }}>To nurture confident, curious children who are rooted in Islamic values and fluent in English whil preparing them for school, for life, and for akhirah.

          </p>
        </div>
        <div className="card" style={{ padding: 40, background: 'linear-gradient(135deg, var(--sky-soft) 0%, #fff 100%)' }}>
          <div style={{ width: 60, height: 60, borderRadius: 20, background: 'var(--sky)', display: 'grid', placeItems: 'center', fontSize: 28, marginBottom: 18 }}>🌱</div>
          <h3 style={{ fontSize: 26, marginBottom: 12 }}>Our Vision</h3>
          <p style={{ fontSize: 16 }}>
            A generation of Muslim children who lead with kindness, think with clarity, and serve their ummah with skill — Insya'Allah.
          </p>
        </div>
      </div>
    </section>);

}

function StorySection() {
  return (
    <section style={{ padding: '60px 0', position: 'relative', overflow: 'hidden' }}>
      <Pencil style={{ top: '8%', right: '6%' }} />
      <Planet style={{ bottom: '10%', left: '4%', opacity: 0.7 }} color="var(--rose)" />

      <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 80, alignItems: 'center' }}>
        <div style={{ position: 'relative' }}>
          <div className="cloud-image" style={{ height: 460, background: 'linear-gradient(135deg, #FFA63D, #FF6A1A)', position: 'relative' }}>
            <svg viewBox="0 0 400 460" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%' }}>
              <defs>
                <linearGradient id="story-bg" x1="0" y1="0" x2="1" y2="1">
                  <stop offset="0%" stopColor="#FFA63D" />
                  <stop offset="100%" stopColor="#FF6A1A" />
                </linearGradient>
              </defs>
              <rect width="400" height="460" fill="url(#story-bg)" />
              {/* abstract: school building with sun */}
              <circle cx="320" cy="100" r="50" fill="#FFD84D" opacity="0.9" />
              <rect x="80" y="220" width="240" height="200" fill="#fff" rx="8" />
              <polygon points="60,220 200,140 340,220" fill="#C8EB6A" />
              <rect x="180" y="290" width="40" height="130" fill="#FF6A1A" />
              <rect x="110" y="270" width="40" height="40" fill="#A8DEEC" />
              <rect x="250" y="270" width="40" height="40" fill="#A8DEEC" />
              <text x="200" y="200" fontFamily="Caveat" fontSize="32" fill="#fff" textAnchor="middle" fontWeight="700">Mahir Dhuha</text>
              <ellipse cx="60" cy="80" rx="40" ry="20" fill="#fff" opacity="0.85" />
              <ellipse cx="140" cy="60" rx="35" ry="18" fill="#fff" opacity="0.85" />
            </svg>
          </div>
          <span style={{ position: 'absolute', top: -20, right: -20, padding: '14px 22px', background: '#fff', borderRadius: 20, boxShadow: 'var(--shadow-md)', fontFamily: 'Caveat', fontSize: 22, color: 'var(--orange)', transform: 'rotate(6deg)' }}>Since 2014 ✨</span>
        </div>

        <div>
          <span className="section-eyebrow"><span className="dot-marker" /> Our journey</span>
          <h2 className="section-title">From a small <span className="accent">dhuha</span> circle to three branches</h2>
          <p className="section-lead" style={{ marginBottom: 18 }}>
            Mahir Dhuha began with a simple wish — that our children would learn the Quran with joy, speak English with confidence, and grow up knowing they are loved.
          </p>
          <p className="section-lead" style={{ marginBottom: 28 }}>
            What started as a small Islamic playgroup has grown — Alhamdulillah — into three thriving preschools across the Klang Valley. Every classroom still carries that founding intention: <i>"Belajar dengan gembira, kerana Allah."</i>
          </p>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <Stat icon="📅" value="2014" label="Founded" />
            <Stat icon="🏫" value="3 Branches" label="Klang Valley" />
            <Stat icon="🎓" value="500+" label="Graduates" />
            <Stat icon="⭐" value="5-Star" label="Parent rated" />
          </div>
        </div>
      </div>
    </section>);

}

function Stat({ icon, value, label }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 18px', background: '#fff', borderRadius: 18, boxShadow: 'var(--shadow-sm)' }}>
      <span style={{ fontSize: 28 }}>{icon}</span>
      <div>
        <div style={{ fontFamily: 'Fredoka', fontWeight: 600, fontSize: 18, color: 'var(--charcoal)' }}>{value}</div>
        <div style={{ fontSize: 12, color: 'var(--charcoal-soft)' }}>{label}</div>
      </div>
    </div>);

}

function Values() {
  const values = [
  { icon: '☪️', title: 'Iman first', desc: 'Every lesson begins and ends with the love of Allah. Quran, doa, and adab are woven through every day.', color: 'sky' },
  { icon: '🌍', title: 'Global English', desc: 'Children grow confident in English without losing their mother tongue or heritage.', color: 'mint' },
  { icon: '🤝', title: 'Family partnership', desc: 'Parents are co-teachers. We share progress, celebrate milestones and grow together.', color: 'rose' },
  { icon: '🎨', title: 'Whole-child play', desc: 'We protect childhood. Climbing, painting, singing, building — all are learning.', color: 'yellow' },
  { icon: '💚', title: 'Tiny ratios', desc: 'Small classes mean every child is truly known — strengths, struggles, dreams.', color: 'lilac' },
  { icon: '🏆', title: 'Tinggi cita-cita', desc: 'High expectations delivered with high warmth. We aim for the stars, gently.', color: 'orange' }];

  return (
    <section style={{ padding: '80px 0', 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" /> What we stand for</span>
          <h2 className="section-title">Six values, <span className="accent">every day</span></h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 20 }}>
          {values.map((v, i) =>
          <div key={i} className="card pop-in" style={{ animationDelay: `${i * 0.07}s`, padding: 28 }}>
              <div style={{ width: 56, height: 56, borderRadius: 18, background: `var(--${v.color}-soft, var(--${v.color}))`, display: 'grid', placeItems: 'center', fontSize: 28, marginBottom: 16 }}>{v.icon}</div>
              <h4 style={{ fontSize: 19, marginBottom: 8 }}>{v.title}</h4>
              <p style={{ fontSize: 15 }}>{v.desc}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function TeamSection() {
  const paragraphs = [
    "Founded in 2012, Mahir Dhuha International Islamic Preschool is an established and nurturing preschool in Malaysia with branches in Bukit Jelutong, Cyberjaya, and Kota Damansara. The preschool provides an affordable international Islamic education for children aged 4 to 6 years old, combining academic excellence with strong Islamic values in a positive and supportive learning environment.",
    "A key strength of Mahir Dhuha is its unique curriculum, which blends the UK Early Years Foundation Stage (EYFS) literacy approach with Islamic education. Students are exposed to reading, writing, Mahir Phonics, Mental Math, and Science, while also developing strong foundations in Mahir Iqra and Hafazan. This balanced approach helps children build confidence, creativity, discipline, and good character from an early age.",
    "The founder, Pn. Fatimah, was a teacher in Manchester, United Kingdom for 10 years. Her first-hand experience with the UK education system has contributed greatly to the quality and effectiveness of Mahir Dhuha’s syllabus. By combining international teaching methods with Islamic values, she has created a learning experience that is both modern and meaningful for young learners.",
    "Located in the vibrant community of Suria Jelutong, the Bukit Jelutong branch offers a safe, cheerful, and engaging environment where children can grow academically, socially, and spiritually. Today, Mahir Dhuha continues to be a trusted choice among parents seeking a holistic preschool education, with Intake 2026 now officially open."
  ];

  return (
    <section style={{ padding: '80px 0', position: 'relative' }}>
      <Kite style={{ top: '8%', right: '4%', width: 70 }} />
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 50 }}>
          <span className="section-eyebrow"><span className="dot-marker" /> Our founders</span>
          <h2 className="section-title">Meet the <span className="accent">founders</span></h2>
          <p className="section-lead" style={{ margin: '0 auto' }}>The hearts behind the classrooms,
the messengers behind the knowledge.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 48, alignItems: 'center' }} className="founders-grid">
          <div className="founders-photo" style={{ aspectRatio: '4 / 5', borderRadius: 32, background: 'linear-gradient(135deg, var(--sky-soft) 0%, var(--sky) 100%)', position: 'relative', overflow: 'hidden', boxShadow: 'var(--shadow-md)' }}>
            <img src="founders.jpg" alt="Founders of Tadika Mahir Dhuha" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
            <div style={{ position: 'absolute', top: 18, left: 18, padding: '6px 14px', background: '#fff', borderRadius: 999, fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', color: 'var(--charcoal)' }}>FOUNDERS</div>
          </div>
          <div style={{ display: 'grid', gap: 20 }}>
            {paragraphs.map((p, i) =>
              <p key={i} style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--charcoal-soft)' }}>{p}</p>
            )}
          </div>
        </div>
      </div>
    </section>);

}

function GallerySection() {
  const [lightbox, setLightbox] = useState(null);
  const items = [
  { id: 1, title: 'Morning circle & doa', color: 'sky', emoji: '🌅' },
  { id: 2, title: 'Quran reading', color: 'mint', emoji: '📖' },
  { id: 3, title: 'Art & craft', color: 'rose', emoji: '🎨' },
  { id: 4, title: 'Science discovery', color: 'yellow', emoji: '🔬' },
  { id: 5, title: 'Outdoor play', color: 'lilac', emoji: '🌳' },
  { id: 6, title: 'Hajj cilik', color: 'orange', emoji: '🕋' },
  { id: 7, title: 'Storytime', color: 'mint', emoji: '📚' },
  { id: 8, title: 'Sports day', color: 'sky', emoji: '⚽' }];

  return (
    <section style={{ padding: '80px 0', position: 'relative', background: '#fff' }}>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <span className="section-eyebrow"><span className="dot-marker" /> A peek inside</span>
          <h2 className="section-title">Daily life at <span className="accent">Mahir Dhuha</span></h2>
          <p className="section-lead" style={{ margin: '0 auto' }}>
            Tap any moment to see it bigger. Photos from <a href="https://www.facebook.com/MDBukitJelutong/photos" target="_blank" rel="noreferrer" style={{ color: 'var(--orange)', fontWeight: 700 }}>our Facebook gallery</a>.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 14 }}>
          {items.map((item, i) =>
          <button key={item.id} onClick={() => setLightbox(item)} style={{ aspectRatio: '1 / 1', borderRadius: 24, background: `linear-gradient(135deg, var(--${item.color}-soft, var(--${item.color})), var(--${item.color}))`, position: 'relative', overflow: 'hidden', cursor: 'pointer', padding: 0, transition: 'transform 0.2s' }}
          onMouseEnter={(e) => e.currentTarget.style.transform = 'scale(1.03)'}
          onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}>
              <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', fontSize: 64 }}>{item.emoji}</div>
              <div style={{ position: 'absolute', bottom: 12, left: 12, right: 12, padding: '8px 12px', background: 'rgba(255,255,255,0.9)', borderRadius: 12, fontSize: 13, fontWeight: 700, color: 'var(--charcoal)' }}>{item.title}</div>
            </button>
          )}
        </div>
      </div>

      {lightbox &&
      <div className="modal-backdrop" onClick={() => setLightbox(null)}>
          <div className="modal" style={{ maxWidth: 800, padding: 0 }} onClick={(e) => e.stopPropagation()}>
            <button className="modal-close" onClick={() => setLightbox(null)}>✕</button>
            <div style={{ aspectRatio: '4 / 3', background: `linear-gradient(135deg, var(--${lightbox.color}-soft, var(--${lightbox.color})), var(--${lightbox.color}))`, display: 'grid', placeItems: 'center', borderRadius: '32px 32px 0 0', fontSize: 160 }}>{lightbox.emoji}</div>
            <div style={{ padding: 28 }}>
              <h3 style={{ fontSize: 24 }}>{lightbox.title}</h3>
              <p style={{ marginTop: 8 }}>A glimpse of life at our preschools — one of many joyful moments. See more on our <a href="https://www.facebook.com/MDBukitJelutong/photos" target="_blank" rel="noreferrer" style={{ color: 'var(--orange)', fontWeight: 700 }}>Facebook page</a>.</p>
            </div>
          </div>
        </div>
      }
    </section>);

}

/* Our Journey — cartoon roadmap timeline */
function JourneySection() {
  const milestones = [
  { year: '2012', title: 'A dream takes root', desc: 'A small Islamic preschool opens its doors in Kota Damansara with four classroom, four teacher, and a big mission: nurture little hearts with faith and love.', emoji: '🌱', color: 'mint' },
  { year: '2013', title: 'First graduating class', desc: 'Our first cohort of little ones step proudly into Year 1 — confident readers, kind friends, and tiny huffaz in the making.', emoji: '🎓', color: 'sky' },
  { year: '2015', title: 'Mahir Dhuha Expands', desc: 'A second home for the MD family. Parents from Bukit Jelutong entrust MD as a key early education hub.', emoji: '🏫', color: 'rose' },
  { year: '2016', title: 'Hajj cilik & signature programmes', desc: 'Our Hajj cilik experience, market day, and theme projects become beloved traditions — hands-on Islamic learning that children remember for life.', emoji: '🕋', color: 'orange' },
  { year: '2020', title: 'Through the storm together', desc: 'Pandemic times. Online classes, home learning kits, and weekly check-ins keep our MD family connected and learning.', emoji: '💛', color: 'yellow' },
  { year: '2022', title: 'Cyberjaya branch joins', desc: 'Our third branch opens in Cyberjaya — bringing the MD warmth to families in the south of Klang Valley.', emoji: '🌟', color: 'lilac' },
  { year: '2022', title: '10 years of nurturing', desc: 'A decade of Mahir Dhuha. Over 1,000 graduates, three branches, and a teaching family that has grown stronger every year.', emoji: '🎉', color: 'mint' },
  { year: '2025', title: 'Playschool launches', desc: 'A brand-new programme for our youngest learners (20–35 months) — soft, secure, and full of play.', emoji: '🧸', color: 'sky' },
  { year: '2026', title: 'The journey continues', desc: 'Enrollment is open. New faces, new milestones, same heart — building life skills, guided by faith.', emoji: '🚀', color: 'orange' }];


  return (
    <section style={{ padding: '90px 0 100px', position: 'relative', overflow: 'hidden', background: 'linear-gradient(180deg, #FFF8EE 0%, #FFE7C8 100%)' }}>
      <Cloud size={110} style={{ top: '8%', left: '4%', animation: 'float-slow 9s ease-in-out infinite' }} />
      <Cloud size={90} style={{ top: '20%', right: '6%', animation: 'float-slow 11s ease-in-out infinite' }} />
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 60, position: 'relative', zIndex: 2 }}>
          <span className="section-eyebrow"><span className="dot-marker" /> 12 years and counting</span>
          <h2 className="section-title">Our <span className="accent">journey</span></h2>
          <p className="section-lead" style={{ margin: '0 auto' }}>
            Every step of the way, hand-in-hand with our MD families.
          </p>
        </div>

        <div className="journey-path">
          {/* Wavy SVG path connecting all the milestones */}
          <svg className="journey-svg" viewBox="0 0 1000 2400" preserveAspectRatio="none" aria-hidden="true">
            <defs>
              <pattern id="dashes" patternUnits="userSpaceOnUse" width="20" height="20" patternTransform="rotate(0)">
                <rect width="12" height="6" rx="3" fill="#FFA21C" />
              </pattern>
            </defs>
            <path d="M 200 60 Q 800 200, 200 400 Q -200 600, 800 800 Q 1200 1000, 200 1200 Q -200 1400, 800 1600 Q 1200 1800, 200 2000 Q -200 2200, 800 2340"
              fill="none" stroke="#FFA21C" strokeWidth="6" strokeDasharray="14 12" strokeLinecap="round" opacity="0.55" />
          </svg>

          {milestones.map((m, i) => {
            const isLeft = i % 2 === 0;
            return (
              <div key={i} className={`journey-stop ${isLeft ? 'left' : 'right'}`}>
                <div className="journey-marker" style={{ background: `var(--${m.color}, var(--orange))` }}>
                  <span className="journey-emoji">{m.emoji}</span>
                </div>
                <div className="journey-card" style={{ background: '#fff' }}>
                  <span className="journey-year" style={{ background: `var(--${m.color}-soft, var(--cream-2))`, color: 'var(--charcoal)' }}>{m.year}</span>
                  <h3 style={{ fontSize: 22, marginTop: 10, marginBottom: 8 }}>{m.title}</h3>
                  <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--charcoal-soft)' }}>{m.desc}</p>
                </div>
              </div>);

          })}
        </div>
      </div>
    </section>);

}

function AboutApp() {
  const [enrollOpen, setEnrollOpen] = useState(false);
  return (
    <div className="page" data-screen-label="About">
      <Header active="about" onEnroll={() => setEnrollOpen(true)} />
      <AboutHero />
      <MissionVision />
      <StorySection />
      <Values />
      <TeamSection />
      <JourneySection />
      <GallerySection />
      <Footer />
      <FloatingCTAs />
      <EnrollmentModal open={enrollOpen} onClose={() => setEnrollOpen(false)} />
    </div>);

}

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