<x-front-layout>
  <x-front.page-hero
    :eyebrow="$post['category']"
    :title="$post['title']"
    :description="$post['excerpt']"
    :image="$post['hero_image']"
    :image-alt="$post['hero_alt']"
    :back-url="route('front.news')"
    back-label="Back to News"
    align="left"
    height="min-h-[70vh]"
    :meta="[$post['date'], $post['read_time'], 'By ' . $post['author']]" />

  <section class="section-shell py-24">
    <div class="mx-auto grid max-w-7xl gap-12 px-8 lg:grid-cols-[minmax(0,1fr)_340px]">
      <article class="navy-card rounded-[2rem] p-8 md:p-12">
        <p class="text-lg leading-relaxed text-slate-700">{{ $post['intro'] }}</p>

        @foreach ($post['sections'] as $section)
          <div class="mt-12">
            <h2 class="text-2xl font-black text-secondary md:text-3xl">{{ $section['heading'] }}</h2>

            @foreach ($section['body'] as $paragraph)
              <p class="mt-5 leading-relaxed text-slate-600 md:text-lg">{{ $paragraph }}</p>
            @endforeach
          </div>
        @endforeach

        <div class="mt-12 rounded-3xl bg-secondary p-8 text-white">
          <span class="text-xs font-bold uppercase tracking-[0.25em] text-accent">What Matters Most</span>
          <div class="mt-6 grid gap-4 md:grid-cols-3">
            @foreach ($post['highlights'] as $highlight)
              <div class="rounded-2xl border border-white/10 bg-white/5 p-5">
                <span class="material-symbols-outlined text-accent">campaign</span>
                <p class="mt-3 text-sm leading-relaxed text-slate-100">{{ $highlight }}</p>
              </div>
            @endforeach
          </div>
        </div>
      </article>

      <aside class="space-y-8">
        <div class="navy-card rounded-3xl p-8">
          <span class="text-xs font-bold uppercase tracking-[0.25em] text-accent">News Snapshot</span>
          <div class="mt-6 space-y-4 text-sm text-slate-600">
            <div class="flex items-start gap-3">
              <span class="material-symbols-outlined text-primary">newspaper</span>
              <div>
                <p class="font-semibold text-secondary">Category</p>
                <p>{{ $post['category'] }}</p>
              </div>
            </div>
            <div class="flex items-start gap-3">
              <span class="material-symbols-outlined text-primary">calendar_today</span>
              <div>
                <p class="font-semibold text-secondary">Published</p>
                <p>{{ $post['date'] }}</p>
              </div>
            </div>
            <div class="flex items-start gap-3">
              <span class="material-symbols-outlined text-primary">schedule</span>
              <div>
                <p class="font-semibold text-secondary">Reading Time</p>
                <p>{{ $post['read_time'] }}</p>
              </div>
            </div>
            <div class="flex items-start gap-3">
              <span class="material-symbols-outlined text-primary">person</span>
              <div>
                <p class="font-semibold text-secondary">Source</p>
                <p>{{ $post['author'] }}</p>
              </div>
            </div>
          </div>
        </div>

       
      </aside>
    </div>
  </section>

  <section class="pb-24">
    <div class="mx-auto max-w-7xl px-8">
      <div class="mb-12 flex items-end justify-between gap-6">
        <div>
          <span class="text-xs font-bold uppercase tracking-[0.25em] text-accent">More Updates</span>
          <h2 class="mt-4 text-3xl font-black text-secondary md:text-4xl">Related News</h2>
        </div>
        <a href="{{ route('front.news') }}" class="hidden font-semibold text-primary transition-colors hover:text-accent md:inline-flex">View all news</a>
      </div>

      <div class="grid gap-8 md:grid-cols-2">
        @foreach ($relatedPosts as $relatedPost)
          <article class="navy-card overflow-hidden rounded-3xl">
            <a href="{{ route('front.single-news', $relatedPost['slug']) }}" class="block">
              <div class="h-56 overflow-hidden">
                <img
                  src="{{ $relatedPost['hero_image'] }}"
                  alt="{{ $relatedPost['hero_alt'] }}"
                  class="h-full w-full object-cover transition-transform duration-500 hover:scale-105">
              </div>
            </a>
            <div class="p-8">
              <div class="flex items-center justify-between text-sm text-slate-500">
                <span>{{ $relatedPost['date'] }}</span>
                <span>{{ $relatedPost['read_time'] }}</span>
              </div>
              <h3 class="mt-4 text-2xl font-black text-secondary">
                <a href="{{ route('front.single-news', $relatedPost['slug']) }}" class="transition-colors hover:text-accent">
                  {{ $relatedPost['title'] }}
                </a>
              </h3>
              <p class="mt-4 text-slate-600">{{ $relatedPost['excerpt'] }}</p>
              <a href="{{ route('front.single-news', $relatedPost['slug']) }}" class="mt-6 inline-flex items-center gap-2 font-semibold text-primary transition-colors hover:text-accent">
                Read Update
                <span class="material-symbols-outlined text-sm">arrow_forward</span>
              </a>
            </div>
          </article>
        @endforeach
      </div>
    </div>
  </section>
</x-front-layout>
