@props([
    'features' => [],
    'themeClasses' => [],
])

<section id="academy"
    class="py-20 md:py-32 {{ $themeClasses['sectionBgAlt'] ?? 'bg-gray-950' }} border-t {{ $themeClasses['divider'] ?? 'border-gray-800' }}">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
        <h2
            class="text-5xl font-extrabold text-center mb-6 {{ $themeClasses['textNormal'] ?? 'text-white' }} animate-on-scroll">
            OA MediaKraft Academy</h2>
        <p class="text-center {{ $themeClasses['textSecondary'] ?? 'text-gray-400' }} mb-16 max-w-3xl mx-auto text-lg animate-on-scroll"
            style="transition-delay: 0.1s;">
            Master the Digital Crafts. High-quality training for individuals and corporate teams, taught by our leading
            creative professionals.
        </p>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
            @foreach ($features as $index => $feature)
                <div class="p-8 {{ $themeClasses['cardBg'] ?? 'bg-gray-900' }} rounded-2xl shadow-xl transition duration-300 border {{ $themeClasses['cardBorder'] ?? 'border-gray-800' }} hover:border-orange-500/50 animate-on-scroll"
                    style="transition-delay: {{ $index * 0.15 }}s;">
                    <div class="p-3 w-12 h-12 rounded-full mb-4 bg-orange-600/10 text-orange-400">
                        @include('partials.icon', ['name' => $feature['icon'], 'size' => 'w-full h-full'])
                    </div>
                    <h3 class="text-xl font-semibold mb-2 {{ $themeClasses['textNormal'] ?? 'text-white' }}">
                        {{ $feature['title'] }}</h3>
                    <p class="{{ $themeClasses['textSecondary'] ?? 'text-gray-400' }} text-sm">
                        {{ $feature['description'] }}</p>
                </div>
            @endforeach
        </div>

        <div class="text-center p-10 {{ $themeClasses['cardBg'] ?? 'bg-gray-900' }} rounded-2xl shadow-2xl border border-orange-700/50 animate-on-scroll"
            style="transition-delay: 0.3s;">
            <h3 class="text-3xl font-bold mb-4 {{ $themeClasses['textNormal'] ?? 'text-white' }}">Invest in Your Skills
                Today</h3>
            <p class="{{ $themeClasses['textSecondary'] ?? 'text-gray-400' }} mb-6">
                View our course catalog or inquire about tailored corporate packages.
            </p>
            <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
                <button onclick="scrollToSection('contact')"
                    class="inline-flex items-center justify-center space-x-2 bg-orange-600 hover:bg-orange-700 text-white font-bold py-3 px-8 rounded-full shadow-lg transition duration-300 text-base">
                    <span>Browse Courses &rarr;</span>
                </button>
                <button onclick="scrollToSection('contact')"
                    class="inline-flex items-center justify-center space-x-2 border border-orange-600 {{ $themeClasses['textNormal'] ?? 'text-white' }} hover:bg-orange-600 hover:text-white font-bold py-3 px-8 rounded-full shadow-lg transition duration-300 text-base">
                    <span>Corporate Inquiry</span>
                </button>
            </div>
        </div>
    </div>
</section>
