{{ define "main" }}
  {{ $heroImage := .Params.heroImage | default "images/visuels/Conducteur-solidaire.png" }}
  {{ $heroBg := resources.Get $heroImage }}
  <section class="conducteur-hero" {{ if $heroBg }}style="background-image: url('{{ $heroBg.RelPermalink }}')"{{ end }}>
  </section>

  <section class="page-conducteur">
    <h1 class="page-title">{{ .Params.headline | default "Rejoignez la communauté des conducteurs solidaires !" }}</h1>

    <div class="conducteur-content">
      {{ $carImagePath := .Params.contentImage | default "images/visuels/covoiturage.svg" }}
      {{ $carImage := resources.Get $carImagePath }}
      {{ if $carImage }}
        <div class="conducteur-image">
          <img src="{{ $carImage.RelPermalink }}" alt="Covoiturage" />
        </div>
      {{ end }}
      <div class="conducteur-text">
        {{ .Content }}
      </div>
    </div>

    <div class="conducteur-etapes-section">
      {{ $allResources := .Resources.Match "*.md" }}
      {{ $etapes := where $allResources "Params.type" "!=" "page-footer" }}
      {{ $arrowGreen := resources.Get "images/picto/Picto - Conducteur solidaire - Fleche verte.svg" }}
      {{ $arrowOrange := resources.Get "images/picto/Picto - Conducteur solidaire - Fleche orange.svg" }}
      {{ if $etapes }}
        <div class="conducteur-etapes">
          <h2 class="etapes-title">{{ .Params.etapesTitle | default "Une démarche simple et pratique" }}</h2>
          <div class="etapes-list">
            {{ $sortedEtapes := sort $etapes "Params.weight" }}
            {{ $total := len $sortedEtapes }}
            {{ range $index, $etape := $sortedEtapes }}
              <div class="etape-block">
                {{ if $etape.Params.icon }}
                  {{ $icon := resources.Get $etape.Params.icon }}
                  {{ if $icon }}
                    <div class="etape-icon">
                      <img src="{{ $icon.RelPermalink }}" alt="" />
                    </div>
                  {{ end }}
                {{ end }}
                <div class="etape-content">
                  <h3 class="etape-title">{{ $etape.Title }}</h3>
                  <div class="etape-text">{{ $etape.Content }}</div>
                </div>
                {{ if lt (add $index 1) $total }}
                  {{ if eq (mod $index 2) 0 }}
                    <div class="etape-arrow etape-arrow-right">
                      <img src="{{ $arrowGreen.RelPermalink }}" alt="" />
                    </div>
                  {{ else }}
                    <div class="etape-arrow etape-arrow-left">
                      <img src="{{ $arrowOrange.RelPermalink }}" alt="" />
                    </div>
                  {{ end }}
                {{ end }}
              </div>
            {{ end }}
          </div>
        </div>
      {{ end }}

      <div class="conducteur-sidebar">
        {{ with .Params.ctaLink }}
        <div class="cta-conducteur">
          <a href="{{ . }}" class="cta-conducteur-button" target="_blank">{{ $.Params.ctaText | default "Vous aussi, devenez conducteur solidaire !" }}</a>
        </div>
        {{ end }}

        <div class="plus-infos">
          {{ $downloadIcon := resources.Get "images/picto/Telechargez.svg" }}
          <h3 class="plus-infos-title">{{ .Params.plusInfosTitle | default "Plus d'infos ?" }}</h3>
          <p class="plus-infos-text">{{ .Params.plusInfosText | default "Vous avez des questions ? Vous souhaitez recevoir de la documentation imprimée ?" }}</p>
          <a href="{{ .Params.plusInfosContactLink | default "/pages/contact/" }}" class="plus-infos-button">Contactez-nous</a>
          {{ with .Params.depliantLink }}
          <a href="{{ . }}" class="plus-infos-download" target="_blank">
            {{ $downloadIcon := resources.Get "images/picto/download_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg" }}
            {{ if $downloadIcon }}
              <img src="{{ $downloadIcon.RelPermalink }}" alt="" />
            {{ end }}
            <span>Ou téléchargez le dépliant d'information</span>
          </a>
          {{ end }}
        </div>
      </div>
    </div>

    <div class="conducteur-video">
      <div class="conducteur-video-container">
        {{ $videoPath := .Params.video | default "videos/capsule_covoiturage.mp4" }}
        {{ $video := resources.Get $videoPath }}
        {{ if $video }}
          <video controls>
            <source src="{{ $video.RelPermalink }}" type="video/mp4">
          </video>
        {{ end }}
      </div>
    </div>

  </section>
{{ end }}