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

@section('content')
    <section class="relative overflow-hidden border-b border-black/[0.06] bg-white">
        <div class="pointer-events-none absolute -top-24 -end-24 size-96 rounded-full bg-brand/10 blur-3xl" aria-hidden="true"></div>
        <div class="pointer-events-none absolute -bottom-32 -start-16 size-80 rounded-full bg-accent/15 blur-3xl" aria-hidden="true"></div>
        <div class="container-site relative py-16 md:py-24">
            @if ($site->niche && app()->getLocale() === $site->locale)<p class="eyebrow">{{ $site->niche }}</p>@endif
            <h1 class="mt-3 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-5 max-w-2xl text-lg text-slate-600 md:text-xl">{{ $site->localized('tagline') }}</p>@endif
            <div class="mt-8 flex flex-wrap gap-3">
                @if ($latestPosts->isNotEmpty())<a href="{{ lpath('/'.seg('blog')) }}" class="btn-brand">{{ __('site.read_articles') }} <x-site.icon name="arrow" class="size-4" /></a>@endif
                @if ($site->hasModule('search'))<a href="{{ lpath('/'.seg('search')) }}" class="btn-ghost"><x-site.icon name="search" class="size-4" /> {{ __('site.search_button') }}</a>@endif
            </div>
        </div>
    </section>

    @if ($latestPosts->isNotEmpty())
        <section class="container-site py-14" aria-labelledby="latest-title">
            <div class="flex items-end justify-between gap-4">
                <div><p class="eyebrow">{{ __('site.featured') }}</p><h2 id="latest-title" class="section-title mt-1">{{ __('site.latest_articles') }}</h2></div>
                <a href="{{ lpath('/'.seg('blog')) }}" class="hidden text-sm font-semibold text-brand hover:underline sm:block">{{ __('site.all_articles_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'), ['featured' => $loop->first && $latestPosts->count() > 3])
                @endforeach
            </div>
        </section>
    @endif

    @if ($tools->isNotEmpty() || $games->isNotEmpty())
        <section class="container-site pb-14" aria-labelledby="tools-title">
            <h2 id="tools-title" class="section-title">{{ $tools->isNotEmpty() ? __('site.our_tools') : __('site.our_games') }}</h2>
            <div class="mt-6 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

    @if ($categories->where('posts_count', '>', 0)->isNotEmpty())
        <section class="container-site pb-6" aria-labelledby="cat-title">
            <div class="card p-6 md:p-8">
                <h2 id="cat-title" class="text-xl font-extrabold">{{ __('site.explore_topics') }}</h2>
                <ul class="mt-5 flex flex-wrap gap-2">
                    @foreach ($categories->where('posts_count', '>', 0) as $category)
                        <li><a href="{{ $category->path() }}" class="chip">{{ $category->name }} <span class="text-slate-400">{{ $category->posts_count }}</span></a></li>
                    @endforeach
                </ul>
            </div>
        </section>
    @endif

    @if ($tools->isEmpty() && $games->isEmpty() && $latestPosts->isEmpty())
        <section class="container-site py-20 text-center text-slate-500">{{ __('site.coming_soon') }}</section>
    @endif
@endsection