scripts.js

// ==========================================================
// REFRIDEV — EXPERIÊNCIA COMPLETA & INTERATIVA
// ==========================================================

// Elementos Principais
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');
const items = document.querySelectorAll('.item');
const flavorBtns = document.querySelectorAll('.flavor-btn');
const currentNum = document.getElementById('currentNum');
const ambientGlow = document.getElementById('ambientGlow');
const bubblesContainer = document.getElementById('bubblesContainer');
const cartCount = document.getElementById('cartCount');
const toast = document.getElementById('toast');
const toastMsg = document.getElementById('toastMsg');

// Cart Drawer Elements
const btnCart = document.getElementById('btnCart');
const btnCloseCart = document.getElementById('btnCloseCart');
const cartOverlay = document.getElementById('cartOverlay');
const cartDrawer = document.getElementById('cartDrawer');
const cartItemsList = document.getElementById('cartItemsList');
const cartBadgeTotal = document.getElementById('cartBadgeTotal');
const cartSubtotal = document.getElementById('cartSubtotal');
const cartDiscountRow = document.getElementById('cartDiscountRow');
const cartDiscount = document.getElementById('cartDiscount');
const cartTotal = document.getElementById('cartTotal');
const couponInput = document.getElementById('couponInput');
const btnApplyCoupon = document.getElementById('btnApplyCoupon');
const couponFeedback = document.getElementById('couponFeedback');
const btnCheckout = document.getElementById('btnCheckout');

// Nutrition Modal Elements
const nutritionModal = document.getElementById('nutritionModal');
const nutritionModalOverlay = document.getElementById('nutritionModalOverlay');
const btnCloseNutrition = document.getElementById('btnCloseNutrition');
const navNutrition = document.getElementById('navNutrition');
const modalFlavorBadge = document.getElementById('modalFlavorBadge');
const modalOrigin = document.getElementById('modalOrigin');
const nutriCal = document.getElementById('nutriCal');
const nutriCarbs = document.getElementById('nutriCarbs');
const nutriSugar = document.getElementById('nutriSugar');
const nutriSodium = document.getElementById('nutriSodium');
const nutriVitamin = document.getElementById('nutriVitamin');

// Sound Elements
const btnAudio = document.getElementById('btnAudio');
const soundLabel = document.getElementById('soundLabel');

let activeIndex = 0;
const totalItems = items.length;
let isAnimating = false;
let audioEnabled = true;
let appliedDiscount = 0; // 0 a 1 (ex: 0.1 para 10%)

// Estado do Carrinho: Array de { id, flavor, packLabel, price, qty, imgCan }
let cart = [];

// Cores de brilho para cada sabor
const glowColors = [
    'rgba(234, 61, 65, 0.45)',  // Morango
    'rgba(45, 86, 67, 0.55)',   // Abacate
    'rgba(231, 160, 67, 0.45)'  // Laranja
];

// ==========================================================
// 1. WEB AUDIO API SYNTHESIZER (SOM DE LATINHA & EFEITOS)
// ==========================================================
let audioCtx = null;

function getAudioContext() {
    if (!audioCtx) {
        const AudioContext = window.AudioContext || window.webkitAudioContext;
        audioCtx = new AudioContext();
    }
    if (audioCtx.state === 'suspended') {
        audioCtx.resume();
    }
    return audioCtx;
}

// Som de Abrir Latinha (Pop + Pssshhh)
function playCanOpenSound() {
    if (!audioEnabled) return;
    try {
        const ctx = getAudioContext();
        const now = ctx.currentTime;

        // 1. O "POP" (Estalo do anel de vedação)
        const popOsc = ctx.createOscillator();
        const popGain = ctx.createGain();
        popOsc.type = 'triangle';
        popOsc.frequency.setValueAtTime(280, now);
        popOsc.frequency.exponentialRampToValueAtTime(70, now + 0.08);

        popGain.gain.setValueAtTime(0.7, now);
        popGain.gain.exponentialRampToValueAtTime(0.01, now + 0.08);

        popOsc.connect(popGain);
        popGain.connect(ctx.destination);
        popOsc.start(now);
        popOsc.stop(now + 0.09);

        // 2. O "PSSSHHH" (Gás efervescente pressurizado)
        const bufferSize = ctx.sampleRate * 0.4;
        const noiseBuffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate);
        const output = noiseBuffer.getChannelData(0);
        for (let i = 0; i < bufferSize; i++) {
            output[i] = Math.random() * 2 - 1;
        }

        const whiteNoise = ctx.createBufferSource();
        whiteNoise.buffer = noiseBuffer;

        // Filtro Bandpass para som de ar/gás realista
        const filter = ctx.createBiquadFilter();
        filter.type = 'bandpass';
        filter.frequency.setValueAtTime(3200, now + 0.03);
        filter.frequency.exponentialRampToValueAtTime(800, now + 0.35);
        filter.Q.value = 3.0;

        const noiseGain = ctx.createGain();
        noiseGain.gain.setValueAtTime(0, now);
        noiseGain.gain.setValueAtTime(0.45, now + 0.03);
        noiseGain.gain.exponentialRampToValueAtTime(0.001, now + 0.38);

        whiteNoise.connect(filter);
        filter.connect(noiseGain);
        noiseGain.connect(ctx.destination);

        whiteNoise.start(now + 0.02);
        whiteNoise.stop(now + 0.4);
    } catch (err) {
        console.warn('Audio Context não inicializado:', err);
    }
}

