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

{{-- Files theme home: one big drop zone that suggests the right tool, then every tool by category. --}}
@section('content')
    @php
        $catalogue = \App\Support\FileTools::catalogue($site);
        $groups = \App\Support\FileTools::groups($site, $tools);
    @endphp
    <section class="fz-hero relative overflow-hidden">
        <div class="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(60rem_28rem_at_50%_-10%,color-mix(in_oklab,var(--brand)_22%,transparent),transparent),radial-gradient(30rem_20rem_at_90%_10%,color-mix(in_oklab,var(--accent)_25%,transparent),transparent)]" aria-hidden="true"></div>
        <div class="container-site max-w-5xl pt-12 pb-10 text-center md:pt-16">
            <p class="inline-flex rounded-full bg-white/70 px-3 py-1 text-xs font-semibold text-brand shadow-sm ring-1 ring-brand/15">{{ __('files.home_badge') }}</p>
            <h1 class="mx-auto mt-4 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="mx-auto mt-4 max-w-2xl text-lg text-slate-600">{{ $site->localized('tagline') }}</p>@endif

            {{-- Drop zone: files stay in the browser and are handed to the chosen tool. --}}
            <div class="mt-8" data-home-drop data-catalogue="{{ json_encode($catalogue) }}"
                 data-i18n="{{ json_encode(['suggest' => __('files.suggested_tools'), 'none' => __('files.no_tool_for_type')]) }}">
                <label class="fz-drop group mx-auto flex max-w-3xl cursor-pointer flex-col items-center rounded-3xl border-2 border-dashed border-brand/30 bg-white/80 px-6 py-12 shadow-xl shadow-brand/5 backdrop-blur transition hover:border-brand" data-drop>
                    <span class="grid size-16 place-items-center rounded-2xl bg-gradient-to-br from-brand to-accent text-white shadow-lg shadow-brand/30 transition group-hover:-translate-y-1"><x-site.icon name="upload-cloud" class="size-8" /></span>
                    <span class="mt-4 text-xl font-bold">{{ __('files.home_drop_title') }}</span>
                    <span class="mt-1 text-sm text-slate-500">{{ __('files.home_drop_text') }}</span>
                    <span class="mt-3 inline-flex items-center gap-1.5 rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-800"><x-site.icon name="shield" class="size-3.5" /> {{ __('files.kit.privacy_local') }}</span>
                    <input type="file" multiple class="sr-only" data-input>
                </label>
                <div data-suggestions hidden class="mx-auto mt-4 max-w-3xl rounded-2xl bg-white p-4 text-start shadow-lg ring-1 ring-black/5">
                    <p class="text-sm font-bold" data-suggest-title></p>
                    <div class="mt-3 flex flex-wrap gap-2" data-suggest-list></div>
                </div>
            </div>
        </div>
    </section>

    <section class="container-site max-w-6xl py-8" aria-labelledby="all-tools">
        <div class="flex flex-wrap items-end justify-between gap-4">
            <h2 id="all-tools" class="section-title">{{ __('files.all_tools') }}</h2>
            <label class="relative w-full sm:w-80">
                <span class="sr-only">{{ __('files.search_tools') }}</span>
                <x-site.icon name="search" class="pointer-events-none absolute start-3 top-1/2 size-4 -translate-y-1/2 text-slate-400" />
                <input type="search" data-filter="[data-tile]" placeholder="{{ __('files.search_tools') }}" class="field py-2.5 ps-9 text-sm">
            </label>
        </div>
        @foreach ($groups as $group => $list)
            <div class="mt-8" data-group-block>
                <h3 class="flex items-center gap-2 text-sm font-bold tracking-wider text-slate-500 uppercase">
                    <a href="{{ lpath('/'.seg('tools').'/'.seg('category').'/'.$group) }}" class="hover:text-brand">{{ __('files.groups.'.$group.'.name') }}</a>
                </h3>
                <ul class="mt-3 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
                    @foreach ($list as $tool)
                        <li data-tile data-search="{{ mb_strtolower($tool->name.' '.$tool->summary.' '.$tool->key) }}">
                            <a href="{{ $tool->path() }}" class="fz-tile group flex h-full gap-3 rounded-2xl border border-black/[0.06] bg-white p-4 transition hover:-translate-y-0.5 hover:border-brand/40 hover:shadow-lg hover:shadow-brand/10">
                                <span class="grid size-10 shrink-0 place-items-center rounded-xl bg-brand/10 text-brand transition group-hover:bg-brand group-hover:text-white"><x-site.icon :name="$tool->icon()" class="size-5" /></span>
                                <span class="min-w-0"><span class="block font-semibold leading-snug">{{ $tool->name }}</span>@if ($tool->summary)<span class="mt-0.5 line-clamp-2 block text-xs text-slate-500">{{ $tool->summary }}</span>@endif</span>
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
        @endforeach
    </section>

    <section class="container-site max-w-6xl py-8">
        <ul class="grid gap-4 sm:grid-cols-3">
            @foreach (['private' => 'shield', 'fast' => 'bolt', 'free' => 'heart'] as $key => $icon)
                <li class="rounded-2xl bg-white p-5 ring-1 ring-black/[0.06]"><span class="grid size-10 place-items-center rounded-xl bg-accent/15 text-ink"><x-site.icon :name="$icon" class="size-5" /></span><p class="mt-3 font-bold">{{ __('files.why_'.$key) }}</p><p class="mt-1 text-sm text-slate-600">{{ __('files.why_'.$key.'_text') }}</p></li>
            @endforeach
        </ul>
    </section>

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