<?php
$datas = $args['data'];
$titre = isset($datas['titre']) ? $datas['titre'] : '';
$titre_gauche = isset($datas['titre_gauche']) ? $datas['titre_gauche'] : '';
$image_gauche_desktop = isset($datas['image_gauche_desktop']) ? $datas['image_gauche_desktop'] : '';
$image_gauche_mobile = isset($datas['image_gauche_mobile']) ? $datas['image_gauche_mobile'] : '';
$image_droite = isset($datas['image_droite']) ? $datas['image_droite'] : '';
$degrade_debut = isset($datas['degrade_debut']) ? $datas['degrade_debut'] : '';
$degrade_fin = isset($datas['degrade_fin']) ? $datas['degrade_fin'] : '';
$couverture_image_mobile = isset($datas['couverture_image_mobile']) ? $datas['couverture_image_mobile'] : '';

$img_left_notbg = $titre_gauche != '' ? true : false;
?>
<?php if (is_array($couverture_image_mobile)): ?>
  <img class="w-full h-full object-contain md:hidden" <?php acf_responsive_image($couverture_image_mobile['id'], 'full', '100%') ?> />
<?php endif; ?>
<div class="<?php if (is_array($couverture_image_mobile)): ?>hidden md:block<?php endif; ?>">
  <div class=" bg-black overflow-hidden relative lg:min-h-[620px] max-h-screen">
    <div class="relative">
      <div class="abs_center hidden md:block w-full h-full blur-[35px] z-0 max-w-[1400px] "
        style="background: radial-gradient(50% 50.00% at 50% 50.00%, <?php echo $degrade_debut ?> 12.50%, <?php echo $degrade_fin ?> 100%);">
      </div>
      <div class="md:hidden abs_center w-[480px] h-[400px] blur-[35px] z-0 -mt-10 "
        style="background: radial-gradient(50% 50.00% at 50% 50.00%,  <?php echo $degrade_debut ?> 0%, <?php echo $degrade_fin ?> 100%);">
      </div>
      <div class="container !max-w-7xl mx-auto flex items-center  relative  pt-20 md:items-end md:pt-10 max-h-screen ">
        <div class="basis-7/12 md:basis-6/12 <?php if (!$img_left_notbg) {
          echo 'lg:basis-7/12';
          } ?> ">
          <?php if (is_array($image_gauche_desktop)): ?>
            <img class="mx-auto hidden md:block  <?php if ($img_left_notbg) {
              echo 'lg-h-580px';
              } ?>" <?php acf_responsive_image($image_gauche_desktop['id'], 'large', '100%') ?> />
          <?php endif; ?>
          <?php if (is_array($image_gauche_mobile)): ?>
            <img class="max-w-full md:hidden" <?php acf_responsive_image($image_gauche_mobile['id'], 'large', '100%') ?> />
          <?php endif; ?>
          <?php if ($titre_gauche != ''): ?>
            <h2 class="text-white text-center font-italic text-[34px] hidden md:block  pb-10">
              <?php echo $titre_gauche; ?>
            </h2>
          <?php endif; ?>
        </div>
        <div class="basis-5/12 md:basis-6/12 <?php if (!$img_left_notbg) {
          echo 'lg:basis-5/12';
          } ?> text-center px-8 md:px-0">
          <?php if (is_array($image_droite)): ?>
            <img class="mx-auto w-full max-w-full  <?php if ($img_left_notbg) {
              echo 'lg-h-580px';
              } else {
              echo 'md:max-w-[100px] lg:max-w-[190px]  md:mb-[25px]';
              } ?>" <?php acf_responsive_image($image_droite['id'], 'large', '100%') ?> />
          <?php endif; ?>
          <h2 class="text-white text-center font-italic text-[34px] hidden md:block md:pb-10"><?php echo $titre; ?></h2>
        </div>
      </div>
    </div>
    <h2 class="text-white text-center font-italic text-[36px] md:hidden relative py-10"><?php echo $titre; ?></h2>
  </div>
</div>