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

@section('content')
{{-- HERO (cinema — kontras teks terjamin) --}}
<div class="cinema relative -mx-5 -mt-6 mb-9 overflow-hidden rounded-b-3xl">
    <div class="relative aspect-[4/5] sm:aspect-video w-full">
        @if($banner?->image)
            <img src="{{ $banner->imageUrl() }}" class="h-full w-full object-cover" alt="">
            <div class="absolute inset-0 bg-gradient-to-t from-black via-black/40 to-black/20"></div>
        @else
            <div class="h-full w-full bg-gradient-to-br from-primary-dark via-primary to-amber"></div>
            <div class="absolute inset-0 surface-pattern opacity-100"></div>
            <div class="absolute inset-0 bg-gradient-to-t from-black/75 via-black/25 to-transparent"></div>
        @endif
    </div>
    <div class="absolute inset-x-0 bottom-0 px-5 pb-4">
        <span class="chip !bg-white/15 !text-white mb-3"><x-icon name="sparkles" class="w-3.5 h-3.5"/> Membership Islami</span>
        <h1 class="text-display text-white">{{ $banner?->title ?? 'Belajar Islam, Lebih Dekat' }}</h1>
        <p class="mt-2 text-body-lg text-white/85 prose-body">{{ $banner?->subtitle ?? 'Ribuan kajian, kelas berseri, ebook & event Islami dalam genggaman.' }}</p>
        <div class="mt-5 flex gap-2.5">
            <a href="{{ route('membership.index') }}" class="btn-filled flex-1 sm:flex-none">Jadi Member</a>
            <a href="{{ route('learn.index') }}" class="btn-ghost !bg-white/15 !text-white hover:!bg-white/25">Lihat Konten</a>
        </div>
    </div>
</div>

{{-- Fitur Islami terbuka untuk umum --}}
<x-islamic-quicklinks class="mb-5" />
@isset($prayer)
<x-prayer-widget :prayer="$prayer" :next="$prayerNext ?? null" class="mb-5" />
@endisset
@isset($verse)
<x-daily-inspiration :verse="$verse" :hadith="$hadith ?? null" class="mb-9" />
@endisset

{{-- Manfaat --}}
<section class="mb-10">
    <h2 class="text-h2 mb-1">Semua dalam satu aplikasi</h2>
    <p class="text-body text-muted mb-5">Konten terkurasi untuk perjalanan spiritual Anda.</p>
    <div class="grid grid-cols-2 gap-4">
        @foreach([
            ['series','Kelas Berseri','Belajar terstruktur per episode','primary'],
            ['film','Video Kajian','Tafsir, fiqih, sirah & akhlak','secondary'],
            ['book','Ebook Premium','Panduan ibadah & tematik','primary'],
            ['calendar','Event Eksklusif','Zoominar & kajian offline','secondary'],
        ] as [$icon,$t,$d,$col])
        <div class="card p-5">
            <span class="grid h-11 w-11 place-items-center rounded-xl bg-{{ $col }}/10"><x-icon :name="$icon" class="w-6 h-6 text-{{ $col }}"/></span>
            <h3 class="text-h4 mt-3">{{ $t }}</h3>
            <p class="text-small text-muted mt-0.5">{{ $d }}</p>
        </div>
        @endforeach
    </div>
</section>

{{-- Preview konten --}}
<x-rail title="Kajian Pilihan" :more="route('learn.index')">
    @foreach($videos as $video)
        <x-poster :href="route('video.show', $video->slug)" :image="$video->thumbnailUrl()"
            :title="$video->title" :subtitle="$video->category?->name"
            :locked="$video->is_premium" :badge="$video->is_premium ? null : 'PREVIEW'" ratio="16x9" />
    @endforeach
</x-rail>

@if($events->isNotEmpty())
<x-rail title="Event Terdekat" :more="route('events.index')">
    @foreach($events as $event)
        <x-poster :href="route('events.show', $event->slug)" :image="$event->coverUrl()"
            :title="$event->title" :subtitle="$event->starts_at?->translatedFormat('d M Y')"
            :badge="$event->isFree() ? 'GRATIS' : 'Rp'.number_format($event->price,0,',','.')" ratio="16x9" />
    @endforeach
</x-rail>
@endif

@if(($articles ?? collect())->isNotEmpty())
<x-rail title="Artikel Terbaru" :more="route('articles.index')">
    @foreach($articles as $a)
    <a href="{{ route('articles.show', $a->slug) }}" class="poster !w-[280px] !aspect-auto bg-surface-1 border-outline/70 hover:-translate-y-1">
        <div class="aspect-[16/9] overflow-hidden rounded-t-xl bg-surface-2"><img src="{{ $a->coverUrl() }}" 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
</x-rail>
@endif

{{-- Ikuti Instagram --}}
@php $igEmbed = \App\Models\Setting::get('social.instagram_embed'); $igUrl = \App\Models\Setting::get('social.instagram_url'); @endphp
@if($igEmbed || $igUrl)
<section class="mb-9">
    <div class="mb-3 flex items-center justify-between">
        <h2 class="text-h3 flex items-center gap-2"><x-brand-icon name="instagram" class="w-6 h-6 text-primary"/> Ikuti Kami</h2>
        @if($igUrl)<a href="{{ $igUrl }}" target="_blank" rel="noopener" class="text-small font-semibold text-primary hover:underline">@quranreview</a>@endif
    </div>
    @if($igEmbed)
        <div class="card overflow-hidden p-2">{!! $igEmbed !!}</div>
    @else
        <a href="{{ $igUrl }}" target="_blank" rel="noopener" class="card surface-pattern relative flex items-center gap-4 overflow-hidden p-5 hover:shadow-e3 transition-shadow">
            <span class="relative grid h-14 w-14 place-items-center rounded-2xl bg-primary/10"><x-brand-icon name="instagram" class="w-7 h-7 text-primary"/></span>
            <div class="relative flex-1"><p class="text-h4">Ikuti @quranreview di Instagram</p><p class="text-small text-muted">Update kajian, kutipan, & info event terbaru.</p></div>
            <x-icon name="chevron-right" class="relative w-5 h-5 text-muted"/>
        </a>
    @endif
</section>
@endif

{{-- CTA akhir --}}
<div class="card surface-pattern mt-4 overflow-hidden p-8 text-center">
    <h3 class="relative text-h2">Mulai Perjalanan Spiritual Anda</h3>
    <p class="relative mt-1.5 text-body text-muted">Langganan mulai Rp49.000/bulan. Batalkan kapan saja.</p>
    <a href="{{ route('membership.index') }}" class="btn-filled relative mt-5 w-full sm:w-auto sm:px-10">Lihat Paket</a>
    <a href="{{ route('faq') }}" class="relative mt-3 block text-small text-muted hover:text-primary">Punya pertanyaan? Baca FAQ</a>
</div>
@endsection