<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DailyNews</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-white">

<!-- ================= HEADER ================= -->
<header class="bg-black text-white border-b border-gray-800 sticky top-0 z-50">
  <div class="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between">

    <!-- Left: Logo + Desktop Menu -->
    <div class="flex items-center space-x-6">

      <!-- Logo -->
      <a href="index.html" class="bg-white px-2 py-1">
        <img src="images/fav-icon.svg" alt="Logo" class="h-8">
      </a>

      <!-- Desktop Navigation -->
      <nav class="hidden md:flex space-x-6 text-sm font-semibold">
        <a href="#" class="hover:text-red-500">WORLD</a>
        <a href="#" class="hover:text-red-500">U.S.</a>
        <a href="#" class="hover:text-red-500">POLITICS</a>
        <a href="#" class="hover:text-red-500">SPORTS</a>
        <a href="#" class="hover:text-red-500">ENTERTAINMENT</a>
        <a href="#" class="hover:text-red-500">BUSINESS</a>
        <a href="#" class="hover:text-red-500">SCIENCE</a>
        <a href="#" class="hover:text-red-500">TECH</a>
        <a href="#" class="hover:text-red-500">PRESS RELEASES</a>
      </nav>

    </div>

    <!-- Right Section -->
    <div class="flex items-center space-x-5">

      <!-- Sign in (desktop only) -->
      <a href="#" class="hidden md:block text-sm hover:text-gray-300">
        Sign in
      </a>

      <!-- Search Icon (desktop only) -->
      <svg xmlns="http://www.w3.org/2000/svg"
        class="hidden md:block h-5 w-5 cursor-pointer hover:text-gray-300"
        fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round"
          stroke-width="2"
          d="M21 21l-4.35-4.35M10 18a8 8 0 100-16 8 8 0 000 16z" />
      </svg>

      <!-- Donate Button (desktop only) -->
      <button class="hidden md:block bg-red-600 hover:bg-red-700 text-white text-sm font-semibold px-4 py-1 rounded">
        DONATE
      </button>

      <!-- Hamburger Button (Mobile only - Right side) -->
      <button id="menuBtn" class="md:hidden">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7"
          fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round"
            stroke-width="2"
            d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>

    </div>

  </div>
</header>

<!-- ================= MOBILE MENU ================= -->
<div id="mobileMenu" class="hidden md:hidden bg-black text-white border-b border-gray-800">
  <nav class="flex flex-col space-y-4 px-4 py-4 text-sm font-semibold">
    <a href="#" class="hover:text-red-500">WORLD</a>
    <a href="#" class="hover:text-red-500">U.S.</a>
    <a href="#" class="hover:text-red-500">POLITICS</a>
    <a href="#" class="hover:text-red-500">SPORTS</a>
    <a href="#" class="hover:text-red-500">ENTERTAINMENT</a>
    <a href="#" class="hover:text-red-500">BUSINESS</a>
    <a href="#" class="hover:text-red-500">SCIENCE</a>
    <a href="#" class="hover:text-red-500">TECH</a>
    <a href="#" class="hover:text-red-500">PRESS RELEASES</a>
    <hr class="border-gray-700">
    <a href="#" class="hover:text-red-500">Sign in</a>
  </nav>
</div>


<main>



    <!-- ================= CATEGORY HEADER ================= -->
<section class="bg-gradient-to-b from-black to-gray-900 text-white py-6">
  <div class="max-w-7xl mx-auto px-4">

    <!-- Top Red Line -->
    <div class="relative border-t border-gray-700">
      <span class="absolute -top-[2px] left-0 w-16 h-1 bg-red-600"></span>
    </div>

    <!-- Title -->
    <h1 class="text-5xl md:text-6xl font-extrabold mt-6 tracking-tight">
      <?php echo e(ucfirst($categoryName)); ?>

    </h1>

    <!-- Sub Navigation -->
    <div class="mt-6 overflow-x-auto">
      <div class="flex gap-6 text-sm font-semibold whitespace-nowrap">

        <a href="#" class="hover:text-red-400">2026 ELECTIONS</a>
        <a href="#" class="hover:text-red-400">ELECTION RESULTS</a>
        <a href="#" class="hover:text-red-400">WHITE HOUSE</a>
        <a href="#" class="hover:text-red-400">CONGRESS</a>
        <a href="#" class="hover:text-red-400">SUPREME COURT</a>
        <a href="#" class="hover:text-red-400">AP-NORC POLLS</a>
        <a href="#" class="hover:text-red-400">GROUND GAME</a>
        <a href="#" class="hover:text-red-400">EARLY VOTING TRACKER</a>

      </div>
    </div>

  </div>
</section>




