@php
    $subjectsShow = App\Models\HomepageSetting::get('subjects_show', true);
    $subjectsLabel = App\Models\HomepageSetting::get('subjects_label', 'POPULAR SUBJECTS');
    $subjectsHeading = App\Models\HomepageSetting::get('subjects_heading', 'Top Subjects Across All Syllabuses');
    $subjectsSubtext = App\Models\HomepageSetting::get('subjects_subtext', 'Master key syllabus concepts and solve challenging past worksheets with our certified specialists.');
    $subjectsTabsShow = App\Models\HomepageSetting::get('subjects_tabs_show', true);
    $subjectsTabs = App\Models\HomepageSetting::get('subjects_tabs_json', []);
    $subjectsMode = App\Models\HomepageSetting::get('subjects_mode', 'auto');
    $subjectsFeaturedIds = App\Models\HomepageSetting::get('subjects_featured_ids', []);
    $subjectsLimit = App\Models\HomepageSetting::get('subjects_limit', 8);
    $subjectsViewAllShow = App\Models\HomepageSetting::get('subjects_viewall_show', true);
@endphp

@if($subjectsShow)
<div id="section-subjects" class="py-24 bg-slate-50/30 relative {{ isset($activeEditingSection) && $activeEditingSection === 'subjects' ? 'ring-4 ring-amber-500' : '' }}" x-data="{ activeTab: 'All' }">
    @if(isset($activeEditingSection) && $activeEditingSection === 'subjects')
        <div class="absolute top-4 left-4 z-50 bg-amber-500 text-white font-bold text-xs uppercase px-3 py-1 rounded-full shadow-lg">Editing: Featured Subjects</div>
    @endif
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-3xl mx-auto mb-16 space-y-4">
            <span class="inline-block text-xs font-semibold text-accent uppercase tracking-widest" style="color: var(--accent);">{{ $subjectsLabel }}</span>
            <h2 class="font-display text-3xl sm:text-4xl font-extrabold tracking-tight text-slate-900" style="color: var(--primary);">
                {{ $subjectsHeading }}
            </h2>
            <p class="text-slate-500 font-light text-base max-w-2xl mx-auto">
                {{ $subjectsSubtext }}
            </p>
        </div>

        @php
            $query = \App\Models\Subject::where('is_active', true)->with(['grade.curriculum']);
            if ($subjectsMode === 'manual' && !empty($subjectsFeaturedIds)) {
                $query->whereIn('id', $subjectsFeaturedIds);
            }
            $activeSubjects = $query->take($subjectsLimit)->get();
        @endphp

        <!-- Filter Tabs -->
        @if($subjectsTabsShow && !empty($subjectsTabs))
            <div class="flex flex-wrap items-center justify-center gap-2 mb-12">
                @foreach($subjectsTabs as $tab)
                    @if($tab['visible'] ?? true)
                        <button 
                            type="button"
                            @click="activeTab = '{{ $tab['label'] }}'"
                            class="px-5 py-2.5 text-xs font-bold rounded-full transition shadow-sm border"
                            :class="activeTab === '{{ $tab['label'] }}' ? 'bg-accent text-white border-accent' : 'bg-white text-slate-600 border-slate-100 hover:bg-slate-50'"
                            style="background-color: activeTab === '{{ $tab['label'] }}' ? 'var(--accent)' : ''; border-color: activeTab === '{{ $tab['label'] }}' ? 'var(--accent)' : '';"
                        >
                            {{ $tab['label'] }}
                        </button>
                    @endif
                @endforeach
            </div>
        @endif

        <!-- Subjects Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            @foreach($activeSubjects as $subject)
                @php
                    // Map subject categories to tabs
                    $cat = $subject->category ?? 'Other';
                    if (str_contains(strtolower($subject->name), 'math')) {
                        $cat = 'Mathematics';
                    } elseif (str_contains(strtolower($subject->name), 'phys') || str_contains(strtolower($subject->name), 'chem') || str_contains(strtolower($subject->name), 'bio') || str_contains(strtolower($subject->name), 'science')) {
                        $cat = 'Sciences';
                    } elseif (str_contains(strtolower($subject->name), 'history') || str_contains(strtolower($subject->name), 'geography') || str_contains(strtolower($subject->name), 'socio') || str_contains(strtolower($subject->name), 'humanities')) {
                        $cat = 'Humanities';
                    } elseif (str_contains(strtolower($subject->name), 'english') || str_contains(strtolower($subject->name), 'french') || str_contains(strtolower($subject->name), 'spanish') || str_contains(strtolower($subject->name), 'lang')) {
                        $cat = 'Languages';
                    } elseif (str_contains(strtolower($subject->name), 'business') || str_contains(strtolower($subject->name), 'econ') || str_contains(strtolower($subject->name), 'account')) {
                        $cat = 'Business';
                    }
                @endphp
                <div 
                    x-show="activeTab === 'All' || activeTab === '{{ $cat }}'"
                    x-transition:enter="transition ease-out duration-200"
                    x-transition:enter-start="opacity-0 scale-95"
                    x-transition:enter-end="opacity-100 scale-100"
                    class="bg-white border border-slate-100 rounded-3xl p-6 hover:border-accent/40 shadow-sm hover:shadow-lg transition-all duration-300 flex flex-col justify-between group transform hover:-translate-y-1"
                >
                    <div class="space-y-4">
                        <div class="flex items-center justify-between">
                            <span class="inline-block text-[10px] font-bold text-accent uppercase tracking-widest" style="color: var(--accent);">
                                {{ $subject->grade->curriculum->name ?? 'Syllabus' }} &bull; {{ $subject->grade->name ?? 'Grade' }}
                            </span>
                            <span class="text-[10px] text-slate-400 font-bold bg-slate-50 px-2 py-0.5 rounded-lg">{{ $cat }}</span>
                        </div>
                        <h3 class="font-extrabold text-slate-800 group-hover:text-primary transition-colors text-lg" style="color: var(--primary);">
                            {{ $subject->name }}
                        </h3>
                        <p class="text-xs font-light text-slate-500 line-clamp-2 leading-relaxed">
                            {{ $subject->description ?? 'Weekly live lessons covering challenging exam papers, syllabus review guides, and core concept building.' }}
                        </p>
                    </div>
                    <div class="pt-4 mt-6 border-t border-slate-50 flex items-center justify-end">
                        <a href="{{ route('subject.show', $subject->slug) }}" class="inline-flex items-center text-xs font-bold text-accent hover:text-accent/80 transition-colors uppercase tracking-wider" style="color: var(--accent);">
                            View Classes
                            <svg class="ml-1.5 h-3.5 w-3.5 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                        </a>
                    </div>
                </div>
            @endforeach
        </div>

        @if($subjectsViewAllShow)
            <div class="text-center mt-12">
                <a href="{{ route('curricula.index') }}" class="inline-flex items-center px-6 py-3 rounded-full text-xs font-bold border border-slate-200 text-slate-700 bg-white hover:bg-slate-50 shadow-sm transition">
                    Browse All Subjects
                </a>
            </div>
        @endif
    </div>
</div>
@endif