@extends('layouts.main-app')

@section('title')

@section('content')

    <style>
        /* Custom CSS for specific styles */
        .hero-heading {
            font-size: 2rem;
            font-weight: bold;
            color: #fff;
            text-align: center;
            padding: 1rem;
        }

        .swiper-slide img {
            border-radius: 8px;
            transition: transform 0.3s ease;
        }

        .swiper-slide img:hover {
            transform: scale(1.05);
        }

        /* Container styles */
        .number-container {
            position: relative;
            text-align: center;
        }

        .roboto-font {
            font-family: 'Roboto Condensed', sans-serif;
        }


        /* Shrunk Navbar Style */
        #navbar.shrink {

            margin: 0 auto;
            width: 65%;
            
            /* Shrunk height */


        }
    </style>


    {{-- hero section --}}


    <div class="bg-gray-100">
        <!-- Navbar -->
        {{-- <header
            class=" text-black absolute flex justify-center items-center  top-0 md:top-8 xl:top-8  w-full z-50 transition-all duration-300 md:fixed  md:w-full md:z-50 ">
            <div class="w-full transition-all duration-500 absolute  top-0 md:top-8 xl:top-8 md:fixed  md:w-full md:z-50 "
                id="navbar">
                <!-- Main Navbar -->
                <nav class="w-full bg-gray-300 navbar" x-data="{ open: false }">
                    <div class="container w-full mx-auto  flex justify-between items-center sm:justify-center">
                        <!-- Logo -->
                        <div class="flex items-center">
                            <img src="{{ asset('assets/SMN-logo.png') }}" alt="Logo" class="size-20">
                        </div>

                        <!-- Hamburger Button for Mobile -->
                        <button id="menu-toggle" class="text-gray-600 focus:outline-none md:hidden">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M4 6h16M4 12h16M4 18h16"></path>
                            </svg>
                        </button>

                        <!-- Nav Links -->
                        <div class="hidden sm:flex space-x-8 items-center px-10">
                            <a href="{{ url('/') }}"
                                class="text-gray-600 hover:text-[#ef5400] transition-colors duration-200">HOME</a>

                            <!-- ABOUT US Dropdown -->
                            <div class="relative" x-data="{ dropdownOpen: false }" @mouseenter="dropdownOpen = true"
                                @mouseleave="dropdownOpen = false">
                                <a href="{{ url('/about-us') }}"
                                    class="flex items-center text-gray-600 hover:text-[#ef5400] transition-colors duration-200 whitespace-nowrap">
                                    ABOUT US
                                    <svg class="ml-1 w-4 h-4" fill="fill" stroke="currentColor" viewBox="0 0 24 24"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M19 9l-7 7-7-7"></path>
                                    </svg>
                                </a>
                                <!-- Dropdown Menu -->
                                <div x-show="dropdownOpen"
                                    class="absolute uppercase left-0 mt-2 w-auto bg-white shadow-lg rounded-md border border-gray-200 z-10 px-2"
                                    x-transition:enter="transition ease-out duration-100"
                                    x-transition:enter-start="transform opacity-0 scale-95"
                                    x-transition:enter-end="transform opacity-100 scale-100"
                                    x-transition:leave="transition ease-in duration-75"
                                    x-transition:leave-start="transform opacity-100 scale-100"
                                    x-transition:leave-end="transform opacity-0 scale-95">
                                    <a href="{{ url('/about-us/services') }}"
                                        class="border-b-[1.8px] border-gray-300 block px-4 pt-2 text-gray-600 hover:bg-gray-100 hover:text-[#ef5400] transition-colors duration-200 ">Our
                                        Services</a>
                                    <a href="{{ url('/about-us/brand') }}"
                                        class="border-b-[1.8px] border-gray-300 block px-4  text-gray-600 hover:bg-gray-100 hover:text-[#ef5400] transition-colors duration-200">Our
                                        Brand</a>
                                    <a href="{{ url('/about-us/team') }}"
                                        class="border-b-[1.8px] border-gray-300 block px-4  text-gray-600 hover:bg-gray-100 hover:text-[#ef5400] transition-colors duration-200">Our
                                        Team</a>
                                    <a href="{{ url('/about-us/mission-vision') }}"
                                        class="block px-4 pb-2 text-gray-600 hover:bg-gray-100 hover:text-[#ef5400] transition-colors duration-200 whitespace-nowrap">Our
                                        Mission and Vision</a>
                                </div>
                            </div>

                            <!-- SMN Dropdown -->
                            <div class="relative" x-data="{ dropdownOpen: false }" @mouseenter="dropdownOpen = true"
                                @mouseleave="dropdownOpen = false">
                                <button
                                    class="flex items-center text-gray-600 hover:text-[#ef5400] transition-colors duration-200 whitespace-nowrap">
                                    SMN
                                    <svg class="ml-1 w-4 h-4" fill="fill" stroke="currentColor" viewBox="0 0 24 24"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M19 9l-7 7-7-7"></path>
                                    </svg>
                                </button>
                                <!-- Dropdown Menu -->
                                <div x-show="dropdownOpen"
                                    class="absolute uppercase whitespace-nowrap left-0 mt-2 w-auto bg-white shadow-lg rounded-md border border-gray-200 z-10 px-2"
                                    x-transition:enter="transition ease-out duration-100"
                                    x-transition:enter-start="transform opacity-0 scale-95"
                                    x-transition:enter-end="transform opacity-100 scale-100"
                                    x-transition:leave="transition ease-in duration-75"
                                    x-transition:leave-start="transform opacity-100 scale-100"
                                    x-transition:leave-end="transform opacity-0 scale-95">
                                    <a href="{{ url('/about-us/services') }}"
                                        class="border-b-[1.8px] border-gray-300 block px-4 pt-2 text-gray-600 hover:bg-gray-100 hover:text-[#ef5400] transition-colors duration-200">smn
                                        ship supplies</a>
                                    <a href="{{ url('/about-us/brand') }}"
                                        class="border-b-[1.8px] border-gray-300 block px-4  text-gray-600 hover:bg-gray-100 hover:text-[#ef5400] transition-colors duration-200">smn
                                        events</a>
                                    <a href="{{ url('/about-us/team') }}"
                                        class=" block pb-2 px-4 text-gray-600 hover:bg-gray-100 hover:text-[#ef5400] transition-colors duration-200">smn
                                        consulting</a>
                                </div>
                            </div>

                            <a href="{{ url('/blogs') }}"
                                class="text-gray-600 hover:text-[#ef5400] transition-colors duration-200">BLOGS</a>
                            <a href="{{ url('/contact-us') }}"
                                class="text-gray-600 hover:text-[#ef5400] transition-colors duration-200 whitespace-nowrap">CONTACT
                                US</a>
                            <hr class="w-full border-gray-400 transform rotate-90">
                            <div class="relative hidden sm:block">
                                <select
                                    class="border px-10 border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-orange-600">
                                    <option value="en">English</option>
                                    <option value="es">Spanish</option>
                                    <option value="fr">French</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Mobile Menu -->
                    <div id="mobile-menu"
                        class="fixed top-0 right-0 h-full w-64 bg-gray-200 shadow-lg transform translate-x-full transition-transform duration-300"
                        style="z-index: 1000;">
                        <div class="flex flex-col items-center justify-center h-full space-y-4">
                            <a href="{{ url('/') }}"
                                class="text-gray-600 hover:text-[#ef5400] transition-colors duration-200">HOME</a>

                            <!-- Mobile ABOUT US Dropdown -->
                            <div class="relative" x-data="{ dropdownOpen: false }">
                                <button @click="dropdownOpen = !dropdownOpen"
                                    class="flex items-center text-gray-600 hover:text-[#ef5400] transition-colors duration-200 whitespace-nowrap">
                                    ABOUT US
                                    <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M19 9l-7 7-7-7"></path>
                                    </svg>
                                </button>
                                <!-- Dropdown Menu -->
                                <div x-show="dropdownOpen" @click.away="dropdownOpen = false"
                                    class="absolute right-6 mt-2 bg-white shadow-lg rounded-md border border-gray-200 z-10 w-44"
                                    x-transition:enter="transition ease-out duration-100"
                                    x-transition:enter-start="transform opacity-0 scale-95"
                                    x-transition:enter-end="transform opacity-100 scale-100"
                                    x-transition:leave="transition ease-in duration-75"
                                    x-transition:leave-start="transform opacity-100 scale-100"
                                    x-transition:leave-end="transform opacity-0 scale-95">
                                    <a href="{{ url('/about-us/services') }}"
                                        class="block px-4 py-2 text-gray-600 hover:bg-gray-100 hover:text-[#ef5400] transition-colors duration-200">Our
                                        Services</a>
                                    <a href="{{ url('/about-us/brand') }}"
                                        class="block px-4 py-2 text-gray-600 hover:bg-gray-100 hover:text-[#ef5400] transition-colors duration-200">Our
                                        Brand</a>
                                    <a href="{{ url('/about-us/team') }}"
                                        class="block px-4 py-2 text-gray-600 hover:bg-gray-100 hover:text-[#ef5400] transition-colors duration-200">Our
                                        Team</a>
                                    <a href="{{ url('/about-us/mission-vision') }}"
                                        class="block px-4 py-2 text-gray-600 hover:bg-gray-100 hover:text-[#ef5400] transition-colors duration-200">Our
                                        Mission and Vision</a>
                                </div>
                            </div>

                            <div class="relative" x-data="{ dropdownOpen: false }">
                                <button @click="dropdownOpen = !dropdownOpen"
                                    class="flex items-center text-gray-600 hover:text-[#ef5400] transition-colors duration-200 whitespace-nowrap">
                                    SMN
                                    <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M19 9l-7 7-7-7"></path>
                                    </svg>
                                </button>
                                <!-- Dropdown Menu -->
                                <div x-show="dropdownOpen" @click.away="dropdownOpen = false"
                                    class="absolute right-6 mt-2 bg-white shadow-lg rounded-md border border-gray-200 z-10 w-44"
                                    x-transition:enter="transition ease-out duration-100"
                                    x-transition:enter-start="transform opacity-0 scale-95"
                                    x-transition:enter-end="transform opacity-100 scale-100"
                                    x-transition:leave="transition ease-in duration-75"
                                    x-transition:leave-start="transform opacity-100 scale-100"
                                    x-transition:leave-end="transform opacity-0 scale-95">
                                    <a href="{{ url('/about-us/services') }}"
                                        class="block px-4 py-2 text-gray-600 hover:bg-gray-100 hover:text-[#ef5400] transition-colors duration-200">Our
                                        Services</a>
                                    <a href="{{ url('/about-us/brand') }}"
                                        class="block px-4 py-2 text-gray-600 hover:bg-gray-100 hover:text-[#ef5400] transition-colors duration-200">Our
                                        Brand</a>
                                    <a href="{{ url('/about-us/team') }}"
                                        class="block px-4 py-2 text-gray-600 hover:bg-gray-100 hover:text-[#ef5400] transition-colors duration-200">Our
                                        Team</a>
                                    <a href="{{ url('/about-us/mission-vision') }}"
                                        class="block px-4 py-2 text-gray-600 hover:bg-gray-100 hover:text-[#ef5400] transition-colors duration-200">Our
                                        Mission and Vision</a>
                                </div>
                            </div>

                            <a href="{{ url('/blogs') }}"
                                class="text-gray-600 hover:text-[#ef5400] transition-colors duration-200">BLOGS</a>
                            <a href="{{ url('/contact-us') }}"
                                class="text-gray-600 hover:text-[#ef5400] transition-colors duration-200">CONTACT US</a>

                            <!-- Mobile Language Selector -->
                            <div class="relative" x-data="{ dropdownOpen: false }">
                                <button @click="dropdownOpen = !dropdownOpen"
                                    class="flex items-center text-gray-600 hover:text-[#ef5400] transition-colors duration-200">
                                    Language
                                    <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M19 9l-7 7-7-7"></path>
                                    </svg>
                                </button>
                                <!-- Dropdown Menu -->
                                <div x-show="dropdownOpen" @click.away="dropdownOpen = false"
                                    class="absolute right-6 mt-2 bg-whie shadow-lg rounded-md border bg-white border-gray-200 z-10 w-44"
                                    x-transition:enter="transition ease-out duration-100"
                                    x-transition:enter-start="transform opacity-0 scale-95"
                                    x-transition:enter-end="transform opacity-100 scale-100"
                                    x-transition:leave="transition ease-in duration-75"
                                    x-transition:leave-start="transform opacity-100 scale-100"
                                    x-transition:leave-end="transform opacity-0 scale-95"
                                   
                                    >
                                    <a href="#"
                                        class="block px-4 py-2 text-gray-600 hover:bg-gray-100 hover:text-[#ef5400] transition-colors duration-200">English</a>
                                    <a href="#"
                                        class="block px-4 py-2 text-gray-600 hover:bg-gray-100 hover:text-[#ef5400] transition-colors duration-200">Spanish</a>
                                    <a href="#"
                                        class="block px-4 py-2 text-gray-600 hover:bg-gray-100 hover:text-[#ef5400] transition-colors duration-200">French</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Mobile Menu Script -->
                    <script>
                        const mobileMenu = document.getElementById('mobile-menu');
                        const menuToggle = document.getElementById('menu-toggle');

                        menuToggle.addEventListener('click', function(event) {
                            event.stopPropagation();
                            mobileMenu.classList.toggle('translate-x-full');
                        });

                        // Close mobile menu when clicking outside of it
                        document.addEventListener('click', function(event) {
                            if (!mobileMenu.contains(event.target) && !menuToggle.contains(event.target)) {
                                mobileMenu.classList.add('translate-x-full');
                            }
                        });

                        // Auto close mobile menu on large screens
                        window.addEventListener('resize', function() {
                            if (window.innerWidth >= 768) { // Adjust the width as needed
                                mobileMenu.classList.add('translate-x-full');
                            }
                        });
                    </script>
                </nav>
            </div>
        </header> --}}