// Som Suave de Bolha / Transição
function playBubblePopSound() {
    if (!audioEnabled) return;
    try {
        const ctx = getAudioContext();
        const now = ctx.currentTime;
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();

        osc.type = 'sine';
        osc.frequency.setValueAtTime(450, now);
        osc.frequency.exponentialRampToValueAtTime(850, now + 0.12);

        gain.gain.setValueAtTime(0.2, now);
        gain.gain.exponentialRampToValueAtTime(0.01, now + 0.12);

        osc.connect(gain);
        gain.connect(ctx.destination);
        osc.start(now);
        osc.stop(now + 0.13);
    } catch (e) {}
}

// Som de Celebração de Sucesso (Checkout)
function playSuccessChime() {
    if (!audioEnabled) return;
    try {
        const ctx = getAudioContext();
        const now = ctx.currentTime;
        const notes = [523.25, 659.25, 783.99, 1046.50]; // C5, E5, G5, C6 (Acorde Maior)

        notes.forEach((freq, idx) => {
            const osc = ctx.createOscillator();
            const gain = ctx.createGain();
            const startTime = now + idx * 0.08;

            osc.type = 'sine';
            osc.frequency.setValueAtTime(freq, startTime);

            gain.gain.setValueAtTime(0.25, startTime);
            gain.gain.exponentialRampToValueAtTime(0.001, startTime + 0.6);

            osc.connect(gain);
            gain.connect(ctx.destination);
            osc.start(startTime);
            osc.stop(startTime + 0.65);
        });
    } catch (e) {}
}

// Alternar Som On/Off
btnAudio.addEventListener('click', () => {
    audioEnabled = !audioEnabled;
    if (audioEnabled) {
        btnAudio.classList.remove('muted');
        soundLabel.textContent = 'Som: ON';
        playBubblePopSound();
    } else {
        btnAudio.classList.add('muted');
        soundLabel.textContent = 'Som: OFF';
    }
});

// ==========================================================
// 2. SLIDER & NAVEGAÇÃO
// ==========================================================
function showSlide(newIndex) {
    if (isAnimating || newIndex === activeIndex) return;
    isAnimating = true;

    playBubblePopSound();

    // Remove active do slide atual
    items[activeIndex].classList.remove('active');
    flavorBtns[activeIndex].classList.remove('active');

    // Atualiza índice
    activeIndex = (newIndex + totalItems) % totalItems;

    // Adiciona active no novo slide
    items[activeIndex].classList.add('active');
    flavorBtns[activeIndex].classList.add('active');

    // Atualiza contador numérico
    currentNum.textContent = `0${activeIndex + 1}`;

    // Atualiza luz ambiente
    ambientGlow.style.setProperty('--current-glow', glowColors[activeIndex]);

    // Recalcula o preço exibido com base no pack selecionado
    updateSlidePrice(items[activeIndex]);

    // Efervescência
    createFizzyBurst();

    setTimeout(() => {
        isAnimating = false;
    }, 600);
}

nextBtn.addEventListener('click', () => showSlide(activeIndex + 1));
prevBtn.addEventListener('click', () => showSlide(activeIndex - 1));

flavorBtns.forEach((btn, idx) => {
    btn.addEventListener('click', () => showSlide(idx));
});

window.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowRight') showSlide(activeIndex + 1);
    if (e.key === 'ArrowLeft') showSlide(activeIndex - 1);
});

