@extends('layouts.frontend')

@section('title', 'Welcome to Kidscholl Academy - Smart Parent Communication Portal')

@section('styles')
<style>
    /* Hero Carousel Styles */
    .hero-slider .carousel-item {
        height: 550px;
        background-color: #000;
        position: relative;
    }
    
    .hero-slider .carousel-item img {
        opacity: 0.65;
        object-fit: cover;
        height: 100%;
        width: 100%;
    }

    .carousel-caption {
        bottom: 25%;
        text-align: left;
        z-index: 10;
        max-width: 650px;
    }

    .slider-title {
        font-family: 'Fredoka', sans-serif;
        font-size: 3.5rem;
        color: #fff;
        text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
        margin-bottom: 20px;
        line-height: 1.2;
    }

    .slider-title span {
        color: var(--accent-color);
    }

    .slider-subtitle {
        font-size: 1.25rem;
        color: #F8F9FA;
        text-shadow: 1px 1px 5px rgba(0,0,0,0.4);
        margin-bottom: 30px;
    }

    /* Wave divider */
    .wave-container {
        position: relative;
        background-color: #FFFDF9;
        margin-top: -30px;
        z-index: 20;
    }

    /* Counter / Stats section */
    .stats-section {
        background: linear-gradient(135deg, var(--pastel-blue) 0%, var(--pastel-green) 100%);
        padding: 50px 0;
        border-top: 3px dashed #A7F3D0;
        border-bottom: 3px dashed #A7F3D0;
    }

    .stat-box {
        text-align: center;
        padding: 20px;
        background-color: rgba(255, 255, 255, 0.65);
        border-radius: 20px;
        border: 2px solid #fff;
        transition: all 0.3s ease;
    }

    .stat-box:hover {
        transform: translateY(-5px);
        background-color: #fff;
        box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    }

    .stat-number {
        font-family: 'Fredoka', sans-serif;
        font-size: 3rem;
        color: var(--primary-color);
        font-weight: 700;
        line-height: 1;
        margin-bottom: 10px;
    }

    .stat-label {
        font-weight: 700;
        color: var(--dark-color);
        font-size: 1.1rem;
    }

    /* Why Choose Us features */
    .feature-box {
        padding: 30px;
        background-color: #ffffff;
        border-radius: 20px;
        border-bottom: 5px solid var(--secondary-color);
        box-shadow: 0 5px 20px rgba(0,0,0,0.02);
        transition: all 0.3s ease;
        height: 100%;
    }

    .feature-box:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 30px rgba(0,0,0,0.06);
    }

    .feature-icon {
        font-size: 2.5rem;
        margin-bottom: 20px;
        display: inline-block;
    }

    /* Testimonials styles */
    .testimonials-section {
        background-color: #FFFDF9;
        position: relative;
        overflow: hidden;
    }

    .testimonial-carousel-wrap {
        max-width: 850px;
        margin: 0 auto;
        position: relative;
    }

    .testimonial-card-premium {
        background: #ffffff;
        border-radius: 30px;
        padding: 50px 40px;
        box-shadow: 0 15px 45px rgba(0, 0, 0, 0.04);
        border: 2px solid #f1f5f9;
        position: relative;
        text-align: center;
        margin: 10px auto 30px;
        transition: all 0.3s ease;
    }

    .testimonial-card-premium::before {
        content: '"';
        position: absolute;
        top: 20px;
        left: 40px;
        font-size: 6rem;
        font-family: 'Fredoka', sans-serif;
        color: var(--pastel-pink);
        line-height: 1;
        opacity: 0.7;
    }

    .testimonial-card-premium::after {
        content: '"';
        position: absolute;
        bottom: -20px;
        right: 40px;
        font-size: 6rem;
        font-family: 'Fredoka', sans-serif;
        color: var(--pastel-blue);
        line-height: 1;
        opacity: 0.7;
    }

    .testimonial-stars {
        color: #ffb800;
        font-size: 1.1rem;
        margin-bottom: 20px;
    }

    .testimonial-text {
        font-size: 1.25rem;
        line-height: 1.8;
        color: var(--dark-color);
        margin-bottom: 25px;
        position: relative;
        z-index: 2;
    }

    .parent-avatar {
        width: 75px;
        height: 75px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 15px;
        border: 4px solid var(--accent-color);
        box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    }

    /* Custom Indicators */
    .carousel-indicators-custom {
        position: static;
        margin-top: 15px;
        justify-content: center;
        display: flex;
        gap: 8px;
    }

    .carousel-indicators-custom [data-bs-target] {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: var(--secondary-color);
        border: none;
        opacity: 0.4;
        transition: all 0.3s ease;
    }

    .carousel-indicators-custom .active {
        opacity: 1;
        width: 28px;
        border-radius: 6px;
        background-color: var(--primary-color);
    }

    /* Custom Next/Prev controls */
    .carousel-control-custom {
        width: 48px;
        height: 48px;
        background-color: #ffffff;
        border: 2px solid #e2e8f0;
        border-radius: 50%;
        color: var(--dark-color);
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        transition: all 0.3s ease;
        text-decoration: none;
        box-shadow: 0 4px 12px rgba(0,0,0,0.04);
        z-index: 10;
    }

    .carousel-control-custom:hover {
        background-color: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
        box-shadow: 0 6px 16px rgba(255, 107, 107, 0.3);
    }

    .carousel-control-custom.prev-btn {
        left: -60px;
    }

    .carousel-control-custom.next-btn {
        right: -60px;
    }

    @media (max-width: 991px) {
        .carousel-control-custom {
            display: none;
        }
    }

    /* Admission CTA */
    .admission-cta {
        background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%);
        color: white;
        padding: 80px 0;
        border-radius: 30px;
        box-shadow: 0 15px 35px rgba(255, 107, 107, 0.25);
        margin-top: 60px;
        position: relative;
        overflow: hidden;
    }

    .admission-cta::before {
        content: '';
        position: absolute;
        top: -50px;
        right: -50px;
        width: 150px;
        height: 150px;
        background-color: rgba(255,255,255,0.1);
        border-radius: 50%;
    }
