@extends('user.layouts.app')
@section('meta-content')
 @php
    $settings = \App\Models\GeneralSetting::find(1);
    @endphp
<title>@if($settings){{$settings->site_title}}@endif</title>
<meta name="description" content="@if($settings){{$settings->meta_description}}@endif">
<meta name="title" content="@if($settings){{$settings->meta_title}}@endif">
@endsection
@section('content')
<!-- Breaking News Ticker -->
<!-- Breaking News Ticker -->
<section class="bg-gradient-to-r from-slate-900 to-slate-800 relative border-b border-slate-700/60 backdrop-blur-sm shadow-lg">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="flex flex-wrap items-center gap-4 py-3 sm:py-3">

      <!-- Breaking Label + Clock -->
      <div class="flex items-center gap-4 shrink-0">
        <!-- Breaking News Badge -->
        <div class="flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r from-blue-600 to-blue-500 text-white text-sm font-bold shadow-lg shadow-blue-500/30">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M13 10V3L4 14h7v7l9-11h-7z" />
          </svg>
          <span class="uppercase tracking-wider">Breaking News</span>
        </div>

        <!-- Live Clock -->
        <div id="localClock" class="flex items-center gap-2 text-sm font-medium text-slate-100 bg-slate-800/80 px-3 py-2 rounded-full border border-slate-700/50 shadow-sm">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <span id="clockTime">--:-- --</span>
        </div>
      </div>

      <!-- News Ticker -->
      <div class="flex-1 min-w-0 overflow-hidden relative">
        <div class="swiper breakingTicker">
          <div class="swiper-wrapper">

            <!-- News Item 1 -->
            <div class="swiper-slide !w-auto pr-8">
              <a href="#" class="inline-flex items-center gap-3 text-sm text-slate-100 hover:text-white group ml-3 min-h-[48px] min-w-[48px]">
                <span class="inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-semibold bg-white/10 text-slate-100 border border-white/20 group-hover:bg-blue-500 group-hover:border-blue-400 transition-colors">
                  Tech
                </span>
                <span class="font-medium group-hover:text-blue-100 transition-colors">Apple unveils next-gen M-series chips with revolutionary AI capabilities</span>
                <time class="text-xs text-slate-400 group-hover:text-slate-300 transition-colors">• 5m ago</time>
              </a>
            </div>

            <!-- News Item 2 -->
            <div class="swiper-slide !w-auto pr-8">
              <a href="#" class="inline-flex items-center gap-3 text-sm text-slate-100 hover:text-white group ml-3 min-h-[48px] min-w-[48px]">
                <span class="inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-semibold bg-white/10 text-slate-100 border border-white/20 group-hover:bg-green-500 group-hover:border-green-400 transition-colors">
                  Business
                </span>
                <span class="font-medium group-hover:text-blue-100 transition-colors">Startups raise record $2.4B in seed rounds during Q3 market surge</span>
                <time class="text-xs text-slate-400 group-hover:text-slate-300 transition-colors">• 12m ago</time>
              </a>
            </div>

            <!-- News Item 3 -->
            <div class="swiper-slide !w-auto pr-8">
              <a href="#" class="inline-flex items-center gap-3 text-sm text-slate-100 hover:text-white group ml-3 min-h-[48px] min-w-[48px]">
                <span class="inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-semibold bg-white/10 text-slate-100 border border-white/20 group-hover:bg-purple-500 group-hover:border-purple-400 transition-colors">
                  Science
                </span>
                <span class="font-medium group-hover:text-blue-100 transition-colors">Breakthrough in quantum computing achieves 99.9% qubit stability</span>
                <time class="text-xs text-slate-400 group-hover:text-slate-300 transition-colors">• 8m ago</time>
              </a>
            </div>

          </div>
        </div>

        <!-- Gradient fade effect -->
        <div class="absolute top-0 right-0 h-full w-16 bg-gradient-to-l from-slate-900 to-transparent pointer-events-none z-10"></div>
        <div class="absolute top-0 left-0 h-full w-16 bg-gradient-to-r from-slate-900 to-transparent pointer-events-none z-10"></div>
      </div>

      <!-- Pause/Play Button -->
      <button id="tickerToggle"
        class="hidden sm:inline-flex items-center gap-2 text-sm px-4 py-2 rounded-full bg-slate-800/80 border border-slate-700/50 text-slate-200 hover:bg-slate-700/80 hover:text-white hover:border-slate-600 transition-all duration-200 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:ring-offset-2 focus:ring-offset-slate-900 group"
        aria-pressed="false">
        <svg id="pauseIcon" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6" />
        </svg>
        <svg id="playIcon" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 hidden group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
        </svg>
        <span id="toggleText">Pause</span>
      </button>
    </div>
  </div>

  <!-- Live indicator pulse -->
  <div class="absolute top-1/2 -translate-y-1/2 left-4 flex items-center gap-2">
    <div class="flex items-center gap-1">
      <div class="w-2 h-2 bg-red-500 rounded-full animate-pulse"></div>
      <span class="text-xs text-slate-400 font-medium uppercase tracking-wider">Live</span>
    </div>
  </div>
