@extends($site->themeView('layout'))

{{-- "Utility" theme: tools first, compact hero with search, articles as guides. --}}
@section('content')
    <section class="relative overflow-hidden bg-brand text-white">
        <div class="pointer-events-none absolute inset-0 opacity-20 [background-image:radial-gradient(circle_at_1px_1px,white_1px,transparent_0)] [background-size:22px_22px]" aria-hidden="true"></div>
        <div class="pointer-events-none absolute -end-20 -bottom-40 size-[28rem] rounded-full bg-accent/30 blur-3xl" aria-hidden="true"></div>
        <div class="container-site relative pt-14 pb-24 md:pt-20 md:pb-32">
            <h1 class="max-w-3xl text-4xl font-black tracking-tight text-balance md:text-6xl">{{ $site->localized('home_heading') ?: $site->name }}</h1>
            @if ($site->localized('tagline'))<p class="mt-4 max-w-2xl text-lg text-white/85 md:text-xl">{{ $site->localized('tagline') }}</p>@endif
            @if ($site->hasModule('search'))
                <form action="{{ lpath('/'.seg('search')) }}" method="get" role="search" class="mt-8 flex max-w-xl gap-2 rounded-2xl bg-white p-1.5 shadow-xl">
                    <label for="q-hero" class="sr-only">{{ __('site.search_hero_label') }}</label>
                    <input id="q-hero" name="q" type="search" placeholder="{{ __('site.search_hero_placeholder') }}" class="w-full rounded-xl border-0 px-4 py-3 text-ink focus:ring-0">
                    <button class="btn bg-accent px-5 text-ink hover:brightness-105"><x-site.icon name="search" class="size-4" /><span class="hidden sm:inline">{{ __('site.search_button') }}</span></button>
                </form>
            @endif
        </div>
    </section>

    @if ($tools->isNotEmpty() || $games->isNotEmpty())
        <section class="container-site relative -mt-14 pb-6" aria-labelledby="tools-title">
            <h2 id="tools-title" class="sr-only">{{ __('site.tools') }}</h2>
            <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                @foreach ($tools->concat($games) as $tool)
                    @include($site->themeView('partials.tool-card'))
                @endforeach
            </div>
        </section>
    @endif

    <section class="container-site py-10">
        <ul class="grid gap-4 text-sm sm:grid-cols-3">
            <li class="flex items-center gap-3"><span class="icon-tile size-10"><x-site.icon name="shield" /></span><span><strong class="block text-ink">{{ __('site.trust_private') }}</strong><span class="text-slate-600">{{ __('site.trust_private_text') }}</span></span></li>
            <li class="flex items-center gap-3"><span class="icon-tile size-10"><x-site.icon name="bolt" /></span><span><strong class="block text-ink">{{ __('site.trust_instant') }}</strong><span class="text-slate-600">{{ __('site.trust_instant_text') }}</span></span></li>
            <li class="flex items-center gap-3"><span class="icon-tile size-10"><x-site.icon name="book" /></span><span><strong class="block text-ink">{{ __('site.trust_explained') }}</strong><span class="text-slate-600">{{ __('site.trust_explained_text') }}</span></span></li>
        </ul>
    </section>

    @if ($latestPosts->isNotEmpty())
        <section class="container-site py-10" aria-labelledby="guides-title">
            <div class="flex items-end justify-between gap-4">
                <div><p class="eyebrow">{{ __('site.understand') }}</p><h2 id="guides-title" class="section-title mt-1">{{ __('site.practical_guides') }}</h2></div>
                <a href="{{ lpath('/'.seg('blog')) }}" class="text-sm font-semibold text-brand hover:underline">{{ __('site.all_guides_link') }}</a>
            </div>
            <div class="mt-8 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
                @foreach ($latestPosts as $post)
                    @include($site->themeView('partials.post-card'))
                @endforeach
            </div>
        </section>
    @endif

    @if ($site->localized('description'))
        <section class="container-site py-6">
            <div class="tint rounded-3xl p-8 md:p-10"><h2 class="text-xl font-extrabold">{{ __('site.why_site', ['site' => $site->name]) }}</h2><p class="mt-3 max-w-3xl text-slate-700">{{ $site->localized('description') }}</p></div>
        </section>
    @endif
@endsection