@extends('layouts.app')

@section('title', 'Viral AI Video Prompts')

@section('content')

    {{-- Hero --}}
    <section class="mx-auto max-w-7xl px-4 pb-16 pt-16 sm:px-6 lg:px-8 lg:pt-24">
        <div class="mx-auto max-w-3xl text-center">
            <span class="inline-flex items-center gap-2 rounded-full border border-brand-500/30 bg-brand-500/10 px-4 py-1.5 text-xs font-semibold text-brand-300">
                🚀 {{ $stats['total'] }} prompts and counting
            </span>

            <h1 class="mt-6 text-4xl font-extrabold leading-[1.1] tracking-tight sm:text-6xl">
                Prompts that make
                <span class="bg-gradient-to-r from-brand-400 via-fuchsia-400 to-pink-400 bg-clip-text text-transparent">videos go viral</span>
            </h1>

            <p class="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-slate-400">
                A hand-tested library of AI video prompts. Copy one, drop it into your
                generator of choice, and ship content that actually holds attention.
            </p>

            <div class="mt-9 flex flex-wrap items-center justify-center gap-3">
                <a href="{{ route('prompts.index') }}" class="btn btn-primary px-7 py-3 text-base">Browse all prompts</a>
                <a href="{{ route('prompts.index', ['access' => 'free']) }}" class="btn btn-ghost px-7 py-3 text-base">Start with free ones</a>
            </div>

            <dl class="mx-auto mt-14 grid max-w-lg grid-cols-3 gap-4">
                @foreach ([['Total', $stats['total']], ['Free', $stats['free']], ['Premium', $stats['premium']]] as [$label, $value])
                    <div class="surface px-4 py-5">
                        <dd class="text-2xl font-extrabold text-white">{{ $value }}</dd>
                        <dt class="mt-1 text-xs font-semibold uppercase tracking-wide text-slate-500">{{ $label }}</dt>
                    </div>
                @endforeach
            </dl>
        </div>
    </section>

    {{-- Categories --}}
    @if ($categories->isNotEmpty())
        <section class="mx-auto max-w-7xl px-4 pb-16 sm:px-6 lg:px-8">
            <div class="flex flex-wrap justify-center gap-2.5">
                @foreach ($categories as $category)
                    <a href="{{ route('prompts.index', ['category' => $category->slug]) }}"
                       class="surface px-4 py-2.5 text-sm font-medium transition hover:border-brand-500/50 hover:text-white">
                        <span class="mr-1">{{ $category->icon }}</span>
                        {{ $category->name }}
                        <span class="ml-1.5 text-xs text-slate-500">{{ $category->prompts_count }}</span>
                    </a>
                @endforeach
            </div>
        </section>
    @endif

    {{-- Featured --}}
    @if ($featured->isNotEmpty())
        <section class="mx-auto max-w-7xl px-4 pb-20 sm:px-6 lg:px-8">
            <x-section-heading title="★ Featured this week" subtitle="The prompts pulling the biggest numbers right now." />
            <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                @foreach ($featured as $prompt)
                    <x-prompt-card :prompt="$prompt" />
                @endforeach
            </div>
        </section>
    @endif

    {{-- Free --}}
    @if ($free->isNotEmpty())
        <section class="mx-auto max-w-7xl px-4 pb-20 sm:px-6 lg:px-8">
            <x-section-heading
                title="🗂 Free prompts"
                subtitle="No account, no catch. Copy and go."
                :link="route('prompts.index', ['access' => 'free'])" />
            <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                @foreach ($free as $prompt)
                    <x-prompt-card :prompt="$prompt" />
                @endforeach
            </div>
        </section>
    @endif

    {{-- Premium --}}
    @if ($premium->isNotEmpty())
        <section class="mx-auto max-w-7xl px-4 pb-20 sm:px-6 lg:px-8">
            <x-section-heading
                title="🔒 Premium prompts"
                subtitle="Longer-form, higher-production concepts for members."
                :link="route('prompts.index', ['access' => 'premium'])" />
            <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                @foreach ($premium as $prompt)
                    <x-prompt-card :prompt="$prompt" />
                @endforeach
            </div>
        </section>
    @endif

    {{-- CTA --}}
    @guest
        <section class="mx-auto max-w-7xl px-4 pb-24 sm:px-6 lg:px-8">
            <div class="relative overflow-hidden rounded-3xl border border-brand-500/30 bg-gradient-to-br from-brand-600/20 via-ink-800 to-fuchsia-600/10 px-6 py-16 text-center sm:px-12">
                <h2 class="text-3xl font-extrabold sm:text-4xl">Unlock the full library</h2>
                <p class="mx-auto mt-4 max-w-xl text-slate-300">
                    Members get every premium prompt, new drops each week, and access to the
                    community where the winning formats get dissected.
                </p>
                <div class="mt-8 flex flex-wrap justify-center gap-3">
                    <a href="{{ route('register') }}" class="btn btn-primary px-8 py-3 text-base">Get started free</a>
                    <a href="{{ route('join') }}" class="btn btn-ghost px-8 py-3 text-base">See what's included</a>
                </div>
            </div>
        </section>
    @endguest

@endsection