</section>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Update clock
    function updateClock() {
      const now = new Date();
      const timeString = now.toLocaleTimeString('en-US', {
        hour: '2-digit',
        minute: '2-digit',
        hour12: true
      });
      document.getElementById('clockTime').textContent = timeString;
    }

    // Initialize clock
    updateClock();
    setInterval(updateClock, 1000);

    // Ticker toggle functionality
    const toggleButton = document.getElementById('tickerToggle');
    const pauseIcon = document.getElementById('pauseIcon');
    const playIcon = document.getElementById('playIcon');
    const toggleText = document.getElementById('toggleText');
    let isPaused = false;

    toggleButton.addEventListener('click', function() {
      isPaused = !isPaused;
      
      if (isPaused) {
        pauseIcon.classList.add('hidden');
        playIcon.classList.remove('hidden');
        toggleText.textContent = 'Play';
        // Add functionality to pause swiper here
      } else {
        pauseIcon.classList.remove('hidden');
        playIcon.classList.add('hidden');
        toggleText.textContent = 'Pause';
        // Add functionality to play swiper here
      }
      
      this.setAttribute('aria-pressed', isPaused);
    });

    // Initialize Swiper (you'll need to include Swiper JS and CSS)
    // const breakingTicker = new Swiper('.breakingTicker', {
    //   direction: 'horizontal',
    //   loop: true,
    //   autoplay: {
    //     delay: 4000,
    //     disableOnInteraction: false,
    //   },
    //   speed: 800,
    //   spaceBetween: 0,
    //   slidesPerView: 'auto',
    //   allowTouchMove: false,
    // });
  });
</script>


