<?php
$datas = $args['data'];

$titre = isset($datas['titre']) ? $datas['titre'] : '';
$date = isset($datas['date']) ? $datas['date'] : '';
$texte = isset($datas['texte']) ? $datas['texte'] : '';
$image = isset($datas['image']) ? $datas['image'] : '';
$citation = isset($datas['citation']) ? $datas['citation'] : '';
$reverse = isset($datas['reverse']) ? 'md:flex-row-reverse' : '';
?>

<div class="max-w-[1260px] mx-auto w-full ">
  <?php if ($date != ''): ?>
    <div class="top container mt-14 md:mt-20">
      <div class="relative z-[1]">
        <div class="absolute top-0 w-full">
          <h3
            class="date heading-text text-center text-grayMedium text-[70px] md:text-[146px] font-normal uppercase leading-none scroll-appear ">
            <?php echo $date ?></h3>
        </div>
      </div>
    </div>
  <?php endif; ?>

  <div
    class="middle container lg:flex <?php echo $reverse ?> md:gap-10 lg:gap-20 pt-12 md:pt-28 lg:pt-24 relative lg:pb-20">
    <div class="left md:basis-4/12 lg:basis-6/12">
      <?php if (is_array($image) && sizeof($image) > 0): ?>
        <img <?php acf_responsive_image($image['ID'], 'medium', '100%') ?> alt=""
          class="w-full relative  mx-auto scroll-appear scroll-appear-image max-w-lg">
      <?php endif; ?>
    </div>
    <div class="right md:basis-8/12 lg:basis-6/12 max-w-xl ">
      <?php if ($titre != ''): ?>
        <h2
          class="new-section-title text-[24px] md:text-[35px] lg:leading-tight !text-left scroll-appear pt-10 md:pt-20 lg:pt-40">
          <?php echo $titre ?></h2>
      <?php endif; ?>
      <?php if ($texte != ''): ?>
        <div class=" scroll-appear  lg:mb-10"><?php echo $texte ?></div>
      <?php endif; ?>
    </div>
  </div>

  <?php if ($citation != ''): ?>
    <div class="bottom container relative pt-10 lg:pt-0">
      <div class="quote lg:absolute lg:-translate-y-32 lg:translate-x-28 scroll-appear ">
        <svg width="101" height="88" class="w-[50px] lg:w-[100px] h-auto" viewBox="0 0 101 88" fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <path
            d="M25.1 41H16.1C11.9 41 11.9 44.6 11.9 45.8C11.9 58.1 35.3 80.3 39.8 83L36.2 87.2C32 85.7 0.5 60.2 0.5 33.8C0.5 12.2 13.1 0.199982 25.4 0.199982C34.7 0.199982 45.5 7.69997 45.5 20.3C45.5 34.4 34.4 41 25.1 41Z"
            fill="#D2D2D2" />
          <path
            d="M80.1391 41H71.1391C66.9391 41 66.9391 44.6 66.9391 45.8C66.9391 58.1 90.3391 80.3 94.8391 83L91.2391 87.2C87.0391 85.7 55.5391 60.2 55.5391 33.8C55.5391 12.2 68.1391 0.199982 80.4391 0.199982C89.7391 0.199982 100.539 7.69997 100.539 20.3C100.539 34.4 89.4391 41 80.1391 41Z"
            fill="#D2D2D2" />
        </svg>
      </div>
      <div class="citation pt-5 lg:py-10 scroll-appear">
        <div class="citation-text text-left md:text-center font-cursive text-[26px] italic lg:text-[41px] leading-[140%]">
          <?php echo $citation ?>
        </div>
      </div>
    </div>
  <?php endif; ?>
</div>