{% load static %}

<style>
    @keyframes pulse-smooth {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.7; }
    }
    
    @keyframes slide-right {
        from { transform: translateX(-8px); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }
    
    @keyframes float-icon {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-8px); }
    }
    
    @keyframes rotate-slow {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    
    .feature-list-item {
        animation: slide-right 0.5s ease-out backwards;
    }
    
    .feature-list-item:nth-child(1) { animation-delay: 0.1s; }
    .feature-list-item:nth-child(2) { animation-delay: 0.2s; }
    .feature-list-item:nth-child(3) { animation-delay: 0.3s; }
    .feature-list-item:nth-child(4) { animation-delay: 0.4s; }
    .feature-list-item:nth-child(5) { animation-delay: 0.5s; }
    
    .feature-icon {
        animation: float-icon 3s ease-in-out infinite;
    }
    
    .feature-number {
        animation: rotate-slow 20s linear infinite;
    }
</style>

<div class="h-full py-16 md:py-20 w-full bg-gradient-to-b from-gray-50 to-white dark:from-slate-900 dark:to-slate-950">
    <div class="w-[90%] md:w-[80%] max-w-[1280px] mx-auto flex flex-col gap-16">
        
        <!-- Section Header -->
        <div class="text-center mb-4">
            <h1 class="text-3xl md:text-4xl xl:text-5xl font-black text-gray-900 dark:text-white">
                All Our <span class="bg-gradient-to-r from-emerald-600 to-blue-600 dark:from-emerald-400 dark:to-blue-400 text-transparent bg-clip-text">Features</span>
            </h1>
            <p class="text-gray-600 dark:text-gray-400 mt-2 text-sm md:text-base">Comprehensive tools designed for modern learning</p>
        </div>

        <!-- Feature 1 -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center group">
            <div class="flex flex-col gap-4">
                <div class="flex items-center gap-3 mb-2">
                    <div class="relative w-12 h-12 bg-gradient-to-br from-emerald-100 to-emerald-50 dark:from-emerald-900/40 dark:to-emerald-900/20 rounded-xl flex items-center justify-center feature-icon">
                        <svg class="w-6 h-6 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/>
                        </svg>
                    </div>
                    <h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white">
                        1. Student Registration & Profile
                    </h2>
                </div>
                <ul class="space-y-3 text-gray-600 dark:text-gray-400 ml-15">
                    <li class="flex items-start gap-3 feature-list-item">
                        <div class="relative">
                            <svg class="h-5 w-5 text-emerald-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                        </div>
                        <span>Create account via email, phone, or social media</span>
                    </li>
                    <li class="flex items-start gap-3 feature-list-item">
                        <svg class="h-5 w-5 text-emerald-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                        <span>Unique ID for each student</span>
                    </li>
                    <li class="flex items-start gap-3 feature-list-item">
                        <svg class="h-5 w-5 text-emerald-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                        <span>Profile updates, class upgrades & data storage</span>
                    </li>
                    <li class="flex items-start gap-3 feature-list-item">
                        <svg class="h-5 w-5 text-emerald-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                        <span>Role-based access (Student, Parent, Admin)</span>
                    </li>
                </ul>
            </div>
            <div class="flex items-center justify-center md:justify-end">
                <div class="relative">
                    <div class="absolute inset-0 bg-gradient-to-r from-emerald-400 to-blue-400 rounded-3xl blur-2xl opacity-20 group-hover:opacity-30 transition-opacity"></div>
                    <img src="{% static 'img/subscription/sudent-reg-png.png' %}" alt="Student Registration" class="w-64 h-auto relative rounded-2xl shadow-lg">
                </div>
            </div>
        </div>

        <!-- Feature 2 -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center group">
            <div class="flex items-center justify-center md:justify-start order-2 md:order-1">
                <div class="relative">
                    <div class="absolute inset-0 bg-gradient-to-r from-blue-400 to-purple-400 rounded-3xl blur-2xl opacity-20 group-hover:opacity-30 transition-opacity"></div>
                    <img src="{% static 'img/subscription/img-hero.png' %}" alt="Subscription Model" class="w-64 h-auto relative rounded-2xl shadow-lg">
                </div>
            </div>
            <div class="flex flex-col gap-4 order-1 md:order-2">
                <div class="flex items-center gap-3 mb-2">
                    <div class="relative w-12 h-12 bg-gradient-to-br from-blue-100 to-blue-50 dark:from-blue-900/40 dark:to-blue-900/20 rounded-xl flex items-center justify-center feature-icon">
                        <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white">
                        2. Subscription & Payment
                    </h2>
                </div>
                <ul class="space-y-3 text-gray-600 dark:text-gray-400 ml-15">
                    <li class="flex items-start gap-3 feature-list-item">
                        <svg class="h-5 w-5 text-blue-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                        <span><strong>Annual Subscription:</strong> Full year access to all subjects</span>
                    </li>
                    <li class="flex items-start gap-3 feature-list-item">
                        <svg class="h-5 w-5 text-blue-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                        <span><strong>Subject-based:</strong> Subscribe to specific subjects</span>
                    </li>
                    <li class="flex items-start gap-3 feature-list-item">
                        <svg class="h-5 w-5 text-blue-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                        <span><strong>Bundle Plans:</strong> Discounted multi-subject packages</span>
                    </li>
                    <li class="flex items-start gap-3 feature-list-item">
                        <svg class="h-5 w-5 text-blue-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                        <span>Multiple payment methods supported</span>
                    </li>
                    <li class="flex items-start gap-3 feature-list-item">
                        <svg class="h-5 w-5 text-blue-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                        <span>Renewal & expiry notifications</span>
                    </li>
                </ul>
            </div>
        </div>

        <!-- Feature 3 -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center group">
            <div class="flex flex-col gap-4">
                <div class="flex items-center gap-3 mb-2">
                    <div class="relative w-12 h-12 bg-gradient-to-br from-purple-100 to-purple-50 dark:from-purple-900/40 dark:to-purple-900/20 rounded-xl flex items-center justify-center feature-icon">
                        <svg class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white">
                        3. Customized Exam Creation
                    </h2>
                </div>
                <ul class="space-y-3 text-gray-600 dark:text-gray-400 ml-15">
                    <li class="flex items-start gap-3 feature-list-item">
                        <svg class="h-5 w-5 text-purple-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                        <span>Create custom exams by selecting subjects, chapters & questions</span>
                    </li>
                    <li class="flex items-start gap-3 feature-list-item">
                        <svg class="h-5 w-5 text-purple-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                        <span>Set time limits & question counts freely</span>
                    </li>
                    <li class="flex items-start gap-3 feature-list-item">
                        <svg class="h-5 w-5 text-purple-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                        <span>Auto-generated system exams</span>
                    </li>
                    <li class="flex items-start gap-3 feature-list-item">
                        <svg class="h-5 w-5 text-purple-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                        <span>Thousands of questions (MCQ, True/False, Fill in the Blanks)</span>
                    </li>
                </ul>
            </div>
            <div class="flex items-center justify-center md:justify-end">
                <div class="relative">
                    <div class="absolute inset-0 bg-gradient-to-r from-purple-400 to-pink-400 rounded-3xl blur-2xl opacity-20 group-hover:opacity-30 transition-opacity"></div>
                    <img src="{% static 'img/subscription/customized_exm.png' %}" alt="Custom Exams" class="w-64 h-auto relative rounded-2xl shadow-lg">
                </div>
            </div>
        </div>
    </div>
</div>