import React from 'react';
import { Link } from 'react-router-dom';
import Navbar from '../components/Navbar';
import Footer from '../components/Footer';
export default function Academics() {
  return (
    <div className="min-h-screen pt-16">
      <Navbar />

<section className="relative min-h-screen flex items-center pt-0 overflow-hidden">
<div className="absolute inset-0 z-0">
<div className="w-full h-full bg-cover bg-center opacity-40 mix-blend-overlay" data-alt="A whimsical, vibrant 2D illustration of a magical classroom filled with light. Floating books and glowing lanterns drift through the air while diverse, joyful children interact with a friendly, glowing robot and holographic globes. The style is soft, tactile, and storybook-like with pastel sky blues and sunny yellows, matching the St. Andrews Academy brand aesthetic." style={{"backgroundImage":"url('https://lh3.googleusercontent.com/aida-public/AB6AXuBzmHzCvPMY0nBjP31wGaM42Ht7DqcMd3CR0WlXTseEYFwcv85uQHo_krAn-Zhq83wWOarlAn3_cLD26doIf88N1zMruMdb4aeWAMBHGGZeTC-RiPKn6J8jrhILdn0jYaFtqXS8T1L6q1CadgYsAeGhk-ZFhXxnZJlEn6SLM-QiDOPQ0Fv6rpnuJCgAQ3yGL0rTpUUIUIuztmNMBLvkAHwRYayCzbjpw6Zw0csRTFiDTFTUVx1nDwx9FA')"}}></div>
<div className="absolute inset-0 bg-gradient-to-b from-primary-container/20 to-background"></div>
</div>
<div className="relative z-10 px-margin-desktop w-full max-w-7xl mx-auto">
<div className="max-w-2xl reveal active">
<span className="inline-block bg-secondary-container text-on-secondary-container font-label-sm px-4 py-1 rounded-full mb-6">Discovery Awaits</span>
<h1 className="font-headline-xl text-headline-xl text-primary mb-4 leading-tight">Academics</h1>
<p className="font-headline-md text-headline-md text-on-surface-variant mb-10">Inspiring Curiosity, Creativity, and Excellence through a magical journey of learning.</p>
<div className="flex gap-4">
<button className="bg-primary text-on-primary font-label-md px-8 py-4 rounded-full shadow-lg hover:scale-105 transition-all">Explore Programs</button>
<button className="border-2 border-primary text-primary font-label-md px-8 py-4 rounded-full hover:bg-primary/5 transition-all">Download Prospectus</button>
</div>
</div>
</div>

<div className="absolute right-0 bottom-20 w-1/2 h-full hidden lg:block">

</div>
</section>

<section className="py-section-gap px-margin-desktop max-w-7xl mx-auto">
<div className="text-center mb-16 reveal">
<h2 className="font-headline-lg text-headline-lg text-primary mb-4">Stages of Discovery</h2>
<p className="font-body-lg text-body-lg text-on-surface-variant max-w-2xl mx-auto">Our academic pathway is designed to nurture young minds from their first steps into the world of knowledge to their final flight into the future.</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-gutter reveal">

<div className="bg-white p-8 rounded-xl shadow-sm border border-primary-container/20 hover:shadow-xl hover:-translate-y-2 transition-all duration-500 flex flex-col items-center text-center">
<div className="w-20 h-20 bg-secondary-container/30 cloud-shape flex items-center justify-center mb-6">
<span className="material-symbols-outlined text-4xl text-secondary">child_care</span>
</div>
<h3 className="font-headline-md text-headline-md text-primary mb-4">Pre-Primary</h3>
<p className="text-on-surface-variant text-body-md mb-6 flex-grow">Play-based learning focusing on wonder and curiosity.</p>
<button className="text-primary font-label-md hover:underline">Learn More</button>
</div>

<div className="bg-white p-8 rounded-xl shadow-sm border border-primary-container/20 hover:shadow-xl hover:-translate-y-2 transition-all duration-500 flex flex-col items-center text-center">
<div className="w-20 h-20 bg-primary-container/30 cloud-shape flex items-center justify-center mb-6">
<span className="material-symbols-outlined text-4xl text-primary">school</span>
</div>
<h3 className="font-headline-md text-headline-md text-primary mb-4">Primary</h3>
<p className="text-on-surface-variant text-body-md mb-6 flex-grow">Foundational skills in literacy, numeracy, and exploration.</p>
<button className="text-primary font-label-md hover:underline">Learn More</button>
</div>

<div className="bg-white p-8 rounded-xl shadow-sm border border-primary-container/20 hover:shadow-xl hover:-translate-y-2 transition-all duration-500 flex flex-col items-center text-center">
<div className="w-20 h-20 bg-tertiary-container/30 cloud-shape flex items-center justify-center mb-6">
<span className="material-symbols-outlined text-4xl text-tertiary">science</span>
</div>
<h3 className="font-headline-md text-headline-md text-primary mb-4">Middle School</h3>
<p className="text-on-surface-variant text-body-md mb-6 flex-grow">Inquiry-driven subjects fostering critical thinking.</p>
<button className="text-primary font-label-md hover:underline">Learn More</button>
</div>

<div className="bg-white p-8 rounded-xl shadow-sm border border-primary-container/20 hover:shadow-xl hover:-translate-y-2 transition-all duration-500 flex flex-col items-center text-center">
<div className="w-20 h-20 bg-secondary-container/30 cloud-shape flex items-center justify-center mb-6">
<span className="material-symbols-outlined text-4xl text-secondary">history_edu</span>
</div>
<h3 className="font-headline-md text-headline-md text-primary mb-4">Secondary</h3>
<p className="text-on-surface-variant text-body-md mb-6 flex-grow">Rigorous academic preparation for board exams.</p>
<button className="text-primary font-label-md hover:underline">Learn More</button>
</div>

<div className="bg-white p-8 rounded-xl shadow-sm border border-primary-container/20 hover:shadow-xl hover:-translate-y-2 transition-all duration-500 flex flex-col items-center text-center">
<div className="w-20 h-20 bg-primary-container/30 cloud-shape flex items-center justify-center mb-6">
<span className="material-symbols-outlined text-4xl text-primary">rocket_launch</span>
</div>
<h3 className="font-headline-md text-headline-md text-primary mb-4">Senior Sec.</h3>
<p className="text-on-surface-variant text-body-md mb-6 flex-grow">Specialized streams for university and career success.</p>
<button className="text-primary font-label-md hover:underline">Learn More</button>
</div>
</div>
</section>

<div className="bg-secondary-container/20 py-20 relative overflow-hidden">
<div className="absolute inset-0 opacity-10">

</div>

<div className="relative z-10 px-margin-desktop max-w-7xl mx-auto">
<div className="text-center mb-16 reveal">
<h2 className="font-headline-lg text-headline-lg text-primary mb-4">Interactive Curriculum</h2>
<p className="font-body-lg text-body-lg text-on-surface-variant max-w-2xl mx-auto">A multidimensional approach to learning that brings every subject to life.</p>
</div>
<div className="grid grid-cols-2 lg:grid-cols-4 gap-6 reveal">

<div className="bg-surface p-6 rounded-lg shadow-sm border border-outline-variant hover:border-primary flex flex-col items-center text-center transition-all group">
<span className="material-symbols-outlined text-4xl text-primary mb-4 group-hover:scale-110 transition-transform">calculate</span>
<h4 className="font-label-md text-primary">Mathematics</h4>
</div>
<div className="bg-surface p-6 rounded-lg shadow-sm border border-outline-variant hover:border-primary flex flex-col items-center text-center transition-all group">
<span className="material-symbols-outlined text-4xl text-primary mb-4 group-hover:scale-110 transition-transform">biotech</span>
<h4 className="font-label-md text-primary">Science</h4>
</div>
<div className="bg-surface p-6 rounded-lg shadow-sm border border-outline-variant hover:border-primary flex flex-col items-center text-center transition-all group">
<span className="material-symbols-outlined text-4xl text-primary mb-4 group-hover:scale-110 transition-transform">menu_book</span>
<h4 className="font-label-md text-primary">English</h4>
</div>
<div className="bg-surface p-6 rounded-lg shadow-sm border border-outline-variant hover:border-primary flex flex-col items-center text-center transition-all group">
<span className="material-symbols-outlined text-4xl text-primary mb-4 group-hover:scale-110 transition-transform">public</span>
<h4 className="font-label-md text-primary">Social Studies</h4>
</div>
<div className="bg-surface p-6 rounded-lg shadow-sm border border-outline-variant hover:border-primary flex flex-col items-center text-center transition-all group">
<span className="material-symbols-outlined text-4xl text-primary mb-4 group-hover:scale-110 transition-transform">terminal</span>
<h4 className="font-label-md text-primary">CS &amp; Coding</h4>
</div>
<div className="bg-surface p-6 rounded-lg shadow-sm border border-outline-variant hover:border-primary flex flex-col items-center text-center transition-all group">
<span className="material-symbols-outlined text-4xl text-primary mb-4 group-hover:scale-110 transition-transform">translate</span>
<h4 className="font-label-md text-primary">Languages</h4>
</div>
<div className="bg-surface p-6 rounded-lg shadow-sm border border-outline-variant hover:border-primary flex flex-col items-center text-center transition-all group">
<span className="material-symbols-outlined text-4xl text-primary mb-4 group-hover:scale-110 transition-transform">palette</span>
<h4 className="font-label-md text-primary">Visual Arts</h4>
</div>
<div className="bg-surface p-6 rounded-lg shadow-sm border border-outline-variant hover:border-primary flex flex-col items-center text-center transition-all group">
<span className="material-symbols-outlined text-4xl text-primary mb-4 group-hover:scale-110 transition-transform">fitness_center</span>
<h4 className="font-label-md text-primary">Physical Ed.</h4>
</div>
</div>
</div>
</div>

<section className="py-section-gap px-margin-desktop max-w-7xl mx-auto">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 reveal">
<div className="bg-white p-10 rounded-xl shadow-md border-t-4 border-secondary">
<h3 className="font-headline-md text-headline-md text-primary mb-4">Smart Classrooms</h3>
<p className="text-on-surface-variant text-body-md">Equipped with interactive whiteboards and AR technology, every lesson is an immersive visual journey.</p>
</div>
<div className="bg-white p-10 rounded-xl shadow-md border-t-4 border-primary">
<h3 className="font-headline-md text-headline-md text-primary mb-4">STEM Focus</h3>
<p className="text-on-surface-variant text-body-md">Integrating Science, Tech, Engineering, and Math into everyday problem-solving scenarios.</p>
</div>
<div className="bg-white p-10 rounded-xl shadow-md border-t-4 border-tertiary">
<h3 className="font-headline-md text-headline-md text-primary mb-4">Project-Based</h3>
<p className="text-on-surface-variant text-body-md">Students lead "Adventures in Learning" by creating real-world solutions to community challenges.</p>
</div>
</div>
</section>

<section className="py-section-gap bg-surface-container/50">
<div className="px-margin-desktop max-w-7xl mx-auto">
<div className="mb-12 reveal">
<h2 className="font-headline-lg text-headline-lg text-primary mb-4">Discovery Labs</h2>
<p className="font-body-lg text-body-lg text-on-surface-variant">Where hands-on exploration meets cutting-edge innovation.</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 reveal">
<div className="group relative overflow-hidden rounded-xl aspect-[4/5] shadow-lg">
<img className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" data-alt="A brightly lit, modern school science laboratory for children. Stainless steel tables are organized with colorful glass beakers, microscopes, and safe experimental setups. Large windows let in soft natural light, and the walls are decorated with cheerful, educational infographics about the solar system and elements. High-end, premium aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAqAmQSVqw0AndlucuDVJG04yL_g97y9aupOWCYyHprkactdfjuLHKgArCjmhCMsc6vbHURUtBn_TEt0TiA-lc_T9HpifbX08wRRPG5RA1k-Xa_CTWkfVsluhMIiKHGDs9PegKDya3jASkgCurNTm1CXwHPrMo-aCXOVF0YhpqRYOYxx-PKWyIlL_0jdpvdKSTq94xAzbW0tOthW2xUGA_gHFJOW0RKFj7EjcTX4B25GZxJ-MhRkB3eUg"/>
<div className="absolute inset-0 bg-gradient-to-t from-primary/90 to-transparent flex flex-col justify-end p-8 text-on-primary">
<h4 className="font-headline-md text-headline-md">The Alchemy Lab</h4>
<p className="text-body-md opacity-0 group-hover:opacity-100 transition-opacity">Integrated Science Wing</p>
</div>
</div>
<div className="group relative overflow-hidden rounded-xl aspect-[4/5] shadow-lg">
<img className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" data-alt="A futuristic robotics and computer lab for students. Ergonomic white chairs surround workstations with high-end computers. In the center, a group of friendly-looking educational robots on a testing track. The room has soft blue neon accents and a clean, high-tech, storybook-modern atmosphere." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBd9V4tq8_ZG8-HXSmlPBPwQoyDogXO6wcOQaEQIEJ8xmcEfYHYwWA5sQu-prNOmpq1kvKRyneOIe4ydsvWvRcm4oSCRzeBlm1Szl0wm8OgSX6vuSBB6HGL6gTbqHqJhOmZetQo6v3WMzOSrawI9JKQUbcacvpjqHU25DABUE0ZT5jAUx6cwf3QNjeh3fDWMWvvOz0GT9_SAkFV6fyoLsecd1Hj-IGOwFctN1O1Y9ruc-p8ho6oxONGhA"/>
<div className="absolute inset-0 bg-gradient-to-t from-tertiary/90 to-transparent flex flex-col justify-end p-8 text-on-primary">
<h4 className="font-headline-md text-headline-md">Cyber Haven</h4>
<p className="text-body-md opacity-0 group-hover:opacity-100 transition-opacity">Robotics &amp; Coding</p>
</div>
</div>
<div className="group relative overflow-hidden rounded-xl aspect-[4/5] shadow-lg">
<img className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" data-alt="A cozy, whimsical math laboratory for children. Large colorful geometric shapes are scattered across the floor, and wall-mounted puzzles invite tactile learning. The lighting is warm and golden, highlighting high-quality wooden educational tools and a 'Storybook Excellence' design language." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDoc1OIocMByBM-V2GYErwVtIxcZWD6oPQBN3jmgQB55XFvUdEoyvSGGR2NTIDD6W-VuGzhMObcDUpNkR-G94xpHrIXwZTGVe67ITzeKC34fVs7y-dpaA4sky0vkTF_-gMjywXhtsZrGs6SLpQeue3_zFZM3RJERJjuZvW3YrFT6jQM3eXzRPYb7Mw0JudU84ecPYZRYYwP9LkbxWid6qo821RQlgAPBwOCgxkladkrEyo6joSHuiFMLg"/>
<div className="absolute inset-0 bg-gradient-to-t from-secondary/90 to-transparent flex flex-col justify-end p-8 text-on-primary">
<h4 className="font-headline-md text-headline-md">Logic Lounge</h4>
<p className="text-body-md opacity-0 group-hover:opacity-100 transition-opacity">Applied Mathematics</p>
</div>
</div>
<div className="group relative overflow-hidden rounded-xl aspect-[4/5] shadow-lg">
<img className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" data-alt="A high-tech language lab with glass booths and premium headsets. The walls feature stylized maps and greeting from around the world. The overall vibe is bright, airy, and professional, reflecting the premium academic standards of St. Andrews Academy." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBzqvq0UnHsUF--VIyhM_mnHo_pnD3aJ_HCz14YyPpgyz--iFrnpFoKpWTYK33_YYICyO3utmDOXVr57FrkcpdJxct7mbwtR_KAtGB6GUgYXJPOIpDkcYVgFG3dPvUoJqk_vNQsrF1_fxaW37dA82IzrX92luj43S6MhfG89Y7peOB5iXJcXpG3QCiC8dQXdTyxP5AlBkcMMiHxYsIqOJY5EcxfCnX4wHkd0vb7lh3DM4zcrphQ5cjn0A"/>
<div className="absolute inset-0 bg-gradient-to-t from-on-primary-container/90 to-transparent flex flex-col justify-end p-8 text-on-primary">
<h4 className="font-headline-md text-headline-md">Polyglot Plaza</h4>
<p className="text-body-md opacity-0 group-hover:opacity-100 transition-opacity">Language Excellence</p>
</div>
</div>
</div>
</div>
</section>

<section className="py-section-gap relative overflow-hidden">
<div className="px-margin-desktop max-w-7xl mx-auto flex flex-col md:flex-row items-center gap-16 reveal">
<div className="flex-1">
<span className="text-secondary font-label-md block mb-4 uppercase tracking-widest">Knowledge Oasis</span>
<h2 className="font-headline-xl text-headline-xl text-primary mb-6">The Book Haven</h2>
<p className="font-body-lg text-body-lg text-on-surface-variant mb-8">Our library is more than just shelves; it’s a portal to other worlds. With over 50,000 physical volumes and an extensive digital repository, curiosity finds its home here.</p>
<div className="grid grid-cols-2 gap-4">
<div className="flex items-center gap-2">
<span className="material-symbols-outlined text-secondary">check_circle</span>
<span className="font-label-md">Rare Collections</span>
</div>
<div className="flex items-center gap-2">
<span className="material-symbols-outlined text-secondary">check_circle</span>
<span className="font-label-md">E-Book Terminal</span>
</div>
<div className="flex items-center gap-2">
<span className="material-symbols-outlined text-secondary">check_circle</span>
<span className="font-label-md">Storytelling Pit</span>
</div>
<div className="flex items-center gap-2">
<span className="material-symbols-outlined text-secondary">check_circle</span>
<span className="font-label-md">Research Concierge</span>
</div>
</div>
</div>
<div className="flex-1 relative">
<div className="w-full aspect-square bg-primary-container/20 cloud-shape relative flex items-center justify-center p-8">
<img className="w-full h-full object-cover rounded-xl shadow-2xl" data-alt="A premium, grand school library designed with a 'Book Haven' theme. High, curved wooden bookshelves reach toward a ceiling painted with soft white clouds. Comfortable reading nooks with plush, sky-blue armchairs are scattered about. The atmosphere is magical, serene, and academically prestigious, with a few floating book motifs as subtle accents." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB7TRIE4VXx8cqBmuuECPDL1MqHgKFM3W53YvSPNbgKDMAj9nnNiwXT7qVVmUUYev79b5XBPuSc5hSqcePcbsIcsZ8rwk5-ssT05oH_IcMNOcH6zYUlJjTmpg6E8nLxwf1qxMPUjsE1DxcfBYzPfjvGEAbTIWW5n5pWP3M3SHUVmJJIOCD-JjCiZqHUvRDgdkQFc2nTKPToUklG8QIjUecZkGLoigak7q4xmrskycS8Nkt6XuhVHwXWrA"/>
</div>
</div>
</div>
</section>

<section className="py-section-gap bg-secondary-container/10">
<div className="px-margin-desktop max-w-7xl mx-auto">
<div className="text-center mb-16 reveal">
<h2 className="font-headline-lg text-headline-lg text-primary mb-4">Beyond the Books</h2>
<p className="font-body-lg text-body-lg text-on-surface-variant">Developing the whole child through diverse creative and physical outlets.</p>
</div>
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4 reveal">
<div className="bg-white p-6 rounded-lg text-center hover:bg-secondary-container transition-colors cursor-pointer group">
<span className="material-symbols-outlined text-3xl text-secondary mb-2">music_note</span>
<p className="font-label-sm">Music</p>
</div>
<div className="bg-white p-6 rounded-lg text-center hover:bg-secondary-container transition-colors cursor-pointer group">
<span className="material-symbols-outlined text-3xl text-secondary mb-2">self_improvement</span>
<p className="font-label-sm">Yoga</p>
</div>
<div className="bg-white p-6 rounded-lg text-center hover:bg-secondary-container transition-colors cursor-pointer group">
<span className="material-symbols-outlined text-3xl text-secondary mb-2">sports_soccer</span>
<p className="font-label-sm">Sports</p>
</div>
<div className="bg-white p-6 rounded-lg text-center hover:bg-secondary-container transition-colors cursor-pointer group">
<span className="material-symbols-outlined text-3xl text-secondary mb-2">theater_comedy</span>
<p className="font-label-sm">Drama</p>
</div>
<div className="bg-white p-6 rounded-lg text-center hover:bg-secondary-container transition-colors cursor-pointer group">
<span className="material-symbols-outlined text-3xl text-secondary mb-2">code</span>
<p className="font-label-sm">Coding Club</p>
</div>
<div className="bg-white p-6 rounded-lg text-center hover:bg-secondary-container transition-colors cursor-pointer group">
<span className="material-symbols-outlined text-3xl text-secondary mb-2">brush</span>
<p className="font-label-sm">Fine Art</p>
</div>
<div className="bg-white p-6 rounded-lg text-center hover:bg-secondary-container transition-colors cursor-pointer group">
<span className="material-symbols-outlined text-3xl text-secondary mb-2">festival</span>
<p className="font-label-sm">Dance</p>
</div>
</div>
</div>
</section>

<section className="py-section-gap px-margin-desktop overflow-hidden">
<div className="max-w-7xl mx-auto reveal">
<h2 className="font-headline-lg text-headline-lg text-primary mb-12 text-center">The Journey of Growth</h2>
<div className="relative py-12">

<div className="absolute top-1/2 left-0 w-full h-1 bg-primary-container/30 -translate-y-1/2 hidden md:block"></div>
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
<div className="relative bg-white p-6 rounded-xl shadow-md border border-primary/10 text-center z-10 hover:scale-105 transition-transform">
<div className="w-12 h-12 bg-primary text-on-primary rounded-full flex items-center justify-center mx-auto mb-4 font-bold">1</div>
<h4 className="font-headline-md text-primary mb-2">Check-points</h4>
<p className="text-body-md text-on-surface-variant">Weekly low-stress assessments to track understanding.</p>
</div>
<div className="relative bg-white p-6 rounded-xl shadow-md border border-primary/10 text-center z-10 hover:scale-105 transition-transform">
<div className="w-12 h-12 bg-secondary text-on-secondary rounded-full flex items-center justify-center mx-auto mb-4 font-bold">2</div>
<h4 className="font-headline-md text-primary mb-2">Milestones</h4>
<p className="text-body-md text-on-surface-variant">Monthly projects demonstrating applied knowledge.</p>
</div>
<div className="relative bg-white p-6 rounded-xl shadow-md border border-primary/10 text-center z-10 hover:scale-105 transition-transform">
<div className="w-12 h-12 bg-tertiary text-on-tertiary rounded-full flex items-center justify-center mx-auto mb-4 font-bold">3</div>
<h4 className="font-headline-md text-primary mb-2">Exhibitions</h4>
<p className="text-body-md text-on-surface-variant">Term-end portfolio showcases for parents and peers.</p>
</div>
<div className="relative bg-white p-6 rounded-xl shadow-md border border-primary/10 text-center z-10 hover:scale-105 transition-transform">
<div className="w-12 h-12 bg-on-primary-container text-white rounded-full flex items-center justify-center mx-auto mb-4 font-bold">4</div>
<h4 className="font-headline-md text-primary mb-2">Final Flight</h4>
<p className="text-body-md text-on-surface-variant">Comprehensive annual reviews and board preparations.</p>
</div>
</div>
</div>
</div>
</section>

<section className="py-section-gap px-margin-desktop bg-surface">
<div className="max-w-7xl mx-auto">
<h2 className="font-headline-lg text-headline-lg text-primary mb-12 reveal">Hall of Inspiration</h2>
<div className="columns-1 md:columns-2 lg:columns-3 gap-6 reveal">
<div className="break-inside-avoid mb-6 p-6 bg-white rounded-xl shadow-sm border border-outline-variant hover:shadow-lg transition-all">
<span className="material-symbols-outlined text-secondary text-4xl mb-4">emoji_events</span>
<h5 className="font-label-md text-primary mb-2">National Math Olympiad</h5>
<p className="text-body-md text-on-surface-variant">3 students secured gold medals in the Regional 2024 Qualifiers.</p>
</div>
<div className="break-inside-avoid mb-6 p-6 bg-secondary-container/20 rounded-xl shadow-sm hover:shadow-lg transition-all">
<span className="material-symbols-outlined text-primary text-4xl mb-4">robot_2</span>
<h5 className="font-label-md text-primary mb-2">Robotics Innovation Award</h5>
<p className="text-body-md text-on-surface-variant">Our "Green City" project won Best Sustainable Tech at the State Science Fair.</p>
</div>
<div className="break-inside-avoid mb-6 p-6 bg-white rounded-xl shadow-sm border border-outline-variant hover:shadow-lg transition-all">
<span className="material-symbols-outlined text-tertiary text-4xl mb-4">auto_stories</span>
<h5 className="font-label-md text-primary mb-2">Young Authors' Circle</h5>
<p className="text-body-md text-on-surface-variant">Five Middle Schoolers published their first anthology of magical realism.</p>
</div>
<div className="break-inside-avoid mb-6 p-6 bg-primary-container/20 rounded-xl shadow-sm hover:shadow-lg transition-all">
<span className="material-symbols-outlined text-primary text-4xl mb-4">draw</span>
<h5 className="font-label-md text-primary mb-2">Global Art Exchange</h5>
<p className="text-body-md text-on-surface-variant">Paintings by our Primary students exhibited in the 'Children of the World' gallery.</p>
</div>
</div>
</div>
</section>

<section className="py-section-gap px-margin-desktop max-w-3xl mx-auto">
<h2 className="font-headline-lg text-headline-lg text-primary mb-8 text-center reveal">Curious Minds Ask</h2>
<div className="space-y-4 reveal">
<details className="group bg-white rounded-xl border border-outline-variant/30 overflow-hidden shadow-sm">
<summary className="flex justify-between items-center p-6 cursor-pointer font-label-md text-primary list-none">
                    What is the teacher-student ratio?
                    <span className="material-symbols-outlined group-open:rotate-180 transition-transform">expand_more</span>
</summary>
<div className="p-6 pt-0 text-on-surface-variant text-body-md">
                    To ensure personalized attention and foster a nurturing environment, we maintain a 1:15 ratio across all primary and middle school grades.
                </div>
</details>
<details className="group bg-white rounded-xl border border-outline-variant/30 overflow-hidden shadow-sm">
<summary className="flex justify-between items-center p-6 cursor-pointer font-label-md text-primary list-none">
                    Do you offer international curriculum options?
                    <span className="material-symbols-outlined group-open:rotate-180 transition-transform">expand_more</span>
</summary>
<div className="p-6 pt-0 text-on-surface-variant text-body-md">
                    Yes, we offer both National and International streams starting from Grade 8, allowing students to choose the path that best fits their global aspirations.
                </div>
</details>
<details className="group bg-white rounded-xl border border-outline-variant/30 overflow-hidden shadow-sm">
<summary className="flex justify-between items-center p-6 cursor-pointer font-label-md text-primary list-none">
                    How is technology integrated into learning?
                    <span className="material-symbols-outlined group-open:rotate-180 transition-transform">expand_more</span>
</summary>
<div className="p-6 pt-0 text-on-surface-variant text-body-md">
                    We use technology as a tool for creation, not just consumption. From coding in early years to using VR for history lessons, technology is woven seamlessly into our pedagogical fabric.
                </div>
</details>
</div>
</section>

<section className="py-24 px-margin-desktop">
<div className="max-w-5xl mx-auto bg-primary rounded-xl p-12 text-center text-on-primary relative overflow-hidden shadow-2xl reveal">
<div className="absolute top-0 right-0 p-8 opacity-20">
<span className="material-symbols-outlined text-9xl">school</span>
</div>
<h2 className="font-headline-xl text-headline-xl mb-6 relative z-10">Give Your Child the Best Learning Experience</h2>
<p className="text-body-lg mb-10 max-w-2xl mx-auto opacity-90 relative z-10">Join a community where magic meets learning and every child is a star in their own story.</p>
<div className="flex flex-col sm:flex-row justify-center gap-4 relative z-10">
<button className="bg-secondary-container text-on-secondary-container font-label-md px-10 py-4 rounded-full hover:scale-105 transition-all shadow-lg">Apply for Admission</button>
<button className="bg-white/10 backdrop-blur-md border border-white/20 text-on-primary font-label-md px-10 py-4 rounded-full hover:bg-white/20 transition-all">Contact Our Admissions Team</button>
</div>
</div>
</section>

<Footer />
    </div>
  );
}