// ==========================================================
// 3. SELETOR DE PACKS (1x, 3x, 6x)
// ==========================================================
function setupPackSelectors() {
    items.forEach(item => {
        const packBtns = item.querySelectorAll('.pack-btn');
        packBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                packBtns.forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
                updateSlidePrice(item);
                playBubblePopSound();
            });
        });
    });
}
setupPackSelectors();

function updateSlidePrice(item) {
    const basePrice = parseFloat(item.getAttribute('data-base-price')) || 7.90;
    const activePackBtn = item.querySelector('.pack-btn.active');
    const mult = activePackBtn ? parseFloat(activePackBtn.getAttribute('data-mult')) : 1;
    const priceDisplay = item.querySelector('.price');

    const calculatedPrice = (basePrice * mult).toFixed(2).replace('.', ',');
    if (priceDisplay) {
        priceDisplay.textContent = calculatedPrice;
    }
}

// ==========================================================
// 4. REFLEXO METÁLICO & 3D PARALLAX NO MOUSE
// ==========================================================
document.addEventListener('mousemove', (e) => {
    const { clientX, clientY } = e;
    const centerX = window.innerWidth / 2;
    const centerY = window.innerHeight / 2;

    const moveX = (clientX - centerX) / centerX;
    const moveY = (clientY - centerY) / centerY;

    const activeItem = items[activeIndex];
    if (!activeItem) return;

    const can = activeItem.querySelector('.refrigerator');
    const fruit = activeItem.querySelector('.fruit');
    const watermark = activeItem.querySelector('.watermark');

    // 3D Tilt na lata
    if (can) {
        can.style.transform = `rotateY(${moveX * 14}deg) rotateX(${-moveY * 10}deg) translate(${moveX * 15}px, ${moveY * 10}px)`;
    }

    // Frutas em parallax oposto
    if (fruit) {
        fruit.style.transform = `translate(calc(-50% + ${-moveX * 25}px), calc(-50% + ${-moveY * 15}px))`;
    }

    // Marca d'água no fundo
    if (watermark) {
        watermark.style.transform = `translate(calc(-50% + ${moveX * 35}px), calc(-50% + ${moveY * 20}px))`;
    }
});

// ==========================================================
// 5. NAVEGAÇÃO POR SCROLL (WHEEL)
// ==========================================================
let scrollCooldown = false;

window.addEventListener('wheel', (e) => {
    // Se a sacola ou modal estiverem abertos, não muda o slide pelo scroll
    if (cartDrawer.classList.contains('open') || nutritionModal.classList.contains('open')) return;
    if (scrollCooldown || isAnimating) return;

    if (e.deltaY > 35) {
        scrollCooldown = true;
        showSlide(activeIndex + 1);
        setTimeout(() => { scrollCooldown = false; }, 750);
    } else if (e.deltaY < -35) {
        scrollCooldown = true;
        showSlide(activeIndex - 1);
        setTimeout(() => { scrollCooldown = false; }, 750);
    }
}, { passive: true });

// ==========================================================
// 6. GAVETA DA SACOLA (CART DRAWER & CHECKOUT)
// ==========================================================
function openCart() {
    cartOverlay.classList.add('open');
    cartDrawer.classList.add('open');
    playBubblePopSound();
}

function closeCart() {
    cartOverlay.classList.remove('open');
    cartDrawer.classList.remove('open');
}

btnCart.addEventListener('click', openCart);
btnCloseCart.addEventListener('click', closeCart);
cartOverlay.addEventListener('click', closeCart);

// Adiciona o item do slide atual à sacola
function handleBuyCurrentSlide() {
    const activeItem = items[activeIndex];
    const flavor = activeItem.getAttribute('data-flavor');
    const basePrice = parseFloat(activeItem.getAttribute('data-base-price')) || 7.90;
    const activePackBtn = activeItem.querySelector('.pack-btn.active');
    const packLabel = activePackBtn ? activePackBtn.getAttribute('data-label') : 'Lata 350ml';
    const mult = activePackBtn ? parseFloat(activePackBtn.getAttribute('data-mult')) : 1;
    const finalPrice = parseFloat((basePrice * mult).toFixed(2));
    const imgCan = activeItem.getAttribute('data-img-can');

    addToCart(flavor, packLabel, finalPrice, imgCan);
}

document.getElementById('btnHeaderBuy').addEventListener('click', handleBuyCurrentSlide);

