<?php
/**
 * Landing Page - index.php
 * Initial greeting with animated hearts and soft introduction
 */

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>Something Special For You 💖</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="animated-bg"></div>
    <div class="hearts-container"></div>
    
    <audio id="musicLanding" loop muted>
        <source src="<?php echo MUSIC_LANDING; ?>" type="audio/mpeg">
    </audio>
    
    <div class="page fade-in">
        <div class="card landing-card">
            <span class="emoji">💖</span>
            <h1>Hey <?php echo sanitize(HER_NAME); ?>…</h1>
            <p>I had to ask you, so I am doing it my way ❤️</p>
            <p style="font-size: 0.95rem; color: #999;">Ready?</p>
            
            <div class="btn-container">
                <button class="btn-primary" id="openBtn">
                    💖 Open It
                </button>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            initLandingPage();
            
            // Play music on first interaction
            const audio = document.getElementById('musicLanding');
            if (audio) {
                const playAudio = () => {
                    audio.muted = false;
                    audio.play().catch(e => console.log('Audio prevented:', e));
                    document.removeEventListener('click', playAudio);
                };
                document.addEventListener('click', playAudio);
            }
        });
    </script>
</body>
</html>
