@extends('layouts.app')

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

@section('content')

<main class="page-wrapper">

  <!-- Hero section -->
  <section class="min-vh-100 bg-secondary overflow-hidden py-5 mb-5 ">

    <div class="container pt-lg-3">
      <div class="row flex-lg-nowrap">
        <div class="col-lg-7 col-xl-6 col-xxl-5 text-center text-lg-start pt-4 pt-md-5 mt-xxl-4">
          <p class="text-body lead pt-5 mt-sm-2 mt-lg-4 mt-xl-5">{{ __('welcome.discover_falcon') }}</p>
          <h1 class="display-3 pb-md-2 mb-5">{{ __('welcome.at_the_pinnacle') }} <span class="text-secondary">{{ __('welcome.performance') }}</span></h1>
          <div class="mt-n4 ms-lg-n4 ms-n3 pb-sm-3 pb-md-4">
            <a href="{{ route('location') }}" class="btn btn-lg btn-primary mt-lg-4 mt-3 ms-lg-4 ms-3">
              {{ __('welcome.rent_a_boat') }}
              <i class="bx bx-play ms-1 lead"></i>
            </a>
            <a href="{{ route('boat.index') }}" class="btn btn-lg btn-secondary mt-lg-4 mt-3 ms-lg-4 ms-3">
              {{ __('welcome.discover_range') }}
              <i class="bx bx-right-arrow-alt ms-1 lead"></i>
            </a>
          </div>
          <div class="swiper-slider mx-auto mt-5 pt-xl-5 pt-lg-2 pt-xl-4" style="max-width: 33rem;">
            <div class="swiper" data-swiper-options='{
                  "slidesPerView": 1,
                  "effect": "coverflow",
                  "centeredSlides": true,
                  "loop": true,
                  "speed": 650,
                  "coverflowEffect": {
                    "rotate": 0,
                    "stretch": 0,
                    "depth": 560,
                    "modifier": 1,
                    "slideShadows": true
                  },
                  "autoplay": {
                    "delay": 6000,
                    "disableOnInteraction": false
                  },
                  "pagination": {
                    "el": ".swiper-pagination",
                    "type": "fraction"
                  },
                  "navigation": {
                    "prevEl": ".btn-prev",
                    "nextEl": ".btn-next"
                  }
                }'>
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <img src="{{ asset('assets/img/landing/product/hero/slider/1.png') }}" width="434" alt="{{ __('welcome.slider_image') }}" class="d-block mx-auto rounded-3">
                </div>
                <div class="swiper-slide">
                  <img src="{{ asset('assets/img/landing/product/hero/slider/2.png') }}" width="434" alt="{{ __('welcome.slider_image') }}" class="d-block mx-auto rounded-3">
                </div>
                <div class="swiper-slide">
                  <img src="{{ asset('assets/img/landing/product/hero/slider/3.png') }}" width="434" alt="{{ __('welcome.slider_image') }}" class="d-block mx-auto rounded-3">
                </div>
                <div class="swiper-slide">
                  <img src="{{ asset('assets/img/landing/product/hero/slider/4.png') }}" width="434" alt="{{ __('welcome.slider_image') }}" class="d-block mx-auto rounded-3">
                </div>
              </div>

              <!-- Prev/Next buttons + count -->
              <div class="d-flex justify-content-center align-items-center pb-3 pt-4 mt-3">
                <button type="button" class="btn btn-prev btn-icon position-relative top-0 mt-0 ms-0 me-2" style="transform: none;" aria-label="{{ __('welcome.previous') }}">
                  <i class="bx bx-chevron-left"></i>
                </button>
                <div class="swiper-pagination text-secondary opacity-70 fs-sm fw-medium position-relative top-0 w-auto" style="min-width: 70px;"></div>
                <button type="button" class="btn btn-next btn-icon position-relative top-0 mt-0 ms-2 me-0" style="transform: none;" aria-label="{{ __('welcome.next') }}">
                  <i class="bx bx-chevron-right"></i>
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- Featured image -->
        <div class="d-none d-lg-block pt-5 mt-lg-4 mt-xl-5 ms-lg-n5 mx-xl-0">
          <img src="{{ asset('assets/img/landing/product/hero/hero_skiff_falcon.png') }}" class="d-block pt-xxl-4 mt-5 fade-in-right" width="1058" alt="{{ __('welcome.hero_image') }}">
        </div>
      </div>
    </div>
  </section>

  <!-- Text + Video -->
  <section class="mb-5 pt-md-2 pt-lg-4 pt-xl-5">
    <div class="container mt-4 pt-2">
      <div class="row row-cols-md-2 row-cols-1 gy-4 mb-5">
        <div class="col">
          <h2 class="h1 mb-0">{{ __('welcome.our_commitment') }} <span class="text-primary">{{ __('welcome.excellence') }}</span></h2>
        </div>
        <div class="col">
          <p class="mb-0 fs-lg">{{ __('welcome.our_passion') }}</p>
        </div>
      </div>

      <div class="position-relative rounded-3 overflow-hidden">
        <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center zindex-5">
          <a href="https://www.youtube.com/watch?v=1iiXEhSpJY4&t=299s" class="btn btn-video btn-icon btn-xl stretched-link bg-white" data-bs-toggle="video" aria-label="{{ __('welcome.play_video') }}">
            <i class="bx bx-play"></i>
          </a>
        </div>
        <span class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-40"></span>
        <img src="{{ asset('assets/img/landing/product/michel_andrieux_aviron.jpeg') }}" alt="{{ __('welcome.cover_image') }}" class="w-100">
      </div>

  </section>
  <!-- Colors -->
  <section class="mb-5 py-5 bg-secondary">
    <div class="container my-xl-5 my-lg-4 pb-2 py-sm-3 py-md-4">
      <div class="row my-2">
        <div class="col-xl-4 col-lg-5">
          <div class="mb-lg-0 mb-5 mx-lg-0 mx-auto text-lg-start text-center" style="max-width: 26rem;">
            <h2 class="h1 mb-4 pb-3">{{ __('welcome.experience_exceptional') }}</h2>
            <p class="mb-4">{{ __('welcome.our_boats') }}</p>
            <figcaption class="card-footer border-0 d-flex align-items-center w-100 pb-2">
              <img src="https://www.ffaviron.fr/medias/persons/ffa-aviron-michel-andrieux-membre-comite-directeur__20160107160653.jpg" width="60" class="rounded-circle" alt="{{ __('welcome.president_image') }}">
              <div class="ps-3">
                <h6 class="fw-semibold lh-base mb-0">{{ __('welcome.michel_andrieux') }}</h6>
                <span class="fs-sm text-muted">{{ __('welcome.president') }}</span>
              </div>
            </figcaption>
          </div>
        </div>
        <div class="col-lg-7 offset-xl-1">
          <div class="row row-cols-sm-2 row-cols-1 gy-4">

            <!-- Item -->
            <div class="col">
              <div class="card card-hover border-0 shadow position-relative px-3">
                <img src="{{ asset('assets/img/landing/product/colors/skiff.png') }}" alt="{{ __('welcome.skin_image') }}" class="card-img-top my-5">
                <div class="card-body mx-3 mb-3 pt-0 text-center">
                  <span>{{ __('welcome.competition_skiff') }}</span>
                  <h3 class="mt-2 mb-4">{{ __('welcome.gold_range') }}</h3>
                  <a href="{{route('boat.index.range', ['slug' => 'gold-a+'])}}" class="btn btn-primary stretched-link">{{ __('welcome.discover') }}</a>
                </div>
              </div>
            </div>

            <!-- Item -->
            <div class="col">
              <div class="card card-hover border-0 shadow position-relative px-3">
                <img src="{{ asset('assets/img/landing/product/colors/skiff.png') }}" alt="{{ __('welcome.skin_image') }}" class="card-img-top my-5">
                <div class="card-body mx-3 mb-3 pt-0 text-center">
                  <span>{{ __('welcome.used_boat') }}</span>
                  <h3 class="mt-2 mb-4">{{ __('welcome.used_boat_range') }}</h3>
                  <a href="{{route('boat.index.range', ['slug' => 'silver-b'])}}" class="btn btn-primary stretched-link">{{ __('welcome.discover') }}</a>
                </div>
              </div>
            </div>

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

  <!-- Gallery (carousels) -->
  <section class="mb-5 pt-md-3 pt-lg-4 pt-xl-5">
    <h2 class="h1 pt-lg-2 pt-xl-3 mb-5 text-center">{{ __('welcome.excellence_reliability') }}</h2>
    <div class="pb-2 pb-sm-3 pb-md-4">

      <!-- LTR -->
      <div class="swiper" data-swiper-options='{
            "loop": true,
            "grabCursor": false,
            "centeredSlides": true,
            "autoplay": {
              "delay": 0,
              "disableOnInteraction": false
            },
            "freeMode": true,
            "speed": 38000,
            "freeModeMomentum": false,
            "breakpoints": {
              "0": {
                "slidesPerView": 1,
                "spaceBetween": 8
              },
              "500": {
                "spaceBetween": 16
              },
              "768": {
                "slidesPerView": 2,
                "spaceBetween": 24
              }
            }
          }'>
        <div class="swiper-wrapper">

          <!-- Item -->
          <div class="swiper-slide">
            <img src="{{ asset('assets/img/landing/product/gallery/01.jpg') }}" alt="{{ __('welcome.gallery_image') }}" class="rounded-3">
          </div>

          <!-- Item -->
          <div class="swiper-slide">
            <img src="{{ asset('assets/img/landing/product/gallery/02.jpg') }}" alt="{{ __('welcome.gallery_image') }}" class="rounded-3">
          </div>

          <!-- Item -->
          <div class="swiper-slide">
            <img src="{{ asset('assets/img/landing/product/gallery/03.jpg') }}" alt="{{ __('welcome.gallery_image') }}" class="rounded-3">
          </div>
        </div>
      </div>

      <!-- RTL -->
      <div class="swiper mt-md-4 mt-sm-3 mt-2" dir="rtl" data-swiper-options='{
            "loop": true,
            "grabCursor": false,
            "centeredSlides": true,
            "autoplay": {
              "delay": 0,
              "disableOnInteraction": false
            },
            "freeMode": true,
            "speed": 38000,
            "freeModeMomentum": false,
            "breakpoints": {
              "0": {
                "slidesPerView": 1,
                "spaceBetween": 8
              },
              "500": {
                "spaceBetween": 16
              },
              "768": {
                "slidesPerView": 2,
                "spaceBetween": 24
              }
            }
          }'>
        <div class="swiper-wrapper">

          <!-- Item -->
          <div class="swiper-slide">
            <img src="{{ asset('assets/img/landing/product/gallery/04.jpg') }}" alt="{{ __('welcome.gallery_image') }}" class="rounded-3">
          </div>

          <!-- Item -->
          <div class="swiper-slide">
            <img src="{{ asset('assets/img/landing/product/gallery/05.jpg') }}" alt="{{ __('welcome.gallery_image') }}" class="rounded-3">
          </div>

          <!-- Item -->
          <div class="swiper-slide">
            <img src="{{ asset('assets/img/landing/product/gallery/06.jpg') }}" alt="{{ __('welcome.gallery_image') }}" class="rounded-3">
          </div>
        </div>
      </div>
    </div>
  </section>


  @include('layouts.latest_posts_v2', ['posts' => $posts])

  <!-- CTA -->
  <section class="overflow-hidden pt-lg-5 pt-3 pt-sm-4">
    <div class="container">
      <div class="text-center px-3">
        <h3 class="display-5 mb-4 pb-2">
          {{ __('welcome.innovation_performance') }} <span class="text-primary">{{ __('welcome.our_dna') }}</span>
        </h3>
        <a href="{{ route('boat.index') }}" class="btn btn-lg btn-primary">{{ __('welcome.discover_range') }}</a>
      </div>
    </div>
    <div class="pt-5 pt-sm-4 pt-md-0 me-n4 me-sm-n5">
      <img src=" {{ asset('assets/img/landing/product/hero/deux_de_couple.png') }}" width="1296" alt="{{ __('welcome.image') }}" class="d-block mx-auto my-4 rounded-3">
    </div>
  </section>
</main>

@endsection