function addToCart(flavor, packLabel, price, imgCan) {
    playCanOpenSound();

    // Verifica se item com mesmo sabor e pack já existe
    const existingIndex = cart.findIndex(i => i.flavor === flavor && i.packLabel === packLabel);
    if (existingIndex > -1) {
        cart[existingIndex].qty += 1;
    } else {
        cart.push({
            id: Date.now() + Math.random(),
            flavor,
            packLabel,
            price,
            qty: 1,
            imgCan
        });
    }

    renderCart();

    // Feedback Toast
    toastMsg.textContent = `${flavor} (${packLabel}) adicionado!`;
    toast.classList.add('show');
    setTimeout(() => { toast.classList.remove('show'); }, 2600);
}

function renderCart() {
    // Total de itens
    const totalQty = cart.reduce((acc, item) => acc + item.qty, 0);
    cartCount.textContent = totalQty;
    cartBadgeTotal.textContent = `${totalQty} ${totalQty === 1 ? 'item' : 'itens'}`;

    if (cart.length === 0) {
        cartItemsList.innerHTML = `
            <div class="cart-empty">
                <span class="cart-empty-icon">🛒</span>
                <p>Sua sacola está vazia.</p>
                <small>Escolha um sabor refrescante e adicione aqui!</small>
            </div>
        `;
        cartSubtotal.textContent = 'R$ 0,00';
        cartTotal.textContent = 'R$ 0,00';
        cartDiscountRow.style.display = 'none';
        return;
    }

    // Renderiza cada card de produto
    cartItemsList.innerHTML = cart.map(item => `
        <div class="cart-item-card">
            <img src="${item.imgCan}" class="cart-item-img" alt="${item.flavor}">
            <div class="cart-item-info">
                <div class="cart-item-name">${item.flavor}</div>
                <div class="cart-item-pack">${item.packLabel}</div>
                <div class="cart-item-price">R$ ${(item.price * item.qty).toFixed(2).replace('.', ',')}</div>
            </div>
            <div class="cart-qty-ctrls">
                <button class="btn-qty" onclick="changeCartQty(${item.id}, -1)">−</button>
                <span class="qty-val">${item.qty}</span>
                <button class="btn-qty" onclick="changeCartQty(${item.id}, 1)">+</button>
            </div>
            <button class="btn-remove-item" onclick="removeCartItem(${item.id})" title="Remover">✕</button>
        </div>
    `).join('');

    // Cálculo de Valores
    const rawSubtotal = cart.reduce((acc, item) => acc + (item.price * item.qty), 0);
    cartSubtotal.textContent = `R$ ${rawSubtotal.toFixed(2).replace('.', ',')}`;

    if (appliedDiscount > 0) {
        const discountVal = rawSubtotal * appliedDiscount;
        const finalTotal = rawSubtotal - discountVal;
        cartDiscountRow.style.display = 'flex';
        cartDiscount.textContent = `- R$ ${discountVal.toFixed(2).replace('.', ',')}`;
        cartTotal.textContent = `R$ ${finalTotal.toFixed(2).replace('.', ',')}`;
    } else {
        cartDiscountRow.style.display = 'none';
        cartTotal.textContent = `R$ ${rawSubtotal.toFixed(2).replace('.', ',')}`;
    }
}

window.changeCartQty = (id, delta) => {
    const item = cart.find(i => i.id === id);
    if (!item) return;
    item.qty += delta;
    if (item.qty <= 0) {
        cart = cart.filter(i => i.id !== id);
    }
    playBubblePopSound();
    renderCart();
};

window.removeCartItem = (id) => {
    cart = cart.filter(i => i.id !== id);
    playBubblePopSound();
    renderCart();
};

// Cupom de Desconto
btnApplyCoupon.addEventListener('click', () => {
    const code = couponInput.value.trim().toUpperCase();
    if (code === 'DEV10' || code === 'DEVCLUB10') {
        appliedDiscount = 0.10; // 10% de desconto
        couponFeedback.className = 'coupon-feedback success';
        couponFeedback.textContent = '✓ Cupom DEV10 aplicado: 10% de desconto!';
        playSuccessChime();
    } else if (code === '') {
        appliedDiscount = 0;
        couponFeedback.textContent = '';
    } else {
        couponFeedback.className = 'coupon-feedback error';
        couponFeedback.textContent = '✕ Cupom inválido. Tente DEV10';
    }
    renderCart();
});

