<template>
    <div class="missions--page">
        <!-- ================== -->
        <!-- FILS D'ARIANE -->
        <!-- ================== -->
        <PageSection tone="" content-size="default" class="breadcrum_wp">
          <Breadcrumb/>
        </PageSection>

        <!-- ================== -->
        <!-- EN-TêTE -->
        <!-- ================== -->
        <section class="fiche_header_wp">
          <div class="fiche_header_wp_gauche"></div>

          <div class="fiche_header_inner">
            <div class="fiche_header_titres">
              <div>
                <DsHeading as="h1" tone="default" textcase="uppercase" class="concert-card__title">
                  {{ missions?.header_titre }}
                </DsHeading>
              </div>
        
              <DsText as="p" align="justify">
                  {{ missions?.header_text }}
              </DsText>
            </div>
            <div class="fiche_header_img">
              <DsMedia
                v-if="missions?.image_illustration_header?.url"
                :src="missions.image_illustration_header.url"
                :alt="missions.image_illustration_header.alternativeText || ''"
                fit="cover"
                ratio="square"
              />

              <div v-else class="img_placeholder" aria-hidden="true" />
            </div>
            
          </div>
          <div class="fiche_header_wp_droite"></div>

        </section>
        
        <!-- ================== -->
        <!-- PARTIE 1 -->
        <!-- ================== -->
        <PageSection tone="" content-size="default" padded_size="md" class="fiche_description">
          <SectionContent v-if="missions?.partie_1" class="description_wp">
            <StrapiBlocksConvert :blocks="missions.partie_1" />
          </SectionContent>
        </PageSection>

        <!-- ================== -->
        <!-- CHIFFRES -->
        <!-- ================== -->
        <PageSection tone="" content-size="default" padded_size="md" class="chiffres_wp">
            <Chiffres
              title="L'ORCHESTRE PARTOUT EN ÎLE-DE-FRANCE"
              :items="missionsChiffres"
            />
        </PageSection>



        <!-- ================== -->
        <!-- decalage_gauche 1 -->
        <!-- ================== -->
        <PageSection :content="false">
          <Decalage tone="dark" title-tone="invert" position="left" button-tone="invert">
              <template #title>
                  {{ missions?.decalage_gauche_1?.decalage_titre }}
              </template>
              <DsText as="p" tone="invert" align="justify">
                  {{ missions?.decalage_gauche_1?.decalage_texte }}
              </DsText>
            </Decalage>
        </PageSection>

        <!-- ================== -->
        <!-- PARTIE 2 -->
        <!-- ================== -->
        <PageSection tone="" content-size="default" padded_size="md" class="fiche_description">
          <SectionContent v-if="missions?.partie_2" class="description_wp">
            <StrapiBlocksConvert :blocks="missions.partie_2" />
          </SectionContent>
        </PageSection>

        <!-- ================== -->
        <!-- decalage_droite_2 -->
        <!-- ================== -->
        <PageSection :content="false">
          <Decalage tone="brandreverse" title-tone="invert" position="right" button-tone="invert">
              <template #title>
                  {{ missions?.decalage_droite_2?.decalage_titre }}
              </template>
              <DsText as="p" align="justify">
                  {{ missions?.decalage_droite_2?.decalage_texte }}
              </DsText>
            </Decalage>
        </PageSection>

        <!-- ================== -->
        <!-- PARTIE 3 -->
        <!-- ================== -->
        <PageSection tone="" content-size="default" padded_size="md" class="fiche_description">
          <SectionContent v-if="missions?.partie_3" class="description_wp">
            <StrapiBlocksConvert :blocks="missions.partie_3" />
          </SectionContent>
        </PageSection>



      <!-- ================== -->
      <!-- decalage_droite_clic_4 -->
      <!-- ================== -->
      <PageSection :content="false">
        <Decalage tone="brand" title-tone="invert" position="right" button-tone="invert" ensavoirplus-target="texte_cache">
            <template #title>
                {{ missions?.decalage_droite_clic_4?.decalage_titre }}
            </template>
            <DsText as="p" tone="invert" align="justify">
                {{ missions?.decalage_droite_clic_4?.decalage_texte }}
            </DsText>
          </Decalage>
      </PageSection>
      
      <PageSection>
          <div id="texte_cache" class="decalage_ensavoirplus--hidden">Texte caché</div>
      </PageSection>

      <!-- ================== -->
      <!-- L'ORCHESTRE POUR LES PROS -->
      <!-- ================== -->
      <PageSection padded_size="lg">
        <SectionContent>
            <SectionTitle tone="" pad="xs">
              L'ORCHESTRE POUR LES PROS
            </SectionTitle>
        </SectionContent>

        <SectionContent>
          <BannierePros />
        </SectionContent>
      </PageSection>

    </div>
</template>