<section class="max-w-7xl mx-auto px-4 py-10">

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

    <!-- LEFT: Main Feature -->
    <div class="lg:col-span-1">
      <img src="https://financial-journal.xyz/newspaper/cms/public/uploads/<?php echo e($Fivenews[0]->photo); ?>" alt="<?php echo e($Fivenews[0]->img_alt); ?>" title="<?php echo e($Fivenews[0]->title); ?>"
           class="w-full h-64 object-cover rounded">

      <h2 class="text-2xl font-bold mt-4">
        <a title="<?php echo e($Fivenews[0]->title); ?>" href="<?php echo e(url(Str::lower(e($Fivenews[0]->category_name)) . '/' . $Fivenews[0]->encode_title)); ?>" ><?php echo e($Fivenews[0]->title); ?></a>
      </h2>

      <p class="text-gray-600 mt-2 text-sm">
       <?php echo e($Fivenews[0]->news_content_short); ?>

      </p>
    </div>

    <!-- MIDDLE: 2x2 Article Grid -->
    <div class="grid sm:grid-cols-2 gap-6">

      <!-- Card -->
      <article>
        <img src="https://financial-journal.xyz/newspaper/cms/public/uploads/<?php echo e($Fivenews[1]->photo); ?>" alt="<?php echo e($Fivenews[1]->img_alt); ?>" title="<?php echo e($Fivenews[1]->title); ?>" class="w-full h-40 object-cover rounded">
        <h3 class="font-semibold mt-2"><a title="<?php echo e($Fivenews[1]->title); ?>" href="<?php echo e(url(Str::lower(e($Fivenews[1]->category_name)) . '/' . $Fivenews[1]->encode_title)); ?>" ><?php echo e($Fivenews[1]->title); ?></a></h3>
      </article>

      <!-- Card -->
      <article>
        <img src="https://financial-journal.xyz/newspaper/cms/public/uploads/<?php echo e($Fivenews[2]->photo); ?>" alt="<?php echo e($Fivenews[2]->img_alt); ?>" title="<?php echo e($Fivenews[2]->title); ?>" class="w-full h-40 object-cover rounded">
        <h3 class="font-semibold mt-2"><a title="<?php echo e($Fivenews[2]->title); ?>" href="<?php echo e(url(Str::lower(e($Fivenews[2]->category_name)) . '/' . $Fivenews[2]->encode_title)); ?>" ><?php echo e($Fivenews[2]->title); ?></a></h3>
      </article>

      <!-- Card -->
      <article>
        <img src="https://financial-journal.xyz/newspaper/cms/public/uploads/<?php echo e($Fivenews[3]->photo); ?>" alt="<?php echo e($Fivenews[3]->img_alt); ?>" title="<?php echo e($Fivenews[3]->title); ?>" class="w-full h-40 object-cover rounded">
        <h3 class="font-semibold mt-2"><a title="<?php echo e($Fivenews[3]->title); ?>" href="<?php echo e(url(Str::lower(e($Fivenews[3]->category_name)) . '/' . $Fivenews[3]->encode_title)); ?>" ><?php echo e($Fivenews[3]->title); ?></a></h3>
      </article>

      <!-- Card -->
      <article>
        <img src="https://financial-journal.xyz/newspaper/cms/public/uploads/<?php echo e($Fivenews[4]->photo); ?>" alt="<?php echo e($Fivenews[4]->img_alt); ?>" title="<?php echo e($Fivenews[4]->title); ?>" class="w-full h-40 object-cover rounded">
        <h3 class="font-semibold mt-2"><a title="<?php echo e($Fivenews[4]->title); ?>" href="<?php echo e(url(Str::lower(e($Fivenews[4]->category_name)) . '/' . $Fivenews[4]->encode_title)); ?>" ><?php echo e($Fivenews[4]->title); ?></a></h3>
      </article>

    </div>


    <!-- RIGHT: Most Commented -->  
      <aside class="px-4 pb-4 rounded self-start">
        <h3 class="text-xl font-bold mb-4 mt-0">MOST READ</h3>

      <div class="space-y-4">

        <!-- Item -->
        <div class="flex gap-3">
          <img src="https://financial-journal.xyz/newspaper/cms/public/uploads/<?php echo e($Fivenews[5]->photo); ?>" alt="<?php echo e($Fivenews[5]->img_alt); ?>" title="<?php echo e($Fivenews[5]->title); ?>" class="w-16 h-12 object-cover rounded">
          <div>
            <p class="text-sm font-semibold">
              <a title="<?php echo e($Fivenews[5]->title); ?>" href="<?php echo e(url(Str::lower(e($Fivenews[5]->category_name)) . '/' . $Fivenews[5]->encode_title)); ?>" ><?php echo e($Fivenews[5]->title); ?></a>
            </p>
            <span class="text-xs text-gray-500">422</span>
          </div>
        </div>

        <div class="flex gap-3">
          <img src="https://financial-journal.xyz/newspaper/cms/public/uploads/<?php echo e($Fivenews[6]->photo); ?>" alt="<?php echo e($Fivenews[6]->img_alt); ?>" title="<?php echo e($Fivenews[6]->title); ?>" class="w-16 h-12 object-cover rounded">
          <div>
            <p class="text-sm font-semibold">
              <a title="<?php echo e($Fivenews[6]->title); ?>" href="<?php echo e(url(Str::lower(e($Fivenews[6]->category_name)) . '/' . $Fivenews[6]->encode_title)); ?>" ><?php echo e($Fivenews[6]->title); ?></a>
            </p>
            <span class="text-xs text-gray-500">10</span>
          </div>
        </div>

        <div class="flex gap-3">
          <img src="https://financial-journal.xyz/newspaper/cms/public/uploads/<?php echo e($Fivenews[7]->photo); ?>" alt="<?php echo e($Fivenews[7]->img_alt); ?>" title="<?php echo e($Fivenews[7]->title); ?>" class="w-16 h-12 object-cover rounded">
          <div>
            <p class="text-sm font-semibold">
              <a title="<?php echo e($Fivenews[7]->title); ?>" href="<?php echo e(url(Str::lower(e($Fivenews[7]->category_name)) . '/' . $Fivenews[7]->encode_title)); ?>" ><?php echo e($Fivenews[7]->title); ?></a>
            </p>
            <span class="text-xs text-gray-500">17</span>
          </div>
        </div>

        <div class="flex gap-3">
          <img src="https://financial-journal.xyz/newspaper/cms/public/uploads/<?php echo e($Fivenews[8]->photo); ?>" alt="<?php echo e($Fivenews[8]->img_alt); ?>" title="<?php echo e($Fivenews[8]->title); ?>" class="w-16 h-12 object-cover rounded">
          <div>
            <p class="text-sm font-semibold">
              <a title="<?php echo e($Fivenews[9]->title); ?>" href="<?php echo e(url(Str::lower(e($Fivenews[9]->category_name)) . '/' . $Fivenews[9]->encode_title)); ?>" ><?php echo e($Fivenews[9]->title); ?></a>
            </p>
            <span class="text-xs text-gray-500">34</span>
          </div>
        </div>

      </div>
    </aside>

  </div>
