<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.blog')"
    back-label="Back to Blog"
    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 ">
      <article class="navy-card rounded-[2rem] p-8 md:p-12">
        <p class="text-lg leading-relaxed text-slate-700">{{ $post['intro'] }}</p>

        <div class="mt-12 overflow-hidden rounded-[2rem] bg-secondary">
          <div class="grid items-center gap-8 p-4 md:grid-cols-[1.15fr_0.85fr] md:p-6">
            <div class="relative overflow-hidden rounded-[1.5rem] border border-white/10 bg-white/5 shadow-2xl">
              <div class="pointer-events-none absolute inset-0 z-10 bg-gradient-to-t from-secondary/35 via-transparent to-white/10"></div>
              <video
                class="aspect-video w-full object-cover"
                controls
                autoplay
                muted
                loop
                playsinline
                preload="metadata">
                <source src="{{ asset('images/video.mp4') }}" type="video/mp4">
                Your browser does not support the video tag.
              </video>
            </div>

            <div class="relative px-2 py-3 text-white md:px-4">
              <span class="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-4 py-2 text-xs font-bold uppercase tracking-[0.28em] text-slate-100">
                <span class="material-symbols-outlined text-base text-accent">play_circle</span>
                Featured Briefing
              </span>
              <h2 class="mt-6 text-3xl font-black leading-tight md:text-4xl">A more immersive look at the story behind this insight.</h2>
              <p class="mt-5 max-w-xl text-base leading-relaxed text-slate-200 md:text-lg">
                Watch the featured clip for a polished visual summary that complements the article and makes the narrative feel more dynamic.
              </p>
              <div class="mt-6 flex items-center gap-3 text-sm font-medium text-slate-200">
                <span class="inline-flex h-11 w-11 items-center justify-center rounded-full border border-white/15 bg-white/10">
                  <span class="material-symbols-outlined text-accent">videocam</span>
                </span>
                Curated media section designed to sit naturally inside the reading flow.
              </div>
            </div>
          </div>
        </div>

        @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">Key Takeaways</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">check_circle</span>
                <p class="mt-3 text-sm leading-relaxed text-slate-100">{{ $highlight }}</p>
              </div>
            @endforeach
          </div>
        </div>
      </article>

     
    </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 Insights</span>
          <h2 class="mt-4 text-3xl font-black text-secondary md:text-4xl">Related Articles</h2>
        </div>
        <a href="{{ route('front.blog') }}" class="hidden font-semibold text-primary transition-colors hover:text-accent md:inline-flex">View all articles</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-blog', $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-blog', $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-blog', $relatedPost['slug']) }}" class="mt-6 inline-flex items-center gap-2 font-semibold text-primary transition-colors hover:text-accent">
                Read Article
                <span class="material-symbols-outlined text-sm">arrow_forward</span>
              </a>
            </div>
          </article>
        @endforeach
      </div>
    </div>
  </section>
</x-front-layout>