// Finalizar Pedido (Checkout com Confetes!)
btnCheckout.addEventListener('click', () => {
    if (cart.length === 0) {
        alert('Sua sacola está vazia! Adicione um refrigerante antes de finalizar.');
        return;
    }

    playSuccessChime();
    startConfetti();

    toastMsg.textContent = '🎉 Pedido realizado com sucesso!';
    toast.classList.add('show');

    setTimeout(() => {
        cart = [];
        appliedDiscount = 0;
        couponInput.value = '';
        couponFeedback.textContent = '';
        renderCart();
        closeCart();
        toast.classList.remove('show');
    }, 2800);
});

// ==========================================================
// 7. MODAL DE TABELA NUTRICIONAL
// ==========================================================
function openNutritionModal() {
    const activeItem = items[activeIndex];
    modalFlavorBadge.textContent = activeItem.getAttribute('data-flavor');
    modalOrigin.textContent = `Origem: ${activeItem.getAttribute('data-origin')}`;
    nutriCal.textContent = activeItem.getAttribute('data-calories');
    nutriCarbs.textContent = activeItem.getAttribute('data-carbs');
    nutriSugar.textContent = activeItem.getAttribute('data-sugar');
    nutriSodium.textContent = activeItem.getAttribute('data-sodium');
    nutriVitamin.textContent = activeItem.getAttribute('data-vitamin');

    nutritionModalOverlay.classList.add('open');
    nutritionModal.classList.add('open');
    playBubblePopSound();
}

function closeNutritionModal() {
    nutritionModalOverlay.classList.remove('open');
    nutritionModal.classList.remove('open');
}

window.openNutritionModal = openNutritionModal;
btnCloseNutrition.addEventListener('click', closeNutritionModal);
nutritionModalOverlay.addEventListener('click', closeNutritionModal);
navNutrition.addEventListener('click', openNutritionModal);

// ==========================================================
// 8. GERADOR DE PARTÍCULAS EFERVESCENTES (GÁS)
// ==========================================================
function createBubble() {
    if (!bubblesContainer) return;
    const bubble = document.createElement('div');
    bubble.classList.add('bubble');

    const size = Math.random() * 14 + 6;
    const left = Math.random() * 100;
    const duration = Math.random() * 4 + 4;

    bubble.style.width = `${size}px`;
    bubble.style.height = `${size}px`;
    bubble.style.left = `${left}%`;
    bubble.style.animationDuration = `${duration}s`;

    bubblesContainer.appendChild(bubble);

    setTimeout(() => {
        bubble.remove();
    }, duration * 1000);
}

setInterval(createBubble, 350);

function createFizzyBurst() {
    for (let i = 0; i < 16; i++) {
        setTimeout(createBubble, i * 35);
    }
}

// ==========================================================
// 9. MOTOR DE CONFETES EM CANVAS (CHECKOUT CELEBRATION)
// ==========================================================
const canvas = document.getElementById('confettiCanvas');
const ctx = canvas.getContext('2d');
let confettiParticles = [];
let confettiAnimationId = null;

function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();

function createConfettiPiece() {
    const colors = ['#EA3D41', '#2D5643', '#E7A043', '#ffffff', '#10b981', '#f59e0b', '#3b82f6'];
    return {
        x: Math.random() * canvas.width,
        y: -20,
        size: Math.random() * 8 + 6,
        color: colors[Math.floor(Math.random() * colors.length)],
        velX: (Math.random() - 0.5) * 6,
        velY: Math.random() * 5 + 4,
        rot: Math.random() * 360,
        rotSpeed: (Math.random() - 0.5) * 10
    };
}

function startConfetti() {
    confettiParticles = [];
    for (let i = 0; i < 150; i++) {
        confettiParticles.push(createConfettiPiece());
    }

    if (confettiAnimationId) cancelAnimationFrame(confettiAnimationId);
    animateConfetti();

    setTimeout(() => {
        confettiParticles = [];
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        if (confettiAnimationId) cancelAnimationFrame(confettiAnimationId);
    }, 4000);
}

function animateConfetti() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    confettiParticles.forEach(p => {
        p.x += p.velX;
        p.y += p.velY;
        p.rot += p.rotSpeed;

        ctx.save();
        ctx.translate(p.x, p.y);
        ctx.rotate((p.rot * Math.PI) / 180);
        ctx.fillStyle = p.color;
        ctx.fillRect(-p.size / 2, -p.size / 2, p.size, p.size * 0.6);
        ctx.restore();
    });

    if (confettiParticles.length > 0) {
        confettiAnimationId = requestAnimationFrame(animateConfetti);
    }
}