@extends('layouts.main-app')

@section('title', 'Consulting')

@section('content')

<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet'>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
    <style>
            .roboto-font {
                font-family: 'Roboto Condensed', sans-serif;
            }
            
            .ubuntu-font {
                font-family: 'Ubuntu';
            }
            
                /* ########################################### */

            /* Shrunk Navbar Style */
            #navbar.shrink {
                margin: 0 auto;
                width: 65%;
            }
            /* Shrunk Navbar Style */
            #navbar.unshrink {
                margin: 0 auto;
                width: 100%;
            }
    </style>

    <div class="">

    
        @include('layouts.header')
        {{-- news article--}}


        {{-- highlights news --}}
        <section>
            <h1 class="text-2xl font-bold text-center pt-4">News Highlights</h1>
            <div class="container mx-auto max-w-screen-lg">
                <div class="grid grid-cols-1 px-4 md:grid-cols-3 gap-6 mt-10">
                    {{-- news  Card --}}
                    @if($highlights->isEmpty())
                        <p class="text-center text-2xl font-bold">No current news</p>
                    @else
                        @foreach ($highlights as $highlight)
                            <div class="rounded-sm overflow-hidden group shadow-gray-300 shadow-md ">
                                <a href="{{ $highlight->link }}" target="_blank">
                                    <div class="relative">
                                        <img src="{{ json_decode($highlight->image)[0] }}" alt="Blog Image" class="w-full h-48 sm:h-56 object-contain group-hover:scale-105 duration-500 transition-all ">
                                    </div>
                                </a>
                                <div class="mt-2 p-3">
                                    <h2 class="text-lg font-semibold">{{ $highlight->title }}</h2>
                                    <p class="text-sm text-gray-600">{!! $highlight->description !!}</p>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </section>



        <section class="container mx-auto max-w-screen-lg py-20">
            <h1 class="text-2xl font-bold text-center ">Recent News</h1>

                    <div class="grid grid-cols-1 px-4 md:grid-cols-3 gap-6 mt-10">
                    {{-- news  Card --}}
            @if($news->isEmpty())
                <p class="text-center text-2xl font-bold">No current news</p>
            @else
                @foreach ($news as $new)
                    <div class="rounded-sm overflow-hidden group">
                        <a href="{{ route('newsItem', $new->id) }}">
                            <!-- Image Section -->
                            <div class="relative">
                                <img src="{{ asset($new->image) }}" alt="Blog Image" class="w-full h-48 sm:h-56 object-cover group-hover:scale-105 duration-500 transition-all ">
                                <!-- Badges -->
                                <div class="flex absolute bottom-0 left-0 w-full mt-10">
                                    <!-- Date Badge -->
                                    <div class="bg-black text-white py-3 px-5 text-center flex flex-col items-center">
                                        <p class="text-lg sm:text-xl font-bold">{{ \Carbon\Carbon::parse($new->date)->format('d') }}</p>
                                        <p class="text-xs sm:text-sm uppercase">{{ \Carbon\Carbon::parse($new->date)->format('M') }}</p>
                                    </div>
                                    <!-- Author Badge -->
                                    <div class="bg-white shadow-md flex px-4 items-center">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 sm:h-5 sm:w-5 text-gray-500 mr-2" viewBox="0 0 20 20" fill="currentColor">
                                            <path d="M10 8a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" />
                                        </svg>
                                        <span class="text-xs sm:text-sm font-medium text-gray-700">Admin</span>
                                    </div>
                                </div>
                            </div>
                            <!-- Content Section -->
                            <div class="pt-2 space-y-4 text-left ">
                                <h2 class="text-base sm:text-lg font-semibold text-gray-800">{{ $new->title }}</h2>
                                <a href="{{ route('newsItem', $new->id) }}" class="mt-2 inline-flex items-center text-gray-700 group-hover:text-[#729ACE] group-hover:underline">
                                    Read More
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1 hover:transform group-hover:-rotate-45 duration-500 group-hover:text-[#729ACE]" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd"
                                            d="M12.293 9.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L13.586 13H4a1 1 0 110-2h9.586l-1.293-1.293a1 1 0 010-1.414z"
                                            clip-rule="evenodd" />
                                    </svg>
                                </a>
                            </div>
                        </a>  
                    </div>
                @endforeach
            @endif
                
        </section>

        
      
          
     


      



    </div>

    <script>
      const scrollContainer = document.getElementById("scroll-container");
    
      let scrollingInterval;
    
      // Function to start auto-scrolling
      const startAutoScroll = () => {
        scrollingInterval = setInterval(() => {
          scrollContainer.scrollBy(0, 1); // Scroll down 1px every 10ms
        }, 3);
      };
    
      // Function to stop auto-scrolling
      const stopAutoScroll = () => {
        clearInterval(scrollingInterval);
      };


      // Start scrolling when the page loads
      startAutoScroll();
    
      // Add event listeners to stop and resume scrolling
      scrollContainer.addEventListener("mouseenter", stopAutoScroll); // Stop scrolling on hover
      scrollContainer.addEventListener("mouseleave", startAutoScroll); // Resume scrolling when hover ends
    </script>


@endsection


<!-- Add this script to handle the shrinking navbar event -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const navbar = document.getElementById('navbar');
        window.addEventListener('scroll', function() {
            if (window.innerWidth >= 1200 && window.scrollY > 100) { // Check for mobile screen
                navbar.classList.add('shrink');
                navbar.classList.remove('unshrink');
            } else {
                navbar.classList.remove('shrink');
                navbar.classList.add('unshrink');
            }
        });
    });
</script>