@extends('layouts.app')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/style-index.css') }}">
<link rel="stylesheet" href="{{ asset('css/responsive-index.css') }}">
@endpush

@section('title', config('app.name', 'The Hindu') . ' — India\'s National Newspaper')
@section('meta_description', 'Breaking news and latest stories from India and around the world. Stay informed with The Hindu.')
@section('canonical', route('index'))

@section('schema_json')
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "{{ config('app.name', 'The Hindu') }}",
  "url": "{{ config('app.url') }}",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "{{ url('/search?q={search_term_string}') }}",
    "query-input": "required name=search_term_string"
  }
}
</script>
@endsection

@section('content')

{{-- ══════════════════════════════════════════════════════════════
     SECTION 0 — TOP NEWS (3-column hero grid)
══════════════════════════════════════════════════════════════ --}}
<section class="tp-wrapper" aria-label="Top News">
  <h2 class="tp-heading">Top News</h2>
  <div class="tp-grid">

    {{-- LEFT: Hero image + sub-items --}}
    <div class="tp-left">
      @if($topNewsHero)
      <a href="{{ $topNewsHero->canonical_url }}" title="{{ $topNewsHero->news_title }}">
        <img src="{{ $topNewsHero->photo_url }}" class="tp-main-img" alt="{{ $topNewsHero->img_alt ?: $topNewsHero->news_title }}" loading="eager" width="600" height="380">
      </a>
      <div class="tp-live">● LIVE</div>
      <h1 class="tp-title">
        <a href="{{ $topNewsHero->canonical_url }}" title="{{ $topNewsHero->news_title }}">{{ $topNewsHero->news_title }}</a>
      </h1>
      <p class="tp-desc">{{ Str::limit(strip_tags($topNewsHero->news_content_short), 140) }}</p>

      <div class="wrapper">
        @foreach($topNewsSubItems as $loop_sub => $sub)
        <div class="news-block">
          <div class="thumb-box">
            <img src="{{ $sub->photo_url }}" alt="{{ $sub->img_alt ?: $sub->news_title }}" loading="lazy" width="80" height="60">
          </div>
          <div class="content-box">
            @if($loop_sub === 0)
            <div class="tag-live">● LIVE</div>
            @else
            <div class="tag-category">{{ strtoupper($sub->category->category_name ?? 'NEWS') }}</div>
            @endif
            <h2 class="headline">
              <a href="{{ $sub->canonical_url }}" title="{{ $sub->news_title }}">{{ Str::limit($sub->news_title, 100) }}</a>
            </h2>
            <p class="author">{{ strtoupper($sub->author->name ?? 'THE HINDU BUREAU') }}</p>
          </div>
        </div>
        @endforeach
      </div>
      @endif
    </div>

    {{-- MIDDLE: Headline list + story items + feature card --}}
    <div class="tp-middle">
      @foreach($topNewsMiddle->take(5) as $loop_mid => $mid)
      <div class="tp-item">
        @if($loop_mid < 2)
        <span class="tp-tag red">LIVE</span>
        @else
        <span class="tp-tag">{{ strtoupper($mid->category->category_name ?? 'NEWS') }}</span>
        @endif
        <p><a href="{{ $mid->canonical_url }}" title="{{ $mid->news_title }}">{{ Str::limit($mid->news_title, 90) }}</a></p>
      </div>
      @endforeach

      {{-- Story items (skip first 2 already shown as tp-item above, show next 3 as story-item) --}}
      @foreach($topNewsMiddle->skip(2)->take(3) as $loop_st => $st)
      <div class="story-item">
        @if($loop_st === 0)
        <div class="label-live">● LIVE</div>
        @else
        <div class="label-cat">{{ strtoupper($st->category->category_name ?? 'NEWS') }}</div>
        @endif
        <h2 class="story-title"><a href="{{ $st->canonical_url }}" title="{{ $st->news_title }}">{{ Str::limit($st->news_title, 90) }}</a></h2>
        <div class="story-author">{{ strtoupper($st->author->name ?? 'THE HINDU BUREAU') }}</div>
      </div>
      @endforeach

      {{-- Feature card: use first latestSidebarFeed item as feature card --}}
      @if($latestSidebarFeed->isNotEmpty())
      @php $featureCard = $latestSidebarFeed->first(); @endphp
      <div class="feature-card">
        <a href="{{ $featureCard->canonical_url }}">
          <img src="{{ $featureCard->photo_url }}" alt="{{ $featureCard->img_alt ?: $featureCard->news_title }}" loading="lazy">
        </a>
        <div class="overlay-box">
          <div class="label-feature">{{ strtoupper($featureCard->category->category_name ?? 'FEATURES') }}</div>
          <h2 class="feature-title">
            <a href="{{ $featureCard->canonical_url }}" title="{{ $featureCard->news_title }}" style="color: white;">{{ Str::limit($featureCard->news_title, 80) }}</a>
          </h2>
          <div class="feature-author">{{ strtoupper($featureCard->author->name ?? 'THE HINDU BUREAU') }}</div>
        </div>
      </div>
      @endif
    </div>

    {{-- RIGHT: Editorial + Latest feed --}}
    <div class="tp-right">
      <div class="img-sec">
        <img src="{{ asset('img/hindu.svg') }}" alt="The Hindu" loading="lazy" width="200" height="auto">
      </div>

      <div class="tp-editorial">
        <h3>Editorial</h3>
        @foreach($editorialItems as $ed)
        <p><a href="{{ $ed->canonical_url }}" title="{{ $ed->news_title }}">{{ Str::limit($ed->news_title, 80) }}</a></p>
        @endforeach
      </div>

      <div class="tp-comment">
        @if($editorialItems->count() > 0)
        @php $comment = $editorialItems->last(); @endphp
        <span class="tp-tag red">COMMENT</span>
        <p><a href="{{ $comment->canonical_url }}" title="{{ $comment->news_title }}">{{ Str::limit($comment->news_title, 80) }}</a></p>
        @endif
      </div>

      <div class="tp-latest">
        <h4>Latest News →</h4>
        @if($latestSidebarFeed->isNotEmpty())
        <p><span>{{ strtoupper($latestSidebarFeed->first()->published_human) }}</span> {{ Str::limit($latestSidebarFeed->first()->news_title, 50) }}</p>
        @endif
      </div>

      <div class="ln-list">
        @foreach($latestSidebarFeed->skip(1)->take(3) as $lf)
        <div class="ln-item">
          <p class="ln-time">{{ strtoupper($lf->published_human) }}</p>
          <p class="ln-text"><a href="{{ $lf->canonical_url }}" title="{{ $lf->news_title }}">{{ Str::limit($lf->news_title, 85) }}</a></p>
        </div>
        @endforeach
      </div>

      <div class="ln-more"><a href="{{ route('search') }}">READ MORE STORIES</a></div>
    </div>

  </div>
