<?php

// Récupération des champs ACF avec validation
$titre = get_field('titre');
$texte = get_field('texte');
$lien = get_field('lien');

// Optimisation de la requête WP avec limitation et cache
$args = array(
    'post_type' => 'vins',
    'posts_per_page' => 20,
    'orderby' => 'menu_order',
    'order' => 'ASC',
    'post_status' => 'publish',
    'meta_query' => array(
        array(
            'key' => 'image_carrousel_v2',
            'compare' => '!=',
            'value' => ''
        )
    )
);

// Cache de la requête pour améliorer les performances
$cache_key = 'cuvee_vins_query_' . md5(serialize($args));
$my_query = wp_cache_get($cache_key);

if (false === $my_query) {
    $my_query = new WP_Query($args);
    wp_cache_set($cache_key, $my_query, '', 300); // Cache 5 minutes
}

?>

<section class="py-10 md:py-20 overflow-hidden" role="region" aria-labelledby="cuvee-title">
    <div class="container lg:max-w-5xl pt-10 pb-10 md:pb-16">
        <div class="flex flex-col md:flex-row gap-10">
            <div class="md:basis-6/12">
                <?php if (!empty($titre)): ?>
                    <?php if (is_front_page()): ?>
                        <h1 id="cuvee-title"
                            class="font-heading text-[1.125rem] lg:text-[1.875rem] font-normal uppercase text-center md:text-start leading-snug">
                            <?php echo esc_html($titre); ?>
                        </h1>
                    <?php else: ?>
                        <h2 id="cuvee-title"
                            class="font-heading text-[1.125rem] lg:text-[1.875rem] font-normal uppercase text-center md:text-start leading-snug">
                            <?php echo esc_html($titre); ?>
                        </h2>
                    <?php endif; ?>
                <?php endif; ?>
            </div>
            <div class="md:basis-6/12 text-justify px-0 link-gold">
                <?php if (!empty($texte)): ?>
                    <?php echo wp_kses_post($texte); ?>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <div class="container !px-0">
        <div class="relative">
            <div class="slick-transversal-v2-container">
                <div class="slick-transversal-v2" role="group" aria-label="Carrousel des cuvées">
                    <?php if ($my_query->have_posts()): ?>
                        <?php while ($my_query->have_posts()):
                            $my_query->the_post(); ?>
                            <?php
                            $image_carrousel = get_field('image_carrousel_v2', get_the_ID());
                            $post_title = get_the_title();
                            $post_permalink = get_the_permalink();
                            $post_excerpt = get_the_excerpt();
                            $post_content = get_field('texte', get_the_ID());
                            $wine_type =  "Champagne";
                            $wine_region = "Champagne";
                            ?>
                            <div class="slick-slide">
                                <a href="<?php echo esc_url($post_permalink); ?>" class="text-center scroll-appear block"
                                    aria-label="Voir les détails de <?php echo esc_attr($post_title); ?>">

                                    <?php if (!empty($image_carrousel)): ?>
                                        <img <?php echo acf_responsive_image($image_carrousel['id'], 'medium', '100%'); ?>
                                            alt="<?php echo esc_attr($post_title); ?>"
                                            class="w-full aspect-[11/16] md:aspect-[9/16] object-cover" loading="lazy">
                                    <?php else: ?>
                                        <div
                                            class="w-full aspect-[11/16] md:aspect-[9/16] bg-gray-200 flex items-center justify-center">
                                            <span class="text-gray-500">Image non disponible</span>
                                        </div>
                                    <?php endif; ?>

                                    <h3 class="font-heading text mx-auto w-full text-[0.9375rem] uppercase leading-snug pt-3 ">
                                        <?php echo esc_html($post_title); ?>
                                    </h3>
                                </a>

                            </div>
                        <?php endwhile; ?>
                        <?php wp_reset_postdata(); ?>
                    <?php else: ?>
                        <div class="text-center py-8">
                            <p>Aucune cuvée disponible pour le moment.</p>
                        </div>
                    <?php endif; ?>
                </div>
            </div>

            <?php if ($my_query->have_posts() && $my_query->post_count > 1): ?>
                <div class="slick-navigation slick-navigation-v2 flex mx-auto mt-5" role="group"
                    aria-label="Navigation du carrousel">
                    <button type="button" class="slick-transversal-prev slick-prev" aria-label="Cuvée précédente">
                        <svg xmlns="http://www.w3.org/2000/svg" width="43" height="11" viewBox="0 0 43 11" fill="none"
                            aria-hidden="true">
                            <path
                                d="M0.25603 5.02855C-0.0296253 5.3142 -0.0296253 5.77734 0.25603 6.063L4.91105 10.718C5.1967 11.0037 5.65984 11.0037 5.9455 10.718C6.23115 10.4324 6.23115 9.96922 5.9455 9.68357L1.8077 5.54577L5.9455 1.40798C6.23115 1.12232 6.23115 0.659184 5.9455 0.373528C5.65984 0.0878732 5.19671 0.0878731 4.91105 0.373528L0.25603 5.02855ZM42.3191 5.54578L42.3191 4.81431L0.773254 4.81431L0.773254 5.54577L0.773254 6.27724L42.3191 6.27724L42.3191 5.54578Z"
                                fill="black" />
                        </svg>
                    </button>
                    <button type="button" class="slick-transversal-next slick-next" aria-label="Cuvée suivante">
                        <svg xmlns="http://www.w3.org/2000/svg" width="44" height="11" viewBox="0 0 44 11" fill="none"
                            aria-hidden="true">
                            <path
                                d="M42.8366 6.0641C43.1223 5.77844 43.1223 5.31531 42.8366 5.02965L38.1816 0.37463C37.8959 0.088975 37.4328 0.088975 37.1472 0.37463C36.8615 0.660285 36.8615 1.12342 37.1472 1.40908L41.2849 5.54688L37.1472 9.68467C36.8615 9.97033 36.8615 10.4335 37.1472 10.7191C37.4328 11.0048 37.8959 11.0048 38.1816 10.7191L42.8366 6.0641ZM0.77356 5.54688V6.27834H42.3194V5.54688V4.81541H0.77356V5.54688Z"
                                fill="black" />
                        </svg>
                    </button>
                </div>
            <?php endif; ?>
        </div>

        <?php if (!empty($lien) && !empty($lien['url'])): ?>
            <div class="container text-center py-8">
                <a href="<?php echo esc_url($lien['url']); ?>" target="<?php echo esc_attr($lien['target'] ?? '_self'); ?>"
                    class="btn btn-primary" <?php if (($lien['target'] ?? '') === '_blank'): ?> rel="noopener noreferrer"
                    <?php endif; ?>>
                    <?php echo esc_html($lien['title'] ?? 'En savoir plus'); ?>
                </a>
            </div>
        <?php endif; ?>
    </div>
</section>