<!-- Latest Headlines -->
<section class="py-16 bg-gradient-to-b from-slate-50 to-white">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <!-- Section Header -->
    <div class="text-center mb-20">
      <span class="inline-flex items-center px-4 py-2 bg-blue-100 text-blue-700 text-sm font-semibold rounded-full mb-6 border border-blue-200 shadow-sm">
        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clip-rule="evenodd"></path>
        </svg>
        LATEST UPDATES
      </span>
      <h2 class="text-4xl md:text-5xl font-bold text-slate-900 mb-6 tracking-tight">
        Featured <span class="bg-gradient-to-r from-blue-600 to-blue-800 bg-clip-text text-transparent">Insights</span>
      </h2>
      <p class="text-xl text-slate-600 max-w-2xl mx-auto leading-relaxed font-light">
        Discover cutting-edge perspectives and in-depth industry analysis from our expert contributors
      </p>
    </div>

    <!-- Main Featured Grid -->
    <div class="grid grid-cols-1 xl:grid-cols-12 gap-8 mb-20">
      @php $popularblog = $popularblogs->shift(); @endphp
      @if($popularblog)
      <!-- Hero Feature -->
      <div class="xl:col-span-8">
        <article class="relative group cursor-pointer">
          <div class="relative overflow-hidden rounded-3xl shadow-2xl">
            <img src="{{ asset('admin-assets/images/blogs') }}/{{ $popularblog->feature_image }}"
                 class="w-full h-[600px] object-cover transform group-hover:scale-105 transition-all duration-700 ease-out"
                 alt="{{ $popularblog->title }}">
            <div class="absolute inset-0 bg-gradient-to-t from-slate-900/90 via-slate-900/30 to-transparent"></div>
            
            <!-- Content Overlay -->
            <div class="absolute bottom-0 left-0 right-0 p-12">
              <div class="flex items-center gap-3 mb-6">
                <span class="px-4 py-2 bg-white text-slate-900 text-sm font-bold rounded-full border border-white/20 backdrop-blur-sm shadow-lg">
                  <span class="flex items-center gap-1">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                      <path fill-rule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clip-rule="evenodd"></path>
                    </svg>
                    FEATURED STORY
                  </span>
                </span>
                <span class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-full border border-blue-500 backdrop-blur-sm">
                  {{$popularblog->category->name}}
                </span>
              </div>
              
              <h3 class="text-4xl md:text-5xl font-bold text-white leading-tight mb-6 max-w-3xl">
                <a href="{{route('blog.details',$popularblog->slug)}}" 
                   class="hover:text-blue-200 transition-colors duration-300 group-hover:underline decoration-2 decoration-blue-400 underline-offset-4">
                  {{ trans_blog($popularblog, 'title', $popularblog->title)}}
                </a>
              </h3>
              
              <div class="flex items-center gap-6 text-white/80">
                <div class="flex items-center gap-3">
                  <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-700 rounded-full flex items-center justify-center shadow-lg">
                    <span class="text-sm font-bold text-white">AR</span>
                  </div>
                  <div>
                    <span class="text-sm font-medium block">Author Name</span>
                    <span class="text-xs text-white/60">{{ $popularblog->created_at->format('F j, Y') }}</span>
                  </div>
                </div>
                <div class="flex items-center gap-2 text-sm">
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                  </svg>
                  8 min read
                </div>
              </div>
            </div>

            <!-- Hover Effect -->
            <div class="absolute inset-0 border-2 border-transparent group-hover:border-white/40 rounded-3xl transition-all duration-500 group-hover:shadow-2xl"></div>
          </div>
        </article>
      </div>
      @endif

      <!-- Side Articles -->
      <div class="xl:col-span-4 space-y-6">
        @foreach ($popularblogs as $row)
        <article class="group bg-white rounded-2xl p-6 hover:bg-slate-50 hover:shadow-xl border border-slate-200 transition-all duration-500 cursor-pointer transform hover:-translate-y-1">
          <div class="flex items-start gap-5">
            <div class="flex-shrink-0">
              <div class="relative overflow-hidden rounded-xl w-20 h-20 shadow-md">
                <img src="{{ asset('admin-assets/images/blogs') }}/{{ $row->feature_image }}" 
                     class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500" alt="{{ $row->title }}">
                <div class="absolute inset-0 bg-black/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
              </div>
            </div>
            <div class="flex-1 min-w-0">
              <div class="flex items-center gap-2 mb-3">
                <span class="px-3 py-1 bg-gradient-to-r from-blue-500 to-blue-600 text-white text-xs font-bold rounded-full shadow-sm">
                  {{$row->category->name}}
                </span>
              </div>
              <h4 class="font-bold text-slate-900 leading-tight line-clamp-2 group-hover:text-blue-700 transition-colors mb-3 text-sm">
                <a href="{{route('blog.details',$row->slug)}}" class="hover:underline decoration-1 decoration-blue-500 underline-offset-2">
                  {{ trans_blog($row, 'title', $row->title)}}
                </a>
              </h4>
              <div class="flex items-center gap-3 text-xs text-slate-500 font-medium">
                <span class="flex items-center gap-1">
                  <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                  </svg>
                  {{ $row->created_at->format('M j') }}
                </span>
                <span class="w-1 h-1 bg-slate-300 rounded-full"></span>
                <span class="flex items-center gap-1 text-gray-800">
                  <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                  </svg>
                  5 min read
                </span>
              </div>
            </div>
          </div>
        </article>
        @endforeach
      </div>
    </div>

    <!-- Lower Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
      @foreach ($blogs as $row)
      <article class="group bg-white rounded-2xl border border-slate-200 hover:border-slate-300 transition-all duration-500 hover:shadow-xl cursor-pointer overflow-hidden transform hover:-translate-y-2">
        <!-- Image Container -->
        <div class="relative overflow-hidden">
          <img src="{{ asset('admin-assets/images/blogs') }}/{{ $row->feature_image }}" 
               class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-700"
               alt="{{ $row->title }}">
          <div class="absolute top-4 left-4">
            <span class="px-3 py-1.5 bg-white text-slate-900 text-sm font-bold rounded-full shadow-lg border border-slate-100">
              {{ $row->category->name }}
            </span>
          </div>
          <div class="absolute inset-0 bg-gradient-to-t from-slate-900/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
        </div>
        
        <!-- Content -->
        <div class="p-6">
          <h4 class="text-base font-bold text-slate-900 leading-tight mb-4 group-hover:text-blue-700 transition-colors line-clamp-3">
            <a href="{{ route('blog.details', $row->slug) }}" class="hover:underline decoration-1 decoration-blue-500 underline-offset-2">
              {{ trans_blog($row, 'title', $row->title)}}
            </a>
          </h4>
          
          <!-- Article Meta -->
          <div class="flex items-center justify-between pt-4 border-t border-slate-100">
            <div class="flex items-center gap-2">
              <div class="w-8 h-8 bg-gradient-to-br from-slate-500 to-slate-700 rounded-full flex items-center justify-center">
                <span class="text-xs font-bold text-white">AR</span>
              </div>
              <span class="text-xs text-slate-600 font-medium">Author</span>
            </div>
            <div class="text-xs text-slate-500 font-medium">
              {{ $row->created_at->format('M j, Y') }}
            </div>
          </div>
        </div>
      </article>
      @endforeach
    </div>

   
  </div>