</section>


{{-- ══════════════════════════════════════════════════════════════
     SECTION 1 — SPOTLIGHT 1 (topic deep-dive strip)
     Matches the "U.S.-Israel war on Iran" block in index.html
══════════════════════════════════════════════════════════════ --}}
@if($spotlightCategory && $spotlightMain)
<div class="news-war-container" aria-label="{{ $spotlightCategory->category_name }} Spotlight">

  <div class="news-war-header">
    <div class="news-war-title">{{ strtoupper($spotlightCategory->category_name) }}</div>
    <a href="{{ route('category.show', $spotlightCategory->slug) }}" class="news-war-readmore">READ MORE →</a>
  </div>

  <div class="news-war-links">
    @foreach($spotlightLinks as $link)
    <a href="#">{{ Str::limit($link, 65) }}</a>
    @endforeach
  </div>

  <div class="news-war-main">
    <div class="news-war-left">
      <h2>{{ $spotlightMain->news_title }}</h2>
      <p>{{ Str::limit(strip_tags($spotlightMain->news_content_short), 200) }}</p>
      <div class="news-war-author">{{ strtoupper($spotlightMain->author->name ?? 'THE HINDU BUREAU') }}</div>
      <a href="{{ $spotlightMain->canonical_url }}" class="war-read-link">Read full story →</a>
    </div>

    <div class="news-war-center">
      <a href="{{ $spotlightMain->canonical_url }}">
        <img src="{{ $spotlightMain->photo_url }}" alt="{{ $spotlightMain->img_alt ?: $spotlightMain->news_title }}" loading="lazy" width="400" height="280">
      </a>
    </div>

    <div class="news-war-right">
      @foreach($spotlightRight as $sr)
      <div class="news-war-right-item">
        <p><a href="{{ $sr->canonical_url }}" title="{{ $sr->news_title }}">{{ Str::limit($sr->news_title, 70) }}</a></p>
        <img src="{{ $sr->photo_url }}" alt="{{ $sr->img_alt ?: $sr->news_title }}" loading="lazy" width="80" height="60">
      </div>
      @endforeach
    </div>
  </div>

