@extends('layouts.app')
@section('body-class', 'page-home')

@push('header')
  <script src="{{ asset('vendor/swiper/swiper-bundle.min.js') }}"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
  <link rel="stylesheet" href="{{ asset('vendor/swiper/swiper-bundle.min.css') }}">
  <style>
    .marquee-overlay {
        position: absolute;
        top: 0;
        left: 0; 
        width: 100%;
        background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
        color: #c9a627;
        font-weight: bold;
        font-size: 16px;
        padding: 10px;
        border-bottom: 1px solid pink;
        z-index: 10; /* Ensures it's above the slider */
    }

    .module-line {
        position: relative; /* Ensures the marquee overlays within this section */
    }

/* Ensure menu is positioned on top of the slider */
.menu-container {
    position: absolute;
    bottom: 20px; /* Move it above the pagination */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px 40px;
    border-radius: 0px;
    z-index: 20;
}

/* Style navigation buttons */
.menu-container .navbar-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap; /* Ensures responsiveness */
}

.menu-container .nav-link {
    color: white !important;
    font-weight: bold;
    background: #c9a627;
    padding: 10px 20px;
    border-radius: 8px;
    transition: background 0.3s ease-in-out, transform 0.2s;
}

.menu-container .nav-link:hover {
    background: #b38f2e;
    transform: scale(1.1);
}
</style>
@endpush

@section('content')

  @hookinsert('home.content.top')

  <section class="module-content">

    @if (system_setting('slideshow'))
<section class="module-line">
    <!-- Marquee Overlay -->
    <div class="marquee-overlay">
        <marquee behavior="scroll" direction="right">
            @foreach($prices as $item)
                @php
                    $change = $item->close - $item->previous_close;
                    $changeClass = $change > 0 ? 'text-success' : ($change < 0 ? 'text-danger' : 'text-muted');
                    $changeSymbol = $change > 0 ? '&#9650;' : ($change < 0 ? '&#9660;' : '');
                @endphp
                <span class="mx-3">{{ $item->variety_code }} {{ number_format($item->previous_close, 2) }} : 
                    <span class="{{ $changeClass }}">{!! $changeSymbol !!} {{ number_format(abs($change), 2) }}</span>
                </span> |
            @endforeach
        </marquee>
    </div>

<div class="swiper" id="module-swiper-1">
    <div class="module-swiper swiper-container">
    <div class="swiper-wrapper">
        @foreach (system_setting('slideshow', []) as $slide)
            @if ($slide['image'][front_locale_code()] ?? false)
                <div class="swiper-slide position-relative">
                    <a href="{{ $slide['link'] ?: 'javascript:void(0)' }}">
                        <img src="{{ image_origin($slide['image'][front_locale_code()]) }}" class="img-fluid">
                    </a>
                </div>
            @endif
        @endforeach
    </div>
    <div class="swiper-pagination"></div>
</div>


    <!-- Move the Navigation Menu into the Slideshow Container -->
<div class="menu-container d-flex justify-content-center">
    <nav class="navbar navbar-expand-md navbar-light">
        <div class="d-flex align-items-center gap-3 flex-nowrap">
            <div class="dropdown position-relative">
                <button class="btn btn-lg dropdown-toggle" 
                        type="button" id="buyProductDropdown" 
                        data-bs-toggle="dropdown" aria-expanded="false" 
                        style="background-color: #c9a627; color: white; border-color: #c9a627;">
                    Buy Product
                </button>
                <ul class="dropdown-menu position-absolute" 
                    aria-labelledby="buyProductDropdown" 
                    style="z-index: 1050;">
                    @foreach($header_menus as $menu)
                        <li>
                            <a class="dropdown-item {{ equal_url($menu['url']) ? 'active' : '' }}" 
                               href="{{ $menu['url'] }}">
                                {{ $menu['name'] }}
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
            <a href="{{ front_route('sell.product') }}" 
               class="btn btn-lg" 
               style="background-color: #c9a627; color: white; border-color: #c9a627;">
                Sell Products
            </a>
        </div>
    </nav>
</div>





 </div>
