@php
    $isTh = app()->getLocale() === 'th';
@endphp
<section class="relative isolate overflow-hidden bg-gradient-to-b from-white via-lux-cream to-lux-blush/25 py-20 md:py-24" aria-labelledby="related-posts-heading">
    <div class="mx-auto max-w-6xl px-4 md:px-6">
        <div class="text-center">
            <p class="scroll-reveal font-script text-3xl text-tsb-primary md:text-4xl" data-scroll-reveal>
                {{ $isTh ? 'อ่านต่อ' : 'Keep reading' }}
            </p>
            <h2 id="related-posts-heading" class="scroll-reveal lux-section-title mt-2" data-scroll-reveal>
                {{ $isTh ? 'บทความที่อาจถูกใจคุณ' : 'You may also enjoy' }}
            </h2>
        </div>

        <div class="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($related as $post)
                <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:shadow-[0_22px_55px_-24px_rgba(183,51,101,0.18)]" data-scroll-reveal>
                    <a href="{{ route('frontend.blog.show', $post['slug']) }}" 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.04]"
                            width="640"
                            height="400"
                            loading="lazy"
                            decoding="async"
                        />
                    </a>
                    <div class="flex flex-1 flex-col px-5 py-5">
                        <h3 class="font-serif text-lg font-medium leading-tight text-lux-ink">
                            <a href="{{ route('frontend.blog.show', $post['slug']) }}" 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>
                    </div>
                </article>
            @endforeach
        </div>
    </div>
</section>