</div>
@endif


{{-- ══════════════════════════════════════════════════════════════
     SECTION 2 — FOR YOU (4-card grid)
══════════════════════════════════════════════════════════════ --}}
@if($forYouItems->isNotEmpty())
<div class="this-is-main-wrapper-area" aria-label="For You">
  <div class="this-is-heading-title-text">For you</div>
  <div class="this-is-four-column-layout">
    @foreach($forYouItems as $item)
    <div class="this-is-single-news-card">
      <div class="this-is-image-holder">
        <a href="{{ $item->canonical_url }}">
          <img src="{{ $item->photo_url }}" alt="{{ $item->img_alt ?: $item->news_title }}" loading="lazy" width="280" height="180">
        </a>
      </div>
      <div class="this-is-news-heading-text">
        <a href="{{ $item->canonical_url }}" title="{{ $item->news_title }}">{{ Str::limit($item->news_title, 90) }}</a>
      </div>
      <div class="this-is-author-small-text">{{ strtoupper($item->author->name ?? 'THE HINDU BUREAU') }}</div>
    </div>
    @endforeach
  </div>
</div>
@endif


{{-- ══════════════════════════════════════════════════════════════
     SECTION 3 — EDITOR'S PICK (left hero + middle 2-stack + right panels)
══════════════════════════════════════════════════════════════ --}}
@if($editorsPick)
<div class="wrapper-zone" aria-label="Editor's Pick">
  <div class="heading-fire">Editor's Pick</div>

  <div class="grid-master">

    {{-- LEFT: Hero --}}
    <div class="left-hero">
      <a href="{{ $editorsPick->canonical_url }}">
        <img src="{{ $editorsPick->photo_url }}" alt="{{ $editorsPick->img_alt ?: $editorsPick->news_title }}" loading="lazy" width="460" height="300">
      </a>
      <div class="tag-small">{{ strtoupper($editorsPick->category->category_name ?? '') }}</div>
      <div class="big-headline">
        <a href="{{ $editorsPick->canonical_url }}" title="{{ $editorsPick->news_title }}">{{ $editorsPick->news_title }}</a>
      </div>
      <div class="subtext-line">{{ Str::limit(strip_tags($editorsPick->news_content_short), 120) }}</div>
    </div>

    {{-- MIDDLE: 2-stack with divider like index.html --}}
    <div class="middle-stack">
      @foreach($editorsMiddle as $loop_em => $em)
      <div class="card-box">
        <a href="{{ $em->canonical_url }}">
          <img src="{{ $em->photo_url }}" alt="{{ $em->img_alt ?: $em->news_title }}" loading="lazy" width="280" height="160">
        </a>
        <div class="small-label">{{ strtoupper($em->category->category_name ?? '') }}</div>
        <div class="card-title"><a href="{{ $em->canonical_url }}" title="{{ $em->news_title }}">{{ Str::limit($em->news_title, 85) }}</a></div>
        @if($loop_em === 0)
        <div class="author-name">{{ strtoupper($em->author->name ?? 'THE HINDU BUREAU') }}</div>
        @else
        <hr>
        <div class="card-title">
          <div class="small-label">{{ strtoupper($em->category->category_name ?? '') }}</div>
          {{ Str::limit($em->news_title, 85) }}
        </div>
        @endif
      </div>
      @endforeach
    </div>

    {{-- RIGHT: Cities + States panels --}}
    <div class="side-panel">

      @if($citiesPanel->isNotEmpty())
      <div class="panel-section">
        <div class="panel-header">
          <div class="panel-title">Cities →</div>
          <div class="select-btn">Select City ⌄</div>
        </div>
        @foreach($citiesPanel as $city)
        <div class="news-row">
          <div class="news-text"><a href="{{ $city->canonical_url }}" title="{{ $city->news_title }}">{{ Str::limit($city->news_title, 70) }}</a></div>
          <img src="{{ $city->photo_url }}" alt="{{ $city->img_alt ?: $city->news_title }}" loading="lazy" width="70" height="52">
        </div>
        @endforeach
      </div>
      @endif

      @if($statesPanel->isNotEmpty())
      <div class="panel-section">
        <div class="panel-header">
          <div class="panel-title">States →</div>
          <div class="select-btn">Select State ⌄</div>
        </div>
        @foreach($statesPanel as $state)
        <div class="news-row">
          <div class="news-text"><a href="{{ $state->canonical_url }}" title="{{ $state->news_title }}">{{ Str::limit($state->news_title, 70) }}</a></div>
          <img src="{{ $state->photo_url }}" alt="{{ $state->img_alt ?: $state->news_title }}" loading="lazy" width="70" height="52">
        </div>
        <hr>
        @endforeach
      </div>
      @endif

    </div>
  </div>
