<?php
/**
 * Success Page - success.php
 * Celebration page after she says YES
 * Displays confetti, fireworks, and celebratory message with typewriter animation
 */

require_once 'config.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>She Said YES! 💖</title>
    <link rel="stylesheet" href="style.css">
    <style>
        .success-container {
            width: 100%;
            padding: 0 15px;
            max-width: 100%;
        }

        .celebration-headline {
            animation: fadeInUp 0.8s ease;
            font-size: clamp(1.8rem, 5vw, 2.5rem);
            margin: 20px 0 15px 0;
            line-height: 1.2;
        }

        .message-label {
            font-family: 'Dancing Script', cursive;
            font-size: clamp(1rem, 4vw, 1.3rem);
            color: var(--color-rose);
            margin-bottom: 20px;
            animation: fadeInUp 0.8s ease 0.3s both;
        }

        .success-message-typewriter {
            font-family: 'Poppins', sans-serif;
            font-size: clamp(0.95rem, 3.5vw, 1.1rem);
            line-height: 1.6;
            color: var(--color-deep-rose);
            width: 100%;
            max-width: 100%;
            margin: 20px 0;
            text-align: center;
            min-height: 200px;
            white-space: pre-wrap;
            word-wrap: break-word;
            padding: 20px 15px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 12px;
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 25px rgba(255, 77, 109, 0.15);
            animation: fadeInUp 0.8s ease 1s both;
            overflow: hidden;
            box-sizing: border-box;
        }

        .button-container {
            margin-top: 30px;
            animation: fadeInUp 0.8s ease 3s both;
            padding: 0 15px;
            width: 100%;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
        }

        .button-container button {
            display: inline-block;
            width: 100%;
            max-width: 300px;
            background: linear-gradient(135deg, var(--color-rose) 0%, var(--color-deep-rose) 100%);
            color: white;
            padding: 14px 30px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            font-size: clamp(0.95rem, 3.5vw, 1rem);
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(255, 77, 109, 0.3);
            text-align: center;
            cursor: pointer;
            border: none;
            touch-action: manipulation;
        }

        .button-container button:active {
            transform: scale(0.98);
        }

        .button-container button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 77, 109, 0.5);
        }

        /* Full Page Image Section */
        .full-page-image-section {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: black;
            z-index: 5000;
            overflow: auto;
        }

        .full-page-image-section.active {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .image-wrapper {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 0;
            box-sizing: border-box;
        }

        .image-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            animation: fadeIn 0.8s ease;
        }

        .image-back-button {
            position: fixed;
            bottom: 20px;
            width: 90%;
            max-width: 300px;
            left: 5%;
            right: 5%;
            margin: 0 auto;
            background: linear-gradient(135deg, var(--color-rose) 0%, var(--color-deep-rose) 100%);
            color: white;
            padding: 12px 30px;
            border-radius: 50px;
            font-weight: 600;
            font-size: clamp(0.9rem, 3.5vw, 1rem);
            border: none;
            cursor: pointer;
            z-index: 5001;
            box-shadow: 0 4px 15px rgba(255, 77, 109, 0.4);
            transition: all 0.3s ease;
            touch-action: manipulation;
            animation: fadeInUp 0.8s ease 0.3s both;
            text-align: center;
        }

        .image-back-button:active {
            transform: scale(0.98);
        }

        .image-back-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 77, 109, 0.5);
        }

        /* iPhone Safe Area */
        @supports (padding: max(0px)) {
            .success-container {
                padding-top: max(20px, env(safe-area-inset-top));
                padding-left: max(15px, env(safe-area-inset-left));
                padding-right: max(15px, env(safe-area-inset-right));
                padding-bottom: max(20px, env(safe-area-inset-bottom));
            }

            .image-back-button {
                bottom: max(20px, env(safe-area-inset-bottom));
            }
        }

        /* Mobile adjustments */
        @media (max-width: 480px) {
            .success-container {
                padding: 0 12px;
            }

            .celebration-headline {
                font-size: 1.6rem;
                margin: 15px 0 12px 0;
            }

            .message-label {
                font-size: 1rem;
                margin-bottom: 15px;
            }

            .success-message-typewriter {
                font-size: 0.95rem;
                line-height: 1.5;
                padding: 15px 12px;
                min-height: 180px;
                margin: 15px 0;
                border-radius: 10px;
            }

            .button-container {
                margin-top: 25px;
                padding: 0 12px;
            }

            .button-container button {
                padding: 12px 25px;
                font-size: 0.95rem;
            }

            .image-back-button {
                padding: 11px 25px;
                font-size: 0.9rem;
                bottom: 15px;
            }
        }

        /* iPhone 8 specific (375px width) */
        @media (max-width: 375px) {
            .celebration-headline {
                font-size: 1.5rem;
                margin: 12px 0 10px 0;
            }

            .message-label {
                font-size: 0.95rem;
                margin-bottom: 12px;
            }

            .success-message-typewriter {
                font-size: 0.9rem;
                line-height: 1.5;
                padding: 12px 10px;
                min-height: 160px;
                margin: 12px 0;
            }

            .button-container {
                margin-top: 20px;
                padding: 0 10px;
            }

            .button-container button {
                padding: 11px 20px;
                font-size: 0.9rem;
            }

            .image-back-button {
                padding: 10px 20px;
                font-size: 0.85rem;
                bottom: 12px;
            }
        }

        /* Landscape mode */
        @media (max-height: 500px) and (orientation: landscape) {
            .celebration-headline {
                margin: 10px 0 5px 0;
                font-size: 1.4rem;
            }

            .message-label {
                margin-bottom: 8px;
            }

            .success-message-typewriter {
                min-height: 120px;
                padding: 10px;
                margin: 8px 0;
                font-size: 0.85rem;
            }

            .button-container {
                margin-top: 15px;
            }
        }
    </style>
