@php
    $isTh = app()->getLocale() === 'th';
    $featured = $posts[0] ?? null;
    $rest = array_slice($posts, 1);
    $gridPosts = array_merge($rest, \Modules\Frontend\app\Support\SiteContent::blogLoadMoreMockPosts());
    $initialVisible = 3;
    $perLoad = 3;
    $hasMore = count($gridPosts) > $initialVisible;
@endphp
<section class="relative isolate overflow-hidden bg-white py-20 md:py-28" aria-labelledby="blog-list-heading">
    <div class="pointer-events-none absolute -left-16 top-12 h-[200px] w-[200px] lux-dot-overlay opacity-50" aria-hidden="true"></div>
    <div class="relative mx-auto max-w-6xl px-4 md:px-6">
        <div>
            <p class="scroll-reveal font-script text-3xl text-tsb-primary md:text-4xl" data-scroll-reveal>
                {{ $isTh ? 'บทความทั้งหมด' : 'All articles' }}
            </p>
            <h2 id="blog-list-heading" class="scroll-reveal lux-section-title mt-2" data-scroll-reveal>
                {{ $isTh ? 'เรื่องเล่าและคำแนะนำจากเรา' : 'Stories and notes from us' }}
            </h2>
        </div>

        @if ($featured)
            <article class="scroll-reveal mt-10 grid gap-6 overflow-hidden rounded-2xl border border-lux-ink/10 bg-lux-cream/50 shadow-[0_18px_50px_-28px_rgba(74,74,78,0.35)] md:mt-12 lg:grid-cols-12" data-scroll-reveal>
                <a href="{{ route('frontend.blog.show', $featured['slug']) }}" class="group relative block aspect-[16/10] w-full overflow-hidden lg:col-span-7">
                    <img
                        src="{{ asset('modules/frontend/images/services/'.$featured['cover']) }}"
                        alt="{{ $featured['title'] }}"
                        class="h-full w-full object-cover transition duration-700 group-hover:scale-[1.04]"
                        width="1280"
                        height="800"
                        loading="lazy"
                        decoding="async"
                    />
                </a>
                <div class="flex flex-col justify-center px-6 pb-6 lg:col-span-5 lg:px-8 lg:py-10">
                    <h3 class="font-serif text-2xl font-medium leading-tight text-lux-ink md:text-3xl">
                        <a href="{{ route('frontend.blog.show', $featured['slug']) }}" class="transition-colors hover:text-tsb-primary">{{ $featured['title'] }}</a>
                    </h3>
                    <p class="mt-4 text-sm leading-relaxed text-lux-ink-muted md:text-base">{{ $featured['excerpt'] }}</p>
                    <div class="mt-6 flex items-center border-t border-lux-ink/10 pt-5 text-xs text-lux-ink-muted">
                        <span class="inline-flex items-center gap-2">
                            <iconify-icon icon="lucide:calendar" class="h-3.5 w-3.5" aria-hidden="true"></iconify-icon>
                            {{ \Illuminate\Support\Carbon::parse($featured['updated_at'])->translatedFormat('d M Y') }}
                        </span>
                    </div>
                    <a href="{{ route('frontend.blog.show', $featured['slug']) }}" class="mt-6 inline-flex items-center gap-2 self-start font-sans text-[0.7rem] font-semibold uppercase tracking-[0.18em] text-tsb-primary transition hover:gap-3 hover:text-[#8f5346]">
                        {{ __('frontend::messages.blog_read_more') }}
                        <iconify-icon icon="lucide:arrow-right" class="h-4 w-4" aria-hidden="true"></iconify-icon>
                    </a>
                </div>
            </article>
        @endif

        <div
            class="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3 md:mt-14"
            data-blog-load-more-grid
        >
            @foreach ($gridPosts as $index => $post)
                @php
                    $isMock = ! empty($post['mock']);
                    $postUrl = $isMock ? '#' : route('frontend.blog.show', $post['slug']);
                    $isHidden = $index >= $initialVisible;
                @endphp
                <article
                    @class([
                        'scroll-reveal group flex h-full flex-col overflow-hidden rounded-2xl border border-lux-ink/10 bg-white shadow-[0_10px_36px_-14px_rgba(74,74,78,0.35)] transition-[transform,box-shadow] hover:-translate-y-1 hover:border-tsb-primary/25 hover:shadow-[0_22px_55px_-24px_rgba(183,51,101,0.18)]',
                        'hidden' => $isHidden,
                    ])
                    data-scroll-reveal
                    @if ($isHidden) data-blog-load-more-item @endif
                >
                    <a
                        href="{{ $postUrl }}"
                        @if ($isMock) data-blog-mock-link @endif
                        class="relative block aspect-[16/10] w-full overflow-hidden bg-lux-cream"
                    >
                        <img
                            src="{{ asset('modules/frontend/images/services/'.$post['cover']) }}"
                            alt="{{ $post['title'] }}"
                            class="h-full w-full object-cover transition duration-700 group-hover:scale-[1.05]"
                            width="640"
                            height="400"
                            loading="lazy"
                            decoding="async"
                        />
                    </a>
                    <div class="flex flex-1 flex-col px-5 py-5 sm:px-6 sm:py-6">
                        <div class="font-sans text-[0.6rem] font-semibold uppercase tracking-[0.22em] text-lux-ink-muted">
                            <span class="inline-flex items-center gap-1.5">
                                <iconify-icon icon="lucide:calendar" class="h-3 w-3" aria-hidden="true"></iconify-icon>
                                {{ \Illuminate\Support\Carbon::parse($post['updated_at'])->translatedFormat('d M Y') }}
                            </span>
                        </div>
                        <h3 class="mt-3 font-serif text-lg font-medium leading-tight text-lux-ink md:text-xl">
                            <a
                                href="{{ $postUrl }}"
                                @if ($isMock) data-blog-mock-link @endif
                                class="transition-colors hover:text-tsb-primary"
                            >{{ $post['title'] }}</a>
                        </h3>
                        <p class="mt-3 flex-1 text-sm leading-relaxed text-lux-ink-muted">{{ $post['excerpt'] }}</p>
                        <a
                            href="{{ $postUrl }}"
                            @if ($isMock) data-blog-mock-link @endif
                            class="mt-5 inline-flex items-center gap-2 self-start font-sans text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-tsb-primary transition hover:gap-3 hover:text-[#8f5346]"
                        >
                            {{ __('frontend::messages.blog_read_more') }}
                            <iconify-icon icon="lucide:arrow-right" class="h-4 w-4" aria-hidden="true"></iconify-icon>
                        </a>
                    </div>
                </article>
            @endforeach
        </div>

        @if ($hasMore)
            <div
                class="mt-12 flex justify-center md:mt-14"
                data-blog-load-more
                data-per-load="{{ $perLoad }}"
                data-loading-label="{{ __('frontend::messages.blog_load_more_loading') }}"
            >
                <button
                    type="button"
                    class="inline-flex min-w-[11rem] items-center justify-center gap-0 rounded-full border border-tsb-primary/45 bg-white px-8 py-3 font-sans text-[0.7rem] font-semibold uppercase tracking-[0.14em] text-tsb-primary transition-[background-color,border-color,opacity,transform,gap] duration-300 hover:border-tsb-primary hover:bg-tsb-primary/5 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tsb-primary/40 disabled:cursor-not-allowed disabled:opacity-60"
                    data-blog-load-more-btn
                >
                    <span data-blog-load-more-label>{{ __('frontend::messages.blog_load_more') }}</span>
                    <span class="blog-load-more-icon-slot" data-blog-load-more-icon-slot aria-hidden="true">
                        <span class="blog-load-more-spinner" data-blog-load-more-icon></span>
                    </span>
                </button>
            </div>
        @endif
    </div>
</section>