</section> 



<!-- 4th section -->
<section class="py-10">
  <div class="max-w-7xl mx-auto px-4">

    <!-- Custom Ratio -->
    <div class="grid grid-cols-1 lg:grid-cols-[2.5fr_1fr] gap-10">

      <!-- LEFT (Bigger) -->
      <div>

        <!-- Header -->
        <div class="mb-6">
          <div class="relative border-t border-gray-300">
            <span class="absolute -top-[2px] left-0 w-16 h-1 bg-red-600"></span>
          </div>
          <div class="flex items-center mt-4 space-x-2">
            <h2 class="text-2xl font-extrabold">MOST WATCHED VIDEOS</h2>
            <span class="text-gray-500 text-2xl">›</span>
          </div>
        </div>

        <!-- Text + Video -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">

          <!-- Text -->
          <div class="md:col-span-1">
            <h3 class="text-xl font-bold leading-tight">
             <a title="<?php echo e($Fivenews[10]->title); ?>" href="<?php echo e(url(Str::lower(e($Fivenews[10]->category_name)) . '/' . $Fivenews[10]->encode_title)); ?>" ><?php echo e($Fivenews[10]->title); ?></a>
            </h3>

            <div class="mt-4 border-t pt-4">
              <p class="text-sm font-bold mb-3">WATCH MORE</p>

              <ul class="space-y-3 text-xs">
                <li>■ <a title="<?php echo e($Fivenews[11]->title); ?>" href="<?php echo e(url(Str::lower(e($Fivenews[11]->category_name)) . '/' . $Fivenews[11]->encode_title)); ?>" ><?php echo e($Fivenews[11]->title); ?></a></li>
                <li>■ <a title="<?php echo e($Fivenews[12]->title); ?>" href="<?php echo e(url(Str::lower(e($Fivenews[12]->category_name)) . '/' . $Fivenews[12]->encode_title)); ?>" ><?php echo e($Fivenews[12]->title); ?></a></li>
                <li>■ <a title="<?php echo e($Fivenews[13]->title); ?>" href="<?php echo e(url(Str::lower(e($Fivenews[13]->category_name)) . '/' . $Fivenews[13]->encode_title)); ?>" ><?php echo e($Fivenews[13]->title); ?></a></li>
                <li>■ <a title="<?php echo e($Fivenews[14]->title); ?>" href="<?php echo e(url(Str::lower(e($Fivenews[14]->category_name)) . '/' . $Fivenews[14]->encode_title)); ?>" ><?php echo e($Fivenews[14]->title); ?></a></li>
              </ul>
            </div>
          </div>

          <!-- Video (Big) -->
          <div class="md:col-span-2 relative">
            <img src="https://financial-journal.xyz/newspaper/cms/public/uploads/<?php echo e($Fivenews[14]->photo); ?>" alt="<?php echo e($Fivenews[14]->img_alt); ?>" title="<?php echo e($Fivenews[14]->title); ?>"
                 class="w-full h-[360px] object-cover rounded">

            <!-- Play Button -->
            
          </div>

        </div>

      </div>


      <!-- RIGHT (Smaller) -->
      <div>
        <p class="text-xs text-gray-500 uppercase mb-2 text-center">Advertisement</p>
        <div class="bg-white p-2 rounded shadow-sm">
          <img src="images/img1.webp" class="w-full h-[320px] object-cover rounded">
        </div>
      </div>

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



