@extends('layouts.main-app')

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

@section('content')

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

        [x-cloak] {
            display: none !important;
        }

        
            /* ########################################### */

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

                .truncate-text {
            display: -webkit-box;
            -webkit-line-clamp: 4; /* Number of lines to display */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

/* 
        .hexagon {
            position: relative;
          scale: 40%;
            width: 100%;
            padding-bottom: 86.6%; Height of a perfect hexagon based on width
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            overflow: hidden;
        /* } */

        /* .hexagon img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
        } */ */

</style>



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

    <div class="">
        <div class="container mx-auto mt-10 max-w-screen-lg relative " x-data="{ activeTab: 'tab1' }">

            <!-- Tab Buttons -->
            <div class="flex sm:flex md:flex lg:flex justify-between items-center relative  w-full max-w-screen-lg">
            
            
                <div class="bg-gray-200 rounded-3xl shadow-lg flex justify-center items-center py-2 px-2 border-2 border-black scale-75 right-0 sm:right-24 md:right-0 absolute z-40"  >
                    <!-- Inactive Tabs -->
                    <a href="{{ route('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>
                    <a href={{  route('about-mission-vision') }} class="px-6 py-2 m-1   bg-black text-white hover:text-gray-100 transition ease-in-out duration-300 transform hover:scale-105 rounded-2xl">
                    Mission & Vision</a>
                    <a href={{  route('about-team') }} class="px-6 py-2 m-1 hover:bg-gray-500 hover:text-gray-100 transition ease-in-out duration-300 transform hover:scale-105 rounded-2xl">
                    Our Team</a>
                </div>
            </div>

            <!-- Tab Content -->
            <div class="mt-20">
                <!-- Mission & Vision Section -->
                <section class="container mx-auto max-w-screen-lg px-4  grid grid-cols-1 h-auto 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-10 scale-75
sm:scale-75 sm:top-1/4 sm:right-20

md:top-1/4 md:-right-20 md:scale-90
text-white text-center ">
<div class="relative">
<img src="{{asset('assets/about/hexagon.webp')}}" alt="" class="relative">
<p class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-auto text-3xl md:text-4xl roboto-font font-thin ">Safety & Excellence at Work</p>
</div>
</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 max-w-screen-lg py-12  px-4 md:px-0">
                   
                      @foreach ($teams->chunk(2) as $pair)
                     @if ($loop->iteration % 2 === 1)
                        <!-- Odd Pair Layout -->
                       <div class="grid grid-cols-1 md:grid-cols-2">
                           @foreach ($pair as $team)
                               <button 
                               onclick="openModal(
                                   '{{ $team->name }}',
                                   '{{ asset($team->image) }}',
                                   '{{ $team->description }}'
                               )">
                                   <div class="flex items-center justify-start">
                                       <!-- Hexagon Image -->
                                       <div class="relative size-20 hexagon ">
                                           <img src="{{ asset($team->image) }}" alt="{{ $team->name }}" 
                                               class="w-10 h-10 object-fit">
                                       </div>
                                       <div>
                                           <h3 class="text-lg font-bold">{{ $team->name }}</h3>
                                           <p class="text-blue-500 text-sm font-semibold">{{ $team->title }}</p>
                                           <p class="text-gray-600 text-sm mt-2 flow-root truncate-text">{{ $team->description }}</p>
                                       </div>
                                   </div>
                               </button>
                           @endforeach
                          </div>
                      @else
                        <!-- Even Pair Swapped Layout -->
                       <div class="grid grid-cols-1 md:grid-cols-2 gap-8 rounded">
                           @foreach ($pair as $team)
                               <button
                               onclick="openModal(
                                   '{{ $team->name }}',
                                   '{{ asset($team->image) }}',
                                   '{{ $team->description }}'
                               )">
                                   <div class="flex items-center justify-end">
                                       <div>
                                           <h3 class="text-lg font-bold">{{ $team->name }}</h3>
                                           <p class="text-blue-500 text-sm font-semibold">{{ $team->title }}</p>
                                           <p class="text-gray-600 text-sm mt-2 truncate-text">{{ $team->description }}</p>
                                       </div>
                                       <!-- Hexagon Image -->
                                       <div class="relative w-10 h-10 hexagon ">
                                           <img src="{{ asset($team->image) }}" alt="{{ $team->name }}" 
                                               class="w-10 h-10 object-fit">
                                       </div>
                                   </div>
                               </button>
                           @endforeach
                       </div>
                        @endif
               @endforeach
                
                            
            
            </div>
 {{-- Modeal --}}
                    <div
                            id="detailsModal"
                            class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50 roboto-font">
                            <div class="bg-gradient-to-b from-[#0B1E36] to-[#597BAA]  rounded-lg w-11/12 sm:w-2/3 lg:w-1/2 p-6 relative text-white animate-fadded">
                                <!-- Close Button -->
                                <button
                                    class="absolute top-3 right-3 text-white hover:text-gray-300 text-2xl"
                                    onclick="closeModal()"
                                >
                                    &times;
                                </button>
                            
                                <!-- Modal Content -->
                                <div class="flex flex-col lg:flex-row">
                                    <!-- Image -->
                                    <img
                                    id="modalImage"
                                    src=""
                                    alt="Modal Image"
                                    class="w-full lg:w-1/3 rounded-lg mb-4 lg:mb-0 lg:mr-4"
                                    />
                                    <!-- Text Content -->
                                    <div>
                                    <h2 id="modalTitle" class="text-2xl font-bold mb-4">Modal Title</h2>
                                    <p id="modalDescription" class="text-gray-300"></p>
                                    </div>
                                </div>

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

        
        <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-2xl 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' =>
                                        'We understand the need and requirements
                                            of our client and are able to respond quickly
                                            and effectively working as partners',
                                ],
                                [
                                    'number' => '02',
                                    'icon' => 'assets/hero-assets/reliability-icon.webp',
                                    'image' => 'assets/hero-assets/reliability.webp',
                                    'heading' => 'Integrity',
                                    'paragraph' => 'Our staff are working with ou clients and
                                                    paitners to ensure we succeed in providing
                                                    the best quality and reliable services.',
                                ],
                                [
                                    'number' => '03',
                                    'icon' => 'assets/hero-assets/cost-effective-icon.webp',
                                    'image' => 'assets/hero-assets/Cost-Effective-hover.webp',
                                    'heading' => 'Cost Effective',
                                    'paragraph' => 'We understand the need to be competitive.
                                                    We ensure we pass the cost benefits to our
                                                    clients by leveraging on our relationships
                                                    with our partners and suppliers.',
                                ],
                                [
                                    'number' => '04',
                                    'icon' => 'assets/hero-assets/simplicity-icon.webp',
                                    'image' => 'assets/hero-assets/Simplicity-Hover.webp',
                                    'heading' => 'Simplicity',
                                    'paragraph' => 'We believe in keeping things simple. We are!
                                                    a one stop shop for all your safetyand
                                                    security requirements. Our account |
                                                    management is based on providing simple
                                                    answers and solutions.',
                                ],
                            ];
                        @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-between p-8 text-center h-full"
                                        data-aos="fade-right" data-aos-offset="500" data-aos-duration="1000"
                                        data-aos-delay="{{ $aosDelay }}" data-aos-once="true">
                                        
                                        <!-- Top Section with Number -->
                                        <div class="text-gray-600 group-hover:text-white text-6xl font-bold text-left">
                                            {{ $card['number'] }}
                                        </div>
                                        
                                        <!-- Middle Section with Icon and Content -->
                                        <div class="flex flex-col items-center h-full pt-10 ">
                                            <!-- Icon -->
                                            <div class="group pb-4">
                                                <img src="{{ asset($card['icon']) }}" 
                                                    alt="{{ $card['heading'] }}"
                                                    class="size-20 transition duration-300 grayscale group-hover:grayscale-0">
                                            </div>
                                            
                                            <!-- Heading -->
                                            <h3 class="text-2xl font-semibold text-white group-hover:text-white pb-3">
                                                {{ $card['heading'] }}
                                            </h3>
                                            
                                            <!-- Paragraph -->
                                            <p class="text-md  p-2 hidden sm:block leading-relaxed text-gray-600 group-hover:text-white max-w-xs text-left">
                                                {{ $card['paragraph'] }}
                                            </p>
                                        </div>
                                        
                                        <!-- Bottom Section (empty for spacing) -->
                                        <div></div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>


    </div>

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

@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>



<!-- 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 >= 900 && 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>

<script>
    function openModal(title, imageSrc, description) {
      // Set the content of the modal
      document.getElementById("modalTitle").innerText = title;
      document.getElementById("modalImage").src = imageSrc;
      document.getElementById("modalDescription").innerText = description;
  
      // Show the modal
      document.getElementById("detailsModal").classList.remove("hidden");
    }
  
    function closeModal() {
      // Hide the modal
      document.getElementById("detailsModal").classList.add("hidden");
    }


    // Close modal when clicking outside of the content
    document.getElementById("detailsModal").addEventListener("click", (event) => {
        const modalContent = document.querySelector("#detailsModal .hidden");
        if (!modalContent.contains(event.target)) {
        closeModal();
        }
    });

  </script>