<script setup>
  import DsHeading from '@root/design-system/primitives/DsHeading.vue'
  import DsText from '@root/design-system/primitives/DsText.vue'
  import DsMedia from '@root/design-system/primitives/DsMedia.vue'
  import DsButton from '@root/design-system/primitives/DsButton.vue'

  //--------------------
  // RÉCUPÉRATION DES DONNÉES STRAPI
  //--------------------
  const { items: mission, pending, error, refresh } = useStrapi(
    "/api/__strapi__/missions",
    { locale: "fr-FR",
      populate: {
        decalage_gauche_1: true,
        decalage_droite_2: true,
        decalage_gauche_3: true,
        decalage_droite_clic_4: true,
        image_illustration_header: true,
      },
     }
  )
  const missions = computed(() => mission.value?.[0] || null)
  const missionsChiffres = [
    { value: '8', label: 'Départements' },
    { value: '+ de 60', label: 'Villes' },
    { value: '+ de 120', label: 'concerts' },
    { value: '100 000', label: 'Spectateurs et spectatrices' },
    { value: '22 000', label: "Bénéficiares de l'action culturelle" }
  ]

</script>

<style lang="scss">


  .breadcrum_wp {
    padding-top: 30px;
  }

  .fiche_header_wp {
    display: grid;
    justify-content: center;
    padding-bottom: 100px;
    

    @media (min-width: 0px) and (max-width: 600px) {
      grid-template-columns: 1fr;
      grid-template-rows: auto 510px;
      padding-top: 40px;
    }
    @media (min-width: 600px) {
      grid-template-columns: minmax(10px, 10px) 580px 0px;
      grid-template-rows: 40px 380px;
    }
    @media (min-width: 700px) {
      grid-template-columns: minmax(10px, 10px) 660px 0px;
      grid-template-rows: 40px 380px;
    }
    @media (min-width: 800px) {
      grid-template-columns: minmax(10px, 10px) auto minmax(10px, 10px);
      grid-template-rows: 40px 340px;
    }   
    @media (min-width: 900px) {
      grid-template-columns: minmax(10px, 10px) 860px minmax(10px, 10px);
      grid-template-rows: 40px 400px;
    }
    @media (min-width: 1000px) {
      grid-template-columns: minmax(20px, auto) 950px minmax(10px, auto);
      grid-template-rows: 40px 400px;
    }
    @media (min-width: 1100px) {
      grid-template-columns: minmax(20px, auto) 1020px minmax(20px, auto);
      grid-template-rows: 40px 400px;
    }
    @media (min-width: 1200px) {
      grid-template-columns: minmax(20px, auto) 1100px minmax(20px, auto);
      grid-template-rows: 40px 400px;
    }
    @media (min-width: 1300px) {
      grid-template-columns: minmax(20px, auto) 1200px minmax(20px, auto);
      grid-template-rows: 40px 400px;
    }
    @media (min-width: 1400px) {
      grid-template-columns: minmax(20px, auto) 1300px minmax(20px, auto);
      grid-template-rows: 40px 400px;
    }
    @media (min-width: 1500px) {
      grid-template-columns: minmax(20px, auto) 1400px minmax(20px, auto);
      grid-template-rows: 40px 400px;
    }
  }
  .fiche_header_wp_gauche {
    
    @media (min-width: 0px) and (max-width: 600px) {
      display: none;
    }
    @media (min-width: 600px) {
      grid-column: 1;
    }
  }
  .fiche_header_wp_gauche_carre {
    @media (min-width: 0px) and (max-width: 600px) {
      display: none;
    }
    @media (min-width: 600px) {
      grid-column: 1;
      grid-row: 4;
    }
  }
  .fiche_header_wp_droite {
    @media (min-width: 0px) and (max-width: 600px) {
      display: none;
    }
    @media (min-width: 600px) {
      grid-column: 3;
    }
  }

  .fiche_header_inner {
    @media (min-width: 0px) and (max-width: 600px) {
      grid-column: 1;
      grid-row: 1/3;
    }
    @media (min-width: 600px) {
      grid-column: 2;
      grid-row: 1/3;
    }
    display: grid;
    
    @media (min-width: 0px) and (max-width: 600px) {
      grid-template-columns: 1fr;
      grid-template-rows: auto 510px; 
    }
    @media (min-width: 600px) {
      width: 575px;
      grid-template-columns: 4fr 0.5fr 3.5fr;
      grid-template-rows: 40px 380px;
    }
    @media (min-width: 700px) {
      width: 675px;
      grid-template-columns: 4fr 0.5fr 3.5fr;
      grid-template-rows: 40px 380px;
    }
    @media (min-width: 800px) {
      width: 780px;
      grid-template-columns: 4fr 0.5fr 3.5fr;
      grid-template-rows: 40px 340px;
    }   
    @media (min-width: 900px) {
      width: 860px;
      grid-template-columns: 4fr 0.5fr 3.5fr;
      grid-template-rows: 40px 400px;
    }
    @media (min-width: 1000px) {
      width: 950px;
      grid-template-columns: 4fr 0.5fr 3.5fr;
      grid-template-rows: 40px 400px;
    }
    @media (min-width: 1100px) {
      width: 1020px;
      grid-template-columns: 4fr 0.5fr 3.5fr;
      grid-template-rows: 40px 400px;
    }
    @media (min-width: 1200px) {
      width: 1100px;
      grid-template-columns: 4fr 0.5fr 3.5fr;
      grid-template-rows: 40px 400px;
    }
    @media (min-width: 1300px) {
      width: 1200px;
      grid-template-columns: 4fr 0.5fr 3.5fr;
      grid-template-rows: 40px 400px;
    }
    @media (min-width: 1400px) {
      width: 1300px;
      grid-template-columns: 4fr 0.5fr 3.5fr;
      grid-template-rows: 40px 400px;
    }
    @media (min-width: 1500px) {
      width: 1400px;
      grid-template-columns: 4fr 0.5fr 3.5fr;
      grid-template-rows: 40px 400px;
    }
    @media (min-width: 1600px) {
      width: 1400px;
      grid-template-columns: 4fr 0.5fr 3.5fr;
      grid-template-rows: 40px 400px;
    }
    @media (min-width: 1700px) {
      width: 1400px;
      grid-template-columns: 4fr 0.5fr 3.5fr;
      grid-template-rows: 40px 400px;
    }
    @media (min-width: 1800px) {
      width: 1400px;
      grid-template-columns: 4fr 0.5fr 3.5fr;
      grid-template-rows: 40px 400px;
    }
  }

  .fiche_header_titres {
    @media (min-width: 0px) and (max-width: 600px) {
      grid-column: 1;
      grid-row: 1;
      padding-bottom: 20px;
      padding-left: 10px;
    }
    @media (min-width: 600px) {
      grid-column: 1;
      grid-row: 2;
    }
    display: grid;
    align-content: start;
    gap: 0.75rem;
    max-width: 475px;

    h1 {
      font-size: 55px;
      @media (min-width: 0px) and (max-width: 600px) {
        font-size: 25px;  
      }
      @media (min-width: 600px) {
        font-size: 25px;
      }
      @media (min-width: 700px) {
        font-size: 30px;
      }
      @media (min-width: 800px) {
        font-size: 30px;
      }   
      @media (min-width: 900px) {
        font-size: 40px;
      }
      @media (min-width: 1000px) {
        font-size: 40px;
      }
      @media (min-width: 1100px) {
        font-size: 40px;
      }
      @media (min-width: 1200px) {
        font-size: 50px;
      }
      @media (min-width: 1300px) {
        font-size: 55px;
      }
      @media (min-width: 1400px) {
        font-size: 55px;
      }
      @media (min-width: 1500px) {
        font-size: 55px;
      }
      @media (min-width: 1600px) {
        font-size: 55px;
      }
      @media (min-width: 1700px) {
        font-size: 55px;
      }
      @media (min-width: 1800px) {
        font-size: 55px;
      }
    }
  }

  .fiche_header_img {
    @media (min-width: 0px) and (max-width: 600px) {
      grid-column: 1 / 4;
      grid-row: 2 / 3;
      padding-left: 10px;
      padding-right: 10px;
    }
    @media (min-width: 600px) {
      grid-column: 3 / 5;
      grid-row: 1 / 3;
    }
    overflow: hidden;
    .ds-media {
      @media (min-width: 600px) {
        height: 100%;
      }
    }
  }

  .fiche_header_infos {
    @media (min-width: 0px) and (max-width: 600px) {
      grid-column: 1 / 2;
      grid-row: 4;
      margin-top: -30px;
    }
    @media (min-width: 600px) {
      grid-column: 1;
      grid-row: 4;
    }
    display: grid;
    align-content: center;
    justify-content: end;
    
    @media (min-width: 0px) and (max-width: 700px) {
      gap: 7px;  
    }
    @media (min-width: 700px) {
      gap: 20px;
    }

    text-align: right;
    .fiche_header_infos_genre {
      font-weight: 900;
      
    }
  }
  .fiche_header_bandeau {
    @media (min-width: 0px) and (max-width: 600px) {
      grid-column: 1 / 3;
      grid-row: 4;
      margin-top: -30px;
    }
    @media (min-width: 600px) {
      grid-column: 1 / 4;
      grid-row: 4;
    }
    background-color: var(--c-backgroud-black);
  }

  .fiche_description > * {
    max-width: 640px;
    display: flex;
    flex-direction: column;
  }
  .fiche_description {
    .page-section--inner {
      @media (max-width: 599px) {
        padding-left: 10px;
        padding-right: 10px;
      }
    }
  }

// =======================
// SPÉCIFIQUE À CETTE PAGE
// =======================
.missions--page {
  .chiffres_wp {
    background-color: var(--c-background-vert);
    margin-bottom: 50px;
  }
}

</style>
