<?php
/**
 * Page 4 - The Proposal Page (page4.php)
 * Dramatic typewriter animation with final question
 */

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">
    <title>Will You Be My Valentine? 💖</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="animated-bg"></div>
    <div class="hearts-container"></div>
    
    <div class="page">
        <div class="proposal-container" style="max-width: 700px; width: 100%;">
            <!-- Typewriter Animation -->
            <div id="typewriterText" class="typewriter-text" style="min-height: 100px;"></div>
            
            <!-- Big Question -->
            <div id="bigQuestion" style="display: none;">
                <div class="big-question">
                    <span class="emoji">💖</span>
                    <span>Will You Be My Valentine?</span>
                    <span class="emoji">💖</span>
                </div>
            </div>
            
            <!-- Final Response Buttons -->
            <div id="finalButtons" style="display: none;" class="final-buttons">
                <button class="btn-response btn-yes" id="finalYesBtn" style="font-size: 1.2rem;">
                    💖 YES
                </button>
                <button class="btn-response btn-yes" id="ofCourseYesBtn" style="font-size: 1.2rem;">
                    💕 Of course YES
                </button>
            </div>
            
            <!-- Hidden Form for Submission -->
            <form id="proposalForm" action="save_response.php" method="POST" style="display: none;">
                <input type="hidden" name="response" value="YES">
                <input type="hidden" name="name" value="<?php echo sanitize(HER_NAME); ?>">
            </form>
        </div>
    </div>

    <script src="script.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            initProposalPage();
            
            // Handle second yes button
            const ofCourseYesBtn = document.getElementById('ofCourseYesBtn');
            if (ofCourseYesBtn) {
                ofCourseYesBtn.addEventListener('click', () => {
                    createConfetti(100);
                    createHeartRain(50);
                    createFireworks(window.innerWidth / 2, window.innerHeight / 2, 50);
                    
                    const form = document.getElementById('proposalForm');
                    if (form) {
                        setTimeout(() => form.submit(), 1000);
                    }
                });
            }
        });
    </script>
</body>
</html>