</section>
      <script>
        var swiper = new Swiper('#module-swiper-1', {
          loop: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
        });
      </script>
    @endif

    @hookinsert('home.swiper.after')

    @if (0)
      <section class="module-line">
        <div class="module-banner-2">
          <div class="container">
            <div class="row">
              <div class="col-12 col-md-4 mb-2 mb-lg-0">
                <a href=""><img src="{{ asset('images/demo/banner/banner-3.jpg') }}" class="img-fluid"></a>
              </div>
              <div class="col-12 col-md-8">
                <a href=""><img src="{{ asset('images/demo/banner/banner-4.jpg') }}" class="img-fluid"></a>
              </div>
            </div>
          </div>
        </div>
      </section>
    @endif



<section style="margin-top: -50px" class="arrival_section">
  <div class="container">
    <div class="row">
    <div class="col-md-6">
<div class="table-responsive ">
    <h6 class="mb-3 text-white p-2" style="background-color: green; border-radius: 5px; ">Commodity Price Dashboard | Last Updated: {{ now()->format('M d, Y') }}</h6>
    <table class="table text-center align-middle" style="border: 1px solid gray; border-collapse: separate; border-radius: 5px; overflow: hidden; border-spacing: 0;">
        <thead style="background-color: #c9a627; color: white;">
            <tr>
                <th>ID</th>
                <th>Product Name</th>
                <th>Grade</th>
                
                
                <th>Buying Price(MWK/KG)</th>
                <th>Selling Price(MWK/KG)</th>
                <th>Warehouse Location</th>
            </tr>
        </thead>
        <tbody>
            @foreach($prices as $item)
                @php
                    $change = $item->close - $item->previous_close;
                    $changeClass = $change > 0 ? 'text-success' : ($change < 0 ? 'text-danger' : 'text-muted');
                    $changeSymbol = $change > 0 ? '&#9650;' : ($change < 0 ? '&#9660;' : '');
                @endphp
                <tr>
                    <td>{{ $item->variety_code }}</td>
                    <td><a href="#" class="text-decoration-none" title="{{ $item->product_name }}">{{ $item->product_name }}</a></td>
                    <td>{{ $item->grade }}</td>
                    
                    
                    <td>{{ number_format($item->previous_close, 2) }}</td>            
                    <td>{{ number_format($item->close, 2) }}</td> 
                    <td>{{ $item->delivery_location }}</td>                   
                </tr>
            @endforeach
        </tbody>
    </table>
</div>
</div>
<div class="col-md-6">
<div class="table-responsive">
    <h6 class="mb-3 text-white p-2" style="background-color: green; border-radius: 5px; ">Inputs Price Dashboard | Last Updated: {{ now()->format('M d, Y') }}</h6>
    <table class="table text-center align-middle" style="border: 1px solid gray; border-collapse: separate; border-radius: 5px; overflow: hidden; border-spacing: 0;">
        <thead style="background-color: #22d57282; color: white;">
            <tr>
                <th>ID</th>
                <th>Brand Name</th>
                <th>Product Name</th>
                <th>Sellling Price(MWK/KG)</th>
                <th>Warehouse Location</th>
            </tr>
        </thead>
        <tbody>
            @foreach($inputs as $item)
            
                <tr>
                    <td>{{ $item->variety_code }}</td>
                    <td><a href="#" class="text-decoration-none" title="{{ $item->brand_name }}">{{ $item->brand_name }}</a></td>
                    <td>{{ $item->product_name }}</td>
                    <td>{{ $item->selling_price }}</td>
                    <td>{{ $item->warehouse_location }}</td>
                            
                </tr>
            @endforeach
        </tbody>
    </table>
</div>
</div>
</div>




