import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
import Navbar from '../components/Navbar';
import Footer from '../components/Footer';

export default function Achievements() {
  const [achievements, setAchievements] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchAchievements();
  }, []);

  const fetchAchievements = async () => {
    try {
      const res = await axios.get('http://localhost:5000/api/achievements');
      // Only show published achievements on the public site
      setAchievements(res.data.filter(ach => ach.status === 'Published'));
    } catch (err) {
      console.error("Failed to fetch achievements", err);
    } finally {
      setLoading(false);
    }
  };

  // Filter achievements by category
  const schoolAch = achievements.filter(ach => ach.category === 'School');
  const academicAch = achievements.filter(ach => ach.category === 'Academic');
  const sportsAch = achievements.filter(ach => ach.category === 'Sports');
  const artsAch = achievements.filter(ach => ach.category === 'Arts & Culture');

  return (
    <div className="min-h-screen pt-16">
      <Navbar />
      <main className="pt-0">

        {/* Hero Section */}
        <section className="relative px-margin-desktop py-section-gap overflow-hidden flex flex-col md:flex-row items-center gap-12">
          <div className="absolute -top-10 -right-20 w-96 h-96 bg-primary-container/20 rounded-full blur-3xl"></div>
          <div className="absolute top-40 left-10 text-secondary-fixed opacity-60 parallax-stars" style={{ "animationDelay": "0s" }}>
            <span className="material-symbols-outlined text-4xl" style={{ "fontVariationSettings": "'FILL' 1" }}>star</span>
          </div>
          <div className="absolute bottom-20 right-1/4 text-primary-fixed opacity-40 parallax-stars" style={{ "animationDelay": "2s" }}>
            <span className="material-symbols-outlined text-6xl" style={{ "fontVariationSettings": "'FILL' 1" }}>cloud</span>
          </div>
          <div className="flex-1 z-10 text-center md:text-left">
            <h1 className="font-headline-xl text-headline-xl text-primary mb-4 leading-tight">Our Achievements</h1>
            <p className="font-body-lg text-body-lg text-on-surface-variant max-w-xl">Celebrating Excellence, Hard Work, and Success. Every milestone achieved by our students is a testament to the magic of learning and perseverance.</p>
            <div className="mt-8 flex flex-wrap gap-4 justify-center md:justify-start">
              <button className="bg-primary text-on-primary px-8 py-3 rounded-full font-label-md hover:scale-105 transition-all shadow-lg hover:shadow-primary/30">View Annual Report</button>
              <button className="border-2 border-primary text-primary px-8 py-3 rounded-full font-label-md hover:bg-primary/5 transition-all">Wall of Fame</button>
            </div>
          </div>
          <div className="flex-1 relative z-10">
            <div className="rounded-xl overflow-hidden shadow-2xl transform rotate-2 hover:rotate-0 transition-transform duration-500 border-8 border-white">
              <img alt="Magical School Achievements" className="w-full h-auto object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCZb2_eN8UP7lPR38Qo-3dkk5RIQN55ogbVsCR0BSuL6VHgf60sMe5IjP_8pt18nguPGPYip_SpDKw9z8uaj-ozmoY14f-uyGM21dPHK73PNLZfmZ83BrpaKh9sv76123-OPC60HbQDhWLescOMd_nOZOcR0X2ZsXayTDQvEVeo6smORz2pbt6Nt656yJYYtztWEtSibeIIkcbkJxfoz_lk8f4bRMliCRVEqpeHVNMjFo-TjeTLhCP-8A" />
            </div>
            <div className="absolute -bottom-6 -left-6 bg-secondary-container p-4 rounded-lg shadow-xl animate-bounce">
              <span className="material-symbols-outlined text-on-secondary-container text-4xl" style={{ "fontVariationSettings": "'FILL' 1" }}>military_tech</span>
            </div>
          </div>
        </section>

        {/* Counter Stats Section */}
        <section className="px-margin-desktop py-12 bg-primary-container/10 rounded-xl mx-gutter my-section-gap">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
            <div className="text-center group">
              <div className="text-primary font-headline-xl mb-2">50+</div>
              <div className="font-label-md text-on-surface-variant uppercase tracking-wider">National Awards</div>
            </div>
            <div className="text-center group">
              <div className="text-secondary font-headline-xl mb-2">120+</div>
              <div className="font-label-md text-on-surface-variant uppercase tracking-wider">State Awards</div>
            </div>
            <div className="text-center group">
              <div className="text-primary font-headline-xl mb-2">98%</div>
              <div className="font-label-md text-on-surface-variant uppercase tracking-wider">Academic Toppers</div>
            </div>
            <div className="text-center group">
              <div className="text-tertiary font-headline-xl mb-2">35+</div>
              <div className="font-label-md text-on-surface-variant uppercase tracking-wider">Sports Cups</div>
            </div>
          </div>
        </section>

        {/* Global Milestones Section */}
        <section className="px-margin-desktop py-section-gap">
          <h2 className="font-headline-lg text-headline-lg text-center mb-16">Global Milestones &amp; Awards</h2>
          <div className="grid md:grid-cols-2 gap-12">
            {schoolAch.length > 0 ? (
              schoolAch.map((ach) => (
                <div key={ach._id} className="group relative bg-white p-8 rounded-xl shadow-md border border-surface-variant hover:shadow-xl transition-all">
                  <div className="absolute top-0 right-0 p-6 opacity-10 group-hover:opacity-20 transition-opacity">
                    <span className="material-symbols-outlined text-[120px]">workspace_premium</span>
                  </div>
                  <div className="relative z-10">
                    <div className="bg-primary/10 w-16 h-16 rounded-full flex items-center justify-center mb-6">
                      <span className="material-symbols-outlined text-primary text-3xl">school</span>
                    </div>
                    <h3 className="font-headline-md text-headline-md mb-4">{ach.title}</h3>
                    <p className="text-on-surface-variant mb-6">{ach.description || `Celebrated school-wide recognition of achievement.`}</p>
                    <div className="glass p-4 rounded-lg flex items-center gap-4">
                      {ach.image ? (
                        <img src={ach.image} className="w-12 h-12 rounded-full object-cover border" alt="" />
                      ) : (
                        <div className="w-12 h-12 rounded-full bg-primary-fixed flex items-center justify-center text-primary font-bold">SA</div>
                      )}
                      <div>
                        <p className="font-bold text-label-md">{ach.recipient}</p>
                        <p className="text-sm opacity-70">Academic Year {ach.year}</p>
                      </div>
                    </div>
                  </div>
                </div>
              ))
            ) : (
              <>
                <div className="group relative bg-white p-8 rounded-xl shadow-md border border-surface-variant hover:shadow-xl transition-all">
                  <div className="absolute top-0 right-0 p-6 opacity-10 group-hover:opacity-20 transition-opacity">
                    <span className="material-symbols-outlined text-[120px]">workspace_premium</span>
                  </div>
                  <div className="relative z-10">
                    <div className="bg-primary/10 w-16 h-16 rounded-full flex items-center justify-center mb-6">
                      <span className="material-symbols-outlined text-primary text-3xl">school</span>
                    </div>
                    <h3 className="font-headline-md text-headline-md mb-4">Top Educational Innovation Award</h3>
                    <p className="text-on-surface-variant mb-6">Recognized by the International Education Board for our "Magical Literacy" curriculum that integrates storytelling with core scientific principles.</p>
                    <div className="glass p-4 rounded-lg flex items-center gap-4">
                      <div className="w-12 h-12 rounded-full bg-primary-fixed"></div>
                      <div>
                        <p className="font-bold text-label-md">Year 2023</p>
                        <p className="text-sm opacity-70">UNESCO Affiliate Schools Network</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="group relative bg-white p-8 rounded-xl shadow-md border border-surface-variant hover:shadow-xl transition-all">
                  <div className="absolute top-0 right-0 p-6 opacity-10 group-hover:opacity-20 transition-opacity">
                    <span className="material-symbols-outlined text-[120px]">eco</span>
                  </div>
                  <div className="relative z-10">
                    <div className="bg-secondary-container/30 w-16 h-16 rounded-full flex items-center justify-center mb-6">
                      <span className="material-symbols-outlined text-secondary text-3xl">public</span>
                    </div>
                    <h3 className="font-headline-md text-headline-md mb-4">Green Campus Excellence</h3>
                    <p className="text-on-surface-variant mb-6">Awarded for our sustainable architecture and 'Zero-Waste' initiative led entirely by the student environmental committee.</p>
                    <div className="glass p-4 rounded-lg flex items-center gap-4">
                      <div className="w-12 h-12 rounded-full bg-secondary-fixed"></div>
                      <div>
                        <p className="font-bold text-label-md">Year 2022</p>
                        <p className="text-sm opacity-70">Green Schools Initiative</p>
                      </div>
                    </div>
                  </div>
                </div>
              </>
            )}
          </div>
        </section>

        {/* Stars of St. Andrews Section */}
        <section className="px-margin-desktop py-section-gap bg-surface-container-low">
          <div className="text-center mb-16">
            <h2 className="font-headline-lg text-headline-lg">Stars of St. Andrews</h2>
            <p className="text-on-surface-variant mt-2">Individual brilliance shining through the collective.</p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {academicAch.length > 0 ? (
              academicAch.map((ach) => (
                <div key={ach._id} className="bg-white p-6 rounded-xl text-center shadow-sm border border-outline-variant/30 hover:-translate-y-2 transition-transform">
                  <div className="w-24 h-24 mx-auto rounded-full mb-4 ring-4 ring-primary-container overflow-hidden">
                    <img className="w-full h-full object-cover" src={ach.image || 'https://via.placeholder.com/150'} alt={ach.recipient} />
                  </div>
                  <h4 className="font-bold text-lg">{ach.recipient}</h4>
                  <p className="text-primary text-sm font-semibold mb-3">{ach.title}</p>
                  <p className="text-xs text-on-surface-variant italic">"{ach.description || 'Always reaching for the stars.'}"</p>
                </div>
              ))
            ) : (
              <>
                <div className="bg-white p-6 rounded-xl text-center shadow-sm border border-outline-variant/30 hover:-translate-y-2 transition-transform">
                  <div className="w-24 h-24 mx-auto rounded-full mb-4 ring-4 ring-primary-container overflow-hidden">
                    <img className="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAWp7HgfzvUEDTmxQclAe7QTBhUOLMFZ4atkRa5PQWzdrUIPFzVyoJpdjtG3gVby8rXkqc6jEcQccvoLLt4yMNKLdozU4MHght-rh_CdHfjkYPiIyxFABap-H80MUQoJw5yUdIwGrdCtC6qgaZb5Pp1xPdbsrGeI7tFqmHo69SHXn3g73FJRfkbiI2Sl1U9wgsiTkjYkYIrqzu3g-8b-qJBSP5DGQxVzignN_z6PxiF16ZUQtSMpvJjZA" />
                  </div>
                  <h4 className="font-bold text-lg">Aria Bennett</h4>
                  <p className="text-primary text-sm font-semibold mb-3">Math Olympiad - Gold</p>
                  <p className="text-xs text-on-surface-variant italic">"The logic of math is like solving a beautiful puzzle every day."</p>
                </div>
                <div className="bg-white p-6 rounded-xl text-center shadow-sm border border-outline-variant/30 hover:-translate-y-2 transition-transform">
                  <div className="w-24 h-24 mx-auto rounded-full mb-4 ring-4 ring-tertiary-container overflow-hidden">
                    <img className="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCkysl9XjaMTTpOHFqQ0OTd4XeudL4iDF2_3CcCtA_Ap-ajBIFcMFkbkfnPFj5OvBsqkHDzUp6ii3MVjV94X8JFklJEl1nZ1SJkdC0pD91wKGyXzJATH68CMr0ttmvkcGqx_W7gRBJlBKF3d3LD8DDrQlHsAuzWj-ROimdwj5YLWFEKRYzSGZMP6WlPCFU1RAmGy0P_0P1YcE44mw0mBiuDM3FkOIB57QB5X5AbK0kpBMYk1C7H3B_0BQ" />
                  </div>
                  <h4 className="font-bold text-lg">Leo Maxwell</h4>
                  <p className="text-tertiary text-sm font-semibold mb-3">U-16 Cricket Captain</p>
                  <p className="text-xs text-on-surface-variant italic">"Leadership is about empowering the team to reach for the stars."</p>
                </div>
                <div className="bg-white p-6 rounded-xl text-center shadow-sm border border-outline-variant/30 hover:-translate-y-2 transition-transform">
                  <div className="w-24 h-24 mx-auto rounded-full mb-4 ring-4 ring-secondary-container overflow-hidden">
                    <img className="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDYhsmIqN7m24JPVT13SOEe1eautZGS131o543R33NBgp-gfG3353lEjJvY6J_TaLOEXaM8UW5--phwDBmVh4DYqI3-bsuF3_QwqVkAqU-z_vHCYqqlybofMDc_Z6LJAohL9XZVu4RlsQ4gNdrQj-0DKRNgYm6U9lDumsH5KfS0-lVD43AESamhBUwjai2prmf3qUE4K6iNob8ZF2EKlSUz6tc1ZNRg1kmLkAFz9S5wAoYcIbKah9OyGg" />
                  </div>
                  <h4 className="font-bold text-lg">Maya Singh</h4>
                  <p className="text-secondary text-sm font-semibold mb-3">National Art Winner</p>
                  <p className="text-xs text-on-surface-variant italic">"Art is the magic that happens when you believe in your vision."</p>
                </div>
                <div className="bg-white p-6 rounded-xl text-center shadow-sm border border-outline-variant/30 hover:-translate-y-2 transition-transform">
                  <div className="w-24 h-24 mx-auto rounded-full mb-4 ring-4 ring-primary-container overflow-hidden">
                    <img className="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBLuWze1O5R24S1gFJDnRSB8z9q72OTbozdtNkNxP65DamN2YXZZEyaFdmI2pld0dl54bbPUbUSCf5uTIEUi55iAqd9nP0To9iUpHTBrnOt3tR7ph6Yg33sbW_p89iT_tT5bQMU2Ck0mI8VW_zJUpGcWCuGWYrInshVHpDJcOVQc0e1iZbNTgbFOks9boxx1xkDmTaes4wtT8Ulr47PvygHku_qLTWEoBO_o2GJ7q30KF4gqBuENfmBtQ" />
                  </div>
                  <h4 className="font-bold text-lg">Julian Chen</h4>
                  <p className="text-primary text-sm font-semibold mb-3">Young Musician Award</p>
                  <p className="text-xs text-on-surface-variant italic">"Every note tells a story, and I love sharing mine with the world."</p>
                </div>
              </>
            )}
          </div>
        </section>

        {/* Sports Achievements Section */}
        <section className="px-margin-desktop py-section-gap relative overflow-hidden">
          <div className="absolute -bottom-20 -left-20 w-80 h-80 bg-tertiary-container/20 rounded-full blur-3xl"></div>
          <div className="flex flex-col md:flex-row justify-between items-end mb-12">
            <div className="max-w-2xl">
              <h2 className="font-headline-lg text-headline-lg">Sports &amp; Athletics</h2>
              <p className="text-on-surface-variant mt-4">Nurturing champions on and off the field. Our state-of-the-art facilities produce athletes of exceptional caliber.</p>
            </div>
            <button className="hidden md:block text-primary font-bold hover:underline flex items-center gap-2">
              View All Records <span className="material-symbols-outlined">arrow_forward</span>
            </button>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            {sportsAch.length > 0 ? (
              sportsAch.map((ach) => (
                <div key={ach._id} className="bg-white p-8 rounded-xl shadow-lg border-b-8 border-primary hover:shadow-2xl transition-all">
                  <div className="w-12 h-12 rounded-full bg-primary-container/20 flex items-center justify-center text-primary mb-4">
                    <span className="material-symbols-outlined text-3xl">sports_soccer</span>
                  </div>
                  <h4 className="font-headline-md text-headline-md mb-2">{ach.title}</h4>
                  <p className="text-on-surface-variant text-sm mb-6">{ach.description || `Triumph in competitive sports tournaments.`}</p>
                  <ul className="space-y-2 text-sm">
                    <li className="flex items-center gap-2 font-bold text-on-surface">
                      <span className="material-symbols-outlined text-secondary text-lg">workspace_premium</span> 
                      {ach.recipient}
                    </li>
                    <li className="flex items-center gap-2 text-xs text-on-surface-variant">
                      <span className="material-symbols-outlined text-lg">calendar_today</span> 
                      Year {ach.year}
                    </li>
                  </ul>
                </div>
              ))
            ) : (
              <>
                <div className="bg-white p-8 rounded-xl shadow-lg border-b-8 border-primary hover:shadow-2xl transition-all">
                  <span className="material-symbols-outlined text-primary text-5xl mb-4">sports_soccer</span>
                  <h4 className="font-headline-md text-headline-md mb-2">Football Academy</h4>
                  <p className="text-on-surface-variant text-sm mb-6">Champions of the State Invitational Tournament for 3 consecutive years.</p>
                  <ul className="space-y-2 text-sm">
                    <li className="flex items-center gap-2"><span className="material-symbols-outlined text-secondary text-lg">workspace_premium</span> 2023 Winners</li>
                    <li className="flex items-center gap-2"><span className="material-symbols-outlined text-secondary text-lg">workspace_premium</span> Best Coach Award</li>
                  </ul>
                </div>
                <div className="bg-white p-8 rounded-xl shadow-lg border-b-8 border-secondary hover:shadow-2xl transition-all">
                  <span className="material-symbols-outlined text-secondary text-5xl mb-4">pool</span>
                  <h4 className="font-headline-md text-headline-md mb-2">Swimming Dolphins</h4>
                  <p className="text-on-surface-variant text-sm mb-6">Setting new pool records in National Inter-School Aquatic Meets.</p>
                  <ul className="space-y-2 text-sm">
                    <li className="flex items-center gap-2"><span className="material-symbols-outlined text-secondary text-lg">workspace_premium</span> 15 Gold Medals</li>
                    <li className="flex items-center gap-2"><span className="material-symbols-outlined text-secondary text-lg">workspace_premium</span> Junior Olympics Selection</li>
                  </ul>
                </div>
                <div className="bg-white p-8 rounded-xl shadow-lg border-b-8 border-tertiary hover:shadow-2xl transition-all">
                  <span className="material-symbols-outlined text-tertiary text-5xl mb-4">sports_cricket</span>
                  <h4 className="font-headline-md text-headline-md mb-2">Cricket Elite</h4>
                  <p className="text-on-surface-variant text-sm mb-6">Home to the regional U-19 champions and several future stars.</p>
                  <ul className="space-y-2 text-sm">
                    <li className="flex items-center gap-2"><span className="material-symbols-outlined text-secondary text-lg">workspace_premium</span> Inter-Academy Cup</li>
                    <li className="flex items-center gap-2"><span className="material-symbols-outlined text-secondary text-lg">workspace_premium</span> Best All-Rounder Trophy</li>
                  </ul>
                </div>
              </>
            )}
          </div>
        </section>

        {/* Academic & Cultural Brilliance Grid */}
        <section className="px-margin-desktop py-section-gap bg-primary/5">
          <h2 className="font-headline-lg text-headline-lg text-center mb-16">Academic &amp; Cultural Brilliance</h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div className="group bg-white p-6 rounded-xl hover:bg-primary-container/30 transition-colors cursor-pointer border border-outline-variant/20 shadow-sm">
              <div className="w-12 h-12 bg-primary rounded-full flex items-center justify-center text-on-primary mb-4 group-hover:scale-110 transition-transform">
                <span className="material-symbols-outlined">menu_book</span>
              </div>
              <h5 className="font-bold text-lg mb-2">Board Results</h5>
              <p className="text-sm text-on-surface-variant">100% pass rate for the 10th consecutive year with 45% distinctions.</p>
            </div>
            <div className="group bg-white p-6 rounded-xl hover:bg-secondary-container/30 transition-colors cursor-pointer border border-outline-variant/20 shadow-sm">
              <div className="w-12 h-12 bg-secondary rounded-full flex items-center justify-center text-on-secondary mb-4 group-hover:scale-110 transition-transform">
                <span className="material-symbols-outlined">psychology</span>
              </div>
              <h5 className="font-bold text-lg mb-2">Olympiads</h5>
              <p className="text-sm text-on-surface-variant">Exceptional performance in Science and Math Olympiads at national levels.</p>
            </div>
            <div className="group bg-white p-6 rounded-xl hover:bg-tertiary-container/30 transition-colors cursor-pointer border border-outline-variant/20 shadow-sm">
              <div className="w-12 h-12 bg-tertiary rounded-full flex items-center justify-center text-on-tertiary mb-4 group-hover:scale-110 transition-transform">
                <span className="material-symbols-outlined">palette</span>
              </div>
              <h5 className="font-bold text-lg mb-2">Fine Arts</h5>
              <p className="text-sm text-on-surface-variant">Multiple first-place awards in Regional Painting and Sculpture contests.</p>
            </div>
            <div className="group bg-white p-6 rounded-xl hover:bg-primary-container/30 transition-colors cursor-pointer border border-outline-variant/20 shadow-sm">
              <div className="w-12 h-12 bg-on-primary-fixed-variant rounded-full flex items-center justify-center text-on-primary mb-4 group-hover:scale-110 transition-transform">
                <span className="material-symbols-outlined">music_note</span>
              </div>
              <h5 className="font-bold text-lg mb-2">Music &amp; Dance</h5>
              <p className="text-sm text-on-surface-variant">Our orchestra performed at the National Theatre for the Cultural Fest.</p>
            </div>
          </div>
        </section>

        {/* Timeline of Excellence */}
        <section className="px-margin-desktop py-section-gap overflow-hidden">
          <h2 className="font-headline-lg text-headline-lg text-center mb-16">The Journey of Excellence</h2>
          <div className="relative max-w-4xl mx-auto">
            <div className="absolute left-1/2 -translate-x-1/2 h-full w-1 timeline-line"></div>
            <div className="relative mb-16 flex items-center justify-between">
              <div className="w-5/12 text-right hidden md:block">
                <h4 className="font-bold text-primary text-xl">The Beginning</h4>
                <p className="text-on-surface-variant">St. Andrews founded with 50 students.</p>
              </div>
              <div className="z-10 w-10 h-10 bg-primary border-4 border-white rounded-full shadow-md flex items-center justify-center text-white font-bold">2010</div>
              <div className="w-5/12 md:w-5/12 pl-8 md:pl-0">
                <div className="md:hidden">
                  <h4 className="font-bold text-primary text-xl">The Beginning</h4>
                  <p className="text-on-surface-variant">St. Andrews founded with 50 students.</p>
                </div>
              </div>
            </div>
            <div className="relative mb-16 flex items-center justify-between flex-row-reverse">
              <div className="w-5/12 text-left hidden md:block">
                <h4 className="font-bold text-secondary text-xl">First National Recognition</h4>
                <p className="text-on-surface-variant">Awarded for 'Best Innovative Pedagogy'.</p>
              </div>
              <div className="z-10 w-10 h-10 bg-secondary border-4 border-white rounded-full shadow-md flex items-center justify-center text-white font-bold">2015</div>
              <div className="w-5/12 md:w-5/12 pr-8 md:pr-0 md:text-right">
                <div className="md:hidden">
                  <h4 className="font-bold text-secondary text-xl">First National Recognition</h4>
                  <p className="text-on-surface-variant">Awarded for 'Best Innovative Pedagogy'.</p>
                </div>
              </div>
            </div>
            <div className="relative mb-16 flex items-center justify-between">
              <div className="w-5/12 text-right hidden md:block">
                <h4 className="font-bold text-tertiary text-xl">Sports Hub Certification</h4>
                <p className="text-on-surface-variant">Inauguration of the Olympic-sized pool and Arena.</p>
              </div>
              <div className="z-10 w-10 h-10 bg-tertiary border-4 border-white rounded-full shadow-md flex items-center justify-center text-white font-bold">2019</div>
              <div className="w-5/12 md:w-5/12 pl-8 md:pl-0">
                <div className="md:hidden">
                  <h4 className="font-bold text-tertiary text-xl">Sports Hub Certification</h4>
                  <p className="text-on-surface-variant">Inauguration of the Olympic-sized pool and Arena.</p>
                </div>
              </div>
            </div>
            <div className="relative mb-16 flex items-center justify-between flex-row-reverse">
              <div className="w-5/12 text-left hidden md:block">
                <h4 className="font-bold text-primary text-xl">Global Excellence</h4>
                <p className="text-on-surface-variant">Ranked #1 in Academic Excellence by World School Rankings.</p>
              </div>
              <div className="z-10 w-10 h-10 bg-primary border-4 border-white rounded-full shadow-md flex items-center justify-center text-white font-bold">2023</div>
              <div className="w-5/12 md:w-5/12 pr-8 md:pr-0 md:text-right">
                <div className="md:hidden">
                  <h4 className="font-bold text-primary text-xl">Global Excellence</h4>
                  <p className="text-on-surface-variant">Ranked #1 in Academic Excellence by World School Rankings.</p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Hall of Fame */}
        <section className="px-margin-desktop py-section-gap bg-on-primary-fixed-variant text-on-primary">
          <div className="text-center mb-12">
            <h2 className="font-headline-lg text-headline-lg">Hall of Fame</h2>
            <p className="opacity-80">Words of wisdom from our distinguished alumni.</p>
          </div>
          <div className="flex flex-col md:flex-row gap-8 justify-center">
            <div className="glass p-8 rounded-xl max-w-md relative">
              <span className="material-symbols-outlined absolute top-4 left-4 text-primary-fixed-dim opacity-40 text-4xl">format_quote</span>
              <p className="italic mb-6 relative z-10 text-lg">"St. Andrews didn't just teach me formulas; it taught me how to dream and the discipline to achieve those dreams. The mentorship here is unparalleled."</p>
              <div className="flex items-center gap-4">
                <div className="w-14 h-14 rounded-full overflow-hidden">
                  <img className="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB4EzGjiXkaIxk6MVdHXNNFcCobfcPmMZlQpfiEmM_KtNsy8DnpDPMCYLSvoI7IAzROIWnI32naG2_kuM0iClfl_9LLsAzlsR8GJ00KgSioP_6AUsU-DHYwPyIOPyA6vpaDvAAzTvBWnx8C3w3eeoX2pQgFsZFG2ZoEeLorbK1EVJsBpbA_caVhoHQHVd6omVhNW1gCezniZfDLVaIf7WUqv4vqw9BGylHA9LHOo0o2953sh7WTJFdSew" />
                </div>
                <div>
                  <p className="font-bold">Dr. Ethan Hunt</p>
                  <p className="text-sm opacity-70">Alumni Class of 2012 | NASA Scientist</p>
                </div>
              </div>
            </div>
            <div className="glass p-8 rounded-xl max-w-md relative">
              <span className="material-symbols-outlined absolute top-4 left-4 text-primary-fixed-dim opacity-40 text-4xl">format_quote</span>
              <p className="italic mb-6 relative z-10 text-lg">"The culture of celebration at the school motivated me to explore my boundaries. I found my voice in the school's music room and never looked back."</p>
              <div className="flex items-center gap-4">
                <div className="w-14 h-14 rounded-full overflow-hidden">
                  <img className="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCTgcBtmPiCckx2ZuNaEL_FUGBlpkRSg0_f42vZKKhrTkbJ44HA6j9ZZPCuVYoXBWB5QfBKkJEhe00abOvWPxGJy72de1lsEC4ZgLHtgDeHNPg-mVacfvrLz7fqpHsGb2PCZmHaT43SLfrdkjcW7nFUKkYqnSMJ8-HmRW4XAL4-D5cyoVbZRtVTVfhT3E7ZD7x14NvP0lMwr6EoiPjDpKNCchXy3HXMytFaVwITDyeeQ3V7MAEzeEp1qA" />
                </div>
                <div>
                  <p className="font-bold">Sophia Rossi</p>
                  <p className="text-sm opacity-70">Alumni Class of 2015 | Opera Performer</p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Celebration Moments Gallery Masonry */}
        <section className="px-margin-desktop py-section-gap">
          <h2 className="font-headline-lg text-headline-lg text-center mb-12">Celebration Moments</h2>
          <div className="masonry">
            <div className="mb-6 break-inside-avoid">
              <img className="w-full rounded-lg shadow-md hover:shadow-xl transition-shadow" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDADrBPywCBRgkVoa9FE_NddFYQunznvfbP4qms2HduDVNmnmUGQN4W6eV-eHqkdPYApoKGYp05rEjfRgYD1ICl6uf2jBcIjEGElrbSwSRBxD3uK_2-U1wb-IiSMBDBK5VoJi3886Tt2_WTM2fY0KiFHt13tZYNewej0w0zL5R56ekwVESpwfVrhQaTTgPLrqEfxndZZytMU0yctyun7o_yYowVCfaE_d1plEFQpfIjhlZwdZGHL7n8yg" />
            </div>
            <div className="mb-6 break-inside-avoid">
              <img className="w-full rounded-lg shadow-md hover:shadow-xl transition-shadow" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCezRsa_NerCueOrsWCf_TzYPxtZgWbcLtvUomawzu-6NpE3OiF11HUX3RcqsXPDgFdhlsLVgDDXip6AbCmvn6ard8fHqQYko3GrsKEGl79U-DfkXesCVLV4d2-3HLWOVHv-_fBxUNFkYWlQdsGjtIDIxvs4jQdX7WWqlNdW0_y_-94kJ9TLXW2WFwiJGCPNzH-j_tk5_0-cmocgs_De3PVnvmui0sNTtvp-A132JJWYqQnvngwzLdOxQ" />
            </div>
            <div className="mb-6 break-inside-avoid">
              <img className="w-full rounded-lg shadow-md hover:shadow-xl transition-shadow" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDbicjCGwlFSft22ys3RJKzP6n5B8RAB7WUQuhSRFG7EbiQReWq8TduXJpWGKagu64tjZ1IDiiouwodpkzmdx49fUfeC36LlRQ2SIwZn9QWEAxA86m0lCIqxN71SmCLtsU-IEo35wVqP7kf_OzGBHDfyAQg1WR_HEiG5ytB2M_qQL2svMHYKDj8OAgCvxPJTXtK9epSTiUmCQZh6Bq3jgI7W-w69DXpKAaRo1nlD01M_t_ES4-NyQf5tg" />
            </div>
            <div className="mb-6 break-inside-avoid">
              <img className="w-full rounded-lg shadow-md hover:shadow-xl transition-shadow" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBoR_51plbT2uLlL-C2MqDK75N_ewa1VjfW4-kZIn1ye-2owwDml3ELDNFC_2Xhd51M0JjzRX33wzCDWEd9rpVnvK5exMsSEJIkJm9KN-hyWj-ylYf4NXKllaTEl-lj9C-yjgNflqZ-MnlZRbCHKoBTgEE8qofzfl97CDWFVS7bAAE_Mtj7SDYdIlpy7TDCGKjkFfzvKLzesFCBnQi0RyI2VIpmUJCcMzIbmm9xUf-W9g8UYSop2Y1I0w" />
            </div>
            <div className="mb-6 break-inside-avoid">
              <img className="w-full rounded-lg shadow-md hover:shadow-xl transition-shadow" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDIUL_7Fp4EF52Gvb1h9ORR6rrq7AnX1oY8tmBCmSdM4V3D0Vx5j4axkyfxA3fiqg6nKHUuzjOOOXJcv9CxzZM-0_4gKv_EtwGjaOWWmtwBq9Hw8OBmJoJ6JJIy5hjxTzhc2W5xLlHLfZirnL60VsTvoZqMKmZHDTwTQeSFQw2gWrlO0hQi0q2xPmBgR8MbtR3QR1w77dAHpiS5KupiypcMeduyxPvw-zebwDM-1AjKkY9pM4C7_VaXkg" />
            </div>
            <div className="mb-6 break-inside-avoid">
              <img className="w-full rounded-lg shadow-md hover:shadow-xl transition-shadow" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBS__XuPBYwKoLMOz5vGmIWRTzean_EJmT5i4FPGbDDTXKK3b23daXRTyh7t4-AEDTCKCzJ8dlAwg8nJyI6dszqEt05HEJDiSlkl1XYsDGQoQX6exu-q0A3Qf6sXDOgDQyv75vXfrNSsasdQ7rVSNP2NDfIJ48S_Ac4w-MGAb-pilVeQCoNGDzuD9Nj9NMkIXDpVuEyqVIPcJ7elf6CvSIfsPJX18EjdRVKKvK3vvXHjmokLa_a9dccHw" />
            </div>
          </div>
        </section>

        {/* CTA Section */}
        <section className="px-margin-desktop py-section-gap">
          <div className="bg-primary-container rounded-xl p-12 text-center relative overflow-hidden">
            <div className="absolute top-0 right-0 w-64 h-64 bg-white/20 rounded-full -mr-32 -mt-32"></div>
            <div className="absolute bottom-0 left-0 w-48 h-48 bg-white/20 rounded-full -ml-24 -mb-24"></div>
            <div className="relative z-10">
              <h2 className="font-headline-xl text-headline-xl text-on-primary-container mb-6">Every Achievement Begins with a Dream</h2>
              <p className="text-on-primary-container/80 text-xl max-w-2xl mx-auto mb-10">Join a community that celebrates your child's unique path and nurtures their potential to the fullest.</p>
              <div className="flex flex-wrap justify-center gap-4">
                <Link to="/admissions" className="bg-primary text-on-primary px-10 py-4 rounded-full font-bold shadow-lg hover:scale-105 transition-transform flex items-center justify-center">Apply for Admission</Link>
                <Link to="/gallery" className="bg-white text-primary px-10 py-4 rounded-full font-bold shadow-lg hover:scale-105 transition-transform flex items-center justify-center">View Gallery</Link>
                <Link to="/contact" className="border-2 border-white text-white px-10 py-4 rounded-full font-bold hover:bg-white/10 transition-colors flex items-center justify-center">Contact School</Link>
              </div>
            </div>
          </div>
        </section>
      </main>

      <Footer />
    </div>
  );
}
