<?php if ( ! defined( 'ABSPATH' ) ) exit; ?>

<main class="max-w-[1440px] mx-auto p-lg space-y-lg">
    <section class="flex flex-col md:flex-row md:items-end justify-between gap-md">
        <div>
            <nav class="flex items-center gap-xs text-on-surface-variant mb-1">
                <span class="text-[10px] font-bold uppercase tracking-tighter text-primary">System Overview</span>
            </nav>
            <h1 class="font-headline-lg text-headline-lg text-on-surface">Welcome back, Administrator</h1>
            <p class="font-body-md text-body-md text-secondary mt-1">Here is the latest status of your curriculum and training modules.</p>
        </div>
        <div class="flex gap-sm">
            <button class="px-md py-2 border border-outline-variant text-primary font-label-md bg-surface-container-lowest hover:bg-surface-container-low rounded transition-colors flex items-center gap-2">
                <span class="material-symbols-outlined text-[20px]">download</span>Export Stats
            </button>
        </div>
    </section>

    <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-md">
        <div class="bg-surface-container-lowest border border-outline-variant p-md rounded-lg">
            <p class="font-label-md text-label-md text-secondary uppercase">Total Academy Classes</p>
            <h3 class="font-headline-lg text-headline-lg text-on-surface mt-1">12</h3>
        </div>
        <div class="bg-surface-container-lowest border border-outline-variant p-md rounded-lg">
            <p class="font-label-md text-label-md text-secondary uppercase">Total Subjects</p>
            <h3 class="font-headline-lg text-headline-lg text-on-surface mt-1">48</h3>
        </div>
        <div class="bg-surface-container-lowest border border-outline-variant p-md rounded-lg">
            <p class="font-label-md text-label-md text-secondary uppercase">Non-Academy Categories</p>
            <h3 class="font-headline-lg text-headline-lg text-on-surface mt-1">6</h3>
        </div>
        <div class="bg-surface-container-lowest border border-outline-variant p-md rounded-lg">
            <p class="font-label-md text-label-md text-secondary uppercase">Total Active Students</p>
            <h3 class="font-headline-lg text-headline-lg text-on-surface mt-1">1,240</h3>
        </div>
    </section>

    <section class="grid grid-cols-1 lg:grid-cols-2 gap-lg">
        <div class="bg-surface-container-lowest border border-outline-variant rounded-lg overflow-hidden flex flex-col hover:shadow-md transition-shadow">
            <div class="p-md flex-1 flex flex-col">
                <h2 class="font-headline-md text-headline-md text-on-surface mb-2">Academy Management</h2>
                <p class="font-body-md text-body-md text-on-surface-variant mb-xl leading-relaxed">
                    Maintain the core academic structure. Manage year-long classes, primary and secondary subjects, and map faculty to specific academic topics.
                </p>
                <div class="mt-auto pt-4 border-t border-outline-variant/30 flex items-center justify-between">
                    <button data-spa-route="class-setup" class="px-md py-2 bg-primary-container text-on-primary font-bold font-label-md rounded hover:bg-primary transition-colors flex items-center gap-xs">
                        Manage Academy <span class="material-symbols-outlined text-sm">arrow_forward</span>
                    </button>
                </div>
            </div>
        </div>

        <div class="bg-surface-container-lowest border border-outline-variant rounded-lg overflow-hidden flex flex-col hover:shadow-md transition-shadow">
            <div class="p-md flex-1 flex flex-col">
                <h2 class="font-headline-md text-headline-md text-on-surface mb-2">Non-Academy Training</h2>
                <p class="font-body-md text-body-md text-on-surface-variant mb-xl leading-relaxed">
                    Manage vocational courses, pro certificates, and independent workshops. Track certifications and corporate training modules across departments.
                </p>
                <div class="mt-auto pt-4 border-t border-outline-variant/30 flex items-center justify-between">
                    <button class="px-md py-2 bg-primary-container text-on-primary font-bold font-label-md rounded hover:bg-primary transition-colors flex items-center gap-xs" disabled>
                        Manage Training <span class="material-symbols-outlined text-sm">arrow_forward</span>
                    </button>
                </div>
            </div>
        </div>
    </section>
</main>