<x-front-layout>
  <x-front.page-hero
    eyebrow="Insights"
    title="Blog"
    description="Explore our latest articles on investment migration, citizenship strategy, and global mobility intelligence."
    image="https://images.unsplash.com/photo-1450101499163-c8848c66ca85?auto=format&fit=crop&w=1600&q=80"
    imageAlt="Business strategy documents and notebook on a desk"
    :meta="['Strategy', 'Market Intelligence', 'Legal Guidance']" />

  <section class="py-24">
    <div class="max-w-7xl mx-auto px-8">
      <div class="grid gap-8 lg:grid-cols-3">
        @foreach ($posts as $post)
          <article class="navy-card rounded-3xl overflow-hidden shadow-sm hover:shadow-xl transition">
            <a href="{{ route('front.single-blog', $post['slug']) }}" class="block">
              <div class="relative h-60 overflow-hidden">
                <img
                  src="{{ $post['hero_image'] }}"
                  alt="{{ $post['hero_alt'] }}"
                  class="w-full h-full object-cover transition-transform duration-500 hover:scale-105">
                <div class="absolute inset-0 bg-gradient-to-t from-secondary/70 via-secondary/10 to-transparent"></div>
                <span class="absolute top-5 left-5 rounded-full bg-white/90 px-4 py-2 text-[11px] font-bold uppercase tracking-[0.25em] text-accent">
                  {{ $post['category'] }}
                </span>
              </div>
            </a>
            <div class="p-8">
              <div class="flex items-center justify-between text-sm text-slate-500">
                <span>{{ $post['date'] }}</span>
                <span>{{ $post['read_time'] }}</span>
              </div>
              <h2 class="mt-4 text-2xl font-headline font-bold text-secondary">
                <a href="{{ route('front.single-blog', $post['slug']) }}" class="hover:text-accent transition-colors">
                  {{ $post['title'] }}
                </a>
              </h2>
              <p class="mt-4 text-slate-600 leading-relaxed">{{ $post['excerpt'] }}</p>
              <a href="{{ route('front.single-blog', $post['slug']) }}" class="mt-6 inline-flex items-center gap-2 font-semibold text-primary hover:text-accent transition-colors">
                Read Article
                <span class="material-symbols-outlined text-sm">arrow_forward</span>
              </a>
            </div>
          </article>
        @endforeach
      </div>
    </div>
  </section>
</x-front-layout>