</div>
@endif


{{-- ══════════════════════════════════════════════════════════════
     SECTION 1B — SPOTLIGHT 2 (second war/topic strip)
     Matches the "Indian Premier League 2026" block in index.html
     Uses sectionTwoCategory items to populate a second spotlight strip
══════════════════════════════════════════════════════════════ --}}
@if($sectionTwoCategory && $sectionTwoItems->isNotEmpty())
@php
  $spotlight2Main  = $sectionTwoItems->first();
  $spotlight2Right = $sectionTwoItems->skip(1)->take(3);
@endphp
<div class="news-war-container" aria-label="{{ $sectionTwoCategory->category_name }}">

  <div class="news-war-header">
    <div class="news-war-title">{{ strtoupper($sectionTwoCategory->category_name) }}</div>
    <a href="{{ route('category.show', $sectionTwoCategory->slug) }}" class="news-war-readmore">READ MORE →</a>
  </div>

  <div class="news-war-links">
    @foreach($sectionTwoItems->take(3) as $s2link)
    <a href="{{ $s2link->canonical_url }}">{{ Str::limit($s2link->news_title, 65) }}</a>
    @endforeach
  </div>

  <div class="news-war-main">
    <div class="news-war-left">
      <h2>{{ $spotlight2Main->news_title }}</h2>
      <p>{{ Str::limit(strip_tags($spotlight2Main->news_content_short), 200) }}</p>
      <div class="news-war-author">{{ strtoupper($spotlight2Main->author->name ?? 'THE HINDU BUREAU') }}</div>
      <a href="{{ $spotlight2Main->canonical_url }}" class="war-read-link">Read full story →</a>
    </div>

    <div class="news-war-center">
      <a href="{{ $spotlight2Main->canonical_url }}">
        <img src="{{ $spotlight2Main->photo_url }}" alt="{{ $spotlight2Main->img_alt ?: $spotlight2Main->news_title }}" loading="lazy" width="400" height="280">
      </a>
    </div>

    <div class="news-war-right">
      @foreach($spotlight2Right as $s2r)
      <div class="news-war-right-item">
        <p><a href="{{ $s2r->canonical_url }}" title="{{ $s2r->news_title }}">{{ Str::limit($s2r->news_title, 70) }}</a></p>
        <img src="{{ $s2r->photo_url }}" alt="{{ $s2r->img_alt ?: $s2r->news_title }}" loading="lazy" width="80" height="60">
      </div>
      @endforeach
    </div>
  </div>

