<div class="min-h-[calc(100vh-4.75rem)] bg-navy-50/40">
    <div class="container-site grid gap-0 py-0 lg:grid-cols-[20rem,1fr] lg:gap-8 lg:py-8">

        {{-- ============ Curriculum sidebar ============ --}}
        <aside class="order-2 border-t border-navy-100 bg-white py-6 lg:order-1 lg:rounded-brand lg:border-0 lg:shadow-brand lg:ring-1 lg:ring-navy-100/60"
               x-data="{ openModule: {{ $lesson->module->sort }} }">
            <div class="px-6">
                <a href="{{ route('learn.show', $course) }}" class="flex items-center gap-1.5 text-sm font-semibold text-navy-500 transition hover:text-wise-600">
                    <x-icon name="arrow-left" class="h-4 w-4" /> Course overview
                </a>
                <h2 class="mt-3 font-display text-lg font-bold text-navy-900">{{ $course->title }}</h2>

                {{-- Progress --}}
                <div class="mt-4 flex items-center gap-3">
                    <div class="relative h-14 w-14 shrink-0">
                        <svg viewBox="0 0 36 36" class="h-full w-full -rotate-90">
                            <circle cx="18" cy="18" r="15.9" fill="none" stroke="#eef1f9" stroke-width="3.8"/>
                            <circle cx="18" cy="18" r="15.9" fill="none" stroke="#58b9e6" stroke-width="3.8" stroke-linecap="round"
                                    stroke-dasharray="100" stroke-dashoffset="{{ 100 - $progress }}"
                                    style="transition: stroke-dashoffset .8s cubic-bezier(.21,.61,.35,1)"/>
                        </svg>
                        <span class="absolute inset-0 grid place-items-center font-display text-xs font-extrabold text-navy-900">{{ $progress }}%</span>
                    </div>
                    <div class="text-sm">
                        <p class="font-bold text-navy-800">{{ count($completedIds) }}/{{ $course->lessons()->count() }} lessons done</p>
                        <p class="text-navy-400">{{ $progress === 100 ? 'Course complete, well done!' : 'Keep the streak going' }}</p>
                    </div>
                </div>
            </div>

            <div class="mt-5 space-y-1 px-3">
                @foreach ($course->modules as $module)
                    <div class="overflow-hidden rounded-2xl">
                        <button @click="openModule = openModule === {{ $module->sort }} ? null : {{ $module->sort }}"
                                class="flex w-full items-center gap-3 px-3 py-3 text-left transition hover:bg-navy-50">
                            <span class="grid h-8 w-8 shrink-0 place-items-center rounded-xl bg-wise-50 font-display text-xs font-extrabold text-wise-600">{{ $loop->iteration }}</span>
                            <span class="flex-1">
                                <span class="block font-display text-sm font-bold leading-tight text-navy-900">{{ $module->title }}</span>
                                <span class="text-[11px] font-semibold text-navy-400">
                                    {{ $module->lessons->whereIn('id', $completedIds)->count() }}/{{ $module->lessons->count() }} complete
                                </span>
                            </span>
                            <x-icon name="chevron-down" class="h-4 w-4 text-navy-400 transition-transform" x-bind:class="openModule === {{ $module->sort }} && 'rotate-180'" />
                        </button>
                        <div x-show="openModule === {{ $module->sort }}" x-collapse>
                            <div class="space-y-0.5 pb-2 pl-4">
                                @foreach ($module->lessons as $moduleLesson)
                                    @php
                                        $isCurrent = $moduleLesson->id === $lesson->id;
                                        $isDone = in_array($moduleLesson->id, $completedIds, true);
                                        $isLocked = ! $moduleLesson->is_free_preview && ! $enrolled;
                                    @endphp
                                    <a href="{{ $isLocked ? route('learn.show', $course) : route('learn.lesson', ['course' => $course->slug, 'lesson' => $moduleLesson->slug]) }}"
                                       wire:navigate
                                       @class([
                                           'group flex items-center gap-3 rounded-xl px-3 py-2.5 transition',
                                           'bg-wise-50 ring-1 ring-wise-300' => $isCurrent,
                                           'hover:bg-navy-50' => ! $isCurrent,
                                           'opacity-60' => $isLocked,
                                       ])>
                                        @if ($isDone)
                                            <span class="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-emerald-500 text-white"><x-icon name="check" class="h-3.5 w-3.5" /></span>
                                        @elseif ($isLocked)
                                            <span class="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-navy-100 text-navy-400"><x-icon name="lock" class="h-3 w-3" /></span>
                                        @else
                                            <span class="grid h-6 w-6 shrink-0 place-items-center rounded-full ring-2 ring-navy-200 {{ $isCurrent ? 'bg-wise-400 text-navy-950 ring-wise-400' : 'text-navy-300' }}">
                                                <x-icon name="play" class="ml-0.5 h-3 w-3" />
                                            </span>
                                        @endif
                                        <span class="flex-1 text-[13px] font-semibold leading-snug {{ $isCurrent ? 'text-navy-900' : 'text-navy-600' }}">{{ $moduleLesson->title }}</span>
                                        <span class="text-[11px] font-bold text-navy-300">{{ $moduleLesson->duration_minutes }}m</span>
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </aside>

        {{-- ============ Lesson stage ============ --}}
        <main class="order-1 py-6 lg:order-2 lg:py-0">
            <div class="overflow-hidden rounded-brand bg-white shadow-brand ring-1 ring-navy-100/60">
                {{-- Video --}}
                <div class="relative aspect-video w-full bg-navy-950">
                    @if ($lesson->youtubeEmbedUrl())
                        <iframe class="h-full w-full" src="{{ $lesson->youtubeEmbedUrl() }}" title="{{ $lesson->title }}"
                                frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    @else
                        <div class="absolute inset-0 grid place-items-center bg-navy-900 bg-mesh-dark">
                            <div class="text-center">
                                <span class="mx-auto grid h-20 w-20 place-items-center rounded-full bg-wise-400/20 text-wise-300 ring-1 ring-wise-400/40">
                                    <x-icon name="video" class="h-9 w-9" />
                                </span>
                                <p class="mt-4 font-display font-bold text-white">Video coming soon</p>
                                <p class="mt-1 text-sm text-navy-300">The lesson notes below are ready for you.</p>
                            </div>
                        </div>
                    @endif
                </div>

                <div class="p-6 md:p-8">
                    <div class="flex flex-wrap items-start justify-between gap-4">
                        <div>
                            <p class="text-xs font-bold uppercase tracking-[0.18em] text-wise-600">{{ $lesson->module->title }}</p>
                            <h1 class="mt-1.5 font-display text-2xl font-bold text-navy-900 md:text-3xl">{{ $lesson->title }}</h1>
                            <div class="mt-2 flex items-center gap-4 text-sm font-semibold text-navy-400">
                                <span class="flex items-center gap-1.5"><x-icon name="clock" class="h-4 w-4" /> {{ $lesson->duration_minutes }} min</span>
                                @if ($lesson->is_free_preview)
                                    <span class="chip">Free preview</span>
                                @endif
                            </div>
                        </div>

                        @if ($enrolled)
                            <button wire:click="toggleComplete"
                                    @class([
                                        'btn-sm shrink-0',
                                        'btn-accent' => ! in_array($lesson->id, $completedIds, true),
                                        'btn-ghost' => in_array($lesson->id, $completedIds, true),
                                    ])>
                                @if (in_array($lesson->id, $completedIds, true))
                                    <x-icon name="check-circle" class="h-4 w-4 text-emerald-500" /> Completed
                                @else
                                    <x-icon name="check" class="h-4 w-4" /> Mark complete
                                @endif
                            </button>
                        @endif
                    </div>

                    @if ($lesson->summary)
                        <p class="mt-5 text-lg leading-relaxed text-navy-600">{{ $lesson->summary }}</p>
                    @endif

                    @if ($lesson->body)
                        <div class="mt-5 space-y-4 leading-relaxed text-navy-700">
                            @foreach (explode("\n\n", $lesson->body) as $paragraph)
                                <p>{{ $paragraph }}</p>
                            @endforeach
                        </div>
                    @endif

                    @if (! empty($lesson->materials))
                        <div class="mt-6 rounded-2xl border border-navy-100 bg-navy-50/60 p-5">
                            <h2 class="flex items-center gap-2 font-display text-sm font-bold uppercase tracking-wide text-navy-700">
                                <x-icon name="download" class="h-4 w-4 text-wise-600" /> Downloads &amp; resources
                            </h2>
                            <ul class="mt-3 space-y-2">
                                @foreach ($lesson->materials as $material)
                                    @php $isExternal = ! \Illuminate\Support\Str::startsWith($material['url'], '/'); @endphp
                                    <li>
                                        <a href="{{ $material['url'] }}" @if ($isExternal) target="_blank" rel="noopener" @endif download
                                           class="group flex items-center gap-3 rounded-xl bg-white px-4 py-2.5 ring-1 ring-navy-100 transition hover:ring-wise-300">
                                            <x-icon name="{{ $isExternal ? 'arrow-right' : 'download' }}" class="h-4 w-4 shrink-0 text-wise-600" />
                                            <span class="flex-1 text-sm font-semibold text-navy-800">{{ $material['label'] }}</span>
                                            @if ($isExternal)<span class="text-[11px] font-bold uppercase text-navy-400">Link</span>@endif
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    @unless ($enrolled)
                        <div class="mt-8 rounded-brand bg-navy-900 bg-mesh-dark p-7 text-center">
                            <h2 class="font-display text-lg font-bold text-white">Enjoying the preview?</h2>
                            <p class="mx-auto mt-1 max-w-md text-sm text-navy-200">Enroll to unlock all {{ $course->lessons()->count() }} lessons, track your progress and learn at your pace, forever.</p>
                            @auth
                                <form method="POST" action="{{ route('learn.enroll', $course) }}" class="mt-4">
                                    @csrf
                                    <button type="submit" class="btn-accent">Enroll now, <x-price :kes="$course->price_kes" :usd="$course->price_usd" /></button>
                                </form>
                            @else
                                <a href="{{ route('register') }}" class="btn-accent mt-4">Create a free account to enroll</a>
                            @endauth
                        </div>
                    @endunless

                    {{-- Prev / next --}}
                    <div class="mt-8 flex items-center justify-between gap-4 border-t border-navy-100 pt-6">
                        @if ($previous && ($previous->is_free_preview || $enrolled))
                            <a href="{{ route('learn.lesson', ['course' => $course->slug, 'lesson' => $previous->slug]) }}" wire:navigate
                               class="btn-ghost btn-sm">
                                <x-icon name="arrow-left" class="h-4 w-4" /> {{ \Illuminate\Support\Str::limit($previous->title, 24) }}
                            </a>
                        @else
                            <span></span>
                        @endif

                        @if ($next)
                            @if ($enrolled)
                                <button wire:click="completeAndContinue" class="btn-primary btn-sm">
                                    Complete &amp; continue <x-icon name="arrow-right" class="h-4 w-4" />
                                </button>
                            @elseif ($next->is_free_preview)
                                <a href="{{ route('learn.lesson', ['course' => $course->slug, 'lesson' => $next->slug]) }}" wire:navigate class="btn-primary btn-sm">
                                    Next lesson <x-icon name="arrow-right" class="h-4 w-4" />
                                </a>
                            @endif
                        @elseif ($enrolled && $progress === 100)
                            <a href="{{ route('dashboard') }}" class="btn-accent btn-sm">
                                <x-icon name="award" class="h-4 w-4" /> Course complete, back to dashboard
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>