@include('layouts.navbar')

        <!-- Hero Section -->
        <section class="relative mt-20 md:mt-0 flex justify-center items-center object-contain h-[70vh]  xl:h-auto ">
                <!-- Background Image -->
                <img src="{{ asset('assets/hero-assets/hero-bg.webp') }}" alt="Background Image"
                    class="object-cover  xl:object-contain w-full h-full">
                <!-- Hero Content -->
                <div
                    class="absolute z-10 w-full h-full  flex flex-col justify-center items-center md:object-cover object-contain ">
                    <h1
                        class=" leading-none hero-heading text-white text-xs sm:text-sm  md:text-2xl lg:text-3xl font-bold text-center p-4 container mx-auto max-w-screen-lg">
                        Your Reliable Partner in Supplies and Services
                    </h1>

                    <!-- Swiper Carousel -->
                    <div class="swiper-container py-4 h-auto w-full overflow-hidden">
                        <div class="swiper-wrapper ">
                            @foreach (range(1, 7) as $index)
                                {{-- Replace with dynamic data --}}
                                <div class="swiper-slide  flex justify-center items-center">
                                    <img src="{{ asset('assets/hero-assets/technicalStores.webp') }}"
                                        alt="Technical Store {{ $index }}"
                                        class="w-full h-auto object-contain rounded-lg">
                                    <a href="#"
                                        class="ubuntu-font absolute whitespace-nowrap bottom-4 left-1/2 transform -translate-x-1/2 bg-[#4d4848] text-white px-4 py-2 rounded-full shadow-lg hover:bg-orange-700 transition duration-300 text-sm sm:text-base">
                                        View Details
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
        </section>

        <!-- Values Section -->
        <section>
            <div class="object-contain relative container mx-auto max-w-screen-lg my-14">
                <!-- Background Image -->
                <img src="{{ asset('assets/hero-assets/bg-wcu.webp') }}" alt="Background Image"
                class="px-4"
                >
                <!-- Text Content -->
                <h1
                    class=" tracking-tight ubuntu-font mt-4 font font-medium  uppercase w-full h-full flex flex-col justify-center items-center text-black text-xl sm:text-5xl md:text-5xl lg:text-6xl text-center container mx-auto max-w-screen-lg absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                    Why Choose Us <br> Our Value and Principles
                </h1>
            </div>

            <div class="w-full  bg-[#030B15] object-cover">
                <div class="w-full relative container mx-auto max-w-screen-lg ">
                    <div class="flex flex-col items-center">
                        @php
                            $cards = [
                                [
                                    'number' => '01',
                                    'icon' => 'assets/hero-assets/efficiency-icon.webp',
                                    'image' => 'assets/hero-assets/Effeciency-hover.webp',
                                    'heading' => 'Reliability',
                                    'paragraph' =>
                                        'Our staff are working with our clients and partners to ensure we succeed in providing the best quality and reliable services.',
                                ],
                                [
                                    'number' => '02',
                                    'icon' => 'assets/hero-assets/reliability-icon.webp',
                                    'image' => 'assets/hero-assets/reliability.webp',
                                    'heading' => 'Integrity',
                                    'paragraph' => 'We uphold the highest standards of integrity in all of our actions.',
                                ],
                                [
                                    'number' => '03',
                                    'icon' => 'assets/hero-assets/cost-effective-icon.webp',
                                    'image' => 'assets/hero-assets/Cost-Effective-hover.webp',
                                    'heading' => 'Cost Effective',
                                    'paragraph' => 'We foster innovative ideas to drive business growth and success.',
                                ],
                                [
                                    'number' => '04',
                                    'icon' => 'assets/hero-assets/simplicity-icon.webp',
                                    'image' => 'assets/hero-assets/Simplicity-Hover.webp',
                                    'heading' => 'Simplicity',
                                    'paragraph' => 'Our customers are at the heart of everything we do.',
                                ],
                            ];
                        @endphp
        
        
                        <div class="grid grid-cols-2 md:grid-cols-4 scale-75 md:scale-100">
        
                            @foreach ($cards as $index => $card)
                                @php
                                    // Determine the group number based on the index
                                    $group = floor($index / 1);
                                    // Calculate delay: each group has a delay increment of 200ms
                                    $aosDelay = $group * 200;
                                @endphp
        
                                <div class="relative group">
                                    <div class="w-full h-full">
                                        <img src="{{ asset($card['image']) }}" alt="Image {{ $index }}"
                                            class="group-hover:blur-0 w-full h-full object-cover group-hover:border-l-2 group-hover:border-r-2"
                                            data-aos="fade-right" data-aos-offset="500" data-aos-duration="1000"
                                            data-aos-delay="{{ $aosDelay }}" data-aos-once="true">
                                    </div>
                                    <!-- Overlay -->
                                    <div
                                        class="absolute inset-0 bg-[#030B15] bg-opacity-80 group-transition-opacity duration-500 ease-in-out group-hover:bg-opacity-0">
                                    </div>
                                    <!-- Overlay Content -->
                                    <div class="group ubuntu-font absolute inset-0 bg-opacity-0 flex flex-col justify-center items-center text-center px-4"
                                        data-aos="fade-right" data-aos-offset="500" data-aos-duration="1000"
                                        data-aos-delay="{{ $aosDelay }}" data-aos-once="true">
                                        <!-- Number -->
                                        <div class="text-gray-600 group-hover:text-white text-6xl font-bold absolute top-8 left-8 ">
                                            {{ $card['number'] }}
                                        </div>
                                        <!-- Icon -->
                                        <div class="mb-4 group">
                                            <img src="{{ asset($card['icon']) }}" alt="{{ $card['heading'] }}"
                                                class="size-16 transition duration-300 grayscale">
                                        </div>
                                        <!-- Heading -->
                                        <h3 class="text-2xl font-semibold mb-2 text-gray-600 group-hover:text-white">
                                            {{ $card['heading'] }}</h3>
                                        <!-- Paragraph -->
                                        <p class="text-sm leading-relaxed text-gray-600 group-hover:text-white">
                                            {{ $card['paragraph'] }}
                                        </p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {{-- awards and certifications --}}
        <section>
            <div class="object-contain relative container mx-auto max-w-screen-lg my-14">
                <!-- Background Image -->
                <img src="{{ asset('assets/hero-assets/aac.webp') }}" alt="Background Image"
                    class="px-4"
                >
                <!-- Text Content -->
                <h1
                    class=" tracking-tight ubuntu-font mt-4 font font-medium  uppercase w-full h-full flex flex-col justify-center items-center text-black text-xl sm:text-5xl md:text-5xl lg:text-6xl text-center container mx-auto max-w-screen-lg absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                    Awards and Certifications
                </h1>
            </div>

            <div
            class=" w-full h-50 flex flex-col justify-center items-center relative container mx-auto max-w-screen-lg  -mt-24">
            <img src="{{ asset('assets/hero-assets/Logo Awards Opacity.webp') }}" alt="Background Image"
                class="object-cover size-1/2">
            <div
                class=" w-full absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 h-auto py-10 rounded-2xl flex justify-between items-center px-10 border  shadow-2xl shadow-gray-300 ">
                <!-- Box 1 -->
                <div 
                data-aos-once="true"
                data-aos="fade-down" data-aos-delay="50"
                data-aos-duration="500"
                    class="relative size-24 rounded-3xl shadow-md shadow-gray-500 flex items-center justify-center  hover:scale-110 transition-all duration-300">
                    <img src="{{ asset('assets/hero-assets/award1.webp') }}" alt="Background Image"
                        class="object-cover rounded-3xl">
                </div>
                <span class="border-l border-gray-400 h-20 mx-4"></span> <!-- Vertical Divider -->
    
                <!-- Box 2 -->
                <div
                data-aos-once="true"
                 data-aos="fade-down" data-aos-delay="300"
                data-aos-duration="500"
                    class="relative size-24 rounded-3xl shadow-md shadow-gray-500 flex items-center justify-center  hover:scale-110 transition-all duration-300">
                    <img src="{{ asset('assets/hero-assets/award2.webp') }}" alt="Background Image"
                        class="object-cover rounded-3xl p-[18px]">
                </div>
                <span class="border-l border-gray-400 h-20 mx-4"></span> <!-- Vertical Divider -->
    
                <!-- Box 3 -->
                <div
                data-aos-once="true"
                 data-aos="fade-down" data-aos-delay="550"
                data-aos-duration="500"
                    class="relative size-24 rounded-3xl shadow-md shadow-gray-500 flex items-center justify-center  hover:scale-110 transition-all duration-300">
                    <img src="{{ asset('assets/hero-assets/award3.webp') }}" alt="Background Image"
                        class="object-cover rounded-3xl p-2">
                </div>
                <span class="border-l border-gray-400 h-20 mx-4"></span> <!-- Vertical Divider -->
    
                <!-- Box 4 -->
                <div
                data-aos-once="true"
                 data-aos="fade-down" data-aos-delay="700"
                data-aos-duration="500"
                    class="relative size-24 rounded-full shadow-md shadow-gray-500 flex items-center justify-center  hover:scale-110 transition-all duration-300">
                    <img src="{{ asset('assets/hero-assets/award4.webp') }}" alt="Background Image"
                        class="object-cover rounded-3xl ">
                </div>
                <span class="border-l border-gray-400 h-20 mx-4"></span> <!-- Vertical Divider -->
    
                <!-- Box 5 -->
                <div
                data-aos-once="true"
                 data-aos="fade-down" data-aos-delay="950"
                data-aos-duration="500"
                    class="relative size-24 rounded-2xl shadow-md shadow-gray-500 flex items-center justify-center  hover:scale-110 transition-all duration-300">
                    <img src="{{ asset('assets/hero-assets/award5.webp') }}" alt="Background Image"
                        class="object-cover rounded-3xl">
                </div>
            </div>
            </div>
        </section>

        {{-- number counter --}}
        <section>
            <div class="relative bg-cover bg-center h-auto">
                <img src="{{ asset('assets/hero-assets/Statistics.webp') }}" alt="Background Image"
                    class="object-fill w-full h-auto">
                <div
                    class="container mx-auto max-w-screen-lg h-full flex flex-col justify-center space-y-10 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                    <!-- Title -->
                    <div class="w-full h-1/2 flex justify-between items-start mt-10">
                        <h1 class="text-4xl md:text-5xl font-bold text-black ubuntu-font">
                            The Power of a <span
                                class=" opacity-10 italic text-transparent bg-clip-text text-white text-8xl roboto-font font-thin absolute top-4 left-[240px]">human</span>
                          <br>  network
                        </h1>
                        <h3 class="text-black text-right text-lg max-w-[500px]">We believe in building trust through commitment, reliability,
                            and understanding your needs.</h3>
                    </div>
                    <!-- Statistics Section -->
                    <div class="flex flex-wrap md:flex-nowrap justify-between text-white">
                        <!-- Statistic 1 -->
                        <div class="number-container roboto-font -mt-10 text-black py-4" id="pproductsAvailableCounter">
                            <!-- Main number -->
                            <div class="text-6xl font-semibold z-50" id="productsAvailableCounter">0</div>
                            <!-- Shadow number -->
                            <div
                                class="-z-10 absolute opacity-50 -top-20 -left-20 bottom-0 text-9xl font-semibold text-gray-400"
                                id="productsAvailableCounterShadow">0</div>
                            <!-- Caption -->
                            <div class="number-caption text-2xl">Products Available</div>
                        </div>
                        
                        <!-- Statistic 2 -->
                        <div class="number-container roboto-font -mt-20 text-black" id="ssatisfiedCustomerCounter">
                            <!-- Main number -->
                            <div class="text-5xl font-semibold z-50" id="satisfiedCustomerCounter">0</div>
                            <!-- Shadow number -->
                            <div
                                class="-z-10 absolute opacity-50 -top-20 left-0 bottom-0 text-9xl font-semibold text-gray-400"
                                id="satisfiedCustomerCounterShadow">0</div>
                            <!-- Caption -->
                            <div class="number-caption text-2xl">Satisfied Customers</div>
                        </div>
                        
                        <!-- Statistic 3 -->
                        <div class="number-container roboto-font -mt-10 text-black mb-4" id="yyearsOfOperationCounter">
                            <!-- Main number -->
                            <div class="text-6xl font-semibold z-50" id="yearsOfOperationCounter">0</div>
                            <!-- Shadow number -->
                            <div
                                class="-z-10 absolute opacity-70 -top-20 left-10 bottom-0 text-9xl font-semibold text-gray-400 shadow-2xl shadow-gray-700"
                                id="yearsOfOperationCounterShadow">0</div>
                            <!-- Caption -->
                            <div class="number-caption text-2xl">Years of Operation <br> A Company that you can trust</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Recent Updates Section -->
        <section class="py-10">
            <div class="container mx-auto text-center max-w-screen-xl">
                
                <h2 class="text-3xl font-bold">Recent Updates & Insights</h2>
                <div class="grid grid-cols-1 px-4 md:grid-cols-3 gap-6 mt-10">
                    {{-- Blog Card --}}
            @foreach (range(1, 3) as $i) {{-- Replace with dynamic cards --}}
                <div class="bg-white shadow-md rounded-sm overflow-hidden">
                    <!-- Image Section -->
                    <div class="relative">
                    <img src="{{ asset('assets/hero-assets/blog1.webp') }}" alt="Blog Image" class="w-full h-48 sm:h-56 object-cover">
                    <!-- 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">25</p>
                        <p class="text-xs sm:text-sm uppercase">Dec</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="p-4 text-left">
                    <h2 class="text-base sm:text-lg font-semibold text-gray-800">Golf Asia Feature</h2>
                    <a href="#" class="mt-2 inline-flex items-center text-blue-500 hover:text-blue-700">
                        Read More
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" 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>
                </div>
            @endforeach
                </div>
            </div>
        </section>

        <!-- Footer -->
        {{-- <footer class="bg-gray-900 text-white py-10">
            <div class="container mx-auto grid grid-cols-2 px-3 md:grid-cols-3 gap-6">
                <div>
                    <h4 class="text-xl font-bold">SMN Safety Pte Ltd</h4>
                    <p>Singapore & Dubai</p>
                    <p>Email: info@smnsafety.com</p>
                </div>
                <div>
                    <h4 class="text-xl font-bold">Useful Links</h4>
                    <ul>
                        <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Services</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Blogs</a></li>
                    </ul>
                </div>
                <div class="hidden md:flex justify-center items-start flex-col px-3">
                    <h4 class=" text-xl font-bold">Newsletter</h4>
                    <form>
                        <input type="email" placeholder="Your Email"
                            class="w-full px-4 py-2 rounded bg-gray-700 text-white">
                        <button class="bg-blue-500 px-4 py-2 rounded mt-4">Subscribe</button>
                    </form>
                </div>
            </div>
            <div class="md:hidden flex justify-center items-start flex-col px-3">
                <h4 class="text-xl font-bold">Newsletter</h4>
                <form>
                    <input type="email" placeholder="Your Email"
                        class="w-full px-4 py-2 rounded bg-gray-700 text-white">
                    <button class="bg-blue-500 px-4 py-2 rounded mt-4">Subscribe</button>
                </form>
            </div>
        </footer> --}}
        @include('layouts.footer')
    </div>



    {{-- @include('layouts.footer')2 --}}