</div>
@endif


{{-- ══════════════════════════════════════════════════════════════
     SECTION 4 — SECTION ONE (category deep-dive block)
     Matches "Assembly Elections 2026" block in index.html
══════════════════════════════════════════════════════════════ --}}
@if($sectionOneCategory && $sectionOneMain)
<div class="jp-wrapper" aria-label="{{ $sectionOneCategory->category_name }}">
  <h1 class="jp-heading">{{ $sectionOneCategory->category_name }}</h1>

  <div class="jp-grid">

    <div class="jp-left-col">
      <a href="{{ $sectionOneMain->canonical_url }}">
        <img src="{{ $sectionOneMain->photo_url }}" class="jp-main-img" alt="{{ $sectionOneMain->img_alt ?: $sectionOneMain->news_title }}" loading="lazy" width="460" height="300">
      </a>
      <span class="jp-tag">{{ strtoupper($sectionOneCategory->category_name) }}</span>
      <h2 class="jp-title">
        <a href="{{ $sectionOneMain->canonical_url }}" title="{{ $sectionOneMain->news_title }}">{{ $sectionOneMain->news_title }}</a>
      </h2>
      <p class="jp-desc">{{ Str::limit(strip_tags($sectionOneMain->news_content_short), 160) }}</p>

      {{-- Sub-items below main — 2-column grid matching index.html nx-grid --}}
      <div class="nx-wrap">
        <div class="nx-grid">
          <div class="nx-col">
            @foreach($sectionOneLeft as $loop_sl => $sl)
            <div class="nx-top">
              @if($loop_sl === 0)
              <span class="nx-cat">{{ strtoupper($sl->category->category_name ?? '') }}</span>
              @else
              <span class="nx-live-dot"></span>
              <span class="nx-live-text">LIVE</span>
              @endif
              <h3 class="nx-head"><a href="{{ $sl->canonical_url }}" title="{{ $sl->news_title }}">{{ Str::limit($sl->news_title, 85) }}</a></h3>
              <span class="nx-src">{{ strtoupper($sl->author->name ?? 'THE HINDU BUREAU') }}</span>
            </div>
            @if(!$loop->last)<div class="nx-divider"></div>@endif
            @endforeach

            {{-- Extra card below divider in left col --}}
            @if($sectionOneLeft->count() > 0)
            @php $extraLeft = $sectionOneLeft->first(); @endphp
            <div class="nx-card">
              <img src="{{ $extraLeft->photo_url }}" class="nx-img" alt="{{ $extraLeft->img_alt ?: $extraLeft->news_title }}" loading="lazy" width="140" height="90">
              <span class="nx-cat red">{{ strtoupper($extraLeft->category->category_name ?? '') }}</span>
              <h3 class="nx-head"><a href="{{ $extraLeft->canonical_url }}" title="{{ $extraLeft->news_title }}">{{ Str::limit($extraLeft->news_title, 85) }}</a></h3>
              <span class="nx-src">{{ strtoupper($extraLeft->author->name ?? 'THE HINDU BUREAU') }}</span>
            </div>
            @endif
          </div>

          <div class="nx-col">
            @foreach($sectionOneRight as $loop_sr => $sr)
            @if($loop_sr === 0)
            <div class="nx-top">
              <span class="nx-live-dot"></span>
              <span class="nx-live-text">LIVE</span>
              <h3 class="nx-head"><a href="{{ $sr->canonical_url }}" title="{{ $sr->news_title }}">{{ Str::limit($sr->news_title, 85) }}</a></h3>
              <span class="nx-src">{{ strtoupper($sr->author->name ?? 'THE HINDU BUREAU') }}</span>
            </div>
            <div class="nx-divider"></div>
            @else
            <div class="nx-card">
              <img src="{{ $sr->photo_url }}" class="nx-img" alt="{{ $sr->img_alt ?: $sr->news_title }}" loading="lazy" width="140" height="90">
              <span class="nx-cat red">{{ strtoupper($sr->category->category_name ?? '') }}</span>
              <h3 class="nx-head"><a href="{{ $sr->canonical_url }}" title="{{ $sr->news_title }}">{{ Str::limit($sr->news_title, 85) }}</a></h3>
            </div>
            @endif
            @endforeach
          </div>
        </div>
      </div>
    </div>

    {{-- Right side: video/ad box + list --}}
    <div class="jp-right-col">
      <div class="jp-video-box">
        <img src="{{ asset('img/add.jpg') }}" class="jp-video-img" alt="Featured Video" loading="lazy">
        <span class="jp-video-label">VIDEOS</span>
        @if($sectionOneMain)
        <h3 class="jp-video-title">{{ Str::limit($sectionOneMain->news_title, 80) }}</h3>
        <p class="jp-video-desc">{{ Str::limit(strip_tags($sectionOneMain->news_content_short), 100) }}</p>
        @endif
      </div>

      <div class="jp-right-list">
        @foreach($sectionOneLeft->take(2) as $jpl)
        <div class="jp-right-item">
          <p><a href="{{ $jpl->canonical_url }}" title="{{ $jpl->news_title }}">{{ Str::limit($jpl->news_title, 75) }}</a></p>
        </div>
        @endforeach
      </div>
    </div>

  </div>

  <a href="{{ route('category.show', $sectionOneCategory->slug) }}" class="explore-btn">
    Explore More <span>→</span>
  </a>
