<?php
/* Template Name: page Acheter  */
get_header();

?>
<div class="main-content v2 bg-white">
    <?php
    // if (have_posts()) :
    //     while (have_posts()) : the_post();

    $acfTitre = get_field('titre');
    $acfTexte = get_field('texte');
    $acfImage = get_field('image');
    $acfImage_mobile = get_field('image_mobile');

    $liste = get_field('magasins');

    ?>
    <div class="main">
        <style>

        </style>
        <section class="cover-acheter relative mb-20">
            <div class="absolute top-0 left-0 w-full h-[90%] bg-black">
                <?php if ($acfImage) { ?>
                    <img <?php acf_responsive_image($acfImage['id'], 'full', '100%') ?> class="first-letter:top-0 left-0 w-full h-full object-cover lg:object-contain object-center lg:object-top hidden md:block" />
                <?php } ?>
                <?php if ($acfImage_mobile) { ?>
                    <img <?php acf_responsive_image($acfImage_mobile['id'], 'full', '100%') ?> class="first-letter:top-0 left-0 w-full h-full object-cover lg:object-contain object-center lg:object-top md:hidden" />
                <?php } ?>
            </div>
            <div class="container">
                <div class="content relative z-1 text-white text-center pt-10 md:pt-36  max-w-sm lg:max-w-md mb-10 md:mb-36 mx-auto md:ml-0">
                    <h1 class="heading-text text-lg  uppercase mb-10"><?php echo $acfTitre ?></h1>
                    <h3 class="body-text"><?php echo $acfTexte ?></h3>
                </div>

                <ul class="liste mx-auto w-full flex flex-col md:flex-row md-flex-row justify-center gap-10 md:gap-40 items-center bg-[#F5F5F5] rounded relative z-1 p-10 md:py-6 md:px-20">
                    <?php
                    if (is_array($liste)) {
                        foreach ($liste as $item) {
                    ?>
                            <li class="scroll-appear">
                                <a href="<?php echo $item['url'] ?>" target="_blank"><img class="" <?php acf_responsive_image($item['image']['id'], 'large', '100%') ?> /></a>
                            </li>

                    <?php
                        }
                    }
                    ?>
                </ul>
            </div>
        </section>
    </div>

</div>
<?php
get_footer();
?>