</section>

<!-- Spotlight Stories -->
<section class="py-20 bg-gradient-to-br from-slate-50 via-white to-blue-50/50 relative overflow-hidden">
  <!-- Background Elements -->
  <div class="absolute top-0 left-0 w-72 h-72 bg-blue-100/30 rounded-full blur-3xl -translate-x-1/2 -translate-y-1/2"></div>
  <div class="absolute bottom-0 right-0 w-96 h-96 bg-slate-100/40 rounded-full blur-3xl translate-x-1/2 translate-y-1/2"></div>
  
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative z-10">
    <!-- Section Header -->
    <div class="text-center max-w-4xl mx-auto mb-20">
      <span class="inline-flex items-center px-5 py-2.5 bg-gradient-to-r from-blue-600 to-blue-700 text-white text-sm font-semibold rounded-full mb-6 shadow-lg shadow-blue-500/25">
        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
        </svg>
        SPOTLIGHT STORIES
      </span>
      <h2 class="text-5xl md:text-6xl font-bold text-slate-900 mb-6 tracking-tight">
        Featured <span class="bg-gradient-to-r from-blue-600 to-blue-800 bg-clip-text text-transparent">Narratives</span>
      </h2>
      <p class="text-xl text-slate-600 leading-relaxed max-w-2xl mx-auto font-light">
        Explore compelling stories and expert insights that are shaping tomorrow's conversations
      </p>
    </div>

    <!-- Featured Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-8">
      @foreach($popblogs as $index => $row)
      <article class="group relative bg-white rounded-3xl shadow-lg hover:shadow-2xl transition-all duration-700 border border-slate-200/60 overflow-hidden transform hover:-translate-y-2">
        <!-- Featured Badge for First Card -->
        @if($index === 0)
        <div class="absolute top-6 left-6 z-20">
          <span class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-amber-500 to-amber-600 text-white text-sm font-bold rounded-full shadow-lg backdrop-blur-sm border border-amber-400/20">
            <svg class="w-4 h-4 mr-1.5" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
            </svg>
            EDITOR'S PICK
          </span>
        </div>
        @endif

        <!-- Image Container -->
        <div class="relative overflow-hidden h-64">
          <img src="{{ asset('admin-assets/images/blogs') }}/{{ $row->feature_image }}" 
               class="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-110"
               alt="{{ $row->title }}">
          
          <!-- Gradient Overlay -->
          <div class="absolute inset-0 bg-gradient-to-t from-slate-900/70 via-slate-900/20 to-transparent opacity-80 group-hover:opacity-90 transition-opacity duration-500"></div>
          
          <!-- Category & Date -->
          <div class="absolute bottom-5 left-6 right-6">
            <div class="flex items-center justify-between">
              <span class="inline-flex items-center px-3 py-1.5 bg-white text-slate-900 text-xs font-bold rounded-full shadow-md border border-white/20 backdrop-blur-sm">
                {{ $row->category->name }}
              </span>
              <span class="text-xs text-white/80 font-medium bg-black/30 px-2 py-1 rounded-md backdrop-blur-sm">
                {{ $row->created_at->format('M j') }}
              </span>
            </div>
          </div>

          <!-- Read time -->
          <div class="absolute top-5 right-5 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
            <span class="inline-flex items-center px-2.5 py-1 bg-black/50 text-gray-800 text-xs rounded-full backdrop-blur-sm border border-white/10">
              <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              5 min
            </span>
          </div>
        </div>

        <!-- Content -->
        <div class="p-7">
          <h3 class="text-lg font-bold text-slate-900 leading-tight mb-4 group-hover:text-blue-700 transition-colors duration-300 line-clamp-3">
            <a href="{{ route('blog.details', $row->slug) }}" class="hover:underline decoration-2 decoration-blue-500 underline-offset-4">
              {{ trans_blog($row, 'title', $row->title)}}
            </a>
          </h3>
          
          <!-- Author & Meta -->
          <div class="flex items-center justify-between pt-4 border-t border-slate-100">
            <div class="flex items-center gap-3">
              <div class="w-8 h-8 bg-gradient-to-br from-slate-600 to-slate-800 rounded-full flex items-center justify-center shadow-sm">
                <span class="text-xs font-bold text-white">AR</span>
              </div>
              <span class="text-sm text-slate-600 font-medium">Author</span>
            </div>
            <div class="flex items-center gap-1 text-slate-400">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
              <span class="text-xs font-medium">24</span>
            </div>
          </div>
        </div>

        <!-- Hover Effect Border -->
        <div class="absolute inset-0 border-2 border-transparent group-hover:border-blue-500/20 rounded-3xl transition-all duration-500 pointer-events-none"></div>
        
        <!-- Hover Arrow -->
        <div class="absolute bottom-6 right-6 opacity-0 group-hover:opacity-100 transform translate-x-2 group-hover:translate-x-0 transition-all duration-500">
          <div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center shadow-lg">
            <svg class="w-4 h-4 text-white transform group-hover:translate-x-0.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
            </svg>
          </div>
        </div>
      </article>
      @endforeach
    </div>

   
  </div>