@endsection


<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const swiper = new Swiper('.swiper-container', {
            loop: true,
            autoplay: {
                delay: 3000,
                disableOnInteraction: true,
            },
            speed: 1000,
            breakpoints: {
                180: {
                    slidesPerView: 2,
                    spaceBetween: 10,
                    scale: 0.8,
                },
                400: {
                    slidesPerView: 3,
                    spaceBetween: 10,
                    scale: 0.8,
                },
                620: {
                    slidesPerView: 3,
                    spaceBetween: 20,
                    scale: 0.6,
                },
                700: {
                    slidesPerView: 4,
                    spaceBetween: 30,
                    scale: 0.6,
                },
                1024: {
                    slidesPerView: 5,
                    spaceBetween: 40,
                    scale: 0.6,
                },
                1280: {
                    slidesPerView: 6,
                    spaceBetween: 80,

                },
            },
        });
    });
</script>

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


{{-- counter function --}}
<script>
    // Counter Function with Random Numbers
    function animateCounterWithRandom(id, targetValue, duration) {
        const mainCounter = document.getElementById(id);
        const shadowCounter = document.getElementById(`${id}Shadow`);
        const frameRate = 16; // ~60FPS
        const totalFrames = duration / frameRate;
        const increment = targetValue / totalFrames;
        let currentValue = 0;

        const counterInterval = setInterval(() => {
            // Generate a random number close to the current value
            const randomValue = Math.floor(
                currentValue + Math.random() * (increment * 2) - increment
            );

            // Ensure random value doesn't exceed the target
            const displayValue =
                currentValue + increment >= targetValue ?
                targetValue :
                Math.min(randomValue, targetValue);

            mainCounter.textContent = `${displayValue.toLocaleString()}+`;
            shadowCounter.textContent = `${displayValue.toLocaleString()}+`;

            // Increment the actual value
            currentValue += increment;

            if (currentValue >= targetValue) {
                // Final display to ensure the target value is accurate
                mainCounter.textContent = `${targetValue.toLocaleString()}+`;
                shadowCounter.textContent = `${targetValue.toLocaleString()}+`;
                clearInterval(counterInterval);
            }
        }, frameRate);
    }

    // Observer for triggering animation on scroll
    function createObserverWithRandom(targetId, targetValue, duration) {
        const targetElement = document.getElementById(targetId);

        const observer = new IntersectionObserver(
            (entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        // Start the counter animation
                        animateCounterWithRandom(targetId, targetValue, duration);
                        // Disconnect observer to prevent re-triggering
                        observer.disconnect();
                    }
                });
            }, {
                threshold: 1
            } // Trigger when 50% of the element is visible
        );

        observer.observe(targetElement);
    }

    // Initialize observers for each counter
    window.onload = () => {
        const duration = 3000; // 2 seconds
        createObserverWithRandom("productsAvailableCounter", 1200, duration); // 1200 Products Available
        createObserverWithRandom("satisfiedCustomerCounter", 500, duration); // 500+ Satisfied Customers
        createObserverWithRandom("yearsOfOperationCounter", 10, duration); // 10+ Years of Operation
    };
</script>