@extends('layouts.shell')
@section('title', 'Beranda — '.($brand['name'] ?? 'Quran Review'))
@section('main-pad', 'px-5 pt-4')

@section('content')
@php
    $u = auth()->user();
    $canPremium = $u->isAdmin() || $u->hasActiveMembership();
    $sub = $u->activeSubscription();
    $banners = $banners ?? collect();
@endphp

{{-- Greeting + status --}}
<div class="-mt-1 mb-4 flex items-center justify-between gap-3">
    <div>
        <p class="text-small text-muted">Assalamu'alaikum,</p>
        <h1 class="text-h3 leading-tight">{{ $u->name }}</h1>
    </div>
    @if($sub)
        <span class="chip-primary shrink-0"><x-icon name="sparkles" class="w-3.5 h-3.5"/> Member {{ $sub->package->name }}</span>
    @elseif(!$u->isAdmin())
        <a href="{{ route('membership.index') }}" class="btn-filled !py-2 !px-4 shrink-0 text-sm">Jadi Member</a>
    @endif
</div>

{{-- Akses cepat fitur Islami --}}
<x-islamic-quicklinks class="mb-5" />

{{-- Widget Jadwal Sholat --}}
<x-prayer-widget :prayer="$prayer" :next="$prayerNext" class="mb-6" />

{{-- HERO: carousel banner (fallback ke video terbaru) --}}
@if($banners->isNotEmpty())
<div class="cinema relative -mx-5 mb-7 overflow-hidden rounded-2xl"
     x-data="{ i: 0, n: {{ $banners->count() }} }"
     x-init="if(n>1) setInterval(()=>i=(i+1)%n, 5000)">
    <div class="relative aspect-[4/5] sm:aspect-[16/9] w-full bg-black">
        @foreach($banners as $idx => $b)
        <div x-show="i==={{ $idx }}" x-transition.opacity.duration.600ms class="absolute inset-0">
            @if($b->image)<img src="{{ $b->image }}" class="h-full w-full object-cover" alt="{{ $b->title }}">
            @else<div class="h-full w-full bg-gradient-to-br from-primary-dark via-primary to-amber"></div>@endif
            <div class="absolute inset-0 bg-gradient-to-t from-black via-black/35 to-transparent"></div>
            <div class="absolute inset-x-0 bottom-0 p-5">
                <h2 class="text-h2 text-white drop-shadow">{{ $b->title }}</h2>
                @if($b->subtitle)<p class="mt-1 text-body text-white/80 line-clamp-2 prose-body">{{ $b->subtitle }}</p>@endif
                @if($b->link)<a href="{{ $b->link }}" class="btn-filled mt-4">{{ $b->cta_text ?? 'Selengkapnya' }}</a>@endif
            </div>
        </div>
        @endforeach
    </div>
    @if($banners->count() > 1)
    <div class="absolute bottom-3 right-4 flex gap-1.5">
        @foreach($banners as $idx => $b)
        <button @click="i={{ $idx }}" class="h-1.5 rounded-full transition-all" :class="i==={{ $idx }} ? 'w-5 bg-white' : 'w-1.5 bg-white/50'"></button>
        @endforeach
    </div>
    @endif
</div>
@elseif($hero)
<div class="cinema relative -mx-5 mb-7 overflow-hidden rounded-2xl">
    <div class="relative aspect-[4/5] sm:aspect-[16/9] w-full bg-black">
        <img src="{{ $hero->thumbnailUrl() }}" alt="{{ $hero->title }}" class="h-full w-full object-cover">
        <div class="absolute inset-0 bg-gradient-to-t from-black via-black/35 to-transparent"></div>
    </div>
    <div class="absolute inset-x-0 bottom-0 p-5">
        <h2 class="text-h2 text-white drop-shadow">{{ $hero->title }}</h2>
        <a href="{{ route('video.show', $hero->slug) }}" class="btn-filled mt-4"><x-icon name="play" class="w-5 h-5" :fill="true"/> Tonton</a>
    </div>
</div>
@endif

{{-- Quick filter kategori --}}
@if(($categories ?? collect())->isNotEmpty())
<div class="-mx-5 mb-7 flex gap-2 overflow-x-auto px-5 scrollbar-hide">
    <a href="{{ route('learn.index') }}" class="chip-primary shrink-0">Semua</a>
    @foreach($categories as $c)
    <a href="{{ route('learn.index') }}?cat={{ $c->slug }}" class="chip shrink-0 hover:text-primary">{{ $c->name }}</a>
    @endforeach
</div>
@endif

{{-- RAIL DAFTAR SAYA --}}
@if(($bookmarks ?? collect())->isNotEmpty())
<section class="mb-8">
    <div class="mb-3 flex items-center justify-between">
        <h2 class="text-h3">Daftar Saya</h2>
        <a href="{{ route('bookmarks.index') }}" class="text-small font-semibold text-muted hover:text-primary flex items-center gap-0.5">Lihat semua <x-icon name="chevron-right" class="w-4 h-4"/></a>
    </div>
    <div class="rail-track scrollbar-hide">
        @foreach($bookmarks as $video)
            <x-poster :href="route('video.show', $video->slug)" :image="$video->thumbnailUrl()"
                :title="$video->title" :subtitle="$video->category?->name" :duration="$video->duration" ratio="16x9" />
        @endforeach
    </div>
