{% extends "base.html" %}

{% load static %}

{% block extra_css %}
<style>
    .celebration-container {
        position: relative;
        height: 600px;
        overflow: hidden;
        background-color: white;
    }

    .letter {
        position: absolute;
        font-size: 3rem;
        font-weight: bold;
        opacity: 1;
        bottom: 100px;
        z-index: 10;
        transform-origin: center bottom;
    }

    .gift-box {
        width: 100px;
        height: 100px;
        background: #ff6b6b;
        position: absolute;
        left: 50%;
        bottom: 50px;
        transform: translateX(-50%);
        border-radius: 5px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        z-index: 5;
    }

    .gift-box::before {
        content: '';
        position: absolute;
        width: 120px;
        height: 25px;
        background: #ff8787;
        top: -15px;
        left: -10px;
        border-radius: 5px;
    }

    @keyframes spray {
        0% {
            transform: translate(0, 0) rotate(0deg);
            opacity: 1;
        }
        40% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
</style>
{% endblock %}

{% block content %}
    <div class="celebration-container">
        <div class="gift-box"></div>
    </div>
    <div class="row justify-content-center my-5">
        <div class="col-lg-12">
            <h2 class="display-4 font-weight-bolder my-3">
                Success!
            </h2>
            <div>
                <p class="display-6 mb-4" style="color: darkgray;">
                    To be informed of the site launch and receive FREE resource credits,
                    join our new customer mailing list...
                </p>
            </div>
        </div>
    </div>

    <script>
        function initCelebration() {
            const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
            const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEEAD', '#D4A5A5', '#9B59B6'];
            const container = document.querySelector('.celebration-container');
            const totalLetters = 220;
            
            function createSpray() {
                // Create all letters at once
                for(let i = 0; i < totalLetters; i++) {
                    setTimeout(() => {
                        const letter = document.createElement('div');
                        letter.className = 'letter';
                        letter.textContent = letters[Math.floor(Math.random() * letters.length)];
                        letter.style.color = colors[Math.floor(Math.random() * colors.length)];
                        
                        // Calculate spray angle (-60 to 60 degrees)
                        const angle = (Math.random() * 120 - 60) * (Math.PI / 180);
                        const speed = 300 + Math.random() * 200; // Random speed for variety
                        
                        // Calculate initial position (tighter spread at bottom)
                        const initialSpread = Math.random() * 40 - 20;
                        letter.style.left = `calc(50% + ${initialSpread}px)`;
                        
                        // Calculate trajectory
                        const duration = 6 + Math.random() * 0.5; // 1-1.5s duration
                        const xVelocity = Math.sin(angle) * speed;
                        const yVelocity = Math.cos(angle) * speed;
                        const gravity = 500; // Pixels per second squared
                        
                        // Create custom animation
                        const animation = letter.animate([
                            { transform: 'translate(0, 0) rotate(0deg)' },
                            { transform: `translate(${xVelocity}px, ${-yVelocity}px) rotate(${360 + Math.random() * 360}deg)`,
                              offset: 0.6 },
                            { transform: `translate(${xVelocity * 1.2}px, 0px) rotate(${720 + Math.random() * 360}deg)` }
                        ], {
                            duration: duration * 1000,
                            easing: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
                            fill: 'forwards'
                        });
                        
                        container.appendChild(letter);
                        
                        // Remove letter after animation
                        animation.onfinish = () => letter.remove();
                    }, i * 10); // Stagger creation slightly for more natural look
                }
            }
            
            // Create the spray once
            createSpray();
        }

        document.addEventListener('DOMContentLoaded', initCelebration);
        window.onload = initCelebration;
    </script>
{% endblock content %}

{% block extra_js %}
{% endblock %}