</div>
@endif


{{-- ══════════════════════════════════════════════════════════════
     SECTION 5 — MOST POPULAR / "Science" 4-card grid
     Matches the first scx-wrapper "Science" block in index.html
══════════════════════════════════════════════════════════════ --}}
@if($mostPopular->isNotEmpty())
<div class="scx-wrapper" aria-label="Most Popular">
  <h2 class="scx-heading">Most Popular</h2>
  <div class="scx-grid">
    @foreach($mostPopular->take(4) as $mp)
    <div class="scx-card">
      <a href="{{ $mp->canonical_url }}">
        <img src="{{ $mp->photo_url }}" class="scx-img" alt="{{ $mp->img_alt ?: $mp->news_title }}" loading="lazy" width="260" height="170">
      </a>
      <div class="scx-cat">{{ strtoupper($mp->category->category_name ?? '') }}</div>
      <h3 class="scx-title"><a href="{{ $mp->canonical_url }}" title="{{ $mp->news_title }}">{{ Str::limit($mp->news_title, 80) }}</a></h3>
      <span class="scx-author">{{ strtoupper($mp->author->name ?? 'THE HINDU BUREAU') }}</span>
    </div>
    @endforeach
  </div>
</div>
@endif


{{-- ══════════════════════════════════════════════════════════════
     AD BANNER
══════════════════════════════════════════════════════════════ --}}
<div class="adver" aria-label="Advertisement">
  <img src="{{ asset('img/add3.jpg') }}" alt="Advertisement" loading="lazy" width="auto" height="auto">
</div>

<hr>


