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

$titre = isset($datas['titre']) ? $datas['titre'] : '';
$sous_titre = isset($datas['sous_titre']) ? $datas['sous_titre'] : '';
$specifications = isset($datas['specifications']) ? $datas['specifications'] : '';
$texte = isset($datas['texte']) ? $datas['texte'] : '';
$image = isset($datas['image']) ? $datas['image'] : '';
$sur_titre = isset($datas['sur_titre']) ? $datas['sur_titre'] : '';
$sur_texte = isset($datas['sur_texte']) ? $datas['sur_texte'] : '';
$vertical = isset($datas['alignement_vertical']) ? 'items-' . $datas['alignement_vertical'] : 'items-center';
$lien = isset($datas['lien']) ? $datas['lien'] : '';
?>

<div class="container md:flex md:<?php echo  $vertical ?>   md:gap-10  lg:gap-20 relative pt-10 md:pt-20 lg-pt-10 pb-16 md:pb-28">
  <div class="left md:basis-8/12 lg:basis-6/12 max-w-xl">
    <?php if ($sur_titre != '') : ?>
      <h3 class="new-section-title scroll-appear !text-left scroll-appear mb-4"><?php echo $sur_titre ?></h3>
    <?php endif ?>
    <?php if ($sur_texte != '') : ?>
      <div class=" scroll-appear mb-12  max-w-lg content "><?php echo $sur_texte ?></div>
    <?php endif ?>
    <?php if ($titre != '') : ?>
      <h2 class="new-section-title !text-left scroll-appear"><?php echo $titre ?></h2>
    <?php endif ?>
    <?php if ($specifications != '') { ?>
      <ul class="md:mb-10 lg:mb-12 flex flex-col gap-2 lg:gap-8">
        <?php
        foreach ($specifications as $specification) : ?>
          <?php if ($specification['titre'] != '') { ?>
            <li class="flex items-center scroll-appear">
              <strong class="heading-text font-normal pr-3 lg:pr-4 "><?php echo $specification['titre'] ?></strong>
              <span class="w-[25px] lg:w-[30px] h-[1px] bg-[#DEDEDE] "></span>
              <span class="pl-3 lg:pl-4"><?php echo $specification['texte'] ?></span>
            </li>
          <?php } else { ?>
            <li class="flex items-center text-[17px]">
              <span><?php echo $specification['texte'] ?></span>
            </li>
          <?php } ?>
        <?php endforeach; ?>
      </ul>
    <?php } ?>
    <?php if ($sous_titre != '') : ?>
      <h3 class="heading-text font-normal mb-6  scroll-appear leading-normal">
        <?php echo $sous_titre ?>
      </h3>
    <?php endif ?>
    <?php if ($texte != '') : ?>
      <div class=" scroll-appear mb-10 md:mb-0  max-w-lg content"><?php echo $texte ?></div>
    <?php endif; ?>
    <?php if ($lien != '') : ?>
      <div class="mt-10">
        <a href="<?php echo $lien['url']; ?>" class="btn btn-primary w-full md:w-auto"><?php echo $lien['title']; ?></a>
      </div>
    <?php endif; ?>
  </div>
  <div class="right md:basis-4/12 lg:basis-6/12 ">
    <img <?php acf_responsive_image($image['ID'], 'full', '100%') ?> alt="" class="w-full mx-auto scroll-appear scroll-appear-image max-w-lg">
  </div>
</div>