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

{{-- Recipe site home: search (keywords or ingredients), categories, featured, latest and quick recipes. --}}
@section('content')
    <section class="relative isolate overflow-hidden bg-[radial-gradient(ellipse_at_top_left,color-mix(in_oklab,var(--accent)_28%,transparent),transparent_60%),radial-gradient(ellipse_at_bottom_right,color-mix(in_oklab,var(--brand)_22%,transparent),transparent_55%)]">
        <div class="container-site max-w-5xl py-14 text-center md:py-20">
            <h1 class="font-[family-name:var(--font-heading)] text-4xl font-black tracking-tight text-balance text-ink md:text-6xl">{{ $site->localized('home_heading') ?: __('recipes.hero_search') }}</h1>
            @if ($site->localized('tagline'))<p class="mx-auto mt-4 max-w-2xl text-lg text-slate-600">{{ $site->localized('tagline') }}</p>@endif
            <form action="{{ lpath('/'.seg('recipes')) }}" method="get" role="search" class="mx-auto mt-8 flex max-w-2xl items-center gap-2 rounded-full bg-white p-2 shadow-xl ring-1 ring-black/5">
                <x-site.icon name="search" class="ms-3 size-5 shrink-0 text-slate-400" />
                <label for="home-q" class="sr-only">{{ __('recipes.search_placeholder') }}</label>
                <input id="home-q" name="q" type="search" placeholder="{{ __('recipes.search_placeholder') }}" class="min-w-0 flex-1 border-0 bg-transparent py-2 text-base focus:ring-0">
                <button class="btn bg-brand px-5 py-2.5 text-white hover:brightness-110">{{ __('recipes.hero_cta') }}</button>
            </form>
            @if ($categories->isNotEmpty())
                <ul class="mt-6 flex flex-wrap justify-center gap-2">
                    @foreach ($categories as $category)
                        <li><a href="{{ $category->path() }}" class="inline-flex items-center gap-1.5 rounded-full bg-white/80 px-4 py-2 text-sm font-semibold text-ink shadow-sm ring-1 ring-black/5 hover:bg-brand hover:text-white">{{ $category->name }} <span class="text-xs opacity-60">{{ $category->recipes_count }}</span></a></li>
                    @endforeach
                </ul>
            @endif
        </div>
    </section>

    @if ($featured->isNotEmpty())
        <section class="container-site max-w-7xl py-12" aria-labelledby="h-featured">
            <h2 id="h-featured" class="section-title">{{ __('recipes.featured') }}</h2>
            <div class="mt-6 grid gap-6 md:grid-cols-3">
                @foreach ($featured as $recipe)
                    @include($site->themeView('recipes.partials.card'), ['recipe' => $recipe, 'large' => true])
                @endforeach
            </div>
        </section>
    @endif

    @if ($latest->isNotEmpty())
        <section class="container-site max-w-7xl py-12" aria-labelledby="h-latest">
            <div class="flex flex-wrap items-end justify-between gap-4">
                <h2 id="h-latest" class="section-title">{{ __('recipes.latest') }}</h2>
                <a href="{{ lpath('/'.seg('recipes')) }}" class="text-sm font-semibold text-brand hover:underline">{{ __('recipes.see_all') }} →</a>
            </div>
            <div class="mt-6 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
                @foreach ($latest as $recipe)
                    @include($site->themeView('recipes.partials.card'), ['recipe' => $recipe])
                @endforeach
            </div>
        </section>
    @endif

    <section class="bg-brand/[0.06] py-12" aria-labelledby="h-ingredient">
        <div class="container-site grid max-w-7xl items-center gap-8 md:grid-cols-[1fr_1.4fr]">
            <div>
                <h2 id="h-ingredient" class="section-title">{{ __('recipes.by_ingredient') }}</h2>
                <p class="mt-2 text-slate-600">{{ __('recipes.by_ingredient_help') }}</p>
            </div>
            <form action="{{ lpath('/'.seg('recipes')) }}" method="get" class="flex gap-2">
                <label for="home-ingredient" class="sr-only">{{ __('recipes.ingredient') }}</label>
                <input id="home-ingredient" name="ingredient" class="field flex-1" placeholder="{{ __('recipes.ingredient_placeholder') }}">
                <button class="btn bg-ink px-5 text-white hover:brightness-125">{{ __('recipes.hero_cta') }}</button>
            </form>
        </div>
    </section>

    @if ($quick->isNotEmpty())
        <section class="container-site max-w-7xl py-12" aria-labelledby="h-quick">
            <div class="flex flex-wrap items-end justify-between gap-4">
                <h2 id="h-quick" class="section-title">{{ __('recipes.quick_title') }}</h2>
                <a href="{{ lpath('/'.seg('recipes')) }}?time=30" class="text-sm font-semibold text-brand hover:underline">{{ __('recipes.see_all') }} →</a>
            </div>
            <div class="mt-6 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
                @foreach ($quick as $recipe)
                    @include($site->themeView('recipes.partials.card'), ['recipe' => $recipe])
                @endforeach
            </div>
        </section>
    @endif

    @if ($latestPosts->isNotEmpty())
        <section class="container-site max-w-7xl py-12" aria-labelledby="h-blog">
            <h2 id="h-blog" class="section-title">{{ __('recipes.from_blog') }}</h2>
            <ul class="mt-6 grid gap-6 md:grid-cols-3">
                @foreach ($latestPosts as $post)
                    <li class="card p-5"><a href="{{ $post->path() }}" class="font-[family-name:var(--font-heading)] text-lg font-bold text-ink hover:text-brand">{{ $post->title }}</a>@if ($post->excerpt)<p class="mt-2 line-clamp-3 text-sm text-slate-600">{{ $post->excerpt }}</p>@endif</li>
                @endforeach
            </ul>
        </section>
    @endif
@endsection