<!--     <div class="row">

      <div class="col-md-6">

        <div class="module-title-wrap ">
            <div class="module-title  text-left">About Local Buy</div>
          </div>
        <p style="margin-top: 20px; margin-bottom: 30px; text-align: justify; text-justify: inter-word;">
          Local-Buy Ltd is a multi-vendor platform that facilitates Business-to-Business-Consumer (B2B2C) trade for Certified Seed, Grain, and Processed Products with an aim to achieve efficiency, attain volumes and quality, secure transactions and obtain competitive prices.
        </p>
 
        <div class="module-title-wrap ">
            <div class="module-title  text-left">How to access the platform</div>
          </div>
        <ul style="margin-top: -10px; text-align: justify; text-justify: inter-word;">
          <li>Web Url: www.localbuyex.com</li>
          <li>USSD: *384*38#</li>
          <li>You can access market information on this platform</li>
          <li>Register to access more benefits (Place orders,  access other services, etc)</li>
        </ul>
      </div>

      <div class="col-md-6 text-right">
        <img src="{{ asset('images/demo/banner/home.png') }}" alt="Shop on Mobile" style="max-width: 100%; height: auto;">
      </div>
    </div> -->
  </div>
</section>



<!-- 
<section style="margin-top: 30px;" class="module-line">
  <div class="module-product-tab">
    <div class="container">
      <div class="module-title-wrap">
        <div class="module-title">{{ __('front/home.feature_product') }}</div>
        <div class="module-sub-title">{{ __('front/home.feature_product_text') }}</div>
      </div>

      <ul class="nav nav-tabs">
        @php
          $categories = [
            'dried' => 'Dried Commodity',
            'certified' => 'Certified Inputs',
            'fresh' => 'Fresh Commodity'
          ];
        @endphp

        @foreach ($categories as $key => $category)
          <li class="nav-item" role="presentation">
            <button class="nav-link {{ $loop->first ? 'active' : '' }}" 
                    data-bs-toggle="tab"
                    data-bs-target="#product-tab-{{ $key }}" 
                    type="button">{{ $category }}</button>
          </li>
        @endforeach
      </ul>

      <div class="tab-content">
        @foreach ($categories as $key => $category)
          <div class="tab-pane fade show {{ $loop->first ? 'active' : '' }}" 
               id="product-tab-{{ $key }}">
            <div class="swiper product-swiper">
              <div class="swiper-wrapper">
                @foreach ($tab_products as $item)
                  @if ($item['tab_title'] === $category)
                    @foreach ($item['products'] as $product)
                      <div class="swiper-slide">
                        <div class="col-6 col-md-4 col-lg-3">
                          @include('shared.product')
                        </div>
                      </div>
                    @endforeach
                  @endif
                @endforeach
              </div>

             
              <div class="swiper-button-next"></div>
              <div class="swiper-button-prev"></div>
              <div class="swiper-pagination"></div>
            </div>
          </div>
        @endforeach
      </div>
    </div>
  </div>
