<script data-minify="1" src="https://nicolaipalmkvist.com/wp-content/cache/min/1/ajax/libs/gsap/3.12.2/gsap.min.js?ver=1782830202"></script>

<script>

// ============================================
// WordPress/Elementor Circular Pie Animation
// Fixed for Elementor's nested DOM structure
// ============================================

(function () {
    'use strict';

    const flavors = [];

    document.querySelectorAll('#flavors-data .flavor-data').forEach(function (el) {
        var nameEl  = el.querySelector('.flavor-name');
        var colorEl = el.querySelector('.flavor-color');
        var imageEl = el.querySelector('.flavor-image');
        var bgImgEl = el.querySelector('.flavor-bg-image');
        var descEl  = el.querySelector('.flavor-desc');

        // Robustly extract text from whichever inner tag Elementor uses
        var name  = nameEl
            ? (nameEl.querySelector('h1,h2,h3,h4,h5,h6,p,span') || nameEl).textContent.trim()
            : '';

        var color = colorEl
            ? (colorEl.querySelector('p,h1,h2,h3,h4,h5,h6,span') || colorEl).textContent.trim()
            : '';

        // Image src lives on the <img> inside the Elementor image widget
        var imgTag = imageEl ? imageEl.querySelector('img') : null;
        var image  = imgTag ? imgTag.getAttribute('src') : '';

        // Background image
        var bgTag      = bgImgEl ? bgImgEl.querySelector('img') : null;
        var bgImageUrl = bgTag ? bgTag.getAttribute('src') : '';

        if (bgImageUrl === window.location.href || bgImageUrl === '') {
            bgImageUrl = '';
        }

        // Description — extract plain text, NOT innerHTML
        var desc = descEl
            ? (descEl.querySelector('p,span') || descEl).textContent.trim()
            : '';

        flavors.push({
            name: name,
            color: color,
            image: image,
            bgImage: bgImageUrl,
            desc: desc
        });
    });

    if (flavors.length === 0) {
        console.warn('[Circular-Pie] No flavor data found in #flavors-data.');
        return;
    }

    // --- DOM References ---
    var ring         = document.getElementById('ring');
    var bgOverlay    = document.getElementById('bg-overlay');
    var pieContainer = document.getElementById('pie-container');

    if (!ring || !bgOverlay || !pieContainer) {
        console.warn(
            '[Circular-Pie] Required elements (#ring, #bg-overlay, #pie-container) missing.'
        );
        return;
    }

    // Title
    var titleEl =
        document.querySelector('#title h1') ||
        document.querySelector('#title');

    // Description
    var descWrapper = document.querySelector('#description');
    var descEl = descWrapper
        ? (descWrapper.querySelector('p') || descWrapper)
        : null;

    // Indicator ring
    var indicatorRing = document.querySelector(
        '#mainhero.main-container .indicator-ring'
    );

    // --- Fix Elementor DOM Structure ---

    // Add circle-container class to the parent of #ring
    var circleContainer = ring.parentElement;

    if (
        circleContainer &&
        !circleContainer.classList.contains('circle-container')
    ) {
        circleContainer.classList.add('circle-container');
    }

    // Move .nav-layer to be a direct child of #mainhero
    var navLayer = document.querySelector(
        '#mainhero.main-container .nav-layer'
    );

    var mainContainer = document.getElementById('mainhero');

    if (
        navLayer &&
        mainContainer &&
        navLayer.closest('.main-container') === mainContainer
    ) {
        mainContainer.appendChild(navLayer);
    }

    // Hide original Elementor placeholder image widgets
    var placeholderWidgets =
        pieContainer.querySelectorAll('.elementor-widget');

    for (var i = 0; i < placeholderWidgets.length; i++) {
        placeholderWidgets[i].style.display = 'none';
    }

    // --- State ---
    var currentIndex        = 0;
    var currentVirtualIndex = 1;
    var totalItems          = flavors.length;
    var isAnimating         = false;
    var isMobile            = window.innerWidth <= 768;

    // --- Layout Configuration ---
    function getLayoutConfig() {
        isMobile = window.innerWidth <= 768;

        if (isMobile) {
            var angleStepMobile = 360 / totalItems;

            return {
                isMobile: true,
                angleStep: angleStepMobile,
                startAngle: 0,
                ringOffset: -angleStepMobile / 2
            };
        } else {
            var maxTotalArc       = 170;
            var angleStepDesktop  = Math.min(
                35,
                maxTotalArc / Math.max(1, totalItems - 1)
            );
            var startAngleDesktop =
                -((totalItems - 1) / 2) * angleStepDesktop;

            return {
                isMobile: false,
                angleStep: angleStepDesktop,
                startAngle: startAngleDesktop,
                ringOffset: 0
            };
        }
    }

    // --- Initialize Ring ---
    function initRing() {
        ring.innerHTML = '';

        var config = getLayoutConfig();

        flavors.forEach(function (flavor, index) {
            var item = document.createElement('div');

            item.classList.add('flavor-item');
            item.dataset.index = index;

            // Curved text effect
            var text           = flavor.name;
            var charAngleStep  = config.isMobile ? 3.5 : 2.2;
            var totalAngle     = (text.length - 1) * charAngleStep;
            var startTextAngle = -totalAngle / 2;

            text.split('').forEach(function (char, i) {
                var span = document.createElement('span');

                span.textContent = char;
                span.className   = 'flavor-char';

                var charAngle =
                    startTextAngle + (i * charAngleStep);

                span.style.transform =
                    'rotate(' + charAngle + 'deg)';

                item.appendChild(span);
            });

            var angle =
                config.startAngle + (index * config.angleStep);

            item.style.transform =
                'rotate(' + angle + 'deg)';

            item.addEventListener('click', function () {
                if (!isAnimating && index !== currentIndex) {
                    if (config.isMobile) {
                        var diff = index - currentIndex;

                        if (diff > totalItems / 2) {
                            diff -= totalItems;
                        }

                        if (diff < -totalItems / 2) {
                            diff += totalItems;
                        }

                        currentVirtualIndex += diff;
                    }

                    goToFlavor(index);
                }
            });

            ring.appendChild(item);
        });

        updateUI(currentIndex, true);

        window.removeEventListener('resize', handleResize);
        window.addEventListener('resize', handleResize);
    }

    function handleResize() {
        var newIsMobile = window.innerWidth <= 768;

        if (newIsMobile !== isMobile) {
            initRing();
        }
    }

    // --- Main Transition ---
    function goToFlavor(newIndex) {
        if (isAnimating) {
            return;
        }

        isAnimating = true;

        var oldIndex = currentIndex;
        currentIndex = newIndex;

        var flavor = flavors[currentIndex];
        var config = getLayoutConfig();

        if (!config.isMobile) {
            updateUIClasses(currentIndex);
        }

        // 1. Animate Ring / Indicator
        if (config.isMobile) {
            var ringAngle =
                -currentVirtualIndex * config.angleStep +
                config.ringOffset;

            gsap.to(ring, {
                rotation: ringAngle,
                duration: 0.3,
                ease: 'power3.inOut'
            });

            var leftIndex  = currentIndex;
            var rightIndex = (currentIndex + 1) % totalItems;

            var items = ring.querySelectorAll('.flavor-item');

            items.forEach(function (item, i) {
                var targetOpacity = 0;
                var targetPointer = 'none';

                if (i === leftIndex || i === rightIndex) {
                    targetOpacity = 0.8;
                    targetPointer = 'auto';
                }

                gsap.to(item, {
                    opacity: targetOpacity,
                    duration: 0.3,
                    ease: 'power3.inOut',
                    onComplete: function () {
                        item.style.pointerEvents = targetPointer;
                    }
                });
            });

            if (indicatorRing) {
                gsap.to(indicatorRing, {
                    rotation: 0,
                    duration: 1,
                    ease: 'power3.inOut'
                });
            }
        } else {
            var indicatorAngle =
                config.startAngle +
                (currentIndex * config.angleStep);

            gsap.to(ring, {
                rotation: 0,
                duration: 0.3,
                ease: 'power3.inOut'
            });

            if (indicatorRing) {
                gsap.to(indicatorRing, {
                    rotation: indicatorAngle,
                    duration: 0.3,
                    ease: 'power3.inOut'
                });
            }
        }

        // 2. Animate Background
        var fadeLayer = document.createElement('div');

        fadeLayer.style.position = 'absolute';
        fadeLayer.style.top      = '0';
        fadeLayer.style.left     = '0';
        fadeLayer.style.width    = '100%';
        fadeLayer.style.height   = '100%';
        fadeLayer.style.zIndex   = '1';
        fadeLayer.style.opacity  = '0';

        fadeLayer.style.backgroundColor = flavor.color;

        if (
            flavor.bgImage &&
            flavor.color.includes('gradient')
        ) {
            fadeLayer.style.backgroundImage =
                'url(' + flavor.bgImage + '), ' + flavor.color;

            fadeLayer.style.backgroundSize = 'cover';
            fadeLayer.style.backgroundPosition = 'center';
        } else if (flavor.bgImage) {
            fadeLayer.style.backgroundImage =
                'url(' + flavor.bgImage + ')';

            fadeLayer.style.backgroundSize = 'cover';
            fadeLayer.style.backgroundPosition = 'center';
        } else if (flavor.color.includes('gradient')) {
            fadeLayer.style.backgroundImage = flavor.color;
        } else {
            fadeLayer.style.backgroundImage = 'none';
        }

        bgOverlay.appendChild(fadeLayer);

        gsap.to(fadeLayer, {
            opacity: 1,
            duration: 0.8,
            ease: 'power3.inOut',

            onComplete: function () {
                bgOverlay.style.backgroundColor = flavor.color;

                if (
                    flavor.bgImage &&
                    flavor.color.includes('gradient')
                ) {
                    bgOverlay.style.backgroundImage =
                        'url(' + flavor.bgImage + '), ' +
                        flavor.color;

                    bgOverlay.style.backgroundSize = 'cover';
                    bgOverlay.style.backgroundPosition = 'center';
                } else if (flavor.bgImage) {
                    bgOverlay.style.backgroundImage =
                        'url(' + flavor.bgImage + ')';

                    bgOverlay.style.backgroundSize = 'cover';
                    bgOverlay.style.backgroundPosition = 'center';
                } else if (
                    flavor.color.includes('gradient')
                ) {
                    bgOverlay.style.backgroundImage =
                        flavor.color;
                } else {
                    bgOverlay.style.backgroundImage = 'none';
                }

                fadeLayer.remove();
            }
        });

        // 3. Animate Text
        var animTargets = [];

        if (titleEl) {
            titleEl.style.translate = '';
            animTargets.push(titleEl);
        }

        if (descWrapper) {
            descWrapper.style.translate = '';
            animTargets.push(descWrapper);
        }

        if (animTargets.length) {
            var tlText = gsap.timeline();

            tlText.to(animTargets, {
                y: 0,
                opacity: 0,
                duration: 0.4,
                ease: 'power2.in',

                onComplete: function () {
                    if (titleEl) {
                        titleEl.textContent = flavor.name;
                    }

                    if (descEl) {
                        descEl.textContent = flavor.desc;
                    }
                }
            }).to(animTargets, {
                y: 0,
                opacity: 1,
                duration: 0.6,
                ease: 'power3.out'
            });
        }

        // 4. Animate Pie Image
        var oldImg =
            pieContainer.querySelector('img.hero-pie');

        var newImg = document.createElement('img');

        newImg.src       = flavor.image;
        newImg.alt       = flavor.name;
        newImg.className = 'hero-pie';
        newImg.style.opacity = 0;

        var direction =
            newIndex > oldIndex ? 1 : -1;

        var actualDirection = direction;

        if (
            oldIndex === totalItems - 1 &&
            newIndex === 0
        ) {
            actualDirection = 1;
        }

        if (
            oldIndex === 0 &&
            newIndex === totalItems - 1
        ) {
            actualDirection = -1;
        }

        gsap.set(newImg, {
            rotation: actualDirection * 45,
            scale: 1
        });

        pieContainer.appendChild(newImg);

        if (oldImg) {
            gsap.to(oldImg, {
                rotation: -actualDirection * 45,
                opacity: 0,
                scale: 1,
                duration: 1,
                ease: 'back.in',

                onComplete: function () {
                    oldImg.remove();
                }
            });
        }

        gsap.to(newImg, {
            rotation: 0,
            opacity: 1,
            scale: 1,
            duration: 0.7,
            ease: 'back.out',

            onComplete: function () {
                isAnimating = false;
            }
        });
    }

    // --- UI Class helpers ---
    function updateUIClasses(index) {
        var items =
            ring.querySelectorAll('.flavor-item');

        items.forEach(function (item, i) {
            item.style.opacity = '';
            item.style.pointerEvents = '';

            if (i === index) {
                item.classList.add('active');
            } else {
                item.classList.remove('active');
            }
        });
    }

    // --- Initial UI Setup ---
    function updateUI(index) {
        var flavor = flavors[index];
        var config = getLayoutConfig();

        if (titleEl) {
            titleEl.textContent = flavor.name;
        }

        if (descEl) {
            descEl.textContent = flavor.desc;
        }

        bgOverlay.style.backgroundColor = flavor.color;

        if (
            flavor.bgImage &&
            flavor.color.includes('gradient')
        ) {
            bgOverlay.style.backgroundImage =
                'url(' + flavor.bgImage + '), ' +
                flavor.color;

            bgOverlay.style.backgroundSize = 'cover';
            bgOverlay.style.backgroundPosition = 'center';
        } else if (flavor.bgImage) {
            bgOverlay.style.backgroundImage =
                'url(' + flavor.bgImage + ')';

            bgOverlay.style.backgroundSize = 'cover';
            bgOverlay.style.backgroundPosition = 'center';
        } else if (
            flavor.color.includes('gradient')
        ) {
            bgOverlay.style.backgroundImage =
                flavor.color;
        } else {
            bgOverlay.style.backgroundImage = 'none';
        }

        if (!config.isMobile) {
            updateUIClasses(index);
        }

        if (config.isMobile) {
            var ringAngle =
                -currentVirtualIndex * config.angleStep +
                config.ringOffset;

            gsap.set(ring, {
                rotation: ringAngle
            });

            if (indicatorRing) {
                gsap.set(indicatorRing, {
                    rotation: 0
                });
            }

            var leftIndex  = currentIndex;
            var rightIndex =
                (currentIndex + 1) % totalItems;

            var items =
                ring.querySelectorAll('.flavor-item');

            items.forEach(function (item, i) {
                if (
                    i === leftIndex ||
                    i === rightIndex
                ) {
                    item.style.opacity = 0.8;
                    item.style.pointerEvents = 'auto';
                } else {
                    item.style.opacity = 0;
                    item.style.pointerEvents = 'none';
                }
            });
        } else {
            var indicatorAngle =
                config.startAngle +
                (index * config.angleStep);

            gsap.set(ring, {
                rotation: 0
            });

            if (indicatorRing) {
                gsap.set(indicatorRing, {
                    rotation: indicatorAngle
                });
            }
        }

        // Create initial pie image
        pieContainer
            .querySelectorAll('img.hero-pie')
            .forEach(function (img) {
                img.remove();
            });

        var img = document.createElement('img');

        img.src       = flavor.image;
        img.alt       = flavor.name;
        img.className = 'hero-pie';

        pieContainer.appendChild(img);
    }

    // --- Navigation Buttons ---
    var prevBtn =
        document.getElementById('prev-btn');

    var nextBtn =
        document.getElementById('next-btn');

    if (prevBtn) {
        prevBtn.addEventListener('click', function () {
            if (!isAnimating) {
                currentVirtualIndex--;

                var newIdx = currentIndex - 1;

                if (newIdx < 0) {
                    newIdx = totalItems - 1;
                }

                goToFlavor(newIdx);
            }
        });
    }

    if (nextBtn) {
        nextBtn.addEventListener('click', function () {
            if (!isAnimating) {
                currentVirtualIndex++;

                var newIdx = currentIndex + 1;

                if (newIdx >= totalItems) {
                    newIdx = 0;
                }

                goToFlavor(newIdx);
            }
        });
    }

    if (document.readyState === 'loading') {
        document.addEventListener(
            'DOMContentLoaded',
            initRing
        );
    } else {
        initRing();
    }

})();
</script>