<?php
/**
 * View Template: Class Selection
 * File Location: template-views/class-selection.php
 */
?>
<div class="max-w-container-max-width mx-auto">
    <section class="mb-12">
        <div class="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-8">
            <div>
                <h1 class="text-headline-lg font-headline-lg text-on-background mb-2">Select Your Class</h1>
                <p class="text-body-lg font-body-lg text-on-surface-variant">Choose a level to explore the curriculum and start learning today.</p>
            </div>
            <div onclick="openOverlay('child-switcher')" class="cursor-pointer flex items-center gap-3 bg-surface-container-low p-2 rounded-2xl border border-outline-variant">
                <div class="w-12 h-12 rounded-xl bg-warm-orange flex items-center justify-center text-white">
                    <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">person</span>
                </div>
                <div class="pr-4">
                    <p class="text-label-sm font-label-sm text-on-surface-variant">Switch Child</p>
                    <p class="text-label-lg font-label-lg text-on-surface">Tobi Adeyemi</p>
                </div>
                <span class="material-symbols-outlined text-on-surface-variant">expand_more</span>
            </div>
        </div>

        <div class="space-y-16">
            
            <div class="">
                <div class="flex items-center gap-3 mb-6">
                    <div class="w-2 h-8 bg-secondary rounded-full"></div>
                    <h2 class="text-headline-md font-headline-md text-secondary">Elementary School</h2>
                    <span class="px-3 py-1 bg-secondary-container text-on-secondary-fixed-variant text-label-sm rounded-full">Ages 3-5</span>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-8">
                    <button onclick="navigate('nursery-subject', { class_level: 'nursery_1' })" class="class-card group relative flex flex-col items-center justify-center p-12 bg-warm-orange/10 border-4 border-warm-orange rounded-[3rem] shadow-xl hover:scale-105 transition-all">
                        <div class="card-icon mb-6 w-24 h-24 flex items-center justify-center bg-warm-orange text-white rounded-full shadow-lg">
                            <span class="material-symbols-outlined text-5xl">toys</span>
                        </div>
                        <span class="text-4xl font-bold text-on-surface mb-2">N 1</span>
                        <span class="text-label-lg font-bold text-on-surface-variant">Nursery One</span>
                        <div class="absolute -bottom-4 -right-4 w-16 h-16 bg-warm-orange/20 rounded-full blur-xl"></div>
                    </button>
                    <button onclick="navigate('nursery-subject', { class_level: 'nursery_2' })" class="class-card group relative flex flex-col items-center justify-center p-12 bg-secondary-container/20 border-4 border-secondary rounded-[3rem] shadow-xl hover:scale-105 transition-all">
                        <div class="card-icon mb-6 w-24 h-24 flex items-center justify-center bg-secondary text-white rounded-full shadow-lg">
                            <span class="material-symbols-outlined text-5xl">draw</span>
                        </div>
                        <span class="text-4xl font-bold text-on-surface mb-2">N 2</span>
                        <span class="text-label-lg font-bold text-on-surface-variant">Nursery Two</span>
                        <div class="absolute -bottom-4 -right-4 w-16 h-16 bg-secondary/20 rounded-full blur-xl"></div>
                    </button>
                    <button class="class-card group relative flex flex-col items-center justify-center p-12 bg-tertiary-container/20 border-4 border-tertiary rounded-[3rem] shadow-xl hover:scale-105 transition-all">
                        <div class="card-icon mb-6 w-24 h-24 flex items-center justify-center bg-tertiary text-white rounded-full shadow-lg">
                            <span class="material-symbols-outlined text-5xl">extension</span>
                        </div>
                        <span class="text-4xl font-bold text-on-surface mb-2">Resources</span>
                        <span class="text-label-lg font-bold text-on-surface-variant">Educational Videos</span>
                        <div class="absolute -bottom-4 -right-4 w-16 h-16 bg-tertiary/20 rounded-full blur-xl"></div>
                    </button>
                </div>
            </div>
            
            <div>
                <div class="flex items-center gap-3 mb-6">
                    <div class="w-2 h-8 bg-secondary rounded-full"></div>
                    <h2 class="text-headline-md font-headline-md text-secondary">Primary School</h2>
                    <span class="px-3 py-1 bg-secondary-container text-on-secondary-fixed-variant text-label-sm rounded-full">Ages 5-11</span>
                </div>
                <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-gutter">
                    <?php 
                    $primaries = array(1 => 'One', 2 => 'Two', 3 => 'Three', 4 => 'Four', 5 => 'Five', 6 => 'Six');
                    $icons = array(1 => 'auto_stories', 2 => 'draw', 3 => 'calculate', 4 => 'biotech', 5 => 'public', 6 => 'emoji_objects');
                    foreach ($primaries as $num => $word) : ?>
                        <button onclick="navigate('subject-terms', { class_level: 'primary_<?php echo $num; ?>' })" class="class-card group relative flex flex-col items-center p-6 bg-surface-container-lowest border border-outline-variant rounded-2xl shadow-[0px_4px_20px_rgba(48,20,70,0.05)] hover:border-primary-container transition-all">
                            <div class="card-icon mb-4 w-16 h-16 flex items-center justify-center bg-soft-lilac rounded-full transition-transform">
                                <span class="material-symbols-outlined text-4xl text-primary"><?php echo $icons[$num]; ?></span>
                            </div>
                            <span class="text-headline-md font-headline-md text-on-surface">P <?php echo $num; ?></span>
                            <span class="text-label-sm text-on-surface-variant">Primary <?php echo $word; ?></span>
                        </button>
                    <?php endforeach; ?>
                </div>
            </div>

            <div>
                <div class="flex items-center gap-3 mb-6">
                    <div class="w-2 h-8 bg-tertiary-container rounded-full"></div>
                    <h2 class="text-headline-md font-headline-md text-tertiary">Junior Secondary (JSS)</h2>
                    <span class="px-3 py-1 bg-tertiary-fixed text-on-tertiary-fixed-variant text-label-sm rounded-full">Foundation Years</span>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-gutter">
                    <button onclick="navigate('subject-terms', { class_level: 'jss_1' })" class="class-card group flex items-center gap-6 p-8 bg-surface-container-lowest border border-outline-variant rounded-2xl shadow-[0px_4px_20px_rgba(48,20,70,0.05)] hover:border-primary-container transition-all text-left">
                        <div class="card-icon w-20 h-20 flex items-center justify-center bg-tertiary-fixed rounded-2xl transition-transform">
                            <span class="material-symbols-outlined text-4xl text-tertiary">import_contacts</span>
                        </div>
                        <div>
                            <span class="block text-headline-md font-headline-md text-on-surface">JSS 1</span>
                            <span class="text-body-md text-on-surface-variant">Year 7 Equivalent</span>
                        </div>
                    </button>
                    <button onclick="navigate('subject-terms', { class_level: 'jss_2' })" class="class-card group flex items-center gap-6 p-8 bg-surface-container-lowest border border-outline-variant rounded-2xl shadow-[0px_4px_20px_rgba(48,20,70,0.05)] hover:border-primary-container transition-all text-left">
                        <div class="card-icon w-20 h-20 flex items-center justify-center bg-tertiary-fixed rounded-2xl transition-transform">
                            <span class="material-symbols-outlined text-4xl text-tertiary">menu_book</span>
                        </div>
                        <div>
                            <span class="block text-headline-md font-headline-md text-on-surface">JSS 2</span>
                            <span class="text-body-md text-on-surface-variant">Year 8 Equivalent</span>
                        </div>
                    </button>
                    <button onclick="navigate('subject-terms', { class_level: 'jss_3' })" class="class-card group flex items-center gap-6 p-8 bg-surface-container-lowest border border-outline-variant rounded-2xl shadow-[0px_4px_20px_rgba(48,20,70,0.05)] hover:border-primary-container transition-all text-left">
                        <div class="card-icon w-20 h-20 flex items-center justify-center bg-tertiary-fixed rounded-2xl transition-transform">
                            <span class="material-symbols-outlined text-4xl text-tertiary">quiz</span>
                        </div>
                        <div>
                            <span class="block text-headline-md font-headline-md text-on-surface">JSS 3</span>
                            <span class="text-body-md text-on-surface-variant">BECE Preparation</span>
                        </div>
                    </button>
                </div>
            </div>

            <div>
                <div class="flex items-center gap-3 mb-6">
                    <div class="w-2 h-8 bg-primary-container rounded-full"></div>
                    <h2 class="text-headline-md font-headline-md text-primary">Senior Secondary (SS)</h2>
                    <span class="px-3 py-1 bg-primary-fixed text-on-primary-fixed-variant text-label-sm rounded-full">WAEC & JAMB Prep</span>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
                    <button onclick="navigate('subject-terms', { class_level: 'ss_1' })" class="group relative overflow-hidden class-card flex flex-col p-8 bg-surface-container-lowest border border-outline-variant rounded-2xl shadow-[0px_4px_20px_rgba(48,20,70,0.05)] hover:border-primary-container transition-all">
                        <div class="absolute top-0 right-0 w-32 h-32 bg-primary-fixed opacity-10 rounded-bl-full transform translate-x-12 -translate-y-12 transition-transform group-hover:scale-150"></div>
                        <div class="card-icon mb-6 w-16 h-16 flex items-center justify-center bg-primary-fixed rounded-full transition-transform">
                            <span class="material-symbols-outlined text-4xl text-primary">architecture</span>
                        </div>
                        <h3 class="text-headline-md font-headline-md text-on-surface mb-2">SS 1</h3>
                        <p class="text-body-md text-on-surface-variant mb-6">Introduction to Advanced Sciences and Humanities.</p>
                        <div class="mt-auto flex items-center text-primary font-bold gap-2">
                            <span>View Subjects</span>
                            <span class="material-symbols-outlined">arrow_forward</span>
                        </div>
                    </button>
                    <button onclick="navigate('subject-terms', { class_level: 'ss_2' })" class="group relative overflow-hidden class-card flex flex-col p-8 bg-surface-container-lowest border border-outline-variant rounded-2xl shadow-[0px_4px_20px_rgba(48,20,70,0.05)] hover:border-primary-container transition-all">
                        <div class="absolute top-0 right-0 w-32 h-32 bg-primary-fixed opacity-10 rounded-bl-full transform translate-x-12 -translate-y-12 transition-transform group-hover:scale-150"></div>
                        <div class="card-icon mb-6 w-16 h-16 flex items-center justify-center bg-primary-fixed rounded-full transition-transform">
                            <span class="material-symbols-outlined text-4xl text-primary">functions</span>
                        </div>
                        <h3 class="text-headline-md font-headline-md text-on-surface mb-2">SS 2</h3>
                        <p class="text-body-md text-on-surface-variant mb-6">Core curriculum focus for internal examinations.</p>
                        <div class="mt-auto flex items-center text-primary font-bold gap-2">
                            <span>View Subjects</span>
                            <span class="material-symbols-outlined">arrow_forward</span>
                        </div>
                    </button>
                    <button onclick="navigate('subject-terms', { class_level: 'ss_3' })" class="group relative overflow-hidden class-card flex flex-col p-8 bg-surface-container-lowest border border-outline-variant rounded-2xl shadow-[0px_4px_20px_rgba(48,20,70,0.05)] hover:border-primary-container transition-all">
                        <div class="absolute top-0 right-0 w-32 h-32 bg-primary-fixed opacity-10 rounded-bl-full transform translate-x-12 -translate-y-12 transition-transform group-hover:scale-150"></div>
                        <div class="card-icon mb-6 w-16 h-16 flex items-center justify-center bg-primary-fixed rounded-full transition-transform">
                            <span class="material-symbols-outlined text-4xl text-primary">school</span>
                        </div>
                        <h3 class="text-headline-md font-headline-md text-on-surface mb-2">SS 3</h3>
                        <p class="text-body-md text-on-surface-variant mb-6">Final year focus on WAEC, NECO, and JAMB success.</p>
                        <div class="mt-auto flex items-center text-primary font-bold gap-2">
                            <span>View Subjects</span>
                            <span class="material-symbols-outlined">arrow_forward</span>
                        </div>
                    </button>
                </div>
            </div>
        </div>

        <div class="mt-12 p-8 rounded-3xl bg-on-primary-container text-white flex flex-col md:flex-row items-center gap-8 relative overflow-hidden">
            <div class="z-10 text-center md:text-left flex-1">
                <h3 class="text-headline-lg font-headline-lg mb-4">Not sure where to start?</h3>
                <p class="text-body-lg opacity-90 mb-6">Take a quick diagnostic test to find the perfect level for your learning goals.</p>
                <button class="px-8 py-4 bg-warm-orange text-on-primary-fixed font-bold rounded-xl hover:scale-105 transition-transform">Take Assessment</button>
            </div>
            <div class="z-10 w-48 h-48 bg-white/10 rounded-full flex items-center justify-center backdrop-blur-sm">
                <span class="material-symbols-outlined text-7xl" style="font-variation-settings: 'FILL' 1;">psychology</span>
            </div>
            <div class="absolute -bottom-12 -right-12 w-64 h-64 bg-primary-container/20 rounded-full blur-3xl"></div>
        </div>
    </section>
</div>

<script>
    document.querySelectorAll('.class-card').forEach(card => {
        card.addEventListener('mousedown', () => card.style.transform = 'scale(0.95)');
        card.addEventListener('mouseup', () => card.style.transform = 'scale(1)');
        card.addEventListener('mouseleave', () => card.style.transform = 'scale(1)');
    });
</script>