{{-- ══════════════════════════════════════════════════════════════
     SECTION 6 — SECTION TWO "Reviews" 4-card grid
     Matches second scx-wrapper "Reviews" block in index.html
══════════════════════════════════════════════════════════════ --}}
@if($sectionThreeCategory && $sectionThreeItems->isNotEmpty())
<div class="scx-wrapper" aria-label="{{ $sectionThreeCategory->category_name }}">
  <h2 class="scx-heading">{{ $sectionThreeCategory->category_name }}</h2>
  <div class="scx-grid">
    @foreach($sectionThreeItems->take(4) as $item)
    <div class="scx-card">
      <a href="{{ $item->canonical_url }}">
        <img src="{{ $item->photo_url }}" class="scx-img" alt="{{ $item->img_alt ?: $item->news_title }}" loading="lazy" width="260" height="170">
      </a>
      <div class="scx-cat">{{ strtoupper($item->category->category_name ?? '') }}</div>
      <h3 class="scx-title"><a href="{{ $item->canonical_url }}" title="{{ $item->news_title }}">{{ Str::limit($item->news_title, 80) }}</a></h3>
      <span class="scx-author">{{ strtoupper($item->author->name ?? 'THE HINDU BUREAU') }}</span>
    </div>
    @endforeach
  </div>
</div>
@endif


{{-- ══════════════════════════════════════════════════════════════
     LIFE & STYLE — Horizontal scroll carousel
══════════════════════════════════════════════════════════════ --}}
@php
  $lifeStyleCat = $allCategories->where('slug', 'entertainment')->first()
               ?? $allCategories->where('slug', 'health')->first()
               ?? $allCategories->first();
  $carouselItems = $lifeStyleCat
    ? \App\Models\News::with('category')->where('category_id', $lifeStyleCat->category_id)->orderByDesc('news_id')->take(5)->get()
    : collect();
@endphp
@if($carouselItems->isNotEmpty())
<h2 class="section-title">Life &amp; Style</h2>
<div class="carousel-wrapper" aria-label="{{ $lifeStyleCat->category_name }}">
  <div class="cards-track">
    @foreach($carouselItems as $ci)
    <article class="card @if($loop->index === 0) card--partial @elseif($loop->index === 2) card--active @elseif($loop->last) card--partial @endif"
             aria-label="{{ $ci->news_title }}">
      <a href="{{ $ci->canonical_url }}">
        <img class="card__image" src="{{ $ci->photo_url }}" alt="{{ $ci->img_alt ?: $ci->news_title }}" loading="lazy" width="280" height="380">
      </a>
      <div class="card__overlay"></div>
      <div class="card__caption">
        <p class="card__caption-text">{{ Str::limit($ci->news_title, 80) }}</p>
      </div>
    </article>
    @endforeach
  </div>
</div>
@endif


{{-- ══════════════════════════════════════════════════════════════
     SECTION 7 — ENVIRONMENT (text + images + ad layout)
══════════════════════════════════════════════════════════════ --}}
@if($sectionThreeCategory && $sectionThreeItems->isNotEmpty())
<div class="envx-wrap" aria-label="{{ $sectionThreeCategory->category_name }}">
  <h2 class="envx-heading">Environment</h2>

  <div class="envx-grid">
    <div class="envx-left">
      @foreach($sectionThreeItems->take(2) as $env)
      <div class="envx-text-block">
        <span class="envx-cat">{{ strtoupper($env->category->category_name ?? '') }}</span>
        <h3 class="envx-title"><a href="{{ $env->canonical_url }}" title="{{ $env->news_title }}">{{ Str::limit($env->news_title, 90) }}</a></h3>
        <p class="envx-desc">{{ Str::limit(strip_tags($env->news_content_short), 120) }}</p>
        <span class="envx-author">{{ strtoupper($env->author->name ?? 'THE HINDU BUREAU') }}</span>
      </div>
      @if(!$loop->last)<div class="envx-divider"></div>@endif
      @endforeach
    </div>

    <div class="envx-center">
      @foreach($sectionThreeItems->skip(2)->take(2) as $img)
      <div class="envx-image-block">
        <a href="{{ $img->canonical_url }}">
          <img src="{{ $img->photo_url }}" class="envx-img" alt="{{ $img->img_alt ?: $img->news_title }}" loading="lazy" width="260" height="160">
        </a>
        <p class="envx-img-caption"><a href="{{ $img->canonical_url }}" title="{{ $img->news_title }}">{{ Str::limit($img->news_title, 70) }}</a></p>
      </div>
      @endforeach
    </div>

    <div class="envx-right">
      <div class="envx-ad">
        <img src="{{ asset('img/Add4.jpg') }}" alt="Advertisement" loading="lazy">
      </div>
    </div>
  </div>
