{{--
  Template Name: Accueil
--}}

@extends('layouts.app')

@push('vite-head')
  @vite(['resources/css/pages/accueil.scss', 'resources/js/pages/accueil.ts'])
@endpush

@section('content')
  <section class="video-container">
    <h1>{{ get_field('titre') }}</h1>
    <video
      class="video-container__video"
      src="@asset('video/teaser.mp4')"
      autoplay
      muted
      loop
      playsinline
    ></video>
  </section>

  <section class="container bg-secondary">
    @php($line_up = get_field('line_up'))
    @php($line_up_btn_1 = $line_up['bouton'] ?? null)
    @php($line_up_btn_2 = $line_up['bouton_2'] ?? null)
    <div class="line-up-header">
      <h2 class="text-light">{{ $line_up['titre'] }}</h2>
      <a
        href="{{ $line_up_btn_1['url'] }}"
        class="btn arrow-secondary"
        @if (! empty($line_up_btn_1['target'])) target="{{ $line_up_btn_1['target'] }}" @endif
      >
        {{ $line_up_btn_1['title'] }}
      </a>
    </div>
    <x-lineup-featured mode="featured" />
    <div class="button-container center mb">
      <a
        href="{{ $line_up_btn_2['url'] }}"
        class="btn outline arrow-primary"
        @if (! empty($line_up_btn_2['target'])) target="{{ $line_up_btn_2['target'] }}" @endif
      >
        {{ $line_up_btn_2['title'] }}
      </a>
    </div>
  </section>

  @php($billet_en_ligne = get_field('billet_en_ligne'))
  @if (! empty($billet_en_ligne))
    <section class="container top-wave bottom-wave">
      <x-columns
        :col_elements="[
          'img'     => $billet_en_ligne['image'] ?? null,
          'titre'   => $billet_en_ligne['titre'] ?? '',
          'texte'   => $billet_en_ligne['texte'] ?? '',
          'boutons' => $billet_en_ligne['boutons'] ?? [],
        ]"
        img_position="img-left"
        no-wave="true"
        btn_1_class="bg-secondary arrow-primary"
      />
    </section>
  @endif

  @php($lesAnesTetues = get_field('les_anes_tetus'))
  @if (! empty($lesAnesTetues))
    <section class="container bg-secondary text-light">
      <div class="mt">
        <x-columns
          :col_elements="[
            'img'     => $lesAnesTetues['image'] ?? null,
            'titre'   => $lesAnesTetues['titre'] ?? '',
            'texte'   => $lesAnesTetues['texte'] ?? '',
            'boutons' => $lesAnesTetues['boutons'] ?? [],
          ]"
          img_position="img-right"
          btn_1_class="bg-primary arrow-secondary"
          btn_2_class="outline text-primary"
        />
      </div>
    </section>
  @endif

  <section>
    <x-gallery />
  </section>

  @php($lesAnesSolidaires = get_field('les_anes_solidaires'))
  @if (! empty($lesAnesSolidaires))
    <section class="container bottom-wave">
      <x-columns
        :col_elements="[
          'img'     => $lesAnesSolidaires['image'] ?? null,
          'titre'   => $lesAnesSolidaires['titre'] ?? '',
          'texte'   => $lesAnesSolidaires['texte'] ?? '',
          'boutons' => $lesAnesSolidaires['boutons'] ?? [],
        ]"
        btn_1_class="bg-primary bg-secondary arrow-primary"
        title_class="text-primary"
      />
    </section>
  @endif

  <section class="container bg-primary text-light">
    <div class="mt mb">
      <x-major-partners />
    </div>
  </section>

  <section class="top-wave container">
    <x-instagram-feed />
  </section>
@endsection