@php
    $pageTitle = match (true) {
        !empty($activeCategory) => $activeCategory->name,
        !empty($activeTag) => 'Tag: '.$activeTag->name,
        default => 'Blog & resources',
    };

    $pageLead = match (true) {
        !empty($activeCategory) => $activeCategory->description ?: 'Articles about '.$activeCategory->name.'.',
        !empty($activeTag) => 'Posts tagged '.$activeTag->name.'.',
        default => 'Remote staffing tips, hiring playbooks, and growth strategies for Australian businesses.',
    };
@endphp

<x-layouts.app :seo="$seo" :schema="$schema ?? []">
    @push('head')
        <link rel="alternate" type="application/rss+xml" title="{{ config('apex.name') }} Blog" href="{{ route('blog.feed') }}">
        @if($posts->previousPageUrl())
            <link rel="prev" href="{{ $posts->previousPageUrl() }}">
        @endif
        @if($posts->nextPageUrl())
            <link rel="next" href="{{ $posts->nextPageUrl() }}">
        @endif
    @endpush

    <section class="home-section home-section--hero bg-white border-b border-slate-100">
        <div class="container-page">
            <x-breadcrumbs
                :items="array_filter([
                    ['label' => 'Home', 'url' => url('/')],
                    ['label' => 'Blog', 'url' => route('blog.index')],
                    !empty($activeCategory) ? ['label' => $activeCategory->name] : null,
                    !empty($activeTag) ? ['label' => $activeTag->name] : null,
                ])"
                class="mb-8 !px-0 !py-0"
            />

            <div class="home-split home-split--equal home-split--center">
                <div class="min-w-0">
                    <p class="home-kicker">Insights</p>
                    <h1 class="home-hero-title !text-[clamp(1.75rem,3.5vw,2.5rem)]">{{ $pageTitle }}</h1>
                    <p class="home-lead">{{ $pageLead }}</p>
                    <a href="{{ route('blog.feed') }}" class="home-text-link mt-6 inline-block">Subscribe via RSS</a>
                </div>

                @if($categories->isNotEmpty())
                    <div class="blog-category-panel">
                        <p class="blog-category-panel__label">Browse topics</p>
                        <div class="blog-category-panel__list">
                            <a href="{{ route('blog.index') }}" @class(['blog-chip', 'is-active' => empty($activeCategory) && empty($activeTag)])>All</a>
                            @foreach($categories as $category)
                                <a href="{{ route('blog.category', $category->slug) }}" @class(['blog-chip', 'is-active' => !empty($activeCategory) && $activeCategory->id === $category->id])>
                                    {{ $category->name }}
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </section>

    <section class="home-section bg-white">
        <div class="container-page">
            @if($featured && empty($activeCategory) && empty($activeTag))
                <article class="blog-featured">
                    <a href="{{ route('blog.show', $featured->slug) }}" class="blog-featured__media">
                        @if($featured->featuredImageUrl())
                            <img
                                src="{{ $featured->featuredImageUrl() }}"
                                alt="{{ $featured->featuredImage?->alt_text ?: $featured->title }}"
                                width="960"
                                height="540"
                                class="blog-featured__image"
                                loading="eager"
                                decoding="async"
                            >
                        @else
                            <div class="blog-featured__placeholder" aria-hidden="true"></div>
                        @endif
                    </a>

                    <div class="blog-featured__body">
                        <p class="home-kicker">Featured</p>
                        <h2 class="blog-featured__title">
                            <a href="{{ route('blog.show', $featured->slug) }}">{{ $featured->title }}</a>
                        </h2>
                        @if($featured->excerpt)
                            <p class="blog-featured__excerpt">{{ $featured->excerpt }}</p>
                        @endif
                        <div class="blog-featured__meta">
                            @if($featured->category)
                                <span>{{ $featured->category->name }}</span>
                            @endif
                            @if($featured->published_at)
                                <time datetime="{{ $featured->published_at->toIso8601String() }}">{{ $featured->published_at->format('M j, Y') }}</time>
                            @endif
                            <span>{{ $featured->readingTimeMinutes() }} min read</span>
                        </div>
                        <a href="{{ route('blog.show', $featured->slug) }}" class="home-text-link mt-6 inline-block">Read the article</a>
                    </div>
                </article>
            @endif

            @if($listPosts->isNotEmpty())
                <div @class(['blog-grid', 'mt-12' => $featured && empty($activeCategory) && empty($activeTag)])>
                    @foreach($listPosts as $post)
                        @include('pages.blog._card', ['post' => $post])
                    @endforeach
                </div>
            @elseif(empty($featured))
                <div class="blog-empty">
                    <p class="blog-empty__title">Articles coming soon</p>
                    <p class="blog-empty__text">We're preparing insights on remote hiring and team scaling. Check back shortly or <a href="{{ route('book.index') }}" class="home-text-link">book a consultation</a>.</p>
                </div>
            @endif

            @if($posts->hasPages())
                <nav class="blog-pagination" aria-label="Blog pagination">
                    {{ $posts->links() }}
                </nav>
            @endif
        </div>
    </section>

    <x-public.cta-band
        title="Want personalised advice?"
        subtitle="Skip the blog — talk to our team directly and get a hiring plan for your business."
    />
</x-layouts.app>