{# Widget Hero polyvalent - Supporte gradient, image, carrousel, vidéo #}
{% set backgroundType = config.backgroundType|default('gradient') %}
{% set height = config.height|default('medium') %}
{% set textAlignment = config.textAlignment|default('center') %}
{% set textColor = config.textColor|default('#ffffff') %}
{% set padding = config.padding|default('60px 20px') %}

{# Calcul de la hauteur #}
{% set heightValue = 'auto' %}
{% set minHeightValue = 'auto' %}
{% if height == 'small' %}
    {% set heightValue = 'auto' %}
    {% set minHeightValue = '150px' %}
{% elseif height == 'medium' %}
    {% set heightValue = '400px' %}
    {% set minHeightValue = '400px' %}
{% elseif height == 'large' %}
    {% set heightValue = '600px' %}
    {% set minHeightValue = '600px' %}
{% elseif height == 'fullscreen' %}
    {% set heightValue = '100vh' %}
    {% set minHeightValue = '100vh' %}
{% endif %}

<div class="hero-section hero-{{ backgroundType }} hero-size-{{ height }}"
     style="position: relative;
            {% if heightValue != 'auto' %}height: {{ heightValue }};{% endif %}
            min-height: {{ minHeightValue }};
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            color: {{ textColor }};
            {% if height == 'small' %}padding: 30px 20px;{% else %}padding: {{ padding }};{% endif %}">

    {# Fond selon le type #}
    {% if backgroundType == 'gradient' %}
        {# Fond dégradé #}
        {% set color1 = config.gradientColor1|default(config.gradientColors[0]|default('#667eea')) %}
        {% set color2 = config.gradientColor2|default(config.gradientColors[1]|default('#764ba2')) %}
        <div class="hero-background" style="position: absolute;
                                           top: 0;
                                           left: 0;
                                           right: 0;
                                           bottom: 0;
                                           background: linear-gradient({{ config.gradientAngle|default('135deg') }}, {{ color1 }} 0%, {{ color2 }} 100%);
                                           z-index: 1;"></div>

    {% elseif backgroundType == 'image' %}
        {# Fond image statique #}
        <div class="hero-background" style="position: absolute;
                                           top: 0;
                                           left: 0;
                                           right: 0;
                                           bottom: 0;
                                           background-image: url('{{ config.backgroundImage }}');
                                           background-size: {{ config.backgroundSize|default('cover') }};
                                           background-position: {{ config.backgroundPosition|default('center') }};
                                           background-repeat: no-repeat;
                                           z-index: 1;"></div>
        {% if config.overlay|default(true) %}
            <div class="hero-overlay" style="position: absolute;
                                            top: 0;
                                            left: 0;
                                            right: 0;
                                            bottom: 0;
                                            background: {{ config.overlayColor|default('#000000') }};
                                            opacity: {{ config.overlayOpacity|default('0.4') }};
                                            z-index: 2;
                                            pointer-events: none;"></div>
        {% endif %}

    {% elseif backgroundType == 'carousel' %}
        {# Carrousel d'images avec contenu par slide #}
        {% set carouselId = 'hero-carousel-' ~ random() %}
        {% set slides = config.carouselSlides|default([]) %}
        <div class="hero-carousel" id="{{ carouselId }}" style="position: absolute;
                                         top: 0;
                                         left: 0;
                                         right: 0;
                                         bottom: 0;
                                         z-index: 1;">
            {% if slides is not empty %}
                {% for slide in slides %}
                    <div class="hero-carousel-slide {% if loop.first %}active{% endif %}"
                         data-slide-index="{{ loop.index0 }}"
                         style="position: absolute;
                                top: 0;
                                left: 0;
                                right: 0;
                                bottom: 0;
                                background-image: url('{{ slide.image }}');
                                background-size: cover;
                                background-position: center;
                                opacity: {% if loop.first %}1{% else %}0{% endif %};
                                transition: opacity {{ config.carouselTransition|default('fade') == 'fade' ? '1.5s' : '0.5s' }} ease-in-out;">
                    </div>
                {% endfor %}

                {# Pagination en mini-bulles #}
                {% if slides|length > 1 %}
                    <div class="hero-carousel-pagination"
                         style="position: absolute;
                                bottom: 30px;
                                left: 50%;
                                transform: translateX(-50%);
                                z-index: 10;
                                display: flex;
                                gap: 10px;">
                        {% for slide in slides %}
                            <button class="hero-carousel-dot {% if loop.first %}active{% endif %}"
                                    data-slide-index="{{ loop.index0 }}"
                                    aria-label="Aller au slide {{ loop.index }}"
                                    style="width: 12px;
                                           height: 12px;
                                           border-radius: 50%;
                                           border: 2px solid white;
                                           background: {% if loop.first %}white{% else %}transparent{% endif %};
                                           cursor: pointer;
                                           transition: all 0.3s ease;
                                           padding: 0;">
                            </button>
                        {% endfor %}
                    </div>
                {% endif %}
            {% endif %}
        </div>
        {% if config.overlay|default(true) %}
            <div class="hero-overlay" style="position: absolute;
                                            top: 0;
                                            left: 0;
                                            right: 0;
                                            bottom: 0;
                                            background: {{ config.overlayColor|default('#000000') }};
                                            opacity: {{ config.overlayOpacity|default('0.4') }};
                                            z-index: 2;
                                            pointer-events: none;"></div>
        {% endif %}

    {% elseif backgroundType == 'video' %}
        {# Vidéo de fond #}
        <div class="hero-video" style="position: absolute;
                                      top: 0;
                                      left: 0;
                                      right: 0;
                                      bottom: 0;
                                      overflow: hidden;
                                      z-index: 1;">
            {% if config.videoType == 'youtube' and config.videoId %}
                <iframe src="https://www.youtube.com/embed/{{ config.videoId }}?autoplay=1&mute={{ config.videoMuted|default(true) ? '1' : '0' }}&loop={{ config.videoLoop|default(true) ? '1' : '0' }}&controls=0&showinfo=0&playlist={{ config.videoId }}"
                        style="position: absolute;
                               top: 50%;
                               left: 50%;
                               width: 100vw;
                               height: 56.25vw;
                               min-height: 100vh;
                               min-width: 177.77vh;
                               transform: translate(-50%, -50%);
                               pointer-events: none;"
                        frameborder="0"
                        allow="autoplay; encrypted-media"></iframe>
            {% elseif config.videoType == 'vimeo' and config.videoId %}
                <iframe src="https://player.vimeo.com/video/{{ config.videoId }}?autoplay=1&muted={{ config.videoMuted|default(true) ? '1' : '0' }}&loop={{ config.videoLoop|default(true) ? '1' : '0' }}&background=1"
                        style="position: absolute;
                               top: 50%;
                               left: 50%;
                               width: 100vw;
                               height: 56.25vw;
                               min-height: 100vh;
                               min-width: 177.77vh;
                               transform: translate(-50%, -50%);
                               pointer-events: none;"
                        frameborder="0"
                        allow="autoplay; fullscreen"></iframe>
            {% elseif config.videoType == 'local' and config.videoUrl %}
                <video autoplay
                       {% if config.videoMuted|default(true) %}muted{% endif %}
                       {% if config.videoLoop|default(true) %}loop{% endif %}
                       playsinline
                       style="position: absolute;
                              top: 50%;
                              left: 50%;
                              width: 100%;
                              height: 100%;
                              object-fit: cover;
                              transform: translate(-50%, -50%);">
                    <source src="{{ config.videoUrl }}" type="video/mp4">
                </video>
            {% endif %}
        </div>
        {% if config.overlay|default(true) %}
            <div class="hero-overlay" style="position: absolute;
                                            top: 0;
                                            left: 0;
                                            right: 0;
                                            bottom: 0;
                                            background: {{ config.overlayColor|default('#000000') }};
                                            opacity: {{ config.overlayOpacity|default('0.4') }};
                                            z-index: 2;
                                            pointer-events: none;"></div>
        {% endif %}
    {% endif %}

    {# Boutons de navigation du carrousel - en dehors pour éviter conflits z-index #}
    {% if backgroundType == 'carousel' and config.carouselSlides is defined and config.carouselSlides|length > 1 %}
        <button class="hero-carousel-prev-btn" aria-label="Image précédente"
                data-carousel-id="{{ carouselId }}"
                style="position: absolute;
                       left: 10px;
                       top: 50%;
                       transform: translateY(-50%);
                       z-index: 1000;
                       background: rgba(255, 255, 255, 0.3);
                       backdrop-filter: blur(10px);
                       border: none;
                       width: 50px;
                       height: 50px;
                       border-radius: 50%;
                       cursor: pointer;
                       transition: all 0.3s ease;
                       display: flex;
                       align-items: center;
                       justify-content: center;
                       color: white;
                       font-size: 20px;">
            &#8249;
        </button>
        <button class="hero-carousel-next-btn" aria-label="Image suivante"
                data-carousel-id="{{ carouselId }}"
                style="position: absolute;
                       right: 10px;
                       top: 50%;
                       transform: translateY(-50%);
                       z-index: 1000;
                       background: rgba(255, 255, 255, 0.3);
                       backdrop-filter: blur(10px);
                       border: none;
                       width: 50px;
                       height: 50px;
                       border-radius: 50%;
                       cursor: pointer;
                       transition: all 0.3s ease;
                       display: flex;
                       align-items: center;
                       justify-content: center;
                       color: white;
                       font-size: 20px;">
            &#8250;
        </button>
    {% endif %}

    {# Contenu #}
    {% if backgroundType == 'carousel' and config.carouselSlides is defined and config.carouselSlides|length > 0 %}
        {# Contenu dynamique pour chaque slide du carrousel #}
        {% for slide in config.carouselSlides %}
            <div class="hero-content hero-content-slide-{{ loop.index0 }} {% if loop.first %}active{% endif %}"
                 data-slide-index="{{ loop.index0 }}"
                 style="position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        z-index: 3;
                        max-width: 1200px;
                        padding: {{ padding }};
                        text-align: {{ textAlignment }};
                        width: 100%;
                        opacity: {% if loop.first %}1{% else %}0{% endif %};
                        transition: opacity 1.5s ease-in-out;
                        pointer-events: {% if loop.first %}auto{% else %}none{% endif %};">
                {% if slide.title %}
                    <h1 class="hero-title" style="font-size: clamp(2rem, 5vw, 3.5rem);
                                                  margin-bottom: 1.5rem;
                                                  font-weight: 700;
                                                  line-height: 1.2;
                                                  color: {{ textColor }};">
                        {{ slide.title }}
                    </h1>
                {% endif %}

                {% if slide.subtitle %}
                    <p class="hero-subtitle" style="font-size: clamp(1.125rem, 2.5vw, 1.5rem);
                                                   margin-bottom: 2rem;
                                                   opacity: 0.95;
                                                   line-height: 1.6;
                                                   color: {{ textColor }};">
                        {{ slide.subtitle }}
                    </p>
                {% endif %}

                {% if slide.showCta|default(false) and slide.ctaText %}
                    <a href="{{ slide.ctaLink|default('#') }}"
                       class="hero-cta"
                       style="display: inline-block;
                              background: var(--primary-contrast);
                              color: var(--primary-color);
                              padding: 1rem 2.5rem;
                              border-radius: 8px;
                              text-decoration: none;
                              font-weight: 600;
                              font-size: 1.125rem;
                              transition: all 0.3s ease;
                              box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);">
                        {{ slide.ctaText }}
                    </a>
                {% endif %}
            </div>
        {% endfor %}
    {% else %}
        {# Contenu statique pour les autres types (gradient, image, video) #}
        <div class="hero-content" style="position: relative;
                                         z-index: 3;
                                         max-width: 1200px;
                                         text-align: {{ textAlignment }};
                                         width: 100%;">
            {% if config.title %}
                <h1 class="hero-title" style="font-size: {% if height == 'small' %}clamp(1.75rem, 4vw, 2.5rem){% else %}clamp(2rem, 5vw, 3.5rem){% endif %};
                                              margin-bottom: {% if height == 'small' and (config.subtitle or config.showCta) %}1rem{% elseif height == 'small' %}0{% else %}1.5rem{% endif %};
                                              margin-top: 0;
                                              font-weight: 700;
                                              line-height: 1.2;
                                              color: {{ textColor }};">
                    {{ config.title }}
                </h1>
            {% endif %}

            {% if config.subtitle %}
                <p class="hero-subtitle" style="font-size: clamp(1.125rem, 2.5vw, 1.5rem);
                                               margin-bottom: 2rem;
                                               opacity: 0.95;
                                               line-height: 1.6;
                                               color: {{ textColor }};">
                    {{ config.subtitle }}
                </p>
            {% endif %}

            {% if (config.showCta is defined and config.showCta and config.ctaText is defined) or (config.showCta is not defined and config.ctaText is defined) %}
                <a href="{{ config.ctaLink|default('#') }}"
                   class="hero-cta"
                   style="display: inline-block;
                          background: var(--primary-contrast);
                          color: var(--primary-color);
                          padding: 1rem 2.5rem;
                          border-radius: 8px;
                          text-decoration: none;
                          font-weight: 600;
                          font-size: 1.125rem;
                          transition: all 0.3s ease;
                          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);">
                    {{ config.ctaText|default('En savoir plus') }}
                </a>
            {% endif %}
        </div>
    {% endif %}
</div>

{% if backgroundType == 'carousel' and config.carouselSlides is defined and config.carouselSlides|length > 1 %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    (function() {
        const carouselId = '{{ carouselId }}';
        const carousel = document.getElementById(carouselId);

        if (!carousel) return;

        const slides = carousel.querySelectorAll('.hero-carousel-slide');
        const contentSlides = document.querySelectorAll('.hero-content[data-slide-index]');
        const dots = carousel.querySelectorAll('.hero-carousel-dot');
        const prevBtn = document.querySelector('.hero-carousel-prev-btn[data-carousel-id="' + carouselId + '"]');
        const nextBtn = document.querySelector('.hero-carousel-next-btn[data-carousel-id="' + carouselId + '"]');

        if (slides.length <= 1) return;

        let currentSlide = 0;
        let autoplayInterval;
        const speed = {{ config.carouselSpeed|default(5000) }};

        function goToSlide(index) {
            // Masquer la slide actuelle (image de fond)
            slides[currentSlide].style.opacity = '0';

            // Masquer le contenu actuel
            if (contentSlides[currentSlide]) {
                contentSlides[currentSlide].style.opacity = '0';
                contentSlides[currentSlide].style.pointerEvents = 'none';
                contentSlides[currentSlide].classList.remove('active');
            }

            // Masquer le dot actuel
            if (dots[currentSlide]) {
                dots[currentSlide].style.background = 'transparent';
                dots[currentSlide].classList.remove('active');
            }

            // Afficher la nouvelle slide (image de fond)
            currentSlide = index;
            slides[currentSlide].style.opacity = '1';

            // Afficher le nouveau contenu
            if (contentSlides[currentSlide]) {
                contentSlides[currentSlide].style.opacity = '1';
                contentSlides[currentSlide].style.pointerEvents = 'auto';
                contentSlides[currentSlide].classList.add('active');
            }

            // Afficher le nouveau dot
            if (dots[currentSlide]) {
                dots[currentSlide].style.background = 'white';
                dots[currentSlide].classList.add('active');
            }
        }

        function nextSlide() {
            const nextIndex = (currentSlide + 1) % slides.length;
            goToSlide(nextIndex);
        }

        function prevSlide() {
            const prevIndex = (currentSlide - 1 + slides.length) % slides.length;
            goToSlide(prevIndex);
        }

        function startAutoplay() {
            stopAutoplay();
            autoplayInterval = setInterval(nextSlide, speed);
        }

        function stopAutoplay() {
            if (autoplayInterval) {
                clearInterval(autoplayInterval);
            }
        }

        // Navigation avec les boutons
        if (nextBtn) {
            nextBtn.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                nextSlide();
                startAutoplay();
            });
            // Support touch pour mobile
            nextBtn.addEventListener('touchend', function(e) {
                e.preventDefault();
                e.stopPropagation();
                nextSlide();
                startAutoplay();
            });
        }

        if (prevBtn) {
            prevBtn.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                prevSlide();
                startAutoplay();
            });
            // Support touch pour mobile
            prevBtn.addEventListener('touchend', function(e) {
                e.preventDefault();
                e.stopPropagation();
                prevSlide();
                startAutoplay();
            });
        }

        // Navigation avec les dots
        dots.forEach(function(dot, index) {
            dot.addEventListener('click', function(e) {
                e.preventDefault();
                goToSlide(index);
                startAutoplay();
            });
        });

        // Démarrer l'autoplay
        startAutoplay();

        // Pause au survol
        if (carousel) {
            carousel.addEventListener('mouseenter', stopAutoplay);
            carousel.addEventListener('mouseleave', startAutoplay);
        }
    })();
});
</script>
{% endif %}

<style>
.hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Effets hover pour les boutons de navigation */
.hero-carousel-prev:hover,
.hero-carousel-next:hover {
    background: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-50%) scale(1.1);
}

.hero-carousel-prev:active,
.hero-carousel-next:active {
    transform: translateY(-50%) scale(0.95);
}

/* Effets hover pour les dots */
.hero-carousel-dot:hover {
    transform: scale(1.3);
}

.hero-carousel-dot.active {
    background: white !important;
}

/* Responsive - cacher les boutons en mobile, garder uniquement les dots */
@media (max-width: 768px) {
    .hero-carousel-prev-btn,
    .hero-carousel-next-btn {
        display: none !important;
    }

    /* Dots plus visibles et plus gros en mobile */
    .hero-carousel-pagination {
        bottom: 20px !important;
    }

    .hero-carousel-dot {
        width: 12px !important;
        height: 12px !important;
        border-width: 2px !important;
    }

    /* Adaptation des hauteurs pour mobile */
    .hero-size-small {
        height: auto !important;
        min-height: 120px !important;
        padding: 20px 15px !important;
    }

    .hero-size-medium {
        height: 300px !important;
        min-height: 300px !important;
        padding: 40px 15px !important;
    }

    .hero-size-large {
        height: 400px !important;
        min-height: 400px !important;
        padding: 40px 15px !important;
    }

    .hero-size-fullscreen {
        height: 100vh !important;
        min-height: 100vh !important;
        padding: 40px 15px !important;
    }

    /* Ajuster les tailles de texte en mobile */
    .hero-title {
        font-size: clamp(1.5rem, 6vw, 2.5rem) !important;
        margin-bottom: 1rem !important;
    }

    .hero-subtitle {
        font-size: clamp(1rem, 3vw, 1.25rem) !important;
        margin-bottom: 1.5rem !important;
    }

    .hero-cta {
        padding: 0.875rem 1.5rem !important;
        font-size: 1rem !important;
    }
}

/* Très petit mobile */
@media (max-width: 480px) {
    .hero-size-small {
        min-height: 100px !important;
        padding: 15px 10px !important;
    }

    .hero-size-medium {
        height: 250px !important;
        min-height: 250px !important;
        padding: 30px 10px !important;
    }

    .hero-size-large {
        height: 350px !important;
        min-height: 350px !important;
        padding: 30px 10px !important;
    }

    .hero-title {
        font-size: clamp(1.25rem, 5vw, 2rem) !important;
    }

    .hero-subtitle {
        font-size: clamp(0.875rem, 2.5vw, 1.125rem) !important;
    }

    .hero-cta {
        padding: 0.75rem 1.25rem !important;
        font-size: 0.9375rem !important;
    }
}
</style>