</section>
@endif

{{-- RAIL SERIES --}}
@if(($series ?? collect())->isNotEmpty())
<section class="mb-8">
    <div class="mb-3 flex items-center justify-between">
        <h2 class="text-h3">Kelas Berseri</h2>
        <a href="{{ route('learn.index') }}?tab=series" class="text-small font-semibold text-muted hover:text-primary flex items-center gap-0.5">Lihat semua <x-icon name="chevron-right" class="w-4 h-4"/></a>
    </div>
    <div class="rail-track scrollbar-hide">
        @foreach($series as $s)
        <a href="{{ route('series.show', $s->slug) }}" class="poster poster-2x3 group">
            <img src="{{ $s->coverUrl() }}" loading="lazy" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" alt="{{ $s->title }}">
            <div class="absolute inset-0 bg-gradient-to-t from-black/85 via-black/15 to-transparent"></div>
            <span class="absolute left-2 top-2 rounded-md bg-primary/90 px-1.5 py-0.5 text-[10px] font-bold text-on-primary">{{ $s->episodes_count }} EPS</span>
            <div class="absolute inset-x-0 bottom-0 p-2.5">
                <p class="text-[13px] font-semibold leading-tight text-white line-clamp-2">{{ $s->title }}</p>
                <p class="text-[11px] text-white/70">{{ $s->level }}</p>
            </div>
        </a>
        @endforeach
    </div>
</section>
@endif

{{-- RAILS dari konfigurasi --}}
@foreach($sections as $section)
    @php $items = $rails[$section->key] ?? collect(); @endphp
    @continue($items->isEmpty())
    @if($section->content_type === 'event')
        <x-rail :title="$section->title" :more="route('events.index')">
            @foreach($items as $event)
                <x-poster :href="route('events.show', $event->slug)" :image="$event->coverUrl()"
                    :title="$event->title" :subtitle="$event->starts_at?->translatedFormat('d M Y, H:i')"
                    :badge="$event->isFree() ? 'GRATIS' : 'Rp'.number_format($event->price,0,',','.')" ratio="16x9" />
            @endforeach
        </x-rail>
    @else
        <x-rail :title="$section->title" :more="route('learn.index')">
            @foreach($items as $video)
                <x-poster :href="route('video.show', $video->slug)" :image="$video->thumbnailUrl()"
                    :title="$video->title" :subtitle="$video->category?->name" :duration="$video->duration"
                    :locked="$video->is_premium && !$canPremium" :badge="$video->is_premium ? null : 'PREVIEW'" ratio="16x9" />
            @endforeach
        </x-rail>
    @endif
@endforeach

{{-- Ayat & Hadis Hari Ini --}}
@isset($verse)
<x-daily-inspiration :verse="$verse" :hadith="$hadith ?? null" class="mb-8" />
@endisset

{{-- RAIL ARTIKEL (lazy reveal saat scroll) --}}
@if(($articles ?? collect())->isNotEmpty())
<section class="mb-8">
    <x-reveal>
        <div class="mb-3 flex items-center justify-between">
            <h2 class="text-h3">Artikel Terbaru</h2>
            <a href="{{ route('articles.index') }}" class="text-small font-semibold text-muted hover:text-primary flex items-center gap-0.5">Lihat semua <x-icon name="chevron-right" class="w-4 h-4"/></a>
        </div>
        <div class="rail-track scrollbar-hide">
            @foreach($articles as $a)
            <a href="{{ route('articles.show', $a->slug) }}" class="poster !w-[280px] !aspect-auto bg-surface-1 border-outline/70 p-0 hover:-translate-y-1">
                <div class="aspect-[16/9] overflow-hidden rounded-t-xl bg-surface-2"><img src="{{ $a->coverUrl() }}" loading="lazy" class="h-full w-full object-cover" alt=""></div>
                <div class="p-3">
                    @if($a->category)<span class="text-caption text-primary font-semibold">{{ $a->category }}</span>@endif
                    <p class="text-h4 leading-tight line-clamp-2 mt-0.5">{{ $a->title }}</p>
                    <p class="text-caption text-muted mt-1.5">{{ $a->readingMinutes() }} mnt baca</p>
                </div>
            </a>
            @endforeach
        </div>
    </x-reveal>
</section>
@endif

{{-- CTA upgrade --}}
@unless($canPremium)
<div class="card surface-pattern mt-2 overflow-hidden p-6 text-center">
    <span class="relative grid h-12 w-12 mx-auto place-items-center rounded-2xl bg-primary/10 mb-3"><x-icon name="sparkles" class="w-6 h-6 text-primary"/></span>
    <h3 class="relative text-h3">Buka Semua Konten Premium</h3>
    <p class="relative mt-1 text-body text-muted">Akses penuh video kajian, kelas berseri, ebook & kuis eksklusif.</p>
    <a href="{{ route('membership.index') }}" class="btn-filled relative mt-4 w-full">Jadi Member</a>
</div>
@endunless
@endsection