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

{{-- Toolbox theme: the home page IS the toolbox — instant filter over app-like tiles. --}}
@section('content')
    <section class="border-b border-black/[0.06] bg-white">
        <div class="container-site max-w-7xl py-10 md:py-14">
            <div class="flex flex-wrap items-end justify-between gap-6">
                <div class="max-w-2xl">
                    <h1 class="text-3xl font-black tracking-tight text-balance md:text-5xl">{{ $site->localized('home_heading') ?: $site->name }}</h1>
                    @if ($site->localized('tagline'))<p class="mt-3 text-lg text-slate-600">{{ $site->localized('tagline') }}</p>@endif
                </div>
                <p class="rounded-md bg-brand/10 px-3 py-1.5 text-sm font-semibold text-brand">{{ trans_choice('theme.tools_count', $tools->count() + $games->count(), ['count' => $tools->count() + $games->count()]) }}</p>
            </div>
            <label class="relative mt-8 block">
                <span class="sr-only">{{ __('theme.filter_tools') }}</span>
                <x-site.icon name="search" class="pointer-events-none absolute start-4 top-1/2 size-5 -translate-y-1/2 text-slate-400" />
                <input type="search" data-filter="[data-tile]" placeholder="{{ __('theme.filter_tools') }}" class="field py-3.5 ps-12 text-lg" autocomplete="off">
            </label>
        </div>
    </section>

    <section class="container-site max-w-7xl py-8" aria-label="{{ __('theme.our_tools') }}">
        <ul class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
            @foreach ($tools->concat($games) as $tool)
                <li data-tile data-search="{{ mb_strtolower($tool->name.' '.$tool->summary) }}">
                    <a href="{{ $tool->path() }}" class="card group flex h-full flex-col gap-3 p-4 transition hover:border-brand hover:shadow-md">
                        <span class="grid size-11 place-items-center rounded-lg bg-brand text-white transition group-hover:scale-105"><x-site.icon :name="$tool->icon()" class="size-6" /></span>
                        <span class="font-semibold leading-snug">{{ $tool->name }}</span>
                        @if ($tool->summary)<span class="line-clamp-2 text-xs text-slate-500">{{ $tool->summary }}</span>@endif
                    </a>
                </li>
            @endforeach
        </ul>
    </section>

    @if ($latestPosts->isNotEmpty())
        <section class="container-site max-w-7xl py-10" aria-labelledby="guides-title">
            <div class="flex items-end justify-between gap-4">
                <h2 id="guides-title" class="section-title">{{ __('site.practical_guides') }}</h2>
                <a href="{{ lpath('/'.seg('blog')) }}" class="text-sm font-semibold text-brand hover:underline">{{ __('site.all_guides_link') }}</a>
            </div>
            <ul class="mt-6 grid gap-3 md:grid-cols-2">
                @foreach ($latestPosts->take(6) as $post)
                    <li>
                        <a href="{{ $post->path() }}" class="card group flex items-center gap-4 p-4 hover:border-brand">
                            <span class="grid size-10 shrink-0 place-items-center rounded-lg bg-accent/20 text-ink"><x-site.icon name="book" class="size-5" /></span>
                            <span class="min-w-0"><span class="block font-semibold group-hover:text-brand">{{ $post->title }}</span><span class="text-xs text-slate-500">{{ __('site.reading_time', ['n' => $post->readingMinutes()]) }}</span></span>
                        </a>
                    </li>
                @endforeach
            </ul>
        </section>
    @endif

    @if ($site->localized('description'))
        <section class="container-site max-w-7xl py-6"><p class="max-w-3xl text-slate-600">{{ $site->localized('description') }}</p></section>
    @endif
@endsection