</section> -->






    

    <section style="margin-top: 30px;" class="module-line">
      <div class="module-product-tab">
        <div class="container">
          <div class="module-title-wrap">
            <div class="module-title">{{ __('front/home.feature_product') }}</div>
            <div class="module-sub-title">{{ __('front/home.feature_product_text') }}</div>
            
          </div>

          <ul class="nav nav-tabs">
            @foreach ($tab_products as $item)
              <li class="nav-item" role="presentation">
                <button class="nav-link {{ $loop->first ? 'active' : '' }}" data-bs-toggle="tab"
                        data-bs-target="#module-product-tab-x-{{ $loop->iteration }}"
                        type="button">{{ $item['tab_title'] }}</button>
              </li>
            @endforeach
          </ul>

          <div class="tab-content">
            @foreach ($tab_products as $item)
              <div class="tab-pane fade show {{ $loop->first ? 'active' : '' }}"
                   id="module-product-tab-x-{{ $loop->iteration }}">
                <div class="row gx-3 gx-lg-4">
                  @foreach ($item['products'] as $product)
                    <div class="col-6 col-md-4 col-lg-3">
                      @include('shared.product')
                    </div>
                  @endforeach
                </div>
              </div>
            @endforeach
          </div>
        </div>
      </div>
    </section>

    @if (0)
      <section class="module-line">
        <div class="module-banner-1">
          <div class="container">
            <a href=""><img src="{{ asset('images/demo/banner/banner-5.jpg') }}" class="img-fluid"></a>
          </div>
        </div>
      </section>
    @endif

    <!-- <section class="module-line">
      <div class="module-product-tab">
        <div class="container">
          <div class="module-title-wrap">
            <div class="module-title">{{ __('front/home.news_blog') }}</div>
            <div class="module-sub-title">{{ __('front/home.news_blog_text') }}</div>
          </div>

          <div class="row gx-3 gx-lg-4">
            @foreach ($news as $new)
              <div class="col-6 col-md-4 col-lg-3">
                @include('shared.blog', ['item'=>$new])
              </div>
            @endforeach
          </div>
        </div>
      </div>
    </section> -->
  </section>

   <section style="margin-top: 0px;" class="why_section layout_padding">
         <div class="container">
            <div class="module-title-wrap">
            <div class="module-title">Why Trade With Us</div>
          </div>
            <div style="margin-top: -40px;" class="row">
               <div class="col-md-4">
                  <div class="box ">
                     <div class="img-box">
                        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
                           <g>
                              <g>
                                 <path d="M476.158,231.363l-13.259-53.035c3.625-0.77,6.345-3.986,6.345-7.839v-8.551c0-18.566-15.105-33.67-33.67-33.67h-60.392
                                    V110.63c0-9.136-7.432-16.568-16.568-16.568H50.772c-9.136,0-16.568,7.432-16.568,16.568V256c0,4.427,3.589,8.017,8.017,8.017
                                    c4.427,0,8.017-3.589,8.017-8.017V110.63c0-0.295,0.239-0.534,0.534-0.534h307.841c0.295,0,0.534,0.239,0.534,0.534v145.372
                                    c0,4.427,3.589,8.017,8.017,8.017c4.427,0,8.017-3.589,8.017-8.017v-9.088h94.569c0.008,0,0.014,0.002,0.021,0.002
                                    c0.008,0,0.015-0.001,0.022-0.001c11.637,0.008,21.518,7.646,24.912,18.171h-24.928c-4.427,0-8.017,3.589-8.017,8.017v17.102
                                    c0,13.851,11.268,25.119,25.119,25.119h9.086v35.273h-20.962c-6.886-19.883-25.787-34.205-47.982-34.205
                                    s-41.097,14.322-47.982,34.205h-3.86v-60.393c0-4.427-3.589-8.017-8.017-8.017c-4.427,0-8.017,3.589-8.017,8.017v60.391H192.817
                                    c-6.886-19.883-25.787-34.205-47.982-34.205s-41.097,14.322-47.982,34.205H50.772c-0.295,0-0.534-0.239-0.534-0.534v-17.637
                                    h34.739c4.427,0,8.017-3.589,8.017-8.017s-3.589-8.017-8.017-8.017H8.017c-4.427,0-8.017,3.589-8.017,8.017
                                    s3.589,8.017,8.017,8.017h26.188v17.637c0,9.136,7.432,16.568,16.568,16.568h43.304c-0.002,0.178-0.014,0.355-0.014,0.534
                                    c0,27.996,22.777,50.772,50.772,50.772s50.772-22.776,50.772-50.772c0-0.18-0.012-0.356-0.014-0.534h180.67
                                    c-0.002,0.178-0.014,0.355-0.014,0.534c0,27.996,22.777,50.772,50.772,50.772c27.995,0,50.772-22.776,50.772-50.772
                                    c0-0.18-0.012-0.356-0.014-0.534h26.203c4.427,0,8.017-3.589,8.017-8.017v-85.511C512,251.989,496.423,234.448,476.158,231.363z
                                    M375.182,144.301h60.392c9.725,0,17.637,7.912,17.637,17.637v0.534h-78.029V144.301z M375.182,230.881v-52.376h71.235
                                    l13.094,52.376H375.182z M144.835,401.904c-19.155,0-34.739-15.583-34.739-34.739s15.584-34.739,34.739-34.739
                                    c19.155,0,34.739,15.583,34.739,34.739S163.99,401.904,144.835,401.904z M427.023,401.904c-19.155,0-34.739-15.583-34.739-34.739
                                    s15.584-34.739,34.739-34.739c19.155,0,34.739,15.583,34.739,34.739S446.178,401.904,427.023,401.904z M495.967,299.29h-9.086
                                    c-5.01,0-9.086-4.076-9.086-9.086v-9.086h18.171V299.29z" />
                              </g>
                           </g>
                           <g>
                              <g>
                                 <path d="M144.835,350.597c-9.136,0-16.568,7.432-16.568,16.568c0,9.136,7.432,16.568,16.568,16.568
                                    c9.136,0,16.568-7.432,16.568-16.568C161.403,358.029,153.971,350.597,144.835,350.597z" />
                              </g>
                           </g>
                           <g>
                              <g>
                                 <path d="M427.023,350.597c-9.136,0-16.568,7.432-16.568,16.568c0,9.136,7.432,16.568,16.568,16.568
                                    c9.136,0,16.568-7.432,16.568-16.568C443.591,358.029,436.159,350.597,427.023,350.597z" />
                              </g>
                           </g>
                           <g>
                              <g>
                                 <path d="M332.96,316.393H213.244c-4.427,0-8.017,3.589-8.017,8.017s3.589,8.017,8.017,8.017H332.96
                                    c4.427,0,8.017-3.589,8.017-8.017S337.388,316.393,332.96,316.393z" />
                              </g>
                           </g>
                           <g>
                              <g>
                                 <path d="M127.733,282.188H25.119c-4.427,0-8.017,3.589-8.017,8.017s3.589,8.017,8.017,8.017h102.614
                                    c4.427,0,8.017-3.589,8.017-8.017S132.16,282.188,127.733,282.188z" />
                              </g>
                           </g>
                           <g>
                              <g>
                                 <path d="M278.771,173.37c-3.13-3.13-8.207-3.13-11.337,0.001l-71.292,71.291l-37.087-37.087c-3.131-3.131-8.207-3.131-11.337,0
                                    c-3.131,3.131-3.131,8.206,0,11.337l42.756,42.756c1.565,1.566,3.617,2.348,5.668,2.348s4.104-0.782,5.668-2.348l76.96-76.96
                                    C281.901,181.576,281.901,176.501,278.771,173.37z" />
                              </g>
                           </g>
                           <g>
                           </g>
                           <g>
                           </g>
                           <g>
                           </g>
                           <g>
                           </g>
                           <g>
                           </g>
                           <g>
                           </g>
                           <g>
                           </g>
                           <g>
                           </g>
                           <g>
                           </g>
                           <g>
                           </g>
                           <g>
                           </g>
                           <g>
                           </g>
                           <g>
                           </g>
                           <g>
                           </g>
                           <g>
                           </g>
                        </svg>
                     </div>
                     <div style="margin: 12; position: absolute; " class="detail-box">
                        <h5 style="margin-bottom: 50px; text-align: center;">
                           Fast Delivery
                        </h5>
                        <p style="color: white;">
                           We reach every corner of<br> Malawi timely
                        </p>
                     </div>
                  </div>
               </div>
               <div class="col-md-4">
                  <div class="box ">
                     <div class="img-box">
                        <svg fill="#fffff" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
    viewBox="0 0 60.002 60.002" xml:space="preserve">
                           <g>
   <path d="M43.669,5.224c-4.401-3.94-10.081-5.748-16.008-5.092C18.24,1.177,10.655,8.777,9.626,18.205
      c-0.699,6.407,1.553,12.626,6.179,17.062c2.984,2.861,4.696,6.799,4.696,10.803v1.933v2v2v4h2.5l3,4h7l3-4h2.5v-4v-2v-2v-1
      c0-4.218,1.862-8.29,5.108-11.173c4.38-3.889,6.892-9.476,6.892-15.327C50.501,14.679,48.011,9.109,43.669,5.224z M32.001,58.002
      h-5l-1.5-2h8L32.001,58.002z M36.501,54.002h-14v-2h14V54.002z M36.501,50.002h-14v-2h4h6h4V50.002z M28.501,39.002h2v7h-2V39.002z
       M42.281,34.333c-3.417,3.034-5.479,7.242-5.75,11.669h-4.031v-8c0-7.383,1.57-10,6-10c0.552,0,1-0.447,1-1s-0.448-1-1-1
      c-7.37,0-7.949,6.871-7.995,11h-2.011c-0.046-4.129-0.625-11-7.995-11c-0.552,0-1,0.447-1,1s0.448,1,1,1c4.43,0,6,2.617,6,10v8h-4
      c-0.019-4.522-1.953-8.958-5.312-12.179c-4.174-4.003-6.206-9.616-5.575-15.401C12.542,9.918,19.384,3.063,27.882,2.12
      c5.351-0.592,10.481,1.038,14.453,4.593c3.918,3.508,6.166,8.534,6.166,13.789C48.501,25.783,46.234,30.824,42.281,34.333z"/>
   <path d="M42.029,21.152c-0.468-0.29-1.085-0.148-1.377,0.321c-0.613,0.985-1.376,1.528-2.151,1.528s-1.538-0.543-2.151-1.528
      c-0.005-0.008-0.014-0.012-0.019-0.021c-0.037-0.056-0.091-0.099-0.14-0.148c-0.047-0.046-0.087-0.097-0.141-0.133
      c-0.009-0.006-0.013-0.015-0.022-0.02c-0.044-0.027-0.094-0.032-0.14-0.052c-0.066-0.028-0.128-0.06-0.198-0.073
      c-0.063-0.012-0.125-0.007-0.188-0.007c-0.065,0-0.128-0.006-0.193,0.007c-0.071,0.014-0.134,0.046-0.201,0.075
      c-0.045,0.02-0.093,0.024-0.136,0.051c-0.008,0.005-0.012,0.014-0.02,0.019c-0.056,0.037-0.099,0.09-0.147,0.138
      c-0.047,0.047-0.099,0.088-0.134,0.143c-0.005,0.008-0.014,0.012-0.02,0.021c-0.613,0.985-1.376,1.528-2.151,1.528
      s-1.538-0.543-2.151-1.528c-0.005-0.008-0.014-0.012-0.019-0.021c-0.037-0.056-0.091-0.099-0.14-0.148
      c-0.047-0.046-0.087-0.097-0.141-0.133c-0.009-0.006-0.013-0.015-0.022-0.02c-0.044-0.027-0.094-0.032-0.14-0.052
      c-0.066-0.028-0.128-0.06-0.198-0.073c-0.063-0.012-0.125-0.007-0.188-0.007c-0.065,0-0.128-0.006-0.193,0.007
      c-0.071,0.014-0.134,0.046-0.201,0.075c-0.045,0.02-0.093,0.024-0.136,0.051c-0.008,0.005-0.012,0.014-0.02,0.019
      c-0.056,0.037-0.099,0.09-0.147,0.138c-0.047,0.047-0.099,0.088-0.134,0.143c-0.005,0.008-0.014,0.012-0.02,0.021
      c-0.613,0.985-1.376,1.528-2.151,1.528s-1.538-0.543-2.151-1.528c-0.005-0.008-0.014-0.012-0.019-0.021
      c-0.037-0.056-0.091-0.099-0.14-0.148c-0.047-0.046-0.087-0.097-0.141-0.133c-0.009-0.006-0.013-0.015-0.022-0.02
      c-0.044-0.027-0.094-0.032-0.14-0.052c-0.066-0.028-0.128-0.06-0.198-0.073c-0.063-0.012-0.125-0.007-0.188-0.007
      c-0.065,0-0.128-0.006-0.193,0.007c-0.071,0.014-0.134,0.046-0.201,0.075c-0.045,0.02-0.093,0.024-0.136,0.051
      c-0.008,0.005-0.012,0.014-0.02,0.019c-0.056,0.037-0.099,0.09-0.147,0.138c-0.047,0.047-0.099,0.088-0.134,0.143
      c-0.005,0.008-0.014,0.012-0.02,0.021c-0.613,0.985-1.376,1.528-2.151,1.528s-1.538-0.543-2.151-1.528
      c-0.292-0.469-0.909-0.612-1.377-0.321c-0.469,0.292-0.613,0.908-0.321,1.378c0.991,1.594,2.358,2.472,3.849,2.472
      c1.102,0,2.135-0.482,3-1.376c0.865,0.894,1.898,1.376,3,1.376s2.135-0.482,3-1.376c0.865,0.894,1.898,1.376,3,1.376
      s2.135-0.482,3-1.376c0.865,0.894,1.898,1.376,3,1.376c1.491,0,2.858-0.878,3.849-2.472C42.641,22.061,42.498,21.444,42.029,21.152
      z"/>