</style>
@endsection

@section('content')
    <!-- 1. Hero Banner Slider -->
    <section class="hero-slider">
        <div id="heroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="6000">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active"></button>
                <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1"></button>
                <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2"></button>
            </div>
            
            <div class="carousel-inner">
                <!-- Slide 1 -->
                <div class="carousel-item active">
                    <img src="https://images.unsplash.com/photo-1577896851231-70ef18881754?auto=format&fit=crop&q=80&w=1200" alt="Kids learning science">
                    <div class="container">
                        <div class="carousel-caption">
                            <h1 class="slider-title">Where Learning is a <span>Fun Adventure!</span></h1>
                            <p class="slider-subtitle">Creative classes and smart pedagogy designed to nourish child intellect, values, and team spirit.</p>
                            <div class="d-flex gap-3">
                                <a href="{{ route('parent.login') }}" class="btn btn-kids-primary">Parent Portal</a>
                                <a href="{{ route('admissions') }}" class="btn btn-kids-secondary">Admission Info</a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Slide 2 -->
                <div class="carousel-item">
                    <img src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&q=80&w=1200" alt="Kids playing in library">
                    <div class="container">
                        <div class="carousel-caption">
                            <h1 class="slider-title">Connected <span>Parent Community</span></h1>
                            <p class="slider-subtitle">Get instant notifications, participate in surveys, and track child attendance report cards seamlessly.</p>
                            <div class="d-flex gap-3">
                                <a href="{{ route('parent.login') }}" class="btn btn-kids-primary">Access Dashboard</a>
                                <a href="{{ route('about') }}" class="btn btn-kids-secondary">Learn History</a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Slide 3 -->
                <div class="carousel-item">
                    <img src="https://images.unsplash.com/photo-1544717305-2782549b5136?auto=format&fit=crop&q=80&w=1200" alt="Smart interactive classroom">
                    <div class="container">
                        <div class="carousel-caption">
                            <h1 class="slider-title">Best <span>Creative Infrastructure</span></h1>
                            <p class="slider-subtitle">Modern computer labs, Montessori activity spaces, and green athletic play areas.</p>
                            <div class="d-flex gap-3">
                                <a href="{{ route('parent.login') }}" class="btn btn-kids-primary">Parent Login</a>
                                <a href="{{ route('gallery-page') }}" class="btn btn-kids-secondary">View Albums</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
                <span class="carousel-control-next-icon"></span>
            </button>
        </div>
    </section>

    <!-- 2. Welcome to School & About School -->
    <section class="section-padding bg-white wave-container">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 mb-4 mb-lg-0">
                    <span class="badge bg-danger kids-badge mb-2">Welcome to Kidscholl</span>
                    <h2 class="text-primary mb-3">Nurturing Young Thinkers Since 2012</h2>
                    <p class="lead">At Kidscholl Academy, we believe education is a collaborative journey of discovery, fun, and character building.</p>
                    <p>Established with a handful of children, we have expanded to become a pioneer in early childhood and primary schooling. Our approach blends creative Montessori methodologies with interactive technologies, ensuring children grow into compassionate, curious, and collaborative citizens.</p>
                    <p>By keeping parents actively linked through our automated messaging logs and feedback panels, we maintain the highest standards of transparency and security.</p>
                    <a href="{{ route('about') }}" class="btn btn-kids-secondary btn-sm mt-2">Read Our Full History</a>
                </div>
                <div class="col-lg-6">
                    <img src="https://images.unsplash.com/photo-1544698310-74ea9d1c8258?auto=format&fit=crop&q=80&w=800" alt="Kids jumping" class="img-fluid rounded-5 shadow border border-5 border-white">
                </div>
            </div>
        </div>
    </section>

    <!-- 3. Principal's Message -->
    <section class="section-padding bg-light">
        <div class="container">
            <div class="row align-items-center bg-white p-4 p-md-5 rounded-4 shadow-sm border border-2 border-dashed border-info mx-1">
                <div class="col-md-3 text-center mb-4 mb-md-0">
                    <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&q=80&w=300" alt="Principal Dr. Amanda" class="img-fluid rounded-circle border border-5 border-white shadow-sm" style="width: 160px; height: 160px; object-fit: cover;">
                </div>
                <div class="col-md-9">
                    <h3 class="text-primary mb-1">Message From The Principal</h3>
                    <p class="text-muted fw-bold mb-3">Dr. Amanda Richardson, Ph.D. in Education</p>
                    <figure class="blockquote">
                        <p class="fs-6 text-secondary italic">"Education is not the filling of a pail, but the lighting of a fire. At Kidscholl, we work hand-in-hand with parents to ignite this fire. This communication portal bridges the gap, keeping you closely informed of your child's daily metrics, reports, exam announcements, and holiday details. We thank you for your constant partnership."</p>
                    </figure>
                    <a href="{{ route('principal-message') }}" class="btn btn-kids-primary btn-sm mt-2">Read Philosophy</a>
                </div>
            </div>
        </div>
    </section>

    <!-- 4. Why Choose Us -->
    <section class="section-padding bg-white">
        <div class="container">
            <h2 class="section-title">Why Parents Choose Us</h2>
            <p class="text-center text-muted mb-5">We provide unique educational resources and child security measures.</p>
            
            <div class="row">
                <div class="col-md-6 col-lg-3 mb-4">
                    <div class="feature-box text-center">
                        <span class="feature-icon text-danger"><i class="bi bi-cpu-fill"></i></span>
                        <h4 class="text-dark">Smart Classrooms</h4>
                        <p class="text-muted small mb-0">Audio-visual screens, educational games, and digital learning modules in every class.</p>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3 mb-4">
                    <div class="feature-box text-center" style="border-bottom-color: var(--primary-color);">
                        <span class="feature-icon text-primary"><i class="bi bi-shield-fill-check"></i></span>
                        <h4 class="text-dark">GPS Tracked Vans</h4>
                        <p class="text-muted small mb-0">Secure school transportation with active tracking and instant arrival alerts to parent mobiles.</p>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3 mb-4">
                    <div class="feature-box text-center" style="border-bottom-color: var(--accent-color);">
                        <span class="feature-icon text-warning"><i class="bi bi-cctv"></i></span>
                        <h4 class="text-dark">CCTV Campus</h4>
                        <p class="text-muted small mb-0">24/7 security cameras coverage in activity areas, hallways, and campuses gates.</p>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3 mb-4">
                    <div class="feature-box text-center" style="border-bottom-color: #A7F3D0;">
                        <span class="feature-icon text-success"><i class="bi bi-person-fill-check"></i></span>
                        <h4 class="text-dark">Expert Faculty</h4>
                        <p class="text-muted small mb-0">Certified educators and child counselors trained in experiential primary learning systems.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 5. Facilities Section -->
    <section class="section-padding bg-light">
        <div class="container">
            <h2 class="section-title">Our Premium Facilities</h2>
            <p class="text-center text-muted mb-5">State-of-the-art campus components built for holistic growth.</p>
            
            <div class="row">
                <div class="col-md-6 mb-4">
                    <div class="kids-card card p-4 bg-white border-start border-5 border-primary">
                        <div class="d-flex align-items-center">
                            <div class="fs-1 text-danger me-3"><i class="bi bi-book-half"></i></div>
                            <div>
                                <h4 class="text-dark mb-1">Junior Library</h4>
                                <p class="text-muted small mb-0">Hundreds of books, colorful comic albums, reading tables, and storytelling circles.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-4">
                    <div class="kids-card card p-4 bg-white border-start border-5 border-success">
                        <div class="d-flex align-items-center">
                            <div class="fs-1 text-success me-3"><i class="bi bi-laptop"></i></div>
                            <div>
                                <h4 class="text-dark mb-1">Computer Laboratory</h4>
                                <p class="text-muted small mb-0">Child-friendly coding stations, math quizzes, and guided digital literacy sessions.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-4">
                    <div class="kids-card card p-4 bg-white border-start border-5 border-warning">
                        <div class="d-flex align-items-center">
                            <div class="fs-1 text-warning me-3"><i class="bi bi-controller"></i></div>
                            <div>
                                <h4 class="text-dark mb-1">Activity & Playrooms</h4>
                                <p class="text-muted small mb-0">Montessori building block tables, clay molding sets, and puppet theatre booths.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-4">
                    <div class="kids-card card p-4 bg-white border-start border-5 border-info">
                        <div class="d-flex align-items-center">
                            <div class="fs-1 text-info me-3"><i class="bi bi-tree-fill"></i></div>
                            <div>
                                <h4 class="text-dark mb-1">Outdoor Play Area</h4>
                                <p class="text-muted small mb-0">Lush green grass fields with safety-tested swings, slides, and tracks.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 6. Latest Announcements & PTM Alerts -->
    <section class="section-padding bg-white">
        <div class="container">
            <div class="row">
                <!-- Announcements -->
                <div class="col-lg-7 mb-5 mb-lg-0">
                    <h2 class="text-primary mb-4"><i class="bi bi-megaphone-fill text-danger me-2"></i> Latest Announcements</h2>
                    <div class="pe-lg-4">
                        @forelse($announcements as $ann)
                            <div class="kids-card card p-4 mb-4">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <span class="badge kids-badge badge-{{ strtolower($ann->category) }} bg-primary text-white">
                                        {{ $ann->category }}
                                    </span>
                                    <small class="text-muted"><i class="bi bi-calendar3"></i> {{ \Carbon\Carbon::parse($ann->created_at)->format('d M Y') }}</small>
                                </div>
                                <h4 class="card-title text-dark">{{ $ann->title }}</h4>
                                <p class="card-text text-muted">{{ Str::limit($ann->description, 200) }}</p>
                                @if($ann->attachment_path)
                                    <a href="{{ asset('storage/' . $ann->attachment_path) }}" class="btn btn-sm btn-outline-danger mt-2" download>
                                        <i class="bi bi-file-earmark-pdf"></i> Download Document
                                    </a>
                                @endif
                            </div>
                        @empty
                            <p class="text-muted">No announcements posted yet.</p>
                        @endforelse
                        <div class="text-start mt-3">
                            <a href="{{ route('news-announcements') }}" class="btn btn-kids-secondary btn-sm">View All Bulletins</a>
                        </div>
                    </div>
                </div>

                <!-- PTM Alerts -->
                <div class="col-lg-5">
                    <h2 class="text-primary mb-4"><i class="bi bi-people-fill text-success me-2"></i> PTM & Meeting Alerts</h2>
                    <div class="bg-light p-4 rounded-4 shadow-sm border-top border-4 border-danger">
                        @forelse($ptmUpdates as $ptm)
                            <div class="mb-4 pb-3 border-bottom">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span class="badge bg-danger kids-badge text-white">PTM NOTICE</span>
                                    <small class="text-muted">{{ \Carbon\Carbon::parse($ptm->created_at)->format('d M Y') }}</small>
                                </div>
                                <h5 class="text-dark">{{ $ptm->title }}</h5>
                                <p class="text-muted small mb-0">{{ Str::limit($ptm->description, 150) }}</p>
                                <a href="{{ route('parent.login') }}" class="btn btn-sm btn-link p-0 text-danger fw-bold mt-2 text-decoration-none">
                                    View Slots on Portal <i class="bi bi-arrow-right"></i>
                                </a>
                            </div>
                        @empty
                            <p class="text-muted">No PTM updates scheduled.</p>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 7. Upcoming Events -->
    <section class="section-padding bg-light">
        <div class="container">
            <h2 class="section-title">Upcoming School Events</h2>
            <p class="text-center text-muted mb-5">Timelines of athletics, cultural days, and interactive parent workshops.</p>
            
            @php
                $eventImages = [
                    'PTM Meeting' => 'https://images.unsplash.com/photo-1544717305-2782549b5136?auto=format&fit=crop&q=80&w=400',
                    'Annual Function' => 'https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&q=80&w=400',
                    'Sports Day' => 'https://images.unsplash.com/photo-1544698310-74ea9d1c8258?auto=format&fit=crop&q=80&w=400',
                    'Parent Workshop' => 'https://images.unsplash.com/photo-1577896851231-70ef18881754?auto=format&fit=crop&q=80&w=400'
                ];
                $fallbackEventImg = 'https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&q=80&w=400';
            @endphp

            <div class="row">
                @forelse($events as $event)
                    <div class="col-md-6 col-lg-3 mb-4">
                        <div class="kids-card card p-3 border-start border-5 border-info bg-white">
                            <img src="{{ $eventImages[$event->title] ?? $fallbackEventImg }}" alt="{{ $event->title }}" class="img-fluid rounded-3 mb-3" style="height: 150px; width: 100%; object-fit: cover;">
                            <div class="text-primary fw-bold small mb-2">
                                <i class="bi bi-calendar3"></i> {{ \Carbon\Carbon::parse($event->event_date)->format('d M Y') }}
                            </div>
                            <h5 class="text-dark">{{ $event->title }}</h5>
                            <p class="text-muted small mb-3">{{ Str::limit($event->description, 100) }}</p>
                            <span class="small text-secondary fw-bold">
                                <i class="bi bi-geo-alt-fill"></i> {{ $event->location }}
                            </span>
                        </div>
                    </div>
                @empty
                    <div class="col-12 text-center">
                        <p class="text-muted">No upcoming events listed.</p>
                    </div>
                @endforelse
            </div>
        </div>
    </section>

    <!-- 8. Photo Gallery Highlights -->
    <section class="section-padding bg-white">
        <div class="container">
            <h2 class="section-title">Photo Gallery Highlights</h2>
            <p class="text-center text-muted mb-5">Memorable captures of science exhibitions, crafts, and competitions.</p>
            
            <div class="row">
                <div class="col-md-4 mb-4">
                    <div class="kids-card card">
                        <img src="https://images.unsplash.com/photo-1564069114385-153434316c06?auto=format&fit=crop&q=80&w=500" alt="Exhibition" style="height: 230px; object-fit: cover;">
                        <div class="card-body bg-light text-center">
                            <h5 class="mb-0">Science Fair 2026</h5>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="kids-card card">
                        <img src="https://images.unsplash.com/photo-1544698310-74ea9d1c8258?auto=format&fit=crop&q=80&w=500" alt="Sports Meet" style="height: 230px; object-fit: cover;">
                        <div class="card-body bg-light text-center">
                            <h5 class="mb-0">Sports Meet Medals</h5>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="kids-card card">
                        <img src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&q=80&w=500" alt="Annual Day" style="height: 230px; object-fit: cover;">
                        <div class="card-body bg-light text-center">
                            <h5 class="mb-0">Annual Function Play</h5>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-3">
                <a href="{{ route('gallery-page') }}" class="btn btn-kids-secondary">Explore Media Gallery</a>
            </div>
        </div>
    </section>

    <!-- 9. Achievements & Counters -->
    <section class="stats-section">
        <div class="container">
            <div class="row text-center">
                <div class="col-6 col-md-3 mb-4 mb-md-0">
                    <div class="stat-box">
                        <div class="stat-number">500+</div>
                        <div class="stat-label">Active Students</div>
                    </div>
                </div>
                <div class="col-6 col-md-3 mb-4 mb-md-0">
                    <div class="stat-box">
                        <div class="stat-number">50+</div>
                        <div class="stat-label">Qualified Faculty</div>
                    </div>
                </div>
                <div class="col-6 col-md-3 mb-4 mb-md-0">
                    <div class="stat-box">
                        <div class="stat-number">2</div>
                        <div class="stat-label">Campus Branches</div>
                    </div>
                </div>
                <div class="col-6 col-md-3 mb-4 mb-md-0">
                    <div class="stat-box">
                        <div class="stat-number">14+</div>
                        <div class="stat-label">Annual Awards</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 10. Parent Testimonials (Sliding Carousel) -->
    <section class="section-padding testimonials-section bg-white">
        <div class="container">
            <h2 class="section-title">What Parents Say</h2>
            <p class="text-center text-muted mb-5">Reviews from our active school families.</p>
            
            <div class="testimonial-carousel-wrap">
                <div id="testimonialsCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000">
                    
                    <!-- Carousel Indicators -->
                    <div class="carousel-indicators-custom">
                        <button type="button" data-bs-target="#testimonialsCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                        <button type="button" data-bs-target="#testimonialsCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
                        <button type="button" data-bs-target="#testimonialsCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
                        <button type="button" data-bs-target="#testimonialsCarousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
                    </div>

                    <!-- Carousel Slides -->
                    <div class="carousel-inner">
                        <!-- Slide 1 -->
                        <div class="carousel-item active">
                            <div class="testimonial-card-premium">
                                <div class="testimonial-stars">
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                </div>
                                <p class="testimonial-text">"Kidscholl has been a second home for my daughter Lily. The focus on hands-on activities is brilliant! And the parent portal makes switching between Lily and Jimmy's profiles extremely fast and easy. I get instant notices on my phone."</p>
                                <div class="d-flex align-items-center justify-content-center">
                                    <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&q=80&w=150" alt="Parent Sarah" class="parent-avatar">
                                    <div class="text-start">
                                        <h5 class="text-dark mb-0 fw-bold">Sarah Connor</h5>
                                        <p class="text-muted small mb-0">Mother of Lily & Jimmy (LKG / Nursery)</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Slide 2 -->
                        <div class="carousel-item">
                            <div class="testimonial-card-premium">
                                <div class="testimonial-stars">
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                </div>
                                <p class="testimonial-text">"The transparency is amazing. I can check daily attendance logs, download datesheets for exams, and reply to surveys instantly. It is reassuring to see the school prioritizing child safety and security logs."</p>
                                <div class="d-flex align-items-center justify-content-center">
                                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&q=80&w=150" alt="Parent Robert" class="parent-avatar">
                                    <div class="text-start">
                                        <h5 class="text-dark mb-0 fw-bold">Robert Miller</h5>
                                        <p class="text-muted small mb-0">Father of Jimmy Miller (Nursery)</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Slide 3 -->
                        <div class="carousel-item">
                            <div class="testimonial-card-premium">
                                <div class="testimonial-stars">
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                </div>
                                <p class="testimonial-text">"The interactive smart classrooms and dedicated teachers have completely changed Sophia's attitude towards learning. She looks forward to school every day! The portal keeps us connected with her teachers in real-time."</p>
                                <div class="d-flex align-items-center justify-content-center">
                                    <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&q=80&w=150" alt="Parent Michael" class="parent-avatar">
                                    <div class="text-start">
                                        <h5 class="text-dark mb-0 fw-bold">Michael Vance</h5>
                                        <p class="text-muted small mb-0">Father of Sophia Vance (Class 2)</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Slide 4 -->
                        <div class="carousel-item">
                            <div class="testimonial-card-premium">
                                <div class="testimonial-stars">
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                </div>
                                <p class="testimonial-text">"Finding a nursery campus with CCTV, security, and GPS tracking was my top priority. Kidscholl delivers not just child safety but also an incredible Montessori curriculum that has helped Alex learn values and play safely."</p>
                                <div class="d-flex align-items-center justify-content-center">
                                    <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&q=80&w=150" alt="Parent Elena" class="parent-avatar">
                                    <div class="text-start">
                                        <h5 class="text-dark mb-0 fw-bold">Elena Rostova</h5>
                                        <p class="text-muted small mb-0">Mother of Alex Rostova (Nursery)</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Slide Controls -->
                    <a class="carousel-control-custom prev-btn" href="#testimonialsCarousel" role="button" data-bs-slide="prev">
                        <i class="bi bi-chevron-left"></i>
                    </a>
                    <a class="carousel-control-custom next-btn" href="#testimonialsCarousel" role="button" data-bs-slide="next">
                        <i class="bi bi-chevron-right"></i>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- 11. Admission Open CTA -->
    <section class="container mb-5">
        <div class="admission-cta text-center">
            <h2 class="display-6 fw-bold mb-3">Admissions Open for 2026-27 Session</h2>
            <p class="lead mb-4 text-white-50" style="max-width: 600px; margin: 0 auto;">Give your child a colorful, smart, and creative education foundation. Download guidelines or submit a campus inquiry form today.</p>
            <div class="d-flex justify-content-center gap-3 mt-4">
                <a href="{{ route('admissions') }}" class="btn btn-kids-secondary px-5 py-3 rounded-pill text-white fw-bold">Enroll Now</a>
                <a href="{{ route('contact') }}" class="btn btn-light px-5 py-3 rounded-pill text-danger fw-bold">Contact Campus</a>
            </div>
        </div>
    </section>
@endsection