<?php include 'includes/header.php'; ?>

<!-- Hero Section -->
<section class="relative min-h-screen bg-gradient-to-br from-green-900 via-green-800 to-green-900 overflow-hidden">
    <!-- Animated Background Pattern -->
    <div class="absolute inset-0 opacity-10">
        <div class="absolute inset-0" style="background-image: url('data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zM22.343 0L13.857 8.485 15.272 9.9l7.9-7.9h-.83zm5.657 0L19.514 8.485 20.93 9.9l8.485-8.485h-1.415zM32.372 0L26.8 5.657 28.214 7.07 36.1 0h-3.728zM32 0l8.485 8.485-1.414 1.414L30.586 1.414 32 0zm18.627 0l2.83 2.828-1.415 1.415L49.212 1.415 50.627 0zM0 0l2.828 2.828-1.414 1.414L0 2.828V0zM5.373 0L8.2 2.828 6.787 4.243 4.373 1.83 5.373 0zm5.657 0l3.657 3.657-1.414 1.414L9.03 0h2zm5.657 0l3.657 3.657-1.414 1.414L14.686 0h2zm5.657 0l3.657 3.657-1.414 1.414L20.343 0h2zm5.657 0l3.657 3.657-1.414 1.414L26 0h2zm5.657 0l3.657 3.657-1.414 1.414L31.657 0h2zm5.657 0l3.657 3.657-1.414 1.414L37.314 0h2zm5.657 0l3.657 3.657-1.414 1.414L42.97 0h2z\' fill=\'%23ffffff\' fill-opacity=\'1\' fill-rule=\'evenodd\'/%3E%3C/svg%3E')"></div>
    </div>



    

    <!-- Hero Content -->
    <!-- <div class="relative container mx-auto px-4 py-24">
        <div class="grid lg:grid-cols-2 gap-12 items-center">
             Text Content 
            <div class="text-white space-y-8">
                <h1 class="text-5xl md:text-6xl font-bold leading-tight animate-fade-in">
                    Begin Your Journey of 
                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-green-300 to-emerald-300">
                        Islamic Knowledge
                    </span>
                </h1>
                <p class="text-xl text-green-100 animate-fade-in-delay-1">
                    Join Jamia Shere Rabbani Mananwala and embark on a transformative educational journey guided by expert scholars and comprehensive Islamic studies programs.
                </p>
                <div class="flex flex-wrap gap-4 animate-fade-in-delay-2">
                    <a href="admissions.php" class="inline-flex items-center px-6 py-3 bg-white text-green-800 rounded-lg hover:bg-green-100 transition-all group">
                        <span>Begin Your Journey</span>
                        <i data-lucide="arrow-right" class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform"></i>
                    </a>
                    <a href="programs.php" class="inline-flex items-center px-6 py-3 border-2 border-white text-white rounded-lg hover:bg-white hover:text-green-800 transition-all">
                        Explore Programs
                    </a>
                </div>
            </div>

            Stats Cards 
            <div class="grid sm:grid-cols-2 gap-6">
                <div class="bg-white/10 backdrop-blur-lg rounded-2xl p-6 transform hover:scale-105 transition-all">
                    <div class="flex items-center space-x-4">
                        <div class="p-3 bg-white/10 rounded-lg">
                            <i data-lucide="users" class="w-8 h-8 text-green-300"></i>
                        </div>
                        <div>
                            <div class="text-3xl font-bold text-white counter" data-target="5000">0</div>
                            <div class="text-green-200">Students Enrolled</div>
                        </div>
                    </div>
                </div>
                <div class="bg-white/10 backdrop-blur-lg rounded-2xl p-6 transform hover:scale-105 transition-all">
                    <div class="flex items-center space-x-4">
                        <div class="p-3 bg-white/10 rounded-lg">
                            <i data-lucide="book-open" class="w-8 h-8 text-green-300"></i>
                        </div>
                        <div>
                            <div class="text-3xl font-bold text-white counter" data-target="17">0</div>
                            <div class="text-green-200">Islamic Programs</div>
                        </div>
                    </div>
                </div>
                <div class="bg-white/10 backdrop-blur-lg rounded-2xl p-6 transform hover:scale-105 transition-all">
                    <div class="flex items-center space-x-4">
                        <div class="p-3 bg-white/10 rounded-lg">
                            <i data-lucide="graduation-cap" class="w-8 h-8 text-green-300"></i>
                        </div>
                        <div>
                            <div class="text-3xl font-bold text-white counter" data-target="1000">0</div>
                            <div class="text-green-200">Graduates</div>
                        </div>
                    </div>
                </div>
                <div class="bg-white/10 backdrop-blur-lg rounded-2xl p-6 transform hover:scale-105 transition-all">
                    <div class="flex items-center space-x-4">
                        <div class="p-3 bg-white/10 rounded-lg">
                            <i data-lucide="award" class="w-8 h-8 text-green-300"></i>
                        </div>
                        <div>
                            <div class="text-3xl font-bold text-white counter" data-target="64">0</div>
                            <div class="text-green-200">Years of Excellence</div>
                        </div>
                    </div>
                </div>
            </div>
        </div> 

        Scroll Indicator 
        <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
            <div class="w-8 h-12 rounded-full border-2 border-white/30 flex items-center justify-center">
                <div class="w-1 h-3 bg-white rounded-full animate-scroll"></div>
            </div>
        </div>
    </div>
</section> -->

