@extends('layouts.admin')
@section('title', 'Panduan')
@section('page-title', 'Panduan Owner')

@section('content')
<div class="lg:grid lg:grid-cols-[16rem_1fr] lg:gap-8">
    {{-- ToC --}}
    <aside class="mb-6 lg:mb-0">
        <div class="lg:sticky lg:top-20">
            @include('admin.guide._toc', ['groups' => $groups, 'current' => null])
        </div>
    </aside>

    {{-- Konten --}}
    <div class="max-w-3xl">
        <div class="cinema relative mb-8 overflow-hidden rounded-2xl">
            <div class="relative bg-gradient-to-br from-primary-dark via-primary to-amber p-7">
                <div class="absolute inset-0 surface-pattern opacity-100"></div>
                <div class="relative">
                    <p class="text-sm font-semibold text-white/80">Selamat datang 👋</p>
                    <h2 class="mt-1 text-2xl font-extrabold text-white">Panduan Quran Review</h2>
                    <p class="mt-2 max-w-xl text-sm text-white/85">
                        Semua yang perlu Anda tahu untuk menjalankan platform: model bisnis, alur pengguna,
                        dan cara setting & memakai tiap fitur. Tidak perlu latar belakang teknis.
                    </p>
                </div>
            </div>
        </div>

        <p class="mb-4 text-sm text-muted">Mulai dari sini, atau langsung ke topik yang Anda butuhkan:</p>

        @foreach($groups as $groupName => $topics)
        <h3 class="mb-3 mt-7 text-sm font-bold uppercase tracking-wider text-muted">{{ $groupName }}</h3>
        <div class="grid gap-3 sm:grid-cols-2">
            @foreach($topics as $slug => $meta)
            <a href="{{ route('admin.guide.show', $slug) }}"
               class="card group flex items-start gap-3 p-4 hover:border-primary/40">
                <span class="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-primary/10 text-primary">
                    <x-icon :name="$meta['icon']" class="w-5 h-5"/>
                </span>
                <span class="min-w-0">
                    <span class="block font-semibold text-ink group-hover:text-primary">{{ $meta['title'] }}</span>
                    <span class="block text-sm text-muted">{{ $meta['lead'] ?? '' }}</span>
                </span>
            </a>
            @endforeach
        </div>
        @endforeach
    </div>
</div>
@endsection