@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%;
                }
                /* Shrunk Navbar Style */
                #navbar.unshrink {
                    margin: 0 auto;
                    width: 100%;
                }


                #sticky-section {
                position: sticky; /* Make the element sticky */
                top: 0; /* Define the top offset */
                /* Other styles */}

                
                 /* Add this CSS to your existing styles */
             
                



            </style>


     @include('layouts.header')
    

   
    <section class="relative h-[380vh] p-20  hidden lg:block">
        <div class="absolute top-0 left-0 w-full h-full">
               {{-- tab buttons --}}
               <div class="h-[100px] top-32 z-10 max-w-screen-lg mx-auto sticky">
                   <h2 class="text-3xl font-bold text-center mb-8 mt-20">Our Story</h2>
                   {{-- tab buttons --}}
                   <div class="flex justify-end items-center relative">
                       <div class="bg-gray-200 rounded-3xl shadow-lg flex py-2 px-2 border-2 border-black scale-75 absolute top-0 right-0">
                           <!-- Inactive Tabs -->
                           <a href="/about-us" class="px-6 py-2 m-1 bg-black text-gray-100 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 text-gray-700 hover:bg-gray-900 hover:text-gray-100 transition ease-in-out duration-300 transform hover:scale-105 rounded-2xl">Mission & Vision</a>
                           <a href="{{ route('about-mission-vision') }}?tab=team" class="px-6 py-2 m-1 text-gray-700 hover:bg-gray-900 hover:text-gray-100 transition ease-in-out duration-300 transform hover:scale-105 rounded-2xl">Our Team</a>
                       </div>
                   </div>
                   {{-- end of tab buttons --}}
               </div>
               {{-- Our Story background image --}}
               <div class="w-full max-w-screen-xl mx-auto scale-75 sticky top-10 hidden lg:block">
                   <img src="{{ asset('assets/about/arrowmap.png') }}" alt="Safety Image" class="w-full h-[90vh]">
               </div>




               {{-- this is the Start --}}
               


                  {{-- this is the sticky 1 --}}
            <div class=" max-w-screen-lg mx-auto sticky top-[67%] hidden lg:block">
                <div class="h-36 w-32  sticky top-[70%] ml-36">
                    <img src="{{ asset('assets/about/years/2014.png') }}" alt="Safety Image" class="w-full h-full object-fit scale-70">
                    <p class="text-center text-black text-sm -mt-6 mb-36 whitespace-pre-line bg-black/20 rounded-lg p-2">
                       SMN established as Singapore Maritime Network by amalgamation of 3 companies
                    </p>
                </div>
            </div>
               {{-- this is the sticky 1 --}}
               <div class=" max-w-screen-lg mx-auto sticky top-[67%] hidden lg:block">
                    <div class="h-36 w-36  sticky top-[70%] ml-[300px]">
                        <img src="{{ asset('assets/about/years/2015.png') }}" alt="Safety Image" class="w-full h-full object-fit scale-70 ">
                        <p class="text-center text-black text-sm mb-36 w-auto bg-black/20 rounded-lg p-2">Fleet agreement signed with
                             supply to over 100 vessels with cliend from Singapore,
                              Malaysia, Indonesia, Thailand, Vietnam, Philippines, and India
                        </p>
                    </div>
                </div>

                  {{-- this is the sticky 1 --}}
               <div class=" max-w-screen-lg mx-auto sticky top-[67%] hidden lg:block">
                <div class="h-36 w-32  sticky top-[70%] ml-[460px]">
                    <img src="{{ asset('assets/about/years/2016.png') }}" alt="Safety Image" class="w-full h-full object-fit">
                    <p class="text-center text-black text-sm mb-36 w-auto bg-black/20 rounded-lg p-2">
                        Due to expansion of activities 5,000 sq ft warehouse established in Pioneer.
                    </p>
                </div>
            </div>

              {{-- this is the sticky 1 --}}
              <div class=" max-w-screen-lg mx-auto sticky top-[67%] hidden lg:block">
                <div class="h-36 w-32  sticky top-[70%] ml-[630px]">
                    <img src="{{ asset('assets/about/years/2017.png') }}" alt="Safety Image" class="w-full h-full object-fit">
                    <p class="text-center text-black text-sm mb-36 w-auto bg-black/20 rounded-lg p-2">
                        Awarded Quality  in Business certification by International Trace Council.
                        Stared manufacture of PPE own brand SMN Safety.
                    </p>
                </div>
            </div>

              {{-- this is the sticky 1 --}}
              <div class=" max-w-screen-lg mx-auto sticky top-[67%] hidden lg:block">
                <div class="h-36 w-32  sticky top-[70%] ml-[800px]">
                    <img src="{{ asset('assets/about/years/2018.png') }}" alt="Safety Image" class="w-full h-full object-fit">
                    <p class="text-center text-black text-sm mb-36 w-auto bg-black/20 rounded-lg p-2">
                    Due to customer demands expansion in cope of supplies to ofer spare and store along with safety equipment
                    </p>
                </div>
            </div>
            {{-- ########################second batch of sticky# --}}
              {{-- this is the sticky 1 --}}
              <div class=" max-w-screen-lg mx-auto sticky top-[36.5%] hidden lg:block">
                <div class="h-36 w-32  sticky top-[70%] ml-[800px]">
                    <img src="{{ asset('assets/about/years/2019.png') }}" alt="Safety Image" class="w-full h-full object-fit">
                    <p class="text-center text-black text-sm mb-36 w-auto bg-black/20 rounded-lg p-2">
                        Warehouse space expansion - new showroom and two warehouses inaugarated in Tampines.
                        Fleet agreements for supply to over 200 vessels.    
                    </p>
                </div>
            </div>
               {{-- this is the sticky 1 --}}
               <div class=" max-w-screen-lg mx-auto sticky top-[36.5%] hidden lg:block">
                    <div class="h-36 w-32  sticky top-[70%] ml-[630px]">
                        <img src="{{ asset('assets/about/years/2020.png') }}" alt="Safety Image" class="w-full h-full object-fit">
                        <p class="text-center text-black text-sm mb-36 w-auto bg-black/20 rounded-lg p-2">
                            ISO 9001 certification achieved.
                            Awarded the status of SME 500 company. Client base expanded to supply to the industries.
                        </p>
                    </div>
                    </div>

                  {{-- this is the sticky 1 --}}
               <div class=" max-w-screen-lg mx-auto sticky top-[36.5%] hidden lg:block">
                <div class="h-36 w-32  sticky top-[70%] ml-[460px]">
                    <img src="{{ asset('assets/about/years/2021.png') }}" alt="Safety Image" class="w-full h-full object-fit">
                    <p class="text-center text-black text-sm mb-36 w-auto bg-black/20 rounded-lg p-2">
                        Officially rebranded as SMN Safety in Singapore. Fleet supplies to over 500 vessels.    
                    </p>
                </div>
            </div>

              {{-- this is the sticky 1 --}}
                <div class=" max-w-screen-lg mx-auto sticky top-[36.5%] hidden lg:block">
                <div class="h-36 w-32  sticky top-[70%] ml-[300px]">
                    <img src="{{ asset('assets/about/years/2022.png') }}" alt="Safety Image" class="w-full h-full object-fit">
                    <p class="text-center text-black text-sm mb-36 w-auto bg-black/20 rounded-lg p-2">
                        New strategic investor and growth to UAE . SMN FZCO incorporate in UAE
                    </p>
                </div>
            </div>

            {{-- this is the sticky 1 --}}
            <div class=" max-w-screen-lg mx-auto sticky top-[36.5%] hidden lg:block">
                <div class="h-36 w-32  sticky top-[70%] ml-36">
                    <img src="{{ asset('assets/about/years/2023.png') }}" alt="Safety Image" class="w-full h-full object-fit">
                    <p class="text-center text-black text-sm mb-36 w-32 bg-black/20 rounded-lg p-2">
                    SMN Trading LLC established in Duabi. New warehouse set up in Sharjah.    
                    </p>
                </div>
            </div>

            
         

               {{-- this is the sticky 1 --}}
               <div class=" max-w-screen-lg mx-auto sticky top-[15%] hidden lg:block">
                <div class="h-36 w-32  sticky top-[70%] ml-[240px]">
                    <img src="{{ asset('assets/about/years/2024.png') }}" alt="Safety Image" class="w-full h-full object-fit">
                </div>
            </div>

            {{-- end --}}

         
          
               <script>
                   document.addEventListener("scroll", () => {
                       const stickySection = document.querySelector('.sticky');
                       const scrollPosition = window.scrollY + window.innerHeight;
                       const sectionBottom = document.querySelector('.bg-red-500').offsetTop + 350 * window.innerHeight / 100; // 300vh section height
                       
                       if (scrollPosition >= sectionBottom) {
                           stickySection.classList.add('fixed');
                           stickySection.style.top = `${sectionBottom - scrollPosition}px`;
                       } else {
                           stickySection.classList.remove('fixed');
                           stickySection.style.top = '180px'; // Reset to original position
                       }
                   });
               </script>

        </div>

     

    </section>

    <section class="relative  block lg:hidden h-full">
         {{-- tab buttons --}}
         <div class=" z-10 max-w-screen-lg mx-auto">
            <h2 class="text-3xl font-bold text-center mb-8 mt-20">Our Story</h2>
            {{-- tab buttons --}}
            <div class="flex justify-end items-center relative">
                <div class="bg-gray-200 rounded-3xl shadow-lg flex py-2 px-2 border-2 border-black scale-75 absolute top-0 right-0">
                    <!-- Inactive Tabs -->
                    <a href="/about-us" class="px-6 py-2 m-1 bg-black text-gray-100 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 text-gray-700 hover:bg-gray-900 hover:text-gray-100 transition ease-in-out duration-300 transform hover:scale-105 rounded-2xl">Mission & Vision</a>
                    <a href="{{ route('about-mission-vision') }}?tab=team" class="px-6 py-2 m-1 text-gray-700 hover:bg-gray-900 hover:text-gray-100 transition ease-in-out duration-300 transform hover:scale-105 rounded-2xl">Our Team</a>
                </div>
            </div>
            {{-- end of tab buttons --}}
        </div>
 <img src="{{ asset('assets/about/mobile arrow.png') }}" alt="Safety Image" class="w-full h-full object-contain">
    </section>


    <div class="  w-full h-[100vh] roboto-font  text-base md:text-xl flex flex-col md:flex-row justify-center items-center container mx-auto max-w-screen-xl py-8 px-6 gap-6 md:gap-10">
        <div class="text-justify h-auto">
            <h1 class="font-bold text-lg md:text-2xl mb-4">
                Our foundation was laid back in 2007
            </h1>
            <p>
                Our foundation was laid back in 2007 with the establishment of mb Consulting Group
                (mbCG) in India to provide bespoke consulting services to the maritime and offshore
                industry. Later in 2009, the company expanded its activities to Singapore with the
                incorporation of MB Services Pte Ltd to provide safety and security services. In 2011,
                Singapore Marine Network was established to provide a networking platform for the
                marine and offshore industry. In 2014, it was decided to bring the activities of each
                of the above companies under one brand. In April 2014, Singapore Maritime
                Network Pte Ltd was formally incorporated with the amalgamation of activities from
                the former three companies.
            </p>
        </div>
        <div class="flex-shrink-0 w-full md:w-1/3">
            <img src="{{ asset('assets/about/safety.webp') }}" alt="Safety Image" class="w-full h-auto rounded-lg shadow-md">
        </div>
    </div>






 @endsection







    <script>
        document.addEventListener("DOMContentLoaded", () => {
            // Restore scroll position from localStorage
            const savedScrollY = localStorage.getItem('scrollY');
            if (savedScrollY) {
                window.scrollTo(0, parseInt(savedScrollY, 10));
            }

            
            // Configuration: Define the scroll range for each year
            const scrollRanges = {
                2014: 380,
                2015: 650,
                2016: 920,
                2017: 1270,
                2018: 1600,
                2019: 2180,
                2020: 2550,
                2021: 2920,
                2022: 3216,
                2023: 3526,
            };

            // Target the divs
            const stories = {
                2014: document.getElementById('absolute-div2014'),
                2015: document.getElementById('absolute-div2015'),
                2016: document.getElementById('absolute-div2016'),
                2017: document.getElementById('absolute-div2017'),
                2018: document.getElementById('absolute-div2018'),
                2019: document.getElementById('absolute-div2019'),
                2020: document.getElementById('absolute-div2020'),
                2021: document.getElementById('absolute-div2021'),
                2022: document.getElementById('absolute-div2022'),
                2023: document.getElementById('absolute-div2023'),
            };

            // Helper function to handle story visibility
            function handleStoryVisibility(scrollY) {
                Object.keys(scrollRanges).forEach(year => {
                    const story = stories[year];
                    if (story) {
                        const startScroll = scrollRanges[year];
                        if (scrollY >= startScroll) {
                            // Show the story
                            story.classList.remove('hidden', 'opacity-0', 'scale-50');
                            story.classList.add('opacity-100', 'scale-100', 'transition-all', 'duration-500');
                        } else {
                            // Hide the story
                            story.classList.remove('opacity-100', 'scale-100', 'transition-all', 'duration-500');
                            story.classList.add('opacity-0', 'scale-50', 'hidden', 'transition-all', 'duration-500');
                        }
                    }
                });
            }

            // Scroll event listener
            window.addEventListener('scroll', () => {
                const scrollY = window.scrollY;
                handleStoryVisibility(scrollY);
            });

            console.log(stories); // Logs all the story elements

            
            const svgPath = document.getElementById('svgPath');
            const pathLength = svgPath.getTotalLength();

            // Set up the starting positions
            svgPath.style.strokeDasharray = pathLength;
            svgPath.style.strokeDashoffset = pathLength;

            // Function to update the stroke offset based on scroll
            function updateStrokeOnScroll() {
                const scrollY = window.scrollY;
                const maxScroll = document.body.scrollHeight - window.innerHeight;
                const scrollFraction = Math.min(scrollY / maxScroll, 1);

                // Adjust the speed factor here
                const speedFactor = 1.4; // Adjust this to ensure the stroke doesn't vanish
                const newOffset = pathLength * (1 - Math.min(scrollFraction * speedFactor, 1));

                svgPath.style.strokeDashoffset = newOffset;
            }

            // Add scroll event listener
            window.addEventListener('scroll', updateStrokeOnScroll);
        });


        
    // Function to track the scroll position and log it
    function trackScrollPosition() {
        const scrollY = window.scrollY;
        console.log('Current scroll position:', scrollY);
    }

    // Add scroll event listener
    window.addEventListener('scroll', trackScrollPosition);


   

    </script>