<!-- Quick Links -->
<section class="py-16 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <a href="admissions.php" class="group">
                <div class="relative overflow-hidden bg-white p-6 rounded-2xl shadow-lg hover:shadow-xl transition-all">
                    <div class="absolute inset-0 bg-gradient-to-r from-green-500/0 via-green-500/0 to-green-500/0 group-hover:from-green-500/5 group-hover:via-green-500/5 group-hover:to-green-500/0 transition-all duration-500"></div>
                    <div class="relative flex items-center">
                        <div class="p-3 bg-green-100 rounded-xl mr-4">
                            <i data-lucide="user-plus" class="w-6 h-6 text-green-800"></i>
                        </div>
                        <div class="flex-grow">
                            <h3 class="text-lg font-semibold text-gray-900">Admissions</h3>
                            <p class="text-sm text-gray-600">Begin your journey</p>
                        </div>
                        <i data-lucide="chevron-right" class="w-5 h-5 text-green-800 opacity-0 group-hover:opacity-100 transform group-hover:translate-x-1 transition-all"></i>
                    </div>
                </div>
            </a>
            <a href="results.php" class="group">
                <div class="relative overflow-hidden bg-white p-6 rounded-2xl shadow-lg hover:shadow-xl transition-all">
                    <div class="absolute inset-0 bg-gradient-to-r from-blue-500/0 via-blue-500/0 to-blue-500/0 group-hover:from-blue-500/5 group-hover:via-blue-500/5 group-hover:to-blue-500/0 transition-all duration-500"></div>
                    <div class="relative flex items-center">
                        <div class="p-3 bg-blue-100 rounded-xl mr-4">
                            <i data-lucide="file-text" class="w-6 h-6 text-blue-800"></i>
                        </div>
                        <div class="flex-groyw">
                            <h3 class="text-lg font-semibold text-gray-900">Results</h3>
                            <p class="text-sm text-gray-600">View your grades</p>
                        </div>
                        <i data-lucide="chevron-right" class="w-5 h-5 text-blue-800 opacity-0 group-hover:opacity-100 transform group-hover:translate-x-1 transition-all"></i>
                    </div>
                </div>
            </a>
            <a href="downloads.php" class="group">
                <div class="relative overflow-hidden bg-white p-6 rounded-2xl shadow-lg hover:shadow-xl transition-all">
                    <div class="absolute inset-0 bg-gradient-to-r from-purple-500/0 via-purple-500/0 to-purple-500/0 group-hover:from-purple-500/5 group-hover:via-purple-500/5 group-hover:to-purple-500/0 transition-all duration-500"></div>
                    <div class="relative flex items-center">
                        <div class="p-3 bg-purple-100 rounded-xl mr-4">
                            <i data-lucide="download" class="w-6 h-6 text-purple-800"></i>
                        </div>
                        <div class="flex-grow">
                            <h3 class="text-lg font-semibold text-gray-900">Downloads</h3>
                            <p class="text-sm text-gray-600">Access resources</p>
                        </div>
                        <i data-lucide="chevron-right" class="w-5 h-5 text-purple-800 opacity-0 group-hover:opacity-100 transform group-hover:translate-x-1 transition-all"></i>
                    </div>
                </div>
            </a>
            <a href="contact.php" class="group">
                <div class="relative overflow-hidden bg-white p-6 rounded-2xl shadow-lg hover:shadow-xl transition-all">
                    <div class="absolute inset-0 bg-gradient-to-r from-orange-500/0 via-orange-500/0 to-orange-500/0 group-hover:from-orange-500/5 group-hover:via-orange-500/5 group-hover:to-orange-500/0 transition-all duration-500"></div>
                    <div class="relative flex items-center">
                        <div class="p-3 bg-orange-100 rounded-xl mr-4">
                            <i data-lucide="phone" class="w-6 h-6 text-orange-800"></i>
                        </div>
                        <div class="flex-grow">
                            <h3 class="text-lg font-semibold text-gray-900">Contact</h3>
                            <p class="text-sm text-gray-600">Get in touch</p>
                        </div>
                        <i data-lucide="chevron-right" class="w-5 h-5 text-orange-800 opacity-0 group-hover:opacity-100 transform group-hover:translate-x-1 transition-all"></i>
                    </div>
                </div>
            </a>
        </div>
    </div>
</section>

<!-- Include other sections -->
<?php include 'includes/news.php'; ?>
<?php include 'includes/services.php'; ?>

<style>
@keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes scroll {
    0% { transform: translateY(0); }
    50% { transform: translateY(8px); }
    100% { transform: translateY(0); }
}

.animate-fade-in {
    opacity: 0;
    animation: fade-in 0.8s ease-out forwards;
}

.animate-fade-in-delay-1 {
    opacity: 0;
    animation: fade-in 0.8s ease-out 0.2s forwards;
}

.animate-fade-in-delay-2 {
    opacity: 0;
    animation: fade-in 0.8s ease-out 0.4s forwards;
}

.animate-scroll {
    animation: scroll 2s ease-in-out infinite;
}
</style>

<script>
// Counter Animation
function animateCounter(element) {
    const target = parseInt(element.dataset.target);
    const duration = 2000;
    const step = target / duration * 10;
    let current = 0;

    const timer = setInterval(() => {
        current += step;
        if (current >= target) {
            element.textContent = target;
            clearInterval(timer);
        } else {
            element.textContent = Math.floor(current);
        }
    }, 10);
}

// Intersection Observer for counter animation
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const counters = entry.target.querySelectorAll('.counter');
            counters.forEach(counter => animateCounter(counter));
            observer.unobserve(entry.target);
        }
    });
}, { threshold: 0.5 });

document.querySelectorAll('.counter').forEach(counter => {
    observer.observe(counter.parentElement.parentElement.parentElement);
});
</script>

<?php include 'includes/footer.php'; ?>