<x-front-layout>
  <x-front.page-hero
    eyebrow="Insights"
    title="News"
    description="Catch the latest updates on program changes, policy announcements, and important developments in global mobility."
    image="https://images.unsplash.com/photo-1495020689067-958852a7765e?auto=format&fit=crop&w=1600&q=80"
    imageAlt="Global news and media workspace"
    :meta="['Policy Updates', 'Program Changes', 'Market Developments']" />

  <section class="section-shell py-24 px-4 bg-white dark:bg-background-dark">
    <div class="max-w-7xl mx-auto">
      <div class="text-center mb-16">
        <h2 class="text-3xl md:text-4xl font-black text-secondary dark:text-white mb-4">Latest News</h2>
        <div class="w-20 h-1.5 bg-primary mx-auto rounded-full"></div>
      </div>

      <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
        @foreach ($posts as $post)
          <article class="group navy-card rounded-2xl overflow-hidden flex flex-col transition-all duration-300">
            <a href="{{ route('front.single-news', $post['slug']) }}" class="block h-48 overflow-hidden">
              <img
                alt="{{ $post['hero_alt'] }}"
                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                src="{{ $post['hero_image'] }}" />
            </a>
            <div class="p-6 flex-grow flex flex-col">
              <div class="flex items-center justify-between gap-3 text-xs font-bold uppercase tracking-widest mb-3">
                <span class="text-primary">{{ $post['date'] }}</span>
                <span class="text-accent">{{ $post['category'] }}</span>
              </div>
              <h3 class="text-lg font-bold text-secondary dark:text-white mb-3 group-hover:text-primary transition-colors line-clamp-2">
                <a href="{{ route('front.single-news', $post['slug']) }}">
                  {{ $post['title'] }}
                </a>
              </h3>
              <p class="text-slate-500 dark:text-slate-400 text-sm mb-6 line-clamp-3">{{ $post['excerpt'] }}</p>
              <a class="mt-auto flex items-center gap-2 text-primary font-bold text-sm group/btn" href="{{ route('front.single-news', $post['slug']) }}">
                Read More <span class="material-symbols-outlined text-sm group-hover/btn:translate-x-1 transition-transform">arrow_forward</span>
              </a>
            </div>
          </article>
        @endforeach
      </div>
    </div>
  </section>
</x-front-layout>
