/* 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 = [
    "Mahir Dhuha was founded in 2014 by a small group of educators and parents who shared one conviction: that the earliest years of a child's life are sacred, and that learning at this age should be wrapped in love, faith, and play in equal measure.",
    "What started as a single classroom in Bukit Jelutong has grown into three branches across the Klang Valley — but the heart of it has never changed. We still know every child by name. We still cry at every graduation. We still believe that a hug is the best preparation for a hard day.",
    "Our founders bring together backgrounds in early childhood education, Islamic studies, and community building. Each carries her own story of why this work matters — but all of them began the same way: as mothers, watching their own children, and asking what kind of school they wished existed.",
    "Today, the founders still walk the corridors, greet the children at the gate, and meet with parents themselves. They believe that no school can love a child more than its leaders teach it to. And so, every day, they show up — not as administrators, but as teachers first."
  ];

  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: '2014', title: 'A dream takes root', desc: 'A small Islamic preschool opens its doors in Kota Damansara with one classroom, one teacher, and a big mission: nurture little hearts with faith and love.', emoji: '🌱', color: 'mint' },
  { year: '2015', 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: '2017', title: 'Mahir Dhuha Expands', desc: 'A second home for the MD family. Parents from KD welcome us with open arms — three operating-hour options to fit working families.', emoji: '🏫', color: 'rose' },
  { year: '2019', 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: '2024', 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={m.year} 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 />);