</g>
                        </svg>
                     </div>
                     <div style="margin: 12; position: absolute; " class="detail-box">
                        <h5 style="margin-bottom: 50px">
                           Market Exposure
                        </h5>
                        <p>
                           You will be exposed to diverse and competitive markets
                        </p>
                     </div>
                  </div>
               </div>
               <div class="col-md-4">
                  <div class="box ">
                     <div class="img-box">
                        <svg id="_30_Premium" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg" data-name="30_Premium">
                           <g id="filled">
                              <path d="m252.92 300h3.08a124.245 124.245 0 1 0 -4.49-.09c.075.009.15.023.226.03.394.039.789.06 1.184.06zm-96.92-124a100 100 0 1 1 100 100 100.113 100.113 0 0 1 -100-100z" />
                              <path d="m447.445 387.635-80.4-80.4a171.682 171.682 0 0 0 60.955-131.235c0-94.841-77.159-172-172-172s-172 77.159-172 172c0 73.747 46.657 136.794 112 161.2v158.8c-.3 9.289 11.094 15.384 18.656 9.984l41.344-27.562 41.344 27.562c7.574 5.4 18.949-.7 18.656-9.984v-70.109l46.6 46.594c6.395 6.789 18.712 3.025 20.253-6.132l9.74-48.724 48.725-9.742c9.163-1.531 12.904-13.893 6.127-20.252zm-339.445-211.635c0-81.607 66.393-148 148-148s148 66.393 148 148-66.393 148-148 148-148-66.393-148-148zm154.656 278.016a12 12 0 0 0 -13.312 0l-29.344 19.562v-129.378a172.338 172.338 0 0 0 72 0v129.38zm117.381-58.353a12 12 0 0 0 -9.415 9.415l-6.913 34.58-47.709-47.709v-54.749a171.469 171.469 0 0 0 31.467-15.6l67.151 67.152z" />
                              <path d="m287.62 236.985c8.349 4.694 19.251-3.212 17.367-12.618l-5.841-35.145 25.384-25c7.049-6.5 2.89-19.3-6.634-20.415l-35.23-5.306-15.933-31.867c-4.009-8.713-17.457-8.711-21.466 0l-15.933 31.866-35.23 5.306c-9.526 1.119-13.681 13.911-6.634 20.415l25.384 25-5.841 35.145c-1.879 9.406 9 17.31 17.367 12.618l31.62-16.414zm-53-32.359 2.928-17.615a12 12 0 0 0 -3.417-10.516l-12.721-12.531 17.658-2.66a12 12 0 0 0 8.947-6.5l7.985-15.971 7.985 15.972a12 12 0 0 0 8.947 6.5l17.658 2.66-12.723 12.535a12 12 0 0 0 -3.417 10.516l2.928 17.615-15.849-8.231a12 12 0 0 0 -11.058 0z" />
                           </g>
                        </svg>
                     </div>
                     <div style="margin: 12; position: absolute; " class="detail-box">
                        <h5 style="margin-bottom: 50px">
                           Best Quality
                        </h5>
                        <p>
                           We aim to provide quality beyond reproach.
                        </p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </section>

  @hookinsert('home.content.bottom')
@include('chat-widget')
@endsection
@push('footer')
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
    var swiper = new Swiper(".module-swiper", {
        loop: true,
        autoplay: {
            delay: 3000,
            disableOnInteraction: false
        },
        effect: "coverflow", // Change to "fade", "flip", "cube" for different effects
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: "auto",
        coverflowEffect: {
            rotate: 50,
            stretch: 0,
            depth: 100,
            modifier: 1,
            slideShadows: true
        },
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        speed: 800
    });
});
</script>

<!-- SwiperJS Script -->
<script>
  document.addEventListener("DOMContentLoaded", function () {
    var swiper = new Swiper(".product-swiper", {
      slidesPerView: 4,
      spaceBetween: 10,
      loop: true,
      autoplay: {
        delay: 3000,
        disableOnInteraction: false,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      breakpoints: {
        768: { slidesPerView: 2 },
        1024: { slidesPerView: 3 },
      }
    });
  });
</script>


@endpush