</main>



<!-- ================= FOOTER ================= -->
<footer class="bg-black text-white mt-12">

  <!-- Top Section -->
  <div class="max-w-7xl mx-auto px-4 md:px-6 lg:pl-0 lg:pr-56 py-10
              grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-[1.5fr_0.8fr_0.8fr]
              gap-x-6 gap-y-10">

    <!-- Column 1 -->
    <div>
      <div class="bg-white inline-block px-3 py-2 mb-4">
        <img src="images/fav-icon.svg" alt="Logo" class="h-10">
      </div>

      <h2 class="text-xl font-bold">The Associated Press</h2>
      <p class="text-gray-400 mb-4">Advancing the Power of Facts</p>

      <p class="text-sm font-semibold leading-relaxed max-w-md">
        The Associated Press is an independent global news organization dedicated
        to factual reporting. Founded in 1846, AP remains the most trusted source
        of fast, accurate, unbiased news in all formats.
      </p>
    </div>

    <!-- Column 2 -->
    <div>
      <h3 class="font-semibold mb-4">FROM AP NEWS</h3>
      <ul class="space-y-3 text-sm font-semibold">
        <li><a href="#" class="hover:text-white">About</a></li>
        <li><a href="#" class="hover:text-white">Contact Us</a></li>
        <li><a href="#" class="hover:text-white">Accessibility Statement</a></li>
        <li><a href="#" class="hover:text-white">Terms of Use</a></li>
        <li><a href="#" class="hover:text-white">Privacy Policy</a></li>
        <li><a href="#" class="hover:text-white">Your Privacy Choices</a></li>
        <li><a href="#" class="hover:text-white">Do Not Sell My Info</a></li>
        <li><a href="#" class="hover:text-white">CA Notice of Collection</a></li>
      </ul>
    </div>

    <!-- Column 3 -->
    <div>
      <h3 class="font-semibold mb-4">THE ASSOCIATED PRESS</h3>
      <ul class="space-y-3 text-sm font-semibold">
        <li><a href="#" class="hover:text-white">AP.org</a></li>
        <li><a href="#" class="hover:text-white">Careers</a></li>
        <li><a href="#" class="hover:text-white">Advertise With Us</a></li>
        <li><a href="#" class="hover:text-white">AP News Values</a></li>
        <li><a href="#" class="hover:text-white">AP’s Role in Elections</a></li>
        <li><a href="#" class="hover:text-white">AP Leads</a></li>
        <li><a href="#" class="hover:text-white">AP Stylebook</a></li>
        <li><a href="#" class="hover:text-white">Code of Conduct</a></li>
      </ul>
    </div>

  </div>


  <!-- Bottom Bar -->
  <div class="border-t border-gray-800">
    <div class="max-w-7xl mx-auto px-4 md:px-6 lg:pl-4 lg:pr-12 py-4
                flex flex-col sm:flex-row justify-between items-center
                text-sm text-gray-400">

      <p class="text-center sm:text-left">
        Copyright © 2026 The Associated Press. All Rights Reserved.
      </p>

      <!-- Social Icons -->
      <div class="flex space-x-5 mt-3 sm:mt-0">
        <a href="#" class="hover:opacity-80">
          <img src="images/footer-instagram.webp" class="h-5 w-5">
        </a>
        <a href="#" class="hover:opacity-80">
          <img src="images/footer-instagram.webp" class="h-5 w-5">
        </a>
        <a href="#" class="hover:opacity-80">
          <img src="images/footer-instagram.webp" class="h-5 w-5">
        </a>
      </div>

    </div>
  </div>

</footer>


<script src="./script.js"></script>
</body>
</html><?php /**PATH C:\xampp\htdocs\News22apnews\resources\views/category.blade.php ENDPATH**/ ?>