@extends('layouts.main-app')

@section('title', 'SMN Consulting')

@section('content')

<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet'>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
    <style>

        .roboto-font {
            font-family: 'Roboto Condensed', sans-serif;
        }
        
        .ubuntu-font {
            font-family: 'Ubuntu';
        }
         /* Custom CSS for curved edges */
         .curved-section {
          clip-path: polygon(0 10%,50% 0, 100% 10%, 100% 90%, 50% 100%, 0 90%);
            }

            /* Styling for smooth scrolling */
            #scroll-container {
                      scroll-behavior: smooth;
                    }
                  
                    /* Hide scrollbar for modern browsers */
                    .no-scrollbar::-webkit-scrollbar {
                      display: none;
                    }
                  
                    .no-scrollbar {
                      -ms-overflow-style: none; /* IE 10+ */
                      scrollbar-width: none; /* Firefox */
                    }

                    @media (max-width: 900px) {
                      #scroll {
                          display: flex; /* Show scroll */
                      }
                      #hover {
                          display: none; /* Hide hover */
                      }
                    }

          @media (min-width: 901px) {
              #scroll {
                  display: none; /* Hide scroll */
              }
              #hover {
                  display: flex; /* Show hover */
              }
          }

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

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

</style>

  <div class="">
             
   @include('layouts.header')
   
        <section class="pb-10 container max-w-screen-lg mx-auto px-4 relative">

          
          <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="roboto-font tracking-tight ubuntu-font mt-4 font font-medium  uppercase w-full h-full flex flex-col justify-center items-center text-black text-3xl 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">
                SMN CONSULTING
            </h1>
        </div>



          <div class="w-full h-auto  roboto-font flex flex-col ">
            <div class="">
              <div class=" flex justify-start items-start pt-4 pb-8 roboto-font  ">
                <p class="text-end w-3/4">
                  We have an extensive database and experienced maritime specialist to provide bespoke tailor-made consultancy and
                   advisory services including investment strategies and valuation services.
                </p>
              </div>
              <div class=" flex justify-end items-end pt-4 pb-8 roboto-font">
                <p class="text-end w-3/4 ">
                  We have an extensive database and experienced maritime specialist to provide bespoke tailor-made consultancy and
                  advisory services including investment strategies and valuation services.
                </p>
              </div>
            </div>
          </div>
          
          
          <!-- Slider Container -->
          <div
            id="scroll-container"
            class="curved-section overflow-y-auto space-y-6 py-10 h-[670px] scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-100 no-scrollbar  ">

              <div class="absolute z-50 bottom-1/4 left-1/2   roboto-font ">
                <div id="scroll" class="flex flex-col justify-center items-center opacity-50 animate-bounce bg-slate-50 p-1 rounded-full shadow-md ">
                  <i class='bx bxs-hand-up scale-150' ></i>
                  Tap
                </div>
                <div id="hover" class="flex flex-col justify-center items-center opacity-50 animate-bounce bg-slate-50 p-1 rounded-full shadow-md ">
                  <i class='bx bx-pointer' ></i>                    
                    Hover
                </div>
              </div>
               

               {{-- section part tile --}}
                       <!-- Section 1 perfect-->
               {{-- <div class="relative group rounded-xl bg-cover bg-center text-white h-32 hover:h-72 transition-all duration-700 flex flex-col justify-center items-center px-6 roboto-font"
                 style="background-image: url('{{asset('assets/Banner.webp')}}');">
                    <div class="absolute top-0 group-hover:top-1/3 left-0 bottom-0 text-center right-0 flex flex-col text-black justify-center items-center  font-bold ">
                      <h2 class="text-xl sm:text-2xl md:text-3xl ">Feasibilidfgfdgdfgdfty Studies</h2>
                      <p class="hidden group-hover:block group-hover:animate-fade  px-6  text-md sm:text-xl md:2xl  font-light                 "> 
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum, rerum qui dolorem veniam libero fugiat aperiam laboriosam eos? Magnam, ipsum eligendi.
                      </p>
                    </div>
               </div> --}}

                         <!-- Section 1 perfect-->
                         <div class="relative group rounded-xl bg-cover bg-center text-white h-32 hover:h-72 transition-all duration-700 flex flex-col justify-center items-center px-6 roboto-font"
                         style="background-image: url('{{asset('assets/smn/Feasibility Studies.webp')}}');">
                            <div class="absolute top-0 group-hover:top-1/3 left-0 bottom-0 text-center right-0 flex flex-col justify-center items-center  font-bold ">
                              <h2 class="text-xl sm:text-2xl md:text-3xl ">Feasibility Studies</h2>
                              <p class="hidden group-hover:block group-hover:animate-fade  px-6  text-md sm:text-xl md:2xl  font-light"> 
                                “Singapore Maritime Golf Dinner was a fun and engaging event. Professional enjoyed a day of golf followed by an evening of entertainment and camaraderie. It offered a g Pi network, and celebrate shared successes in the maritime industry.
                              </p>
                            </div>
                       </div>
                    <!-- Section 1 perfect-->
                    <div class="relative group rounded-xl bg-cover bg-center text-white h-32 hover:h-72 transition-all duration-700 flex flex-col justify-center items-center px-6 roboto-font"
                    style="background-image: url('{{asset('assets/smn/Marketing Strategies.webp')}}');">
                       <div class="absolute top-0 group-hover:top-1/3 left-0 bottom-0 text-center right-0 flex flex-col justify-center items-center  font-bold ">
                         <h2 class="text-xl sm:text-2xl md:text-3xl ">Marketing Startegies</h2>
                         <p class="hidden group-hover:block group-hover:animate-fade  px-6  text-md sm:text-xl md:2xl  font-light"> 
                           “Singapore Maritime Golf Dinner was a fun and engaging event. Professional enjoyed a day of golf followed by an evening of entertainment and camaraderie. It offered a g Pi network, and celebrate shared successes in the maritime industry.
                         </p>
                       </div>
                  </div>

                          <!-- Section 1 perfect-->
               <div class="relative group rounded-xl bg-cover bg-center text-white h-32 hover:h-72 transition-all duration-700 flex flex-col justify-center items-center px-6 roboto-font"
               style="background-image: url('{{asset('assets/smn/Market Research.webp')}}');">
                  <div class="absolute top-0 group-hover:top-1/3 left-0 bottom-0 text-center right-0 flex flex-col justify-center items-center  font-bold ">
                    <h2 class="text-xl sm:text-2xl md:text-3xl ">Market Research</h2>
                    <p class="hidden group-hover:block group-hover:animate-fade  px-6  text-md sm:text-xl md:2xl  font-light"> 
                      “Singapore Maritime Golf Dinner was a fun and engaging event. Professional enjoyed a day of golf followed by an evening of entertainment and camaraderie. It offered a g Pi network, and celebrate shared successes in the maritime industry.
                    </p>
                  </div>
             </div>

                         <!-- Section 1 perfect-->
               <div class="relative group rounded-xl bg-cover bg-center text-white h-32 hover:h-72 transition-all duration-700 flex flex-col justify-center items-center px-6 roboto-font"
               style="background-image: url('{{asset('assets/smn/New Business Development.webp')}}');">
                  <div class="absolute top-0 group-hover:top-1/3 left-0 bottom-0 text-center right-0 flex flex-col justify-center items-center  font-bold ">
                    <h2 class="text-xl sm:text-2xl md:text-3xl ">New Busness Development</h2>
                    <p class="hidden group-hover:block group-hover:animate-fade  px-6  text-md sm:text-xl md:2xl  font-light"> 
                      “Singapore Maritime Golf Dinner was a fun and engaging event. Professional enjoyed a day of golf followed by an evening of entertainment and camaraderie. It offered a g Pi network, and celebrate shared successes in the maritime industry.
                    </p>
                  </div>
             </div>
                    <!-- Section 1 perfect-->
                    <div class="relative group rounded-xl bg-cover bg-center text-white h-32 hover:h-72 transition-all duration-700 flex flex-col justify-center items-center px-6 roboto-font"
                    style="background-image: url('{{asset('assets/smn/Asia Office Representation.webp')}}');">
                       <div class="absolute top-0 group-hover:top-1/3 left-0 bottom-0 text-center right-0 flex flex-col justify-center items-center  font-bold ">
                         <h2 class="text-xl sm:text-2xl md:text-3xl ">Asia Office Representative</h2>
                         <p class="hidden group-hover:block group-hover:animate-fade  px-6  text-md sm:text-xl md:2xl  font-light"> 
                           “Singapore Maritime Golf Dinner was a fun and engaging event. Professional enjoyed a day of golf followed by an evening of entertainment and camaraderie. It offered a g Pi network, and celebrate shared successes in the maritime industry.
                         </p>
                       </div>
                  </div>


          </div>

          <div class="text-center text-xl roboto-font py-8 max-w-screen-lg mx-auto">
            <p>
              Please feel free to get in touch with us for a non-obligatory discussion and let us find a solution together. Our belief
              ‘and value creation is by partnering with our clients and listening to their needs and finding solutions that fulfill those
              requirements.
            </p>
          </div>
      </section>

        {{-- YOUR INQUIRY SECTION --}}
        <section class="py-12 bg-gray-50">
          <div class="max-w-4xl mx-auto px-6">
            <h2 class="text-2xl font-bold mb-4">Your Inquiry</h2>
            <p class="text-gray-600 mb-6">
              We welcome any inquiries. Please fill in the form below to submit your enquiry. Alternatively, you may also call, fax, or drop us an email.
            </p>
        
            <!-- Form -->
            <form action="{{ route('contact.store') }}" method="POST" class="space-y-6">
              @csrf
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Full Name -->
                <div>
                  <label for="name" class="block text-sm font-medium text-gray-700">Full Name:</label>
                  <input
                    type="text"
                    id="name"
                    name="name"
                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                    placeholder="Your full name"
                  />
                </div>
        
                <!-- Contact Number -->
                <div>
                  <label for="contact-number" class="block text-sm font-medium text-gray-700">Contact Number:</label>
                  <input
                    type="text"
                    id="phone"
                    name="phone"
                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                    placeholder="Your contact number"
                  />
                </div>
              </div>
        
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Email Address -->
                <div>
                  <label for="email-address" class="block text-sm font-medium text-gray-700">Email Address:</label>
                  <input
                    type="email"
                    id="email"
                    name="email"
                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                    placeholder="Your email address"
                  />
                </div>
        
                <!-- Subject -->
                <div>
                  <label for="subject" class="block text-sm font-medium text-gray-700">Subject:</label>
                  <input
                    type="text"
                    id="subject"
                    name="subject"
                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                    placeholder="Subject"
                  />
                </div>
              </div>
        
              <!-- Message -->
              <div>
                <label for="message" class="block text-sm font-medium text-gray-700">Message:</label>
                <textarea
                  id="message"
                  name="message"
                  rows="5"
                  class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                  placeholder="Type your message here..."
                ></textarea>
              </div>
        
              <!-- Submit Button -->
              <div>
                <button
                  type="submit"
                  class="w-full md:w-auto px-6 py-3 text-white bg-blue-600 hover:bg-blue-700 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
                >
                  Submit Inquiry
                </button>
              </div>
            </form>
          </div>
        </section>
  
  @include('layouts.footer')
    </div>

    {{-- SCROLL CONTAINER --}}
    <script>
          const scrollContainer = document.getElementById("scroll-container");
          let scrollingInterval;
        // Function to start auto-scrolling
          const startAutoScroll = () => {
            scrollingInterval = setInterval(() => {
              scrollContainer.scrollBy(0, 1); // Scroll down 1px every 10ms
            }, 3);
          };
          // Function to stop auto-scrolling
          const stopAutoScroll = () => {
            clearInterval(scrollingInterval);
          };
          // Start scrolling when the page loads
          startAutoScroll();
          // Add event listeners to stop and resume scrolling
          scrollContainer.addEventListener("mouseenter", stopAutoScroll); // Stop scrolling on hover
          scrollContainer.addEventListener("mouseleave", startAutoScroll); // Resume scrolling when hover ends
    </script>
@endsection

<!-- Add this script to handle the shrinking navbar event -->