@extends('layouts.public', [
    'title' => 'LottoData | Jackpots, Results, and Lottery Updates',
    'metaDescription' => 'LottoData.com is a clean public lottery website shell focused on featured jackpots, Powerball, Mega Millions, results, and editorial content.',
])

@section('content')
    <section class="mx-auto max-w-7xl px-6 pb-10 pt-10 lg:px-8 lg:pb-12 lg:pt-14">
        <div class="grid gap-6 lg:grid-cols-[1.2fr_0.8fr] lg:items-stretch">
            <div class="rounded-[2rem] border border-white/10 bg-white/[0.05] p-7 shadow-2xl shadow-slate-950/30 backdrop-blur sm:p-8 lg:p-10">
                <div class="inline-flex items-center rounded-full border border-amber-300/30 bg-amber-300/10 px-4 py-2 text-sm font-medium text-amber-100">
                    {{ $homeBadge }}
                </div>

                <div class="mt-8 space-y-6">
                    <h1 class="max-w-4xl text-4xl font-semibold tracking-tight text-white sm:text-5xl lg:text-6xl">
                        {{ $homeHeadline }}
                    </h1>
                    <p class="max-w-2xl text-lg leading-8 text-slate-300">
                        {{ $homeSubheading }}
                    </p>
                </div>

                <div class="mt-8 flex flex-wrap gap-3">
                    <a href="{{ route('about') }}" class="inline-flex items-center rounded-full bg-amber-300 px-5 py-3 text-sm font-semibold text-slate-950 transition hover:bg-amber-200">
                        About LottoData
                    </a>
                    <a href="{{ route('contact') }}" class="inline-flex items-center rounded-full border border-white/15 px-5 py-3 text-sm font-semibold text-slate-200 transition hover:border-white/30 hover:bg-white/5 hover:text-white">
                        Contact
                    </a>
                </div>
            </div>

            <aside class="grid gap-4">
                <div class="rounded-[2rem] border border-cyan-300/20 bg-cyan-300/10 p-6">
                    <p class="text-xs font-semibold uppercase tracking-[0.35em] text-cyan-100">Featured Jackpot Area</p>
                    <h2 class="mt-4 text-2xl font-semibold text-white">{{ $featuredJackpotDisplay }}</h2>
                    <p class="mt-3 text-sm leading-7 text-slate-200">
                        @if ($featuredGamesCount > 0)
                            Combined spotlight across the featured homepage jackpot modules for Powerball and Mega Millions.
                        @else
                            Featured jackpot totals will appear here automatically once jackpot records are available for the supported games.
                        @endif
                    </p>
                </div>

                <div class="grid gap-4 sm:grid-cols-2">
                    <article class="rounded-[1.75rem] border border-white/10 bg-slate-900/90 p-5">
                        <p class="text-xs font-semibold uppercase tracking-[0.3em] text-slate-400">Structured</p>
                        <p class="mt-3 text-base font-semibold text-white">Ad-friendly layout</p>
                        <p class="mt-2 text-sm leading-7 text-slate-300">Promotional areas are intentional and separated from the core jackpot hierarchy.</p>
                    </article>
                    <article class="rounded-[1.75rem] border border-white/10 bg-slate-900/90 p-5">
                        <p class="text-xs font-semibold uppercase tracking-[0.3em] text-slate-400">Responsive</p>
                        <p class="mt-3 text-base font-semibold text-white">Built for mobile first</p>
                        <p class="mt-2 text-sm leading-7 text-slate-300">The homepage stack stays readable on phones and expands cleanly on larger screens.</p>
                    </article>
                </div>
            </aside>
        </div>
    </section>

    <section class="mx-auto max-w-7xl px-6 pb-10 lg:px-8 lg:pb-12">
        <x-ad-placement-group
            :placements="$homepageAds->get('homepage_top', collect())"
            title="Homepage Top Promo"
            empty-message="Homepage top promo space is available for future admin-managed placements."
            tone="slate"
        />
    </section>

    <section class="mx-auto max-w-7xl px-6 pb-14 lg:px-8 lg:pb-16">
        <div class="grid gap-5 lg:grid-cols-2">
            @foreach ($gameModules as $module)
                <article class="rounded-[2rem] border bg-white/[0.04] p-6 lg:p-8 {{ $module['key'] === 'powerball' ? 'border-amber-300/20' : 'border-cyan-300/20' }}">
                    <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                        <div>
                            <p class="text-xs font-semibold uppercase tracking-[0.35em] {{ $module['key'] === 'powerball' ? 'text-amber-200' : 'text-cyan-200' }}">
                                {{ $module['name'] }} Module
                            </p>
                            <h2 class="mt-3 text-3xl font-semibold text-white">{{ $module['name'] }}</h2>
                        </div>
                        <span class="rounded-full border border-white/10 px-3 py-1.5 text-xs uppercase tracking-[0.25em] text-slate-400">Priority placement</span>
                    </div>

                    <div class="mt-6 grid gap-4 sm:grid-cols-3">
                        <div class="rounded-2xl border border-white/10 bg-slate-950/50 p-4">
                            <p class="text-xs uppercase tracking-[0.25em] text-slate-500">Latest jackpot</p>
                            <p class="mt-2 text-xl font-semibold text-white">{{ $module['jackpot_display'] }}</p>
                        </div>
                        <div class="rounded-2xl border border-white/10 bg-slate-950/50 p-4">
                            <p class="text-xs uppercase tracking-[0.25em] text-slate-500">Latest draw date</p>
                            <p class="mt-2 text-xl font-semibold text-white">{{ $module['draw_date_display'] }}</p>
                        </div>
                        <div class="rounded-2xl border border-white/10 bg-slate-950/50 p-4">
                            <p class="text-xs uppercase tracking-[0.25em] text-slate-500">Winning numbers</p>
                            <p class="mt-2 text-base font-semibold text-white">{{ $module['winning_numbers_display'] }}</p>
                        </div>
                    </div>

                    @if ($module['draw_schedule'])
                        <p class="mt-5 text-sm leading-7 text-slate-300">
                            Draw schedule: {{ $module['draw_schedule'] }}
                        </p>
                    @endif
                </article>
            @endforeach
        </div>
    </section>

    <section class="mx-auto max-w-7xl px-6 pb-10 lg:px-8 lg:pb-12">
        <x-ad-placement-group
            :placements="$homepageAds->get('homepage_mid', collect())"
            title="Homepage Mid Promo"
            empty-message="Homepage mid promo space is currently open."
            tone="cyan"
        />
    </section>

    <section class="mx-auto max-w-7xl px-6 pb-14 lg:px-8 lg:pb-16">
        <div class="grid gap-5 lg:grid-cols-[1fr_0.7fr]">
            <article class="rounded-[2rem] border border-white/10 bg-slate-900/85 p-6 lg:p-8">
                <p class="text-xs font-semibold uppercase tracking-[0.35em] text-slate-400">Latest Results Section Placeholder</p>
                <h2 class="mt-4 text-3xl font-semibold text-white">Latest results built for quick scanning</h2>
                <p class="mt-4 max-w-2xl text-sm leading-7 text-slate-300">
                    This area is reserved for result rows, draw dates, winning numbers, and links to detailed game pages once data ingestion is introduced.
                </p>

                <div class="mt-6 grid gap-3 sm:grid-cols-3">
                    @foreach ($gameModules as $module)
                        <div class="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
                            <p class="text-xs uppercase tracking-[0.25em] text-slate-500">Game</p>
                            <p class="mt-2 text-base font-semibold text-white">{{ $module['name'] }}</p>
                            <p class="mt-1 text-sm text-slate-400">{{ $module['draw_date_display'] }}</p>
                        </div>
                    @endforeach
                    <div class="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
                        <p class="text-xs uppercase tracking-[0.25em] text-slate-500">More games</p>
                        <p class="mt-2 text-base font-semibold text-white">Future expansion</p>
                        <p class="mt-1 text-sm text-slate-400">State and national results later</p>
                    </div>
                </div>
            </article>

            <aside class="rounded-[2rem] border border-emerald-300/20 bg-emerald-300/10 p-6 lg:p-8">
                <p class="text-xs font-semibold uppercase tracking-[0.35em] text-emerald-100">Sponsored / Internal Promo Placeholder</p>
                <h2 class="mt-4 text-2xl font-semibold text-white">Reserved promotional slot</h2>
                <p class="mt-4 text-sm leading-7 text-slate-100">
                    This block intentionally reserves space for future admin-manageable sponsored content, house promotions, or featured editorial links without disrupting the jackpot hierarchy.
                </p>
            </aside>
        </div>
    </section>

    <section class="mx-auto max-w-7xl px-6 pb-10 lg:px-8 lg:pb-12">
        <x-ad-placement-group
            :placements="$homepageAds->get('homepage_bottom', collect())"
            title="Homepage Bottom Promo"
            empty-message="Homepage bottom promo space is available."
            tone="emerald"
        />
    </section>

    <section class="mx-auto max-w-7xl px-6 pb-14 lg:px-8 lg:pb-18">
        <div class="rounded-[2rem] border border-white/10 bg-white/[0.04] p-6 lg:p-8">
            <div class="max-w-3xl">
                <p class="text-xs font-semibold uppercase tracking-[0.35em] text-slate-400">Why Use LottoData</p>
                <h2 class="mt-4 text-3xl font-semibold text-white">A public lottery site designed for clarity, speed, and future growth.</h2>
                <p class="mt-4 text-sm leading-8 text-slate-300">
                    The public experience is being built to make high-interest jackpots easy to find, results easy to scan, and managed promotional content easy to place without turning the site into visual noise.
                </p>
            </div>

            <div class="mt-8 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
                <article class="rounded-[1.5rem] border border-white/10 bg-slate-950/60 p-5">
                    <p class="text-base font-semibold text-white">Prominent jackpot focus</p>
                    <p class="mt-3 text-sm leading-7 text-slate-300">Powerball and Mega Millions stay near the top where users expect them.</p>
                </article>
                <article class="rounded-[1.5rem] border border-white/10 bg-slate-950/60 p-5">
                    <p class="text-base font-semibold text-white">Clear result pathways</p>
                    <p class="mt-3 text-sm leading-7 text-slate-300">The homepage already carves out space for fresh results and deeper game pages.</p>
                </article>
                <article class="rounded-[1.5rem] border border-white/10 bg-slate-950/60 p-5">
                    <p class="text-base font-semibold text-white">Admin-manageable growth</p>
                    <p class="mt-3 text-sm leading-7 text-slate-300">Sponsored and editorial blocks can be introduced later without redesigning the homepage.</p>
                </article>
                <article class="rounded-[1.5rem] border border-white/10 bg-slate-950/60 p-5">
                    <p class="text-base font-semibold text-white">Production-minded foundation</p>
                    <p class="mt-3 text-sm leading-7 text-slate-300">Laravel 11, Blade, and the current route structure keep the site straightforward to extend.</p>
                </article>
            </div>
        </div>
    </section>
@endsection