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

{{-- Nature theme: a garden magazine — one featured story, a reading column, seed-packet topics. --}}
@section('content')
    @php
        $featured = $latestPosts->first();
        $rest = $latestPosts->slice(1);
    @endphp
    <section class="container-site pt-6 pb-12">
        <h1 class="max-w-3xl font-[family-name:var(--font-heading)] text-4xl leading-tight font-semibold 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-ink/70">{{ $site->localized('tagline') }}</p>@endif
    </section>

    @if ($featured)
        <section class="container-site grid gap-8 lg:grid-cols-[1.6fr_1fr]" aria-label="{{ __('theme.featured') }}">
            <article class="group relative overflow-hidden rounded-[var(--radius-card)] bg-brand text-white">
                @if ($featured->coverUrl())
                    <img src="{{ $featured->coverUrl() }}" alt="{{ $featured->cover_alt ?? '' }}" class="absolute inset-0 size-full object-cover opacity-40 transition duration-500 group-hover:scale-105" fetchpriority="high">
                @else
                    <div class="absolute -end-16 -bottom-16 size-80 rounded-full bg-accent/40 blur-2xl" aria-hidden="true"></div>
                @endif
                <div class="relative flex min-h-80 flex-col justify-end p-8 md:p-10">
                    <p class="text-sm font-semibold tracking-wider text-white/80 uppercase">{{ __('theme.featured') }}@if ($featured->category) · {{ $featured->category->name }}@endif</p>
                    <h2 class="mt-2 font-[family-name:var(--font-heading)] text-3xl leading-tight font-semibold md:text-4xl"><a href="{{ $featured->path() }}" class="after:absolute after:inset-0">{{ $featured->title }}</a></h2>
                    @if ($featured->excerpt)<p class="mt-3 max-w-xl text-white/85">{{ $featured->excerpt }}</p>@endif
                </div>
            </article>
            <div>
                <h2 class="text-sm font-bold tracking-wider text-brand uppercase">{{ __('theme.latest') }}</h2>
                <ul class="mt-4 space-y-5">
                    @foreach ($rest->take(4) as $post)
                        <li class="border-b border-ink/10 pb-5 last:border-0">
                            <a href="{{ $post->path() }}" class="group block">
                                <span class="font-[family-name:var(--font-heading)] text-xl font-semibold group-hover:text-brand">{{ $post->title }}</span>
                                <span class="mt-1 block text-sm text-ink/60">{{ __('site.reading_time', ['n' => $post->readingMinutes()]) }}</span>
                            </a>
                        </li>
                    @endforeach
                </ul>
                <a href="{{ lpath('/'.seg('blog')) }}" class="btn-brand mt-2">{{ __('site.read_articles') }}</a>
            </div>
        </section>
    @endif

    @if ($categories->where('posts_count', '>', 0)->isNotEmpty())
        <section class="container-site py-16" aria-labelledby="topics-title">
            <h2 id="topics-title" class="font-[family-name:var(--font-heading)] text-3xl font-semibold">{{ __('theme.categories_title') }}</h2>
            <div class="mt-6 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
                @foreach ($categories->where('posts_count', '>', 0) as $category)
                    {{-- "Seed packet" cards: tinted top, rounded body. --}}
                    <a href="{{ $category->path() }}" class="card group overflow-hidden transition hover:-translate-y-1">
                        <span class="tint block px-6 pt-6 pb-10 font-[family-name:var(--font-heading)] text-2xl font-semibold text-brand">{{ $category->name }}</span>
                        <span class="-mt-5 block rounded-t-[var(--radius-card)] bg-white px-6 py-4 text-sm text-ink/70">{{ trans_choice('theme.articles_count', $category->posts_count, ['count' => $category->posts_count]) }}</span>
                    </a>
                @endforeach
            </div>
        </section>
    @endif

    @if ($rest->count() > 4)
        <section class="container-site" aria-labelledby="more-title">
            <h2 id="more-title" class="sr-only">{{ __('site.latest_articles') }}</h2>
            <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
                @foreach ($rest->slice(4) as $post)
                    @include($site->themeView('partials.post-card'))
                @endforeach
            </div>
        </section>
    @endif
@endsection