{% extends "base.html" %}

{% load static %}

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

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

    .gift-box {
        width: 100px;
        height: 100px;
        position: absolute;
        left: 50%;
        bottom: 0px;
        transform: translateX(-50%);
        border-radius: 5px;
        border: 1px solid darkgray;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        z-index: 5;
        background-size: 100px;
        background-image: url({% static 'images/AL_circle_logo_black_100x100.png' %});
    }

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

    @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 text-center">
            <h2 class="display-4 font-weight-bolder my-3">
                Thanks for signing up!
            </h2>
            <div>
                <p class="mb-4 fs-5">
                    We are very excited to have you {{ email }} join us at Alphabet Learning! 
                    You will be updated before we are due to go live (this is currently estimated to be Spring 2025). 
                    Once we are live we will also send you the <strong>FREE</strong> resource credits AND a <strong>50% discount</strong>.
                    As you're an early bird, tell your friends so that they too could benefit from these exclusive offers.
                </p>

                <p class="mb-4 fs-5">
                    If you have any ideas, suggestions or requests please don’t hesitate to let us know at hello@alphabetlearning.com We would love to hear from you!
                </p>

                <p class="mb-4 fs-5">
                    Best wishes,
                </p>

                <p class="mb-4 fs-5">
                    The Alphabet Learning Team
                </p>
            </div>
        </div>
    </div>

    <script>
        function initCelebration() {
            const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
            const colors = ['#ff5258', '#ff9d3e', '#ffd850', '#2dc62b', '#197ceb', '#f19de0', '#9472eb', '#24dabc'];
            const container = document.querySelector('.celebration-container');
            const totalLetters = 420;
            
            function createSpray() {
                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 = 200 + Math.random() * 200; // Random speed for variety
                        
                        // Tighter initial spread at the source
                        const initialSpread = Math.random() * 10 - 5;
                        letter.style.left = `calc(50% + ${initialSpread}px)`;
                        
                        // Calculate trajectory
                        const duration = 2 + Math.random() * 0.5; // 1-1.5s duration
                        const xVelocity = Math.sin(angle) * speed;
                        const yVelocity = Math.cos(angle) * speed + 200; // Adjusted to ensure letters fall below their source level
                        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 * 2000,
                            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 %}