script.js

// ==========================================
// Email Form Handling with Formspree
// ==========================================
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('notifyForm');
    const emailInput = document.getElementById('email');
    const formMessage = document.getElementById('formMessage');

    form.addEventListener('submit', function (e) {
        e.preventDefault();

        const email = emailInput.value.trim();

        // Basic email validation
        if (!isValidEmail(email)) {
            showMessage('Please enter a valid email address', 'error');
            return;
        }

        // Submit to Formspree
        submitEmail(email);
    });

    function isValidEmail(email) {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(email);
    }

    function submitEmail(email) {
        // Show loading state
        const submitBtn = form.querySelector('.btn-primary');
        const originalText = submitBtn.textContent;
        submitBtn.textContent = 'Submitting...';
        submitBtn.disabled = true;

        // Submit to Formspree
        fetch(form.action, {
            method: 'POST',
            body: new FormData(form),
            headers: {
                'Accept': 'application/json'
            }
        })
            .then(response => {
                if (response.ok) {
                    showMessage('Thanks! We\'ll notify you when we launch! 🎉', 'success');
                    emailInput.value = '';

                    // Also store locally for backup
                    try {
                        let subscribers = JSON.parse(localStorage.getItem('dtf_subscribers') || '[]');
                        if (!subscribers.includes(email)) {
                            subscribers.push(email);
                            localStorage.setItem('dtf_subscribers', JSON.stringify(subscribers));
                        }
                    } catch (e) {
                        // Silent fail for localStorage
                    }
                } else {
                    response.json().then(data => {
                        if (data.errors) {
                            showMessage('Oops! ' + data.errors.map(e => e.message).join(', '), 'error');
                        } else {
                            showMessage('Oops! Something went wrong. Please try again.', 'error');
                        }
                    });
                }
            })
            .catch(error => {
                showMessage('Oops! Something went wrong. Please try again.', 'error');
            })
            .finally(() => {
                // Reset button
                submitBtn.textContent = originalText;
                submitBtn.disabled = false;
            });
    }

    function showMessage(message, type) {
        formMessage.textContent = message;
        formMessage.className = 'form-message ' + type;

        // Add animation
        formMessage.style.animation = 'none';
        setTimeout(() => {
            formMessage.style.animation = 'fadeInUp 0.4s ease-out';
        }, 10);
    }
});

// ==========================================
// Page Load Animations
// ==========================================
window.addEventListener('load', function () {
    // Add loaded class for any additional animations
    document.body.classList.add('loaded');
});

// ==========================================
// Optional: Add parallax effect to logo on scroll
// ==========================================
let lastScrollY = window.scrollY;

window.addEventListener('scroll', function () {
    const logo = document.querySelector('.logo');
    const scrollY = window.scrollY;

    // Subtle parallax effect
    if (logo) {
        logo.style.transform = `translateY(${scrollY * 0.3}px)`;
    }

    lastScrollY = scrollY;
}, { passive: true });

// ==========================================
// Easter Egg: Click logo for fun animation
// ==========================================
document.addEventListener('DOMContentLoaded', function () {
    const logo = document.querySelector('.logo');
    let clickCount = 0;

    if (logo) {
        logo.addEventListener('click', function () {
            clickCount++;

            // Add bounce animation
            this.style.animation = 'none';
            setTimeout(() => {
                this.style.animation = 'float 6s ease-in-out infinite, bounce 0.5s ease';
            }, 10);

            // Special effect after 5 clicks
            if (clickCount === 5) {
                createConfetti();
                clickCount = 0;
            }
        });
    }
});

function createConfetti() {
    const colors = ['#7EC8E3', '#FFD700', '#F5F1E8', '#5BA8C8'];
    const confettiCount = 50;

    for (let i = 0; i < confettiCount; i++) {
        const confetti = document.createElement('div');
        confetti.style.position = 'fixed';
        confetti.style.width = '10px';
        confetti.style.height = '10px';
        confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
        confetti.style.left = Math.random() * 100 + '%';
        confetti.style.top = '-10px';
        confetti.style.opacity = '1';
        confetti.style.borderRadius = '50%';
        confetti.style.pointerEvents = 'none';
        confetti.style.zIndex = '9999';

        document.body.appendChild(confetti);

        const duration = Math.random() * 3 + 2;
        const xMovement = (Math.random() - 0.5) * 200;

        confetti.animate([
            { transform: 'translateY(0) translateX(0) rotate(0deg)', opacity: 1 },
            { transform: `translateY(100vh) translateX(${xMovement}px) rotate(${Math.random() * 360}deg)`, opacity: 0 }
        ], {
            duration: duration * 1000,
            easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'
        }).onfinish = () => confetti.remove();
    }
}

// Add bounce animation to CSS dynamically
const style = document.createElement('style');
style.textContent = `
    @keyframes bounce {
        0%, 100% { transform: translateY(0); }
        25% { transform: translateY(-20px); }
        50% { transform: translateY(0); }
        75% { transform: translateY(-10px); }
    }
`;
document.head.appendChild(style);