{% set collection = this.productCollection %}
{% set products = this.products %}
{% if collection and products|length > 0 %}
    <section {{ attributes.defaults({ class: 'product-collection-slider' }) }} id="collection" style="position:relative; overflow:hidden; overflow:clip visible; background:#ffffff; padding:6rem 0;">
        <div style="position:relative; z-index:10; margin:0 auto; max-width:1440px; padding:0 1rem;">
            <div style="margin-bottom:4rem;">
                <div>
                    <span style="display:block; margin-bottom:1rem; color:var(--color-secondary); font-family:var(--font-label); font-size:12px; font-weight:700; letter-spacing:0.24em; text-transform:uppercase;">{{ 'theme.homepage.collection.kicker'|trans }}</span>
                    <h2 style="margin:0; color:var(--color-primary); font-family:var(--font-display); font-size:40px; font-weight:600; line-height:1.1; font-optical-sizing:auto;">{{ title|default(collection.name) }}</h2>
                </div>
            </div>

            <div
                class="splide relative"
                data-controller="collection-carousel"
                role="group"
                aria-label="{{ title|default(collection.name) }}"
                style="position:relative;"
            >
                <button
                    type="button"
                    class="collection-carousel__arrow collection-carousel__arrow--previous"
                    data-collection-carousel-target="previous"
                    data-action="collection-carousel#prev"
                    aria-label="{{ 'theme.homepage.collection.prev'|trans }}"
                    disabled
                    hidden
                >
                    <span aria-hidden="true" class="material-symbols-outlined text-[22px]">chevron_left</span>
                </button>

                <button
                    type="button"
                    class="collection-carousel__arrow collection-carousel__arrow--next"
                    data-collection-carousel-target="next"
                    data-action="collection-carousel#next"
                    aria-label="{{ 'theme.homepage.collection.next'|trans }}"
                    hidden
                >
                    <span aria-hidden="true" class="material-symbols-outlined text-[22px]">chevron_right</span>
                </button>

                <div class="product-collection-slider__viewport" style="position:relative; overflow:visible !important; clip-path:inset(-8rem 0 -8rem 0);">
                    <div class="splide__track overflow-hidden" style="overflow:visible !important;">
                        <div class="splide__list">
                            {% for product in products %}
                                {% set category = product and product.category ? product.category : null %}
                                {% set detailUrl = product and category and category.slug and product.slug ? path('shop_product', { categorySlug: category.slug, slug: product.slug }) : path('shop') %}
                                {% set imagePath = product and product.image and product.image.path ? product.image.path : null %}
                                {% set fallbackPrimaryPalette = ['#dbe6f4', '#f1d8c2', '#eed7dd', '#efe4b7', '#d9e7c7'] %}
                                {% set fallbackSecondaryPalette = ['#cbdcf0', '#efd2b8', '#e8c6d0', '#e8d895', '#cfe0a5'] %}
                                {% set fallbackPrimary = fallbackPrimaryPalette[loop.index0 % fallbackPrimaryPalette|length] %}
                                {% set fallbackSecondary = fallbackSecondaryPalette[loop.index0 % fallbackSecondaryPalette|length] %}
                                {% set rawPrimary = product and product.colorGradient1 ? product.colorGradient1|lower : '' %}
                                {% set rawSecondary = product and product.colorGradient2 ? product.colorGradient2|lower : '' %}
                                {% set rawColor = product and product.color ? product.color|lower : '' %}
                                {% set rawRibbon = product and product.ribbonCustomColor ? product.ribbonCustomColor|lower : '' %}
                                {% set blockedColors = ['#000', '#000000', 'black', 'rgb(0,0,0)', 'rgba(0,0,0,1)'] %}
                                {% set glowPrimary = rawColor and rawColor not in blockedColors
                                    ? product.color
                                    : (rawPrimary and rawPrimary not in blockedColors
                                        ? product.colorGradient1
                                        : (rawRibbon and rawRibbon not in blockedColors ? product.ribbonCustomColor : fallbackPrimary)) %}
                                {% set glowSecondary = rawColor and rawColor not in blockedColors
                                    ? product.color
                                    : (rawSecondary and rawSecondary not in blockedColors
                                        ? product.colorGradient2
                                        : fallbackSecondary) %}

                                <article class="splide__slide !h-auto" style="height:auto;">
                                    <a href="{{ detailUrl }}" data-turbo-frame="_top" style="position:relative; display:flex; height:100%; flex-direction:column; align-items:center; text-decoration:none; color:inherit; padding:0 1rem;">
                                        <div
                                            aria-hidden="true"
                                            style="pointer-events:none; position:absolute; left:50%; top:35%; height:clamp(18rem, 24vw, 24rem); width:clamp(18rem, 24vw, 24rem); transform:translate(-50%, -50%); border-radius:9999px; filter:blur(62px); background:
                                                radial-gradient(circle at 32% 42%, {{ glowPrimary }}78 0%, {{ glowPrimary }}36 26%, transparent 58%),
                                                radial-gradient(circle at 68% 40%, {{ glowSecondary }}70 0%, {{ glowSecondary }}34 28%, transparent 56%),
                                                radial-gradient(circle at 50% 56%, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0) 52%);"
                                        ></div>

                                        <div class="product-collection-slider__media" style="position:relative; z-index:10; display:flex; align-items:center; justify-content:center; margin-bottom:2.25rem;">
                                            {% if imagePath %}
                                                <twig:Image
                                                    path="{{ imagePath }}"
                                                    alt="{{ product.fullName|striptags }}"
                                                    class="h-full w-full"
                                                    row:class="flex h-full w-full items-center justify-center"
                                                    img:class="product-collection-slider__image mx-auto object-contain"
                                                    responsive="{{ false }}"
                                                    imageWidth="560"
                                                    imageHeight="760"
                                                />
                                            {% endif %}
                                        </div>

                                        <div style="max-width:15rem; text-align:center;">
                                            <h3 style="margin:0 0 0.9rem; color:var(--color-primary); font-family:var(--font-display); font-size:28px; font-weight:400; line-height:1.1; font-optical-sizing:auto;">{{ product.name|raw }}</h3>
                                            <p style="margin:0 0 1rem; color:var(--color-secondary); font-family:var(--font-label); font-size:11px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase;">{{ product.quality|default('') }}</p>
                                            <p style="margin:0; color:rgba(78,69,63,0.62); font-family:var(--font-label); font-size:10px; letter-spacing:0.26em; line-height:1.55; text-transform:uppercase;">{{ product and product.header ? product.header|striptags : 'theme.shop.card.default_header'|trans }}</p>
                                        </div>
                                    </a>
                                </article>
                            {% endfor %}
                        </div>
                    </div>
                </div>

                <div
                    class="collection-carousel__progress"
                    data-collection-carousel-target="progress"
                    role="progressbar"
                    aria-label="{{ 'theme.homepage.collection.progress'|trans }}"
                    aria-valuemin="0"
                    aria-valuemax="100"
                    aria-valuenow="0"
                    hidden
                >
                    <span
                        class="collection-carousel__progress-bar"
                        data-collection-carousel-target="progressBar"
                    ></span>
                </div>
            </div>
        </div>
    </section>
{% endif %}