</section>

<!-- Latest Posts -->
<section class="py-20 bg-gradient-to-b from-white to-slate-50/80">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-12">
      
      <!-- Main Content -->
      <div class="lg:col-span-3">
        <!-- Section Header -->
        <div class="flex flex-col lg:flex-row lg:items-end lg:justify-between mb-16 pb-8 border-b border-slate-200/60">
          <div class="mb-6 lg:mb-0">
            <span class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-blue-600 to-blue-700 text-white text-sm font-bold rounded-full mb-4 shadow-lg shadow-blue-500/25">
              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9m0 0v3m0-3a2 2 0 012-2h2a2 2 0 012 2m-6 5v6m4-3H9"></path>
              </svg>
              LATEST UPDATES
            </span>
            <h2 class="text-4xl md:text-5xl font-bold text-slate-900 tracking-tight mb-3">
              Featured <span class="bg-gradient-to-r from-blue-600 to-blue-800 bg-clip-text text-transparent">Articles</span>
            </h2>
            <p class="text-lg text-slate-600 max-w-2xl">
              Discover the latest insights and expert analysis from our editorial team
            </p>
          </div>
          <a href="#" class="inline-flex items-center gap-3 px-6 py-3 bg-slate-900 text-white font-semibold rounded-xl hover:bg-slate-800 transition-all duration-300 transform hover:-translate-y-1 hover:shadow-lg group border border-slate-700 self-start lg:self-center">
            <span class="text-sm">View All Articles</span>
            <svg class="w-4 h-4 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
            </svg>
          </a>
        </div>

        <!-- Articles Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8">
          @foreach($topblogs as $row)
          <article class="group bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 border border-slate-200/80 overflow-hidden transform hover:-translate-y-2">
            <!-- Image Container -->
            <div class="relative overflow-hidden h-56">
              <img src="{{ asset('admin-assets/images/blogs') }}/{{ $row->feature_image }}"
                   class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                   alt="{{ $row->title }}">
              
              <!-- Gradient Overlay -->
              <div class="absolute inset-0 bg-gradient-to-t from-slate-900/70 via-slate-900/20 to-transparent opacity-80 group-hover:opacity-90 transition-opacity duration-500"></div>
              
              <!-- Category Badge -->
              <div class="absolute top-4 left-4">
                <span class="inline-flex items-center px-3 py-1.5 bg-white text-slate-900 text-xs font-bold rounded-full shadow-md border border-white/20 backdrop-blur-sm">
                  {{ $row->category->name }}
                </span>
              </div>

              <!-- Date -->
              <div class="absolute top-4 right-4">
                <span class="inline-flex items-center px-2.5 py-1 bg-black/50 text-white text-xs rounded-full backdrop-blur-sm border border-white/10">
                  {{ $row->created_at->format('M j') }}
                </span>
              </div>
            </div>

            <!-- Content -->
            <div class="p-6">
              <h3 class="text-lg font-bold text-slate-900 leading-tight mb-4 group-hover:text-blue-700 transition-colors duration-300 line-clamp-3">
                <a href="{{ route('blog.details', $row->slug) }}" class="hover:underline decoration-2 decoration-blue-500 underline-offset-4">
                  {{ trans_blog($row, 'title', $row->title)}}
                </a>
              </h3>
              
              <!-- Author & Meta -->
              <div class="flex items-center justify-between pt-4 border-t border-slate-100">
                <div class="flex items-center gap-3">
                  <div class="w-8 h-8 bg-gradient-to-br from-slate-600 to-slate-800 rounded-full flex items-center justify-center shadow-sm">
                    <span class="text-xs font-bold text-white">AR</span>
                  </div>
                  <span class="text-sm text-slate-600 font-medium">Author</span>
                </div>
                <div class="flex items-center gap-2 text-slate-400">
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                  </svg>
                  <span class="text-xs font-medium text-gray-800">5 min</span>
                </div>
              </div>
            </div>

            <!-- Hover Arrow -->
            <div class="absolute bottom-6 right-6 opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-500">
              <div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center shadow-lg">
                <svg class="w-4 h-4 text-white transform group-hover:translate-x-0.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                </svg>
              </div>
            </div>
          </article>
          @endforeach
        </div>

        <!-- Mobile View All Button -->
        <div class="mt-12 text-center lg:hidden">
          <a href="#" class="inline-flex items-center gap-3 px-8 py-4 bg-slate-900 text-white font-semibold rounded-xl hover:bg-slate-800 transition-all duration-300 transform hover:-translate-y-1 hover:shadow-lg group border border-slate-700">
            <span>View All Articles</span>
            <svg class="w-4 h-4 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
            </svg>
          </a>
        </div>
      </div>

      <!-- Sidebar -->
      <aside class="lg:col-span-1">
        <div class="sticky top-24 space-y-8">
          <!-- Categories Section -->
          <div class="bg-white rounded-2xl shadow-lg border border-slate-200/80 p-6">
            <div class="flex items-center gap-3 mb-6 pb-4 border-b border-slate-100">
              <div class="w-2 h-8 bg-gradient-to-b from-blue-500 to-blue-600 rounded-full"></div>
              <h3 class="text-xl font-bold text-slate-900">Browse Categories</h3>
            </div>
            
            <ul class="space-y-4">
              @foreach ($categories as $row)
              <li>
                <a href="{{route('blogs.category',$row->slug)}}"
                  class="group relative block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-all duration-500 bg-slate-50 hover:bg-white border border-slate-200 transform hover:-translate-y-1">
                  
                  <!-- Background Image -->
                  <div class="absolute inset-0 bg-center bg-cover transition-transform duration-700 group-hover:scale-110"
                      style="background-image:url('{{ asset('admin-assets/images/categories') }}/{{ $row->feature_image }}');"></div>
                  
                  <!-- Gradient Overlay -->
                  <div class="absolute inset-0 bg-gradient-to-r from-slate-900/80 via-slate-900/60 to-slate-900/40 group-hover:from-slate-900/70 group-hover:via-slate-900/50 group-hover:to-slate-900/30 transition-all duration-500"></div>
                  
                  <!-- Content -->
                  <div class="relative p-5 flex items-center justify-between">
                    <div class="flex-1">
                      <span class="block text-white font-bold text-lg mb-1 group-hover:text-blue-200 transition-colors">{{ $row->name }}</span>
                      <div class="flex items-center gap-2 text-white/80 text-sm group-hover:text-white/90 transition-colors">
                        <span>{{ $row->blogs_count }} articles</span>
                        <span class="w-1 h-1 bg-white/50 rounded-full"></span>
                        <span class="flex items-center gap-1">
                          Explore
                          <svg class="w-3 h-3 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                          </svg>
                        </span>
                      </div>
                    </div>
                    
                    <span class="inline-flex items-center justify-center w-8 h-8 bg-white/20 text-white rounded-full group-hover:bg-blue-600 transition-all duration-300 group-hover:scale-110">
                      <svg class="w-4 h-4 transform group-hover:translate-x-0.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                      </svg>
                    </span>
                  </div>
                </a>
              </li>
              @endforeach
            </ul>
          </div>

          <!-- Newsletter CTA -->
          <div class="bg-gradient-to-br from-blue-600 via-blue-700 to-blue-800 rounded-2xl p-6 text-white shadow-xl relative overflow-hidden">
            <!-- Background Pattern -->
            <div class="absolute top-0 right-0 w-24 h-24 bg-white/5 rounded-full -translate-y-8 translate-x-8"></div>
            <div class="absolute bottom-0 left-0 w-16 h-16 bg-white/5 rounded-full translate-y-8 -translate-x-8"></div>
            
            <div class="text-center relative z-10">
              <div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4 backdrop-blur-sm border border-white/20">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                </svg>
              </div>
              <h4 class="font-bold text-xl mb-2">Stay Updated</h4>
              <p class="text-blue-100 text-sm mb-6 leading-relaxed">Get the latest articles and insights delivered directly to your inbox</p>
              <button class="w-full bg-white text-blue-600 font-semibold py-3.5 rounded-xl hover:bg-slate-100 transition-all duration-300 transform hover:-translate-y-0.5 hover:shadow-lg border border-white/20">
                Subscribe Now
              </button>
              <p class="text-blue-200/80 text-xs mt-4">No spam, unsubscribe at any time</p>
            </div>
          </div>

          <!-- Trending Tags -->
          <div class="bg-white rounded-2xl shadow-lg border border-slate-200/80 p-6">
            <div class="flex items-center gap-3 mb-6">
              <div class="w-2 h-8 bg-gradient-to-b from-amber-500 to-amber-600 rounded-full"></div>
              <h3 class="text-xl font-bold text-slate-900">Trending Topics</h3>
            </div>
            <div class="flex flex-wrap gap-3">
              <span class="inline-flex items-center px-4 py-2 bg-slate-100 text-slate-700 text-sm font-medium rounded-full hover:bg-blue-100 hover:text-blue-700 transition-colors cursor-pointer">
                #Technology
              </span>
              <span class="inline-flex items-center px-4 py-2 bg-slate-100 text-slate-700 text-sm font-medium rounded-full hover:bg-blue-100 hover:text-blue-700 transition-colors cursor-pointer">
                #Innovation
              </span>
              <span class="inline-flex items-center px-4 py-2 bg-slate-100 text-slate-700 text-sm font-medium rounded-full hover:bg-blue-100 hover:text-blue-700 transition-colors cursor-pointer">
                #Design
              </span>
              <span class="inline-flex items-center px-4 py-2 bg-slate-100 text-slate-700 text-sm font-medium rounded-full hover:bg-blue-100 hover:text-blue-700 transition-colors cursor-pointer">
                #Business
              </span>
              <span class="inline-flex items-center px-4 py-2 bg-slate-100 text-slate-700 text-sm font-medium rounded-full hover:bg-blue-100 hover:text-blue-700 transition-colors cursor-pointer">
                #Strategy
              </span>
            </div>
          </div>
        </div>
      </aside>
    </div>
  </div>
</section>




@endsection