script.js

document.addEventListener('DOMContentLoaded', function() {
    // Wheel configuration
    const prizes = [
        { text: "Try Again", color: "#F87171" },
        { text: "10% Off", color: "#60A5FA" },
        { text: "Free Spin", color: "#34D399" },
        { text: "20% Off", color: "#A78BFA" },
        { text: "Jackpot", color: "#FBBF24" },
        { text: "5% Off", color: "#F472B6" }
    ];
    
    const wheel = document.querySelector('.wheel');
    const spinBtn = document.getElementById('spin-btn');
    let canSpin = true;
    
    // Create wheel segments
    function createWheelSegments() {
        const segmentAngle = 360 / prizes.length;
        
        prizes.forEach((prize, index) => {
            const segment = document.createElement('div');
            segment.className = 'wheel-segment';
            segment.style.transform = `rotate(${segmentAngle * index}deg)`;
            segment.style.backgroundColor = prize.color;
            const text = document.createElement('div');
            text.className = prize.text === 'Jackpot' ? 'transform -rotate-45 translate-x-8 translate-y-8 hovered-element' : 'transform -rotate-45 translate-x-8 translate-y-8';
            text.textContent = prize.text;
segment.appendChild(text);
            
            wheel.appendChild(segment);
        });
    }
    
    // Spin the wheel
    function spinWheel() {
        if (!canSpin) return;
        
        canSpin = false;
        spinBtn.disabled = true;
        
        // Add spinning class
        wheel.classList.add('spinning');
        
        // Determine result after spin
        setTimeout(() => {
            const randomPrize = Math.floor(Math.random() * prizes.length);
            showResult(prizes[randomPrize]);
            
            // Reset wheel
            setTimeout(() => {
                wheel.classList.remove('spinning');
                wheel.style.transform = `rotate(${0}deg)`;
                canSpin = true;
                spinBtn.disabled = false;
            }, 500);
        }, 5500);
    }
    
    // Show result modal
    function showResult(prize) {
        const modal = document.createElement('div');
        modal.className = 'modal';
        modal.innerHTML = `
            <div class="modal-content">
                <h2 class="text-3xl font-bold mb-4">${prize.text}!</h2>
                <p class="text-xl mb-6">${getPrizeMessage(prize.text)}</p>
                <button class="close-modal bg-${prize.color} hover:bg-opacity-90 text-white font-bold py-2 px-6 rounded-full">
                    Awesome!
                </button>
            </div>
        `;
        
        document.body.appendChild(modal);
        modal.style.display = 'flex';
        
        modal.querySelector('.close-modal').addEventListener('click', () => {
            modal.style.display = 'none';
            setTimeout(() => modal.remove(), 300);
        });
    }
    
    // Get prize message
    function getPrizeMessage(prize) {
        const messages = {
            "Try Again": "Better luck next time!",
            "5% Off": "A small discount for your next spin!",
            "10% Off": "Nice! You got a decent discount.",
            "20% Off": "Great! That's a solid discount.",
            "Free Spin": "You get to spin again for free!",
            "Jackpot": "Congratulations! You hit the jackpot!"
        };
        return messages[prize] || "Thanks for playing!";
    }
    
    // Initialize
    createWheelSegments();
    spinBtn.addEventListener('click', spinWheel);
});