@extends('layouts.app')

@section('title', $content['coursesHead']['title'] ?? 'সকল কোর্স')
@section('canonical', '/courses')

@section('content')
    @php
        $head = $content['coursesHead'] ?? [];
        $catList = collect($categories)->filter(fn ($c) => ! empty($c['slug']))->values();
        $activeCat = $initialCat ?: 'all';
    @endphp

    <section class="page-hero">
        <div class="container">
            <span class="hero-badge">🎓 আমাদের কোর্স</span>
            <h1>{{ $head['title'] ?? 'আমাদের কোর্স সমূহ' }}</h1>
            <p>{{ $head['text'] ?? 'ক্যাটাগরি সিলেক্ট করে দেখুন — প্রতিটি কোর্সের মডিউল, সময়কাল ও সার্টিফিকেটের বিস্তারিত তথ্য পাবেন।' }}</p>
        </div>
    </section>

    <section class="section">
        <div class="container">
            <div class="filter-bar" data-course-filter>
                <a class="chip {{ $activeCat === 'all' ? 'active' : '' }}" href="/courses" data-cat="all">✨ সব কোর্স</a>
                @foreach($catList as $c)
                    <a class="chip {{ $activeCat === $c['slug'] ? 'active' : '' }}"
                       href="/courses?cat={{ urlencode($c['slug']) }}"
                       data-cat="{{ $c['slug'] }}">{{ $c['label'] ?? '' }}</a>
                @endforeach
            </div>

            <div class="grid-3" data-course-grid>
                @forelse($courses as $course)
                    @include('partials.course-card', ['course' => $course])
                @endforeach
            </div>

            <p data-course-empty style="display:none;text-align:center;color:var(--muted);padding:24px 0">
                এই ক্যাটাগরিতে এখনো কোনো কোর্স যোগ করা হয়নি।
            </p>
        </div>
    </section>

    @include('partials.sections.cta', ['content' => $content, 'site' => $site])
@endsection