</head>
<body>
    <div class="animated-bg"></div>
    <div class="hearts-container"></div>
    
    <audio id="musicSuccess" autoplay muted>
        <source src="<?php echo MUSIC_SUCCESS; ?>" type="audio/mpeg">
    </audio>
    
    <!-- Main Success Page -->
    <div class="page" id="successPage" style="background: linear-gradient(135deg, #fff5f7 0%, #ffe4ec 50%, #ffcce1 100%); padding: 0; display: flex; align-items: center; justify-content: center; min-height: 100vh;">
        <div class="success-container">
            <!-- Main Headline -->
            <h1 class="celebration-headline">🎉 She Said YES!!! 💖</h1>
            
            <!-- Message Label -->
            <div class="message-label">And now for something I need to tell you…</div>
            
            <!-- Typewriter Message -->
            <div class="success-message-typewriter" id="successMessage"></div>
            
            <!-- Button Container -->
            <div class="button-container">
                <button id="showImageBtn">💭 You While I Was Building This</button>
            </div>
        </div>
    </div>

    <!-- Full Page Image Section -->
    <div class="full-page-image-section" id="fullPageImageSection">
        <div class="image-wrapper">
            <img src="assets/images/haha.jpg" 
                 alt="You While I Was Building This"
                 onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%22600%22%3E%3Crect fill=%22%23ffb6c1%22 width=%22400%22 height=%22600%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 font-size=%2224%22 text-anchor=%22middle%22 dy=%22.3em%22 fill=%22%23ff4d6d%22%3EYou While I Was Building This%3C/text%3E%3C/svg%3E'">
        </div>
        <button class="image-back-button" id="backFromImageBtn">🏠 Back to Home</button>
    </div>

    <script src="script.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            initSuccessPage();
            
            // Display typewriter message
            const message = `So here's the thing…
I tried to play it cool. I tried to act mysterious. I tried not to fall this hard.
Didn't work.

You somehow became my favorite notification. My favorite smile. My favorite distraction.

And if Valentine's Day is about choosing someone who makes your world brighter…
I already chose you, thank you for saying yes.`;
            
            const messageElement = document.getElementById('successMessage');
            
            // Start typewriter after a short delay
            setTimeout(() => {
                typewriterEffect(messageElement, message, 20, () => {
                    // Animation complete
                    console.log('Message complete!');
                });
            }, 500);
            
            // Handle image button click
            const showImageBtn = document.getElementById('showImageBtn');
            const fullPageImageSection = document.getElementById('fullPageImageSection');
            const backFromImageBtn = document.getElementById('backFromImageBtn');
            
            if (showImageBtn) {
                showImageBtn.addEventListener('click', () => {
                    fullPageImageSection.classList.add('active');
                    document.body.style.overflow = 'hidden';
                });
            }
            
            if (backFromImageBtn) {
                backFromImageBtn.addEventListener('click', () => {
                    window.location.href = 'index.php';
                });
            }
            
            // Close image on escape key
            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape' && fullPageImageSection.classList.contains('active')) {
                    fullPageImageSection.classList.remove('active');
                    document.body.style.overflow = 'auto';
                }
            });
            
            // Play success music
            const audio = document.getElementById('musicSuccess');
            if (audio) {
                // Try to play immediately
                audio.muted = false;
                audio.loop = true;
                audio.play().catch(e => {
                    console.log('Autoplay prevented, waiting for user interaction');
                    // Fallback: play on first user interaction
                    const playAudio = () => {
                        audio.muted = false;
                        audio.play().catch(err => console.log('Audio play error:', err));
                        document.removeEventListener('click', playAudio);
                        document.removeEventListener('touchstart', playAudio);
                    };
                    document.addEventListener('click', playAudio);
                    document.addEventListener('touchstart', playAudio);
                });
            }

            // Prevent zoom on double tap (improves mobile feel)
            let lastTouchEnd = 0;
            document.addEventListener('touchend', function(event) {
                let now = new Date().getTime();
                if (now - lastTouchEnd <= 300) {
                    event.preventDefault();
                }
                lastTouchEnd = now;
            }, false);
        });
    </script>
</body>
</html>