@extends('layouts.app')

@section('title', __('rental.title'))

@section('content')
<main class="page-wrapper">


  <!-- Page title -->
  <section class="container pb-5 mb-md-2 mb-lg-4 mb-xl-5">
    <div class="row pb-5 mb-md-2 mb-lg-4 mb-xl-5">
      <div class="col-lg-6">
        <h1 class="display-2 mb-0">@yield('title')</h1>
      </div>
      <div class="col-lg-6 col-xl-5 offset-xl-1 pt-3 pt-sm-4 pt-lg-3">
        <p class="fs-xl pb-4 mb-1 mb-md-2 mb-xl-3">
          {{ __('rental.welcome_text') }}
        </p>
        <a href="#devis" class="btn btn-lg btn-primary shadow-primary">{{ __('rental.request_quote') }}</a>
      </div>
    </div>
    <hr>
  </section>

  <!-- What we offer -->
  <section class="overflow-hidden pt-md-2 pt-lg-3 pb-3 pb-md-4 pb-xl-5">
    <div class="container">
      <div class="d-flex flex-column flex-md-row flex-md-nowrap align-items-start">
        <div class="col-md-7 ps-0 pe-lg-4 mb-5 mb-md-0">
          <div style="max-width: 660px;">
            <h2 class="h1 pb-3 mb-2 mb-md-3">{{ __('rental.offers_title') }}</h2>
            <div class="row row-cols-1 row-cols-sm-2 gx-lg-5 g-4">
              <div class="col pt-1 pt-sm-2 pt-lg-3">
                <i class="bx bx-like d-block fs-2 text-primary mb-2 mb-sm-3"></i>
                <h3 class="h5 pb-sm-1 mb-2">{{ __('rental.custom_rentals') }}</h3>
                <p class="mb-0">{{ __('rental.custom_rentals_text') }}</p>
              </div>
              <div class="col pt-1 pt-sm-2 pt-lg-3">
                <i class="bx bxs-truck d-block fs-2 text-primary mb-2 mb-sm-3"></i>
                <h3 class="h5 pb-sm-1 mb-2">{{ __('rental.easy_pickup') }}</h3>
                <p class="mb-0">{{ __('rental.easy_pickup_text') }}</p>
              </div>
              <div class="col pt-1 pt-sm-2 pt-lg-3">
                <i class="bx bx-group d-block fs-2 text-primary mb-2 mb-sm-3"></i>
                <h3 class="h5 pb-sm-1 mb-2">{{ __('rental.personalized_assistance') }}</h3>
                <p class="mb-0">{{ __('rental.personalized_assistance_text') }}</p>
              </div>
              <div class="col pt-1 pt-sm-2 pt-lg-3">
                <i class="bx bx-euro d-block fs-2 text-primary mb-2 mb-sm-3"></i>
                <h3 class="h5 pb-sm-1 mb-2">{{ __('rental.competitive_prices') }}</h3>
                <p class="mb-0">{{ __('rental.competitive_prices_text') }}</p>
              </div>
            </div>
          </div>
        </div>
        <img src="{{ asset('assets/img/location/matthias_katia_andrieux.jpg') }}" width="836" class="ms-3 ms-sm-5 ms-xl-3 rounded-3" alt="{{ __('rental.image_alt') }}">
      </div>
    </div>
  </section>

  <!-- How we work (Steps) -->
  <section class="container pb-5 mb-md-2 mb-lg-4 mb-xl-5">
    <h2 class="h1 pb-2 pb-md-0 mb-4 mb-md-5">{{ __('rental.how_it_works') }}</h2>
    <div class="steps steps-sm steps-horizontal-md pb-2 pb-sm-3">
      <div class="step">
        <div class="step-number">
          <div class="step-number-inner">1</div>
        </div>
        <div class="step-body">
          <h3 class="h4 mb-3">{{ __('rental.step1_title') }}</h3>
          <p class="mb-0">{{ __('rental.step1_text') }}</p>
        </div>
      </div>
      <div class="step">
        <div class="step-number">
          <div class="step-number-inner">2</div>
        </div>
        <div class="step-body">
          <h3 class="h4 mb-3">{{ __('rental.step2_title') }}</h3>
          <p class="mb-0">{{ __('rental.step2_text') }}</p>
        </div>
      </div>
      <div class="step">
        <div class="step-number">
          <div class="step-number-inner">3</div>
        </div>
        <div class="step-body">
          <h3 class="h4 mb-3">{{ __('rental.step3_title') }}</h3>
          <p class="mb-0">{{ __('rental.step3_text') }}</p>
        </div>
      </div>
      <div class="step">
        <div class="step-number">
          <div class="step-number-inner">4</div>
        </div>
        <div class="step-body">
          <h3 class="h4 mb-3">{{ __('rental.step4_title') }}</h3>
          <p class="mb-0">{{ __('rental.step4_text') }}</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Brands (Carousel) -->
  <section class="container pb-5 mb-xl-4">
    <h2 class="text-center pb-md-2">{{ __('rental.trusted_clubs') }}</h2>
    <div class="swiper mx-n2 swiper-initialized swiper-horizontal swiper-pointer-events swiper-backface-hidden" data-swiper-options="{
          &quot;slidesPerView&quot;: 2,
          &quot;pagination&quot;: {
            &quot;el&quot;: &quot;.swiper-pagination&quot;,
            &quot;clickable&quot;: true
          },
          &quot;breakpoints&quot;: {
            &quot;500&quot;: {
              &quot;slidesPerView&quot;: 3,
              &quot;spaceBetween&quot;: 8
            },
            &quot;650&quot;: {
              &quot;slidesPerView&quot;: 4,
              &quot;spaceBetween&quot;: 8
            },
            &quot;900&quot;: {
              &quot;slidesPerView&quot;: 5,
              &quot;spaceBetween&quot;: 8
            },
            &quot;1100&quot;: {
              &quot;slidesPerView&quot;: 6,
              &quot;spaceBetween&quot;: 8
            }
          }
        }">
      <div class="swiper-wrapper" id="swiper-wrapper-027d4c0a92a03cc2" aria-live="polite">

        <!-- Item -->
        <div class="swiper-slide py-3 swiper-slide-active" style="width: 193.167px; margin-right: 8px;" role="group" aria-label="1 / 6">
          <a href="#" class="card card-body card-hover px-2 mx-2">
            <img src="{{ asset('assets/img/location/logo/ACBB.png') }}" class="d-block mx-auto my-2" style="height: 100px;" alt="{{ __('rental.brand_alt') }}">
          </a>
        </div>

        <!-- Item -->
        <div class="swiper-slide py-3 swiper-slide-next" style="width: 193.167px; margin-right: 8px;" role="group" aria-label="2 / 6">
          <a href="#" class="card card-body card-hover px-2 mx-2">
            <img src="{{ asset('assets/img/location/logo/Lyon.png') }}" class="d-block mx-auto my-2" style="height: 100px;" alt="{{ __('rental.brand_alt') }}">
          </a>
        </div>

        <!-- Item -->
        <div class="swiper-slide py-3" style="width: 193.167px; margin-right: 8px;" role="group" aria-label="3 / 6">
          <a href="#" class="card card-body card-hover px-2 mx-2">
            <img src="{{ asset('assets/img/location/logo/bayonne.png') }}" class="d-block mx-auto my-2" style="height: 100px;" alt="{{ __('rental.brand_alt') }}">
          </a>
        </div>

        <!-- Item -->
        <div class="swiper-slide py-3" style="width: 193.167px; margin-right: 8px;" role="group" aria-label="5 / 6">
          <a href="#" class="card card-body card-hover px-2 mx-2">
            <img src="{{ asset('assets/img/location/logo/monaco.png') }}" class="d-block mx-auto my-2" style="height: 100px;" alt="{{ __('rental.brand_alt') }}">
          </a>
        </div>

        <!-- Item -->
        <div class="swiper-slide py-3" role="group" aria-label="6 / 6" style="width: 193.167px; margin-right: 8px;">
          <a href="#" class="card card-body card-hover px-2 mx-2">
            <img src="{{ asset('assets/img/location/logo/logo_CNV.png') }}" class="d-block mx-auto my-2" style="height: 100px;" alt="{{ __('rental.brand_alt') }}">
          </a>
        </div>

        <div class="swiper-slide py-3" role="group" aria-label="6 / 6" style="width: 193.167px; margin-right: 8px;">
          <a href="#" class="card card-body card-hover px-2 mx-2">
            <img src="{{ asset('assets/img/location/logo/AMMH.png') }}" class="d-block mx-auto my-2" style="height: 100px;" alt="{{ __('rental.brand_alt') }}">
          </a>
        </div>
      </div>

      <!-- Pagination (bullets) -->
      <div class="swiper-pagination position-relative pt-2 mt-4 swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal swiper-pagination-lock"><span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1" aria-current="true"></span></div>
      <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
    </div>
  </section>
  <section class="container pb-sm-1 pb-md-3">
    <!-- Row 1 -->
    <div class="row align-items-lg-center pb-5 mb-2 mb-lg-4 mb-xl-5">
      <div class="col-md-6 mb-4 mb-md-0">
        <img src="{{ asset('assets/img/location/skiff.png') }}" class="rounded-3" alt="{{ __('rental.image_alt') }}">
      </div>
      <div class="col-md-6">
        <div class="ps-xl-5 ms-md-2 ms-lg-4">
          <h2 class="h1 mb-3 mb-sm-4">{{ __('rental.adapted_rentals') }}</h2>
          <p class="mb-4 mb-lg-5">
            {{ __('rental.adapted_rentals_text') }}
          </p>
          <a href="#devis" class="btn btn-lg btn-primary shadow-primary">{{ __('rental.request_quote') }}</a>
        </div>
      </div>
    </div>
    <!-- Row 2 -->
    <div class="row align-items-lg-center pt-md-3 pb-5 mb-2 mb-lg-4 mb-xl-5">
      <div class="col-md-6 order-md-2 mb-4 mb-md-0">
        <img src="{{ asset('assets/img/location/transport.png') }}" class="rounded-3" alt="{{ __('rental.image_alt') }}">
      </div>
      <div class="col-md-6 order-md-1">
        <div class="pe-xl-5 me-md-2 me-lg-4">
          <h2 class="h1 mb-3 mb-sm-4">{{ __('rental.easy_pickup') }}</h2>
          <p class="mb-3 mb-sm-4">
            {{ __('rental.easy_pickup_text') }}
          </p>
          <ul class="list-unstyled mb-0">
            <li class="d-flex mb-2">
              <i class="bx bx-check text-primary lead me-2"></i>
              {{ __('rental.european_regattas') }}
            </li>
            <li class="d-flex mb-2">
              <i class="bx bx-check text-primary lead me-2"></i>
              {{ __('rental.competitive_prices') }}
            </li>
            <li class="d-flex">
              <i class="bx bx-check text-primary lead me-2"></i>
              {{ __('rental.high_quality_equipment') }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <section class="position-relative pt-2 pt-lg-0 pb-5 mb-5" id="devis">
    <div class="container position-relative zindex-5 pb-2 pb-md-4 pb-lg-5">
      <div class="row justify-content-center text-center pt-xl-2 pb-4 mb-1 mb-lg-3">
        <hr class="mb-5 pb-5">
        <div class="col-xl-6 col-lg-7 col-md-8 col-sm-11">
          <h2 class="mb-4">{{ __('rental.dominate_waters') }}</h2>
          <p class="text-muted mb-0">{{ __('rental.form_text') }}</p>
        </div>
      </div>
      <div class="row justify-content-center">
        <div class="col-lg-8 col-md-10">
          <form class="row needs-validation" action="{{ route('contact.store') }}" method="POST" id="form-contact">
            @csrf
            <input type="hidden" name="g-recaptcha-response">
            <div class="col-sm-6 mb-4">
              <label for="ln" class="form-label">{{ __('rental.name_label') }}</label>
              <input type="text" id="ln" name="name" class="form-control" required>
              <div class="invalid-feedback">{{ __('rental.name_error') }}</div>
            </div>
            <div class="col-sm-6 mb-4">
              <label for="email" class="form-label">{{ __('rental.email_label') }}</label>
              <input type="email" id="email" name="email" class="form-control" required>
              <div class="invalid-feedback">{{ __('rental.email_error') }}</div>
            </div>
            <div class="col-sm-6 mb-4">
              <label for="phone" class="form-label">{{ __('rental.phone_label') }}</label>
              <input type="text" id="phone" name="phone" class="form-control" required>
              <div class="invalid-feedback">{{ __('rental.phone_error') }}</div>
            </div>
            <div class="col-12 mb-4">
              <label for="message" class="form-label">{{ __('rental.message_label') }}</label>
              <textarea id="message" name="message" class="form-control" rows="4" required></textarea>
              <div class="invalid-feedback">{{ __('rental.message_error') }}</div>
            </div>
            <input type="hidden" name="type" value="{{ __('rental.rental_request') }}">
            <div class="col-12 text-center pt-2 pt-md-3 pt-lg-4">
              <button class="g-recaptcha btn btn-primary shadow-primary btn-lg" data-sitekey="{{ config('services.recaptcha.site_key') }}" data-callback='onSubmit' data-action='send_mail'>{{ __('rental.send') }}</button>
              <script>
                function onSubmit(token) {
                  document.getElementById("form-contact").submit();
                }
              </script>
              
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>

</main>

@endsection