@extends('layouts.main-app')

@section('title', 'About Us')

@section('content')

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

        /* Shrunk Navbar Style */
        #navbar.shrink {
            margin: 0 auto;
            width: 65%;
        }
        .hidden {
            display: block;
            opacity: 0;
            transform: translateY(20px); /* Optional: adds a slide effect */
            transition: opacity 0.3s ease, transform 0.3s ease; /* Transition effect */ 
            }   
                    
        .roboto-font {
            font-family: 'Roboto Condensed', sans-serif;
        }

        [x-cloak] {
            display: none !important;
        }
    </style>


    <div class="">

        <!-- About header Section -->
        <section class="bg-cover bg-center h-64" style="background-image: url('https://via.placeholder.com/1200x400');">
            <div class="h-full w-full flex items-center justify-center bg-gray-900 bg-opacity-50">
                <h1 class="text-4xl text-white font-bold">About Us Mission and Vision</h1>
            </div>
        </section>




        <div class="container mx-auto mt-10 max-w-screen-lg relative" x-data="{ activeTab: 'tab1' }">
            <!-- Tab Buttons -->
            <div class="flex justify-end items-center relative">
                <div 
                x-show="activeTab === 'tab2'" 
                x-transition:enter="transition ease-out duration-300" 
                x-transition:enter-start="opacity-0 transform scale-95" 
                x-transition:enter-end="opacity-100 transform scale-100" 
                x-transition:leave="transition ease-in duration-200" 
                x-transition:leave-start="opacity-100 transform scale-100" 
                x-transition:leave-end="opacity-0 transform scale-95" 
                x-cloak
                class="absolute bottom-0 left-0">
                    <img src="{{asset('assets/about/Vision.webp')}}" alt="" srcset="">
                    <h3 class="absolute bottom-0 left-0 text-4xl font-semibold font-ubuntu whitespace-nowrap">Our Team</h3>
                </div>
            
                <div class="bg-gray-200 rounded-3xl shadow-lg flex py-2 px-2 border-2 border-black scale-75"  >
                    <!-- Inactive Tabs -->
                    <a href="/about-us" class="px-6 py-2 m-1 text-gray-700 hover:bg-gray-500 hover:text-gray-100 transition ease-in-out duration-300 transform hover:scale-105 rounded-2xl">Profile</a>
                    <button  class="px-6 py-2 m-1 text-gray-700 hover:bg-gray-500 hover:text-gray-100 transition ease-in-out duration-300 transform hover:scale-105 rounded-2xl"
                    :class="{ 'bg-black text-white hover:none ': activeTab === 'tab1' }"
                    @click="activeTab = 'tab1'">
                    Mission & Vision</button>

                    <button  class="px-6 py-2 m-1 text-gray-700 hover:bg-gray-500 hover:text-gray-100 transition ease-in-out duration-300 transform hover:scale-105 rounded-2xl"
                    :class="{ 'bg-black text-white': activeTab === 'tab2' }"
                    @click="activeTab = 'tab2'">
                    Our Team</button>
                </div>
            </div>

            <!-- Tab Content -->
            <div>
                <!-- Mission & Vision Section -->
                <section 
                        x-show="activeTab === 'tab1'" 
                        x-transition:enter="transition ease-out duration-300" 
                        x-transition:enter-start="opacity-0 transform scale-95" 
                        x-transition:enter-end="opacity-100 transform scale-100" 
                        x-transition:leave="transition ease-in duration-200" 
                        x-transition:leave-start="opacity-100 transform scale-100" 
                        x-transition:leave-end="opacity-0 transform scale-95" 
                        x-cloak
                class="container mx-auto max-w-screen-lg px-4  grid grid-cols-1 md:grid-cols-2 gap-8 items-center ">
                    <!-- Images Section -->
                    <div class="relative flex justify-center items-center flex-col h-full w-full scale-90">
                        <div class="relative">
                            <img src="{{asset('assets/about/img1.webp')}}" alt="Mission Image" class="rounded-lg">
                            <div class="absolute inset-0 border-4 border-white rounded-lg"></div>
                        </div>
                        <div class="relative">
                            <img src="{{asset('assets/about/img2.webp')}}" alt="Vision Image" class="rounded-lg">
                            <div class="absolute inset-0 border-4 border-white rounded-lg"></div>
                        </div>
                        <div class="absolute top-1/4 -right-20 text-white  text-center scale-90 ">
                        <img src="{{asset('assets/about/hexagon.webp')}}" alt="" class="relative">
                        <p class="absolute top-1/2 left-1/3 w-20">Safety & Excellents at Workd</p>
                        </div>
                    </div>

                    <!-- Text Section -->
                    <div class="h-full w-full flex flex-col justify-start items-center relative">
                        <img src="{{asset('assets/smnlogo.webp')}}" alt="" srcset="" class="h-[300px] mt-6 ml-10 opacity-5" >
                    <div class=" absolute">
                    

                        <div>
                            <img src="{{asset('assets/about/Mission.webp')}}" alt="" srcset="">
                            <h1 class="text-6xl ml-1 -mt-4 ubuntu-font font-bold">Mission</h1>
                            <p class="text-sm text-gray-600 mb-8">
                                Our mission is to serve our clients as partners working closely with them to provide value through our expertise, knowledge, and service delivery.
                            </p>
                        </div>
                    <div>
                        <img src="{{asset('assets/about/Vision.webp')}}" alt="" srcset="">
                        <h1 class="text-6xl ml-1 -mt-4 ubuntu-font font-bold">Vision</h1>
                        <p class="text-sm text-gray-600">
                            Guided by our values, we aim to be a recognized leader for safety and security requirements, corporate events and gift ideas, business representation, research, and advisory services.
                        </p>
                    </div>
                    
                    </div>
                    
                    </div>
                </section>

                {{-- Our Team --}}
                <section 
                x-show="activeTab === 'tab2'" 
                        x-transition:enter="transition ease-out duration-300" 
                        x-transition:enter-start="opacity-0 transform scale-95" 
                        x-transition:enter-end="opacity-100 transform scale-100" 
                        x-transition:leave="transition ease-in duration-200" 
                        x-transition:leave-start="opacity-100 transform scale-100" 
                        x-transition:leave-end="opacity-0 transform scale-95" 
                        x-cloak 
                class="container mx-auto max-w-screen-lg px-4 py-12">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 space-y-10">
                            
                  
                        <!-- Team Member 1 -->
                        <div class="flex items-center bg-gray-200"  onclick="openmodal('teamMember1')" >
                                <img src="{{asset('assets/about/capt.webp')}}" alt="Capt" class="w-48 grayscale">
                            <div>
                                <h3 class="text-lg font-bold">Capt. Mohit Batara</h3>
                                <p class="text-blue-500 text-sm font-semibold">Global Sales Lead</p>
                                <p class="text-gray-600 text-sm mt-2">
                                    Jennie Kate Basa is the Global Sales Lead at SMN, overseeing international sales strategies and building strong partnerships to achieve global business success.
                                </p>
                            </div>
                        </div>
                        <!-- Team Member 2 -->
                        <div class="flex items-center">
                                <img src="{{asset('assets/about/capt.webp')}}" alt="Capt" class="w-48 grayscale">
                            <div class="px-4">
                                <h3 class="text-lg font-bold">Capt. Mohit Batara</h3>
                                <p class="text-blue-500 text-sm font-semibold">Global Sales Lead</p>
                                <p class="text-gray-600 text-sm mt-2">
                                    Jennie Kate Basa is the Global Sales Lead at SMN, overseeing international sales strategies and building strong partnerships to achieve global business success.
                                </p>
                            </div>
                        </div>
                    {{-- team 3 --}}
                        <div class="flex items-center">  
                            <div class="">
                                <h3 class="text-lg font-bold">Capt. Mohit Batara</h3>
                                <p class="text-blue-500 text-sm font-semibold">Global Sales Lead</p>
                                <p class="text-gray-600 text-sm mt-2">
                                    Jennie Kate Basa is the Global Sales Lead at SMN, overseeing international sales strategies and building strong partnerships to achieve global business success.
                                </p>
                            </div>
                            <img src="{{asset('assets/about/capt.webp')}}" alt="Capt" class="w-48 grayscale">
                        </div>
                    {{-- team 4 --}}
                        <div class="flex items-center">  
                            <div class="">
                                <h3 class="text-lg font-bold">Capt. Mohit Batara</h3>
                                <p class="text-blue-500 text-sm font-semibold">Global Sales Lead</p>
                                <p class="text-gray-600 text-sm mt-2">
                                    Jennie Kate Basa is the Global Sales Lead at SMN, overseeing international sales strategies and building strong partnerships to achieve global business success.
                                </p>
                            </div>
                            <img src="{{asset('assets/about/capt.webp')}}" alt="Capt" class="w-48 grayscale">
                        </div>
                    {{-- team 5 --}}
                        <div class="flex items-center">  
                            <img src="{{asset('assets/about/capt.webp')}}" alt="Capt" class="w-48 grayscale">
                            <div class="">
                                <h3 class="text-lg font-bold">Capt. Mohit Batara</h3>
                                <p class="text-blue-500 text-sm font-semibold">Global Sales Lead</p>
                                <p class="text-gray-600 text-sm mt-2">
                                    Jennie Kate Basa is the Global Sales Lead at SMN, overseeing international sales strategies and building strong partnerships to achieve global business success.
                                </p>
                            </div>
                        </div>
                    {{-- team 6 --}}
                        <div class="flex items-center">  
                            <img src="{{asset('assets/about/capt.webp')}}" alt="Capt" class="w-48 grayscale">
                            <div class="">
                                <h3 class="text-lg font-bold">Capt. Mohit Batara</h3>
                                <p class="text-blue-500 text-sm font-semibold">Global Sales Lead</p>
                                <p class="text-gray-600 text-sm mt-2">
                                    Jennie Kate Basa is the Global Sales Lead at SMN, overseeing international sales strategies and building strong partnerships to achieve global business success.
                                </p>
                            </div>
                        </div>
                    {{-- team 7 --}}
                        <div class="flex items-center">  
                            <div class="">
                                <h3 class="text-lg font-bold">Capt. Mohit Batara</h3>
                                <p class="text-blue-500 text-sm font-semibold">Global Sales Lead</p>
                                <p class="text-gray-600 text-sm mt-2">
                                    Jennie Kate Basa is the Global Sales Lead at SMN, overseeing international sales strategies and building strong partnerships to achieve global business success.
                                </p>
                            </div>
                            <img src="{{asset('assets/about/capt.webp')}}" alt="Capt" class="w-48 grayscale">
                        </div>
                    {{-- team 8 --}}
                        <div class="flex items-center">  
                            <div class="">
                                <h3 class="text-lg font-bold">Capt. Mohit Batara</h3>
                                <p class="text-blue-500 text-sm font-semibold">Global Sales Lead</p>
                                <p class="text-gray-600 text-sm mt-2">
                                    Jennie Kate Basa is the Global Sales Lead at SMN, overseeing international sales strategies and building strong partnerships to achieve global business success.
                                </p>
                            </div>
                            <img src="{{asset('assets/about/capt.webp')}}" alt="Capt" class="w-48 grayscale">
                        </div>
                    {{-- team 9 --}}
                        <div class="flex items-center">  
                            <img src="{{asset('assets/about/capt.webp')}}" alt="Capt" class="w-48 grayscale">

                            <div class="">
                                <h3 class="text-lg font-bold">Capt. Mohit Batara</h3>
                                <p class="text-blue-500 text-sm font-semibold">Global Sales Lead</p>
                                <p class="text-gray-600 text-sm mt-2">
                                    Jennie Kate Basa is the Global Sales Lead at SMN, overseeing international sales strategies and building strong partnerships to achieve global business success.
                                </p>
                            </div>
                        </div>
                    {{-- team 10 --}}
                        <div class="flex items-center">  
                            <img src="{{asset('assets/about/capt.webp')}}" alt="Capt" class="w-48 grayscale">

                            <div class="">
                                <h3 class="text-lg font-bold">Capt. Mohit Batara</h3>
                                <p class="text-blue-500 text-sm font-semibold">Global Sales Lead</p>
                                <p class="text-gray-600 text-sm mt-2">
                                    Jennie Kate Basa is the Global Sales Lead at SMN, overseeing international sales strategies and building strong partnerships to achieve global business success.
                                </p>
                            </div>
                        </div>

                                            

                       
                    </div>


                </section>

                <section class="mb-10"  x-show="activeTab === 'tab1'" >
                    <div class="object-contain relative container mx-auto max-w-screen-md 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>
            </div>



  



        <!-- Values Section -->
    



        </div>

     

    <footer class="black text-white py-12 relative">
           
                <img src="{{ asset('assets/FooterBanner.webp') }}" alt="" class="w-full h-full absolute top-0 left-0 z-0" >
                <div class="container mx-auto max-w-screen-lg relative z-10 flex flex-col justify-center items-center">
                    <img src="{{ asset('assets/footerlogo.webp') }}" alt="" class="size-30 -mt-36 mb-20" 
                    data-aos="fade-up" data-aos-delay="50">
                    <div class="w-full flex justify-between">
                        <!-- SMN Safety PTE Ltd -->
                        <div class="flex flex-col flex-1" >
                            <h2 class="text-lg font-bold mb-4 ubuntu-font">SMN SAFETY PTE LTD</h2>
                            <p class="mb-4">
                                <span class="font-semibold">Singapore</span><br>
                                1 Tampines North Drive 1, #01-07, T-Space,<br>
                                Singapore 528559<br>
                                Tel: +65 6677 1937 / +65 6988 5634
                            </p>
                            <p>
                                <span class="font-semibold">Dubai</span><br>
                                Office 405, 4th Floor, The Elite Business Tower, Al<br>
                                Barsha 1, Dubai, UAE<br>
                                Tel: +971 52 347 3973
                            </p>
                            <p class="mt-4">
                                <a href="mailto:info@smnsafety.com" class="text-blue-400 hover:underline">
                                    info@smnsafety.com
                                </a>
                            </p>
                        </div>
                        <hr class="border-gray-700 my-4"> <!-- Divider line -->
                        <!-- Useful Links -->
                        <div class="flex flex-col flex-1">
                            <h2 class="text-lg font-bold mb-4 ubuntu-font ">USEFUL LINKS</h2>
                            <ul class="space-y-2 font-light  leading-none   ">
                                <li><a href="#" class="hover:underline">About Us</a></li>
                                <li><a href="#" class="hover:underline">SMN Safety</a></li>
                                <li><a href="#" class="hover:underline">SMN Events</a></li>
                                <li><a href="#" class="hover:underline">Shop</a></li>
                                <li><a href="#" class="hover:underline">Blogs</a></li>
                                <li><a href="#" class="hover:underline">Contact Us</a></li>
                            </ul>
                        </div>
            
                        <hr class="border-gray-700 my-4"> <!-- Divider line -->
                        
                        <!-- Newsletter -->
                        <div class="glass rounded-lg text-white relative">
                            <h2 class="text-lg font-bold mb-4 ubuntu-font">NEWSLETTER</h2>
                            <p class="mb-4">Subscribe for updates, latest articles, ideas, and insights.</p>
                            <form class="relative">
                                <input type="email" placeholder="Your Email" 
                                    class="w-full py-2 pl-4 pr-10 rounded bg-gray-800 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <button type="submit" class="absolute top-1/2 right-2 transform -translate-y-1/2 text-blue-400">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                                    </svg>
                                </button>
                            </form>
                        </div>
                    </div>
            
                    <!-- Footer Bottom -->
                    <div class="mt-12 border-t w-full border-gray-700 pt-6 flex flex-col md:flex-row justify-between items-center">
                        <p class="text-sm text-gray-400">Copyright SMN Safety 2024. Design and Developed by R Web Solutions Corp.</p>
                        <div class="flex space-x-4 mt-4 md:mt-0">
                            <!-- Social Media Icons -->
                            <a href="#" class="text-gray-400 hover:text-white">
                                <i class="fab fa-facebook-f"></i>
                            </a>
                            <a href="#" class="text-gray-400 hover:text-white">
                                <i class="fab fa-twitter"></i>
                            </a>
                            <a href="#" class="text-gray-400 hover:text-white">
                                <i class="fab fa-linkedin-in"></i>
                            </a>
                            <a href="#" class="text-gray-400 hover:text-white">
                                <i class="fab fa-instagram"></i>
                            </a>
                        </div>
                    </div>
                </div>
    </footer>
            

    </div>

@endsection
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>

    <script>

       document.addEventListener('DOMContentLoaded', function() {
           const urlParams = new URLSearchParams(window.location.search);
           const tabParam = urlParams.get('tab');

           // Set default tab to 'tab1'
           const defaultTab = 'tab1';
           const activeTab = tabParam === 'team' ? 'tab2' : defaultTab;

           // Set the active tab in Alpine.js
           document.querySelector('[x-data]').__x.$data.activeTab = activeTab;
       });


     
    
    </script>

    <script>
        function openModal(id) {
        const modal = document.getElementById(id);
        if (modal) {
            modal.classList.remove('hidden');
        }
         }
        function closeModal(id) {
            const modal = document.getElementById(id);
            if (modal) {
                modal.classList.add('hidden');
            }
        }

    </script>