{% load static %}

<style>
    /* Import Google Fonts */
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Raleway:wght@600;700;800;900&display=swap');
    
    .hero-section {
        font-family: 'Inter', sans-serif;
    }
    
    .hero-heading {
        font-family: 'Poppins', sans-serif;
    }
    
    .hero-accent {
        font-family: 'Raleway', sans-serif;
    }
    
    /* Animated Background Blobs */
    @keyframes float {
        0%, 100% { transform: translate(0, 0) rotate(0deg); }
        33% { transform: translate(30px, -50px) rotate(120deg); }
        66% { transform: translate(-20px, 20px) rotate(240deg); }
    }
    
    @keyframes float-reverse {
        0%, 100% { transform: translate(0, 0) rotate(0deg); }
        33% { transform: translate(-30px, 50px) rotate(-120deg); }
        66% { transform: translate(20px, -20px) rotate(-240deg); }
    }
    
    @keyframes pulse-slow {
        0%, 100% { opacity: 0.4; transform: scale(1); }
        50% { opacity: 0.6; transform: scale(1.1); }
    }
    
    @keyframes fade-in-up {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes bounce-subtle {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    
    @keyframes shimmer {
        0% { background-position: -1000px 0; }
        100% { background-position: 1000px 0; }
    }
    
    .blob {
        position: absolute;
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        opacity: 0.15;
        filter: blur(60px);
    }
    
    .blob-1 {
        width: 500px;
        height: 500px;
        background: linear-gradient(45deg, #10b981, #3b82f6);
        top: -10%;
        left: -10%;
        animation: float 20s ease-in-out infinite;
    }
    
    .blob-2 {
        width: 400px;
        height: 400px;
        background: linear-gradient(135deg, #f59e0b, #ef4444);
        bottom: -5%;
        right: -5%;
        animation: float-reverse 15s ease-in-out infinite;
    }
    
    
    .dark .blob-1 {
        background: linear-gradient(45deg, #059669, #2563eb);
        opacity: 0.08;
    }
    
    .dark .blob-2 {
        background: linear-gradient(135deg, #d97706, #dc2626);
        opacity: 0.08;
    }
    
    .hero-content {
        animation: fade-in-up 1s ease-out;
    }
    
    .stat-card {
        animation: fade-in-up 1s ease-out;
        animation-delay: 0.3s;
        opacity: 0;
        animation-fill-mode: forwards;
    }
    
    .cta-button {
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
    }
    
    .cta-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        /* Reduced sheen opacity for better contrast in light mode */
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
        transition: left 0.5s ease;
    }
    
    .cta-button:hover::before {
        left: 100%;
    }
    
    .feature-icon {
        animation: bounce-subtle 3s ease-in-out infinite;
    }
    
    .gradient-text {
        background: linear-gradient(135deg, #10b981 0%, #3b82f6 50%, #8b5cf6 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        background-size: 200% 200%;
        animation: shimmer 3s linear infinite;
    }
    
    .dark .gradient-text {
        background: linear-gradient(135deg, #34d399 0%, #60a5fa 50%, #a78bfa 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
</style>

<div class="hero-section relative flex items-center overflow-hidden bg-gradient-to-br from-gray-50 via-emerald-50/20 to-blue-50/20 dark:from-slate-950 dark:via-slate-900 dark:to-slate-900" style="max-height: 70vh; min-height: 500px;">
    <!-- Animated Background Blobs (Max 2) -->
    <div class="blob blob-1"></div>
    <div class="blob blob-2"></div>
    
    <!-- Main Content -->
    <div class="relative z-10 max-w-6xl mx-auto px-4 py-10">
        <div class="hero-content flex flex-col text-center max-w-4xl mx-auto">
            <!-- Badge -->
            <div class="inline-flex items-center gap-2 px-4 py-2 bg-emerald-100 dark:bg-emerald-900/30 rounded-full mb-5 mx-auto">
                <span class="relative flex h-2 w-2">
                    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                    <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
                </span>
                <span class="text-[13px] font-semibold text-emerald-700 dark:text-emerald-400">Trusted by 5,000+ Students</span>
            </div>
            
            <!-- Main Heading -->
            <h1 class="font-raleway text-4xl md:text-5xl font-extrabold tracking-tight mb-4 leading-tight">
                <span class="text-gray-900 dark:text-white">Practice Daily,</span>
                <br>
                <span class="gradient-text">Succeed Surely</span>
            </h1>
            
            <!-- Subheading -->
            <p class="text-sm md:text-base text-gray-600 dark:text-gray-300 mb-2 max-w-2xl mx-auto">
                There's no shortcut to success, only <span class="font-semibold text-emerald-600 dark:text-emerald-400">consistent practice</span>.
            </p>
            <p class="text-[13px] md:text-sm text-gray-500 dark:text-gray-400 mb-8 max-w-xl mx-auto">
                Your preparation, your pace — the path to confident success.
            </p>
            
            <!-- CTA Buttons -->
            <div class="flex flex-col sm:flex-row gap-3 justify-center items-center mb-10">
                <a href="{% url 'app:mcq_test' %}" data-turbo="false" aria-label="Start Practicing"
                   class="group inline-flex items-center gap-2 text-sm font-semibold px-3 py-2 rounded-full transition-all duration-200 text-emerald-600 hover:text-emerald-700 dark:text-emerald-400 dark:hover:text-emerald-300">
                    <span>Start Practicing</span>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-current transform transition-transform duration-200 group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </a>
                
                <a href="#bundles" aria-label="View Plans" 
                   class="group inline-flex items-center gap-2 text-sm font-medium px-3 py-2 rounded-full transition-all duration-200 text-red-600 hover:text-red-700 hover:underline dark:text-amber-400 dark:hover:text-amber-300">
                    <span>View Plans</span>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-current transform transition-transform duration-200 group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </a>
            </div>
            
            <!-- Stats Cards removed upon request -->
        </div>
    </div>
</div>