<x-layouts.site>
    <x-slot:title>{{ $course->title }}</x-slot:title>
    <x-slot:description>{{ $course->subtitle }}</x-slot:description>

    @php
        $firstPreview = $course->lessons->firstWhere('is_free_preview', true);
        $firstLesson = $course->lessons->first();
    @endphp

    <section class="relative overflow-hidden bg-navy-900">
        <img src="{{ $course->coverUrl() }}" alt="" class="absolute inset-0 h-full w-full object-cover opacity-25" data-parallax="0.1">
        <div class="absolute inset-0 bg-gradient-to-r from-navy-950 via-navy-900/90 to-navy-900/60"></div>
        <div class="container-site relative py-16 md:py-20" data-hero>
            <div class="max-w-3xl">
                <span class="chip bg-wise-400 text-navy-950" data-hero-item>
                    <x-icon :name="$course->emoji ?? 'graduation-cap'" class="h-3.5 w-3.5" />
                    {{ ucfirst($course->level ?? 'all levels') }} · {{ $course->lessons->count() }} lessons · {{ $course->lessons->sum('duration_minutes') }} min
                </span>
                <h1 class="mt-4 font-display text-display-sm font-bold text-white md:text-display" data-hero-item>{{ $course->title }}</h1>
                <p class="mt-4 text-lg leading-relaxed text-navy-100" data-hero-item>{{ $course->subtitle }}</p>
                <div class="mt-7 flex flex-wrap items-center gap-4" data-hero-item>
                    @if ($enrolled && $firstLesson)
                        <a href="{{ route('learn.lesson', ['course' => $course->slug, 'lesson' => $firstLesson->slug]) }}" class="btn-accent btn-lg">
                            <x-icon name="play" class="h-5 w-5" /> Continue learning
                        </a>
                    @else
                        @if ($firstPreview)
                            <a href="{{ route('learn.lesson', ['course' => $course->slug, 'lesson' => $firstPreview->slug]) }}" class="btn-accent btn-lg">
                                <x-icon name="play" class="h-5 w-5" /> Watch the free lesson
                            </a>
                        @endif
                        @auth
                            <form method="POST" action="{{ route('learn.enroll', $course) }}">
                                @csrf
                                <button type="submit" class="btn-white btn-lg">Enroll, <x-price :kes="$course->price_kes" :usd="$course->price_usd" /></button>
                            </form>
                        @else
                            <a href="{{ route('register') }}" class="btn-white btn-lg">Enroll, <x-price :kes="$course->price_kes" :usd="$course->price_usd" /></a>
                        @endauth
                    @endif
                    <p class="text-sm text-navy-200">Lifetime access · pay once, keep forever</p>
                    <div class="mt-1"><x-currency-picker /></div>
                </div>
            </div>
        </div>
    </section>

    <section class="section bg-white">
        <div class="container-site grid gap-10 lg:grid-cols-[1.4fr,1fr]">
            {{-- Curriculum --}}
            <div>
                <h2 class="font-display text-2xl font-bold text-navy-900" data-gsap="fade-up">The curriculum</h2>
                <div class="mt-6 space-y-4" x-data="{ open: 0 }">
                    @foreach ($course->modules as $i => $module)
                        <div class="overflow-hidden rounded-brand ring-1 ring-navy-100 transition-shadow hover:shadow-brand" data-gsap="fade-up">
                            <button @click="open = open === {{ $i }} ? null : {{ $i }}"
                                    class="flex w-full items-center gap-4 bg-white p-5 text-left transition hover:bg-navy-50/50">
                                <span class="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-wise-50 font-display font-extrabold text-wise-600">{{ $i + 1 }}</span>
                                <span class="flex-1">
                                    <span class="block font-display font-bold text-navy-900">{{ $module->title }}</span>
                                    <span class="text-sm text-navy-500">{{ $module->lessons->count() }} lessons · {{ $module->lessons->sum('duration_minutes') }} min</span>
                                </span>
                                <x-icon name="chevron-down" class="h-5 w-5 text-navy-400 transition-transform" x-bind:class="open === {{ $i }} && 'rotate-180'" />
                            </button>
                            <div x-cloak x-show="open === {{ $i }}" x-collapse>
                                <div class="space-y-1 border-t border-navy-100 bg-navy-50/40 p-4">
                                    @if ($module->summary)
                                        <p class="px-3 pb-2 text-sm italic text-navy-500">{{ $module->summary }}</p>
                                    @endif
                                    @foreach ($module->lessons as $lesson)
                                        @php $accessible = $lesson->is_free_preview || $enrolled; @endphp
                                        <a @if($accessible) href="{{ route('learn.lesson', ['course' => $course->slug, 'lesson' => $lesson->slug]) }}" @endif
                                           @class([
                                               'flex items-center gap-3 rounded-xl px-3 py-2.5 transition',
                                               'bg-wise-50 hover:bg-wise-100' => $lesson->is_free_preview,
                                               'hover:bg-white' => $accessible && ! $lesson->is_free_preview,
                                               'cursor-default opacity-70' => ! $accessible,
                                           ])>
                                            @if ($accessible)
                                                <span class="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-wise-400 text-navy-950"><x-icon name="play" class="ml-0.5 h-3.5 w-3.5" /></span>
                                            @else
                                                <span class="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-navy-100 text-navy-400"><x-icon name="lock" class="h-3.5 w-3.5" /></span>
                                            @endif
                                            <span class="flex-1 text-sm font-semibold text-navy-800">{{ $lesson->title }}</span>
                                            @if ($lesson->is_free_preview)
                                                <span class="rounded-full bg-wise-400 px-2.5 py-0.5 text-[10px] font-bold uppercase text-navy-950">Free preview</span>
                                            @endif
                                            <span class="text-xs font-semibold text-navy-400">{{ $lesson->duration_minutes }} min</span>
                                        </a>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                @if ($course->description)
                    <div class="mt-10" data-gsap="fade-up">
                        <h2 class="font-display text-2xl font-bold text-navy-900">About this course</h2>
                        @foreach (explode("\n\n", $course->description) as $paragraph)
                            <p class="mt-4 leading-relaxed text-navy-700">{{ $paragraph }}</p>
                        @endforeach
                    </div>
                @endif
            </div>

            {{-- Sidebar --}}
            <aside class="space-y-6 lg:sticky lg:top-28 lg:self-start">
                @if ($course->outcomes)
                    <div class="card p-7" data-gsap="fade-left">
                        <h3 class="font-display font-bold text-navy-900">After this course you will…</h3>
                        <ul class="mt-4 space-y-3">
                            @foreach ($course->outcomes as $outcome)
                                <li class="flex items-start gap-2.5 text-sm leading-relaxed text-navy-700">
                                    <x-icon name="check-circle" class="mt-0.5 h-5 w-5 shrink-0 text-wise-500" />
                                    {{ $outcome }}
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="card bg-navy-900 bg-mesh-dark p-7 text-center ring-0" data-gsap="fade-left">
                    @if ($enrolled)
                        <span class="mx-auto grid h-12 w-12 place-items-center rounded-full bg-emerald-500/20 text-emerald-400 ring-1 ring-emerald-400/40">
                            <x-icon name="check-circle" class="h-6 w-6" />
                        </span>
                        <p class="mt-3 font-display text-xl font-extrabold text-white">You're enrolled</p>
                        <p class="mt-1 text-sm text-navy-200">Pick up where you left off.</p>
                        @if ($firstLesson)
                            <a href="{{ route('learn.lesson', ['course' => $course->slug, 'lesson' => $firstLesson->slug]) }}" class="btn-accent mt-5 w-full">
                                <x-icon name="play" class="h-4 w-4" /> Continue learning
                            </a>
                        @endif
                    @else
                        <p class="font-display text-3xl font-extrabold text-white"><x-price :kes="$course->price_kes" :usd="$course->price_usd" /></p>
                        <p class="mt-1 text-sm text-navy-200">pay once, keep forever</p>
                        @auth
                            <form method="POST" action="{{ route('learn.enroll', $course) }}" class="mt-5">
                                @csrf
                                <button type="submit" class="btn-accent w-full">Enroll now</button>
                            </form>
                        @else
                            <a href="{{ route('register') }}" class="btn-accent mt-5 w-full">Create account &amp; enroll</a>
                        @endauth
                        @if ($firstPreview)
                            <a href="{{ route('learn.lesson', ['course' => $course->slug, 'lesson' => $firstPreview->slug]) }}"
                               class="mt-3 inline-flex items-center gap-1.5 text-sm font-bold text-wise-300 transition hover:text-wise-200">
                                <x-icon name="play" class="h-4 w-4" /> Try the free lesson first
                            </a>
                        @endif
                    @endif
                </div>

                <div class="card p-7" data-gsap="fade-left">
                    <h3 class="font-display font-bold text-navy-900">Not sure where to start?</h3>
                    <p class="mt-2 text-sm leading-relaxed text-navy-600">Take the free Financial Health Check, we'll tell you if this course fits your stage.</p>
                    <a href="{{ route('assessments.show', 'financial-health') }}" class="btn-ghost mt-4 w-full">Take the free check</a>
                </div>
            </aside>
        </div>
    </section>
</x-layouts.site>