</div>
@endif


{{-- ══════════════════════════════════════════════════════════════
     FEATURED VIDEOS SECTION
     Matches the fv-wrap block in index.html
══════════════════════════════════════════════════════════════ --}}
@if($mostPopular->isNotEmpty())
@php $fvItems = $mostPopular->take(4); @endphp
<div class="fv-wrap">

  <div class="fv-header">
    <h2 class="fv-title">Featured Videos</h2>
    <div class="fv-tabs">
      <span>VIDEOS</span>
      <span>SHOWS</span>
      <span>WEBINARS</span>
    </div>
  </div>

  <div class="fv-grid">
    <div class="fv-main">
      <div class="fv-main-img">
        <a href="{{ $fvItems->first()->canonical_url }}">
          <img src="{{ $fvItems->first()->photo_url }}" alt="{{ $fvItems->first()->img_alt ?: $fvItems->first()->news_title }}" loading="lazy">
        </a>
      </div>
      <h3 class="fv-main-title">{{ Str::limit($fvItems->first()->news_title, 100) }}</h3>
    </div>

    <div class="fv-side">
      @foreach($fvItems->skip(1) as $fvi)
      <div class="fv-item">
        <div class="fv-thumb">
          <a href="{{ $fvi->canonical_url }}">
            <img src="{{ $fvi->photo_url }}" alt="{{ $fvi->img_alt ?: $fvi->news_title }}" loading="lazy">
          </a>
          <span class="fv-play">▶</span>
        </div>
        <p class="fv-text">
          <a href="{{ $fvi->canonical_url }}" title="{{ $fvi->news_title }}">{{ Str::limit($fvi->news_title, 90) }}</a>
        </p>
      </div>
      @endforeach
    </div>
  </div>

</div>
@endif


{{-- ══════════════════════════════════════════════════════════════
     SECTION 8 — FEATURED SECTIONS (4-column category showcase)
══════════════════════════════════════════════════════════════ --}}
@if(!empty($featuredSections))
<div class="fs-wrap" aria-label="Featured Sections">
  <h2 class="fs-main-title">Featured Sections</h2>
  <div class="fs-grid">
    @foreach($featuredSections as $fs)
    <div class="fs-col">
      <div class="fs-head">
        <a href="{{ route('category.show', $fs['category']->slug) }}">{{ $fs['category']->category_name }} →</a>
      </div>
      @foreach($fs['items'] as $fi)
      <div class="fs-item">
        <div>
          <span class="fs-tag">{{ strtoupper($fi->category->category_name ?? '') }}</span>
          <p class="fs-text"><a href="{{ $fi->canonical_url }}" title="{{ $fi->news_title }}">{{ Str::limit($fi->news_title, 80) }}</a></p>
        </div>
        <img src="{{ $fi->photo_url }}" alt="{{ $fi->img_alt ?: $fi->news_title }}" loading="lazy" width="80" height="60">
      </div>
      @endforeach
    </div>
    @endforeach
  </div>
</div>
@endif

@endsection