<x-layouts.site>
    <x-slot:title>Learn, Courses &amp; Academy</x-slot:title>
    <x-slot:description>Practical financial courses in plain language, built for the African context. Learn to budget, clear debt, invest and build wealth at your own pace.</x-slot:description>

    @php
        $featured = $courses->first();
        $catalogue = $courses->slice(1);
    @endphp

    <section class="relative overflow-hidden bg-mesh">
        <div class="blob -left-32 top-0 h-80 w-80 bg-wise-300/40" data-parallax="0.2" aria-hidden="true"></div>
        <div class="container-site relative py-12 text-center md:py-16" data-hero>
            <p class="eyebrow justify-center" data-hero-item>The academy</p>
            <h1 class="mt-3 font-display text-display-sm font-bold text-navy-900 md:text-display" data-hero-item>
                Learning that feels like <span class="text-gradient">winning</span>
            </h1>
            <p class="mx-auto mt-4 max-w-2xl text-lg text-navy-600" data-hero-item>
                Short videos, real progress, and a free first lesson on every course.
            </p>
            <div class="mt-5 flex justify-center" data-hero-item><x-currency-picker /></div>
        </div>
    </section>

    <section class="section bg-white pt-0">
        <div class="container-site">
            {{-- Featured flagship --}}
            @if ($featured)
                <div class="card-glow group relative overflow-hidden bg-navy-900 p-0" data-gsap="fade-up">
                    <img src="{{ $featured->coverUrl() }}" alt="" class="absolute inset-0 h-full w-full object-cover opacity-30 transition-transform duration-700 group-hover:scale-105">
                    <div class="absolute inset-0 bg-gradient-to-r from-navy-950 via-navy-950/80 to-navy-900/40"></div>
                    <div class="relative grid gap-8 p-8 md:p-10 lg:grid-cols-[1.4fr,1fr]">
                        <div>
                            <span class="chip bg-wise-400 text-navy-950"><x-icon :name="$featured->emoji ?? 'trending-up'" class="h-3.5 w-3.5" /> Flagship course</span>
                            <h2 class="mt-4 font-display text-3xl font-bold text-white">{{ $featured->title }}</h2>
                            <p class="mt-3 max-w-xl text-lg leading-relaxed text-navy-100">{{ $featured->subtitle }}</p>
                            <div class="mt-5 flex flex-wrap items-center gap-5 text-sm font-semibold text-wise-200">
                                <span class="flex items-center gap-1.5"><x-icon name="layers" class="h-4 w-4" /> {{ $featured->modules->count() }} modules</span>
                                <span class="flex items-center gap-1.5"><x-icon name="video" class="h-4 w-4" /> {{ $featured->lessons->count() }} lessons</span>
                                <span class="flex items-center gap-1.5"><x-icon name="gift" class="h-4 w-4" /> First lesson free</span>
                                <span class="flex items-center gap-1.5"><x-icon name="infinity" class="h-4 w-4" /> Lifetime access</span>
                            </div>
                            <div class="mt-7 flex flex-wrap items-center gap-4">
                                <a href="{{ route('learn.show', $featured) }}" class="btn-accent btn-lg">
                                    See the curriculum <x-icon name="arrow-right" class="h-5 w-5" />
                                </a>
                                <div>
                                    <p class="font-display text-2xl font-extrabold text-white"><x-price :kes="$featured->price_kes" :usd="$featured->price_usd" /></p>
                                    <p class="text-xs font-semibold text-navy-300">pay once, keep forever</p>
                                </div>
                            </div>
                        </div>
                        <div class="hidden rounded-brand bg-white/[0.06] p-6 ring-1 ring-white/10 backdrop-blur-sm lg:block">
                            <h3 class="text-xs font-bold uppercase tracking-[0.18em] text-wise-300">Inside the course</h3>
                            <div class="mt-4 space-y-2.5">
                                @foreach ($featured->modules->take(5) as $i => $module)
                                    <div class="flex items-center gap-3">
                                        <span class="grid h-7 w-7 shrink-0 place-items-center rounded-lg bg-wise-400 font-display text-xs font-extrabold text-navy-950">{{ $i + 1 }}</span>
                                        <p class="flex-1 text-sm font-semibold leading-tight text-white">{{ $module->title }}</p>
                                        <span class="text-[11px] font-bold text-navy-300">{{ $module->lessons->count() }} lessons</span>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            {{-- Catalogue grid --}}
            @if ($catalogue->isNotEmpty())
                <div class="mt-12 flex flex-wrap items-end justify-between gap-4" data-gsap="fade-up">
                    <div>
                        <p class="eyebrow">The catalogue</p>
                        <h2 class="mt-2 font-display text-2xl font-bold text-navy-900">Pick your next skill</h2>
                    </div>
                </div>
                <div class="mt-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3" data-gsap-stagger>
                    @foreach ($catalogue as $course)
                        <a href="{{ route('learn.show', $course) }}" class="card-glow group flex flex-col overflow-hidden p-0" data-tilt="5">
                            <div class="relative h-44 overflow-hidden">
                                <img src="{{ $course->coverUrl() }}" alt="" class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105">
                                <div class="absolute inset-0 bg-gradient-to-t from-navy-950/70 to-transparent"></div>
                                <span class="absolute left-4 top-4 chip bg-white/90 backdrop-blur">{{ ucfirst($course->level ?? 'all levels') }}</span>
                                @if ($course->price_kes == 0)
                                    <span class="absolute right-4 top-4 chip bg-emerald-500 text-white">Free</span>
                                @endif
                                <span class="absolute bottom-3 left-4 flex items-center gap-3 text-[11px] font-bold text-white">
                                    <span class="flex items-center gap-1"><x-icon name="layers" class="h-3.5 w-3.5 text-wise-300" /> {{ $course->modules->count() }} modules</span>
                                    <span class="flex items-center gap-1"><x-icon name="video" class="h-3.5 w-3.5 text-wise-300" /> {{ $course->lessons->count() }} lessons</span>
                                </span>
                            </div>
                            <div class="flex flex-1 flex-col p-6">
                                <div class="flex items-center gap-3">
                                    <span class="icon-tile -mt-11 relative z-10 !h-10 !w-10 ring-4 ring-white"><x-icon :name="$course->emoji ?? 'graduation-cap'" class="h-4 w-4" /></span>
                                    <h3 class="font-display text-lg font-bold leading-snug text-navy-900">{{ $course->title }}</h3>
                                </div>
                                <p class="mt-2 flex-1 text-sm leading-relaxed text-navy-600">{{ \Illuminate\Support\Str::limit($course->subtitle, 110) }}</p>
                                <div class="mt-4 flex items-center justify-between">
                                    <div>
                                        @if ($course->price_kes == 0)
                                            <p class="font-display text-lg font-extrabold text-emerald-600">Free</p>
                                            <p class="text-[11px] font-semibold text-navy-400">Full course · no cost</p>
                                        @else
                                            <p class="font-display text-lg font-extrabold text-navy-900"><x-price :kes="$course->price_kes" :usd="$course->price_usd" /></p>
                                            <p class="text-[11px] font-semibold text-navy-400">pay once, keep forever</p>
                                        @endif
                                    </div>
                                    <span class="inline-flex items-center gap-1 text-sm font-bold text-wise-600">
                                        View <x-icon name="arrow-right" class="h-4 w-4 transition-transform group-hover:translate-x-1" />
                                    </span>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>
            @endif

            {{-- Free learning --}}
            <div class="mt-12 grid gap-6 md:grid-cols-2" data-gsap-stagger>
                <a href="https://www.youtube.com/@MoneyWiseWithRinaHicks" target="_blank" rel="noopener" class="card-glow group flex items-center gap-5 p-7">
                    <span class="icon-tile h-16 w-16 bg-rose-50 text-rose-500"><x-icon name="youtube" class="h-7 w-7" /></span>
                    <span class="flex-1">
                        <h3 class="font-display text-lg font-bold text-navy-900">Free: 400+ videos on YouTube</h3>
                        <p class="mt-1 text-sm text-navy-500">Money-Wise with Rina Hicks, debt, investing, retirement and more.</p>
                    </span>
                    <x-icon name="arrow-right" class="h-5 w-5 text-navy-300 transition-transform group-hover:translate-x-1 group-hover:text-wise-500" />
                </a>
                <a href="{{ route('resources') }}" class="card-glow group flex items-center gap-5 p-7">
                    <span class="icon-tile h-16 w-16"><x-icon name="book-flip" class="h-7 w-7" /></span>
                    <span class="flex-1">
                        <h3 class="font-display text-lg font-bold text-navy-900">Free: the guides library</h3>
                        <p class="mt-1 text-sm text-navy-500">Flip-through playbooks with PDF downloads.</p>
                    </span>
                    <x-icon name="arrow-right" class="h-5 w-5 text-navy-300 transition-transform group-hover:translate-x-1 group-hover:text-wise-500" />
                </a>
            </div>
        </div>
    </section>
</x-layouts.site>
