<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="🎉 Birthday Surprise for Tee! A special 22nd birthday celebration website with music, video, and heartfelt messages.">
    <meta name="keywords" content="birthday, surprise, celebration, 22nd birthday, Tee">
    <meta name="author" content="Birthday Surprise Creator">
    <meta name="robots" content="index, follow">
    
    <!-- Mobile-specific meta tags -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="Birthday Surprise">
    <meta name="theme-color" content="#667eea">
    <meta name="msapplication-TileColor" content="#667eea">
    
    <!-- Open Graph Meta Tags for better social sharing -->
    <meta property="og:title" content="🎉 Birthday Surprise for Tee! 🎉">
    <meta property="og:description" content="A special 22nd birthday celebration with music, video, and heartfelt messages.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="">
    <meta property="og:image" content="">
    
    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="🎉 Birthday Surprise for Tee! 🎉">
    <meta name="twitter:description" content="A special 22nd birthday celebration with music, video, and heartfelt messages.">
    
    <!-- Favicon and App Icons -->
    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎂</text></svg>">
    <link rel="apple-touch-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎂</text></svg>">
    
    <!-- Preload critical resources -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Poppins:wght@300;400;600&display=swap" as="style">
    <link rel="preload" href="happy-birthday-334876.mp3" as="fetch" type="audio/mpeg">
    <link rel="preload" href="Tee_my_blue.mp4" as="fetch" type="video/mp4">
    
    <!-- DNS prefetch for external domains -->
    <link rel="dns-prefetch" href="//fonts.googleapis.com">
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link rel="dns-prefetch" href="//open.spotify.com">
    
    <!-- Stylesheets -->
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Poppins:wght@300;400;600&display=swap">
    
    <!-- Security headers -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data:; media-src 'self'; frame-src https://open.spotify.com;">
    
    <title>🎉 Birthday Surprise! 🎉</title>
</head>
<body>
    <!-- Background Birthday Melody -->
    <audio id="birthdayMelody" loop preload="metadata">
        <source src="happy-birthday-334876.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
    
    <!-- Audio Control Button -->
    <button id="audioControl" class="audio-control-btn" title="Toggle Background Music" aria-label="Toggle Background Music">🎵</button>

    <!-- Page 1: Introduction -->
    <div id="page1" class="page active" role="main">
        <div class="container">
            <div class="stars" aria-hidden="true"></div>
            <div class="twinkling" aria-hidden="true"></div>
            <div class="content">
                <h1 class="title">🎂 Today is the Day! 🎂</h1>
                <div class="message">
                    <p class="main-text">Someone very special is turning <span class="highlight">22</span> today!</p>
                    <p class="sub-text">And someone (that's me) made a surprise using his new skills for her... 💝</p>
                    <p class="funny-text">(Yes, I actually learned to code for this! 😅)</p>
                </div>
                <div class="birthday-cake" aria-label="Birthday cake emojis">
                    🎂✨🎈
                </div>
                <div class="cute-message">
                    <p>🎵 "Happy Birthday to you, Happy Birthday to you..." 🎵</p>
                    <p class="small-text">(Don't worry, I won't actually sing... my voice is worse than my coding! 😂)</p>
                </div>
                <button class="next-btn" onclick="showPage(2)" aria-label="Continue to next page">🎭 Ready for it? Click Here! 🎭</button>
            </div>
        </div>
    </div>

    <!-- Page 2: Are you ready? -->
    <div id="page2" class="page" role="main">
        <div class="container">
            <div class="stars" aria-hidden="true"></div>
            <div class="twinkling" aria-hidden="true"></div>
            <div class="content">
                <h2 class="ready-title">Are you ready to see this? 🤔</h2>
                <div class="tease-container">
                    <p class="tease-text">Hmm... I wonder what it could be... 🤔</p>
                    <p class="tease-text">Maybe you should wait a bit longer... 😏</p>
                    <p class="tease-text">Just kidding! Here's your surprise! 🎉</p>
                    <p class="funny-note">(I'm such a tease, I know! 😈)</p>
                </div>
                <div class="funny-facts">
                    <p class="fact">💡 Fun fact: I spent more time on this website than I did on my actual job this week! 😅</p>
                    <p class="fact">💡 Final fact: I googled "how to make things cute" 23 times! 🎀</p>
                </div>
                <button id="surpriseBtn" class="surprise-btn" aria-label="Click for surprise">🎁 Click for Surprise! 🎁</button>
                <button class="back-btn" onclick="showPage(1)" aria-label="Go back to previous page">🔙 Go Back (if you're scared! 😱)</button>
            </div>
        </div>
    </div>

    <!-- Page 3: Birthday Wishes -->
    <div id="page3" class="page" role="main">
        <div class="container">
            <div class="stars" aria-hidden="true"></div>
            <div class="twinkling" aria-hidden="true"></div>
            <div class="content">
                <h1 class="birthday-wish">🎉 HAPPY BIRTHDAY <span class="tee-name">TEEE!</span> 🎉</h1>
                <div class="wishes">
                    <p class="wish-text">Wishing you the very very happiest birthday ever, Pookie! 🌟</p>
                    <p class="wish-text">May all your dreams come true and may this year bring you endless joy, love, and amazing adventures! ✨</p>
                    <p class="funny-wish">(And may your WiFi never fail when you're watching Netflix! 📺)</p>
                </div>
                <div class="note">
                    <h3>💌 A Special Note For You:</h3>
                    <p class="note-text">
                        You are the most amazing person I've ever met, Your smile lights up my world, 
                        your laughter is the sweetest music, and your presence makes every day better. 
                        Thank you for being you, for being in my life, and for making every moment special. 
                        I hope this birthday is as wonderful as you are! 💖
                    </p>
                    <p class="funny-note">(I know, I know, I'm being super cheesy right now! 🧀 But it's true!)</p>
                </div>
                <div class="birthday-quotes">
                    <p class="quote">🎭 "You're not getting older, you're getting more awesome!" 🚀</p>
                    <p class="quote">🎭 "22 is the new 21... or something like that!" 🎯</p>
                </div>
                <div class="balloons" aria-label="Birthday balloons">
                    🎈🎈🎈🎈🎈🎈🎈🎈
                </div>
                <button class="next-btn" onclick="showVideoModal()" aria-label="Continue to video surprise">🎬 Ready for the Video Surprise? 🎬</button>
                <button class="back-btn" onclick="showPage(2)" aria-label="Go back to previous page">🔙 Go Back</button>
            </div>
        </div>
    </div>

    <!-- Video Modal -->
    <div id="videoModal" class="modal" role="dialog" aria-labelledby="modal-title">
        <div class="modal-content">
            <span class="close" aria-label="Close modal">&times;</span>
            <h2 id="modal-title" class="modal-title">🎬 Here's one more surprise for you! 🎬</h2>
            <p class="modal-subtitle">(I hope you like it! I spent way too long editing this! 😅)</p>
            <video id="birthdayVideo" controls preload="metadata">
                <source src="Tee_my_blue.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
            <div class="video-notes">
                <p>💡 Tip: Don't cry too much, you'll ruin your makeup! 💄</p>
            </div>
            <button class="next-btn" onclick="closeVideoAndContinue()" aria-label="Continue to final message">💝 Continue to Final Message 💝</button>
        </div>
    </div>

    <!-- Page 4: The Vibe (Spotify Playlist) -->
    <div id="page4" class="page" role="main">
        <div class="container">
            <div class="stars" aria-hidden="true"></div>
            <div class="twinkling" aria-hidden="true"></div>
            <div class="content">
                <h1 class="vibe-title">🎵 The Vibe 🎵</h1>
                <div class="vibe-intro">
                    <p class="vibe-text">Here's a special playlist just for your birthday! 🎉</p>
                    <p class="vibe-subtext">(I may have stalked your Spotify to find your favorite songs! 😏)</p>
                </div>
                <div class="spotify-container">
                    <iframe data-testid="embed-iframe" style="border-radius:12px" src="https://open.spotify.com/embed/playlist/10Lsr8geif0XeuPpOa6OWT?utm_source=generator&theme=0" width="100%" height="352" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy" title="Birthday Spotify Playlist"></iframe>
                </div>
                <div class="playlist-notes">
                    <p>🎧 Perfect for dancing around your room like nobody's watching!</p>
                    <p>🎧 Or for having a solo karaoke session in the shower! 🚿</p>
                    <p>🎧 Or just vibing while you read all these sweet messages! 💕</p>
                </div>
                <button class="next-btn" onclick="showPage(5)" aria-label="Continue to final message">💝 Continue to Final Message 💝</button>
                <button class="back-btn" onclick="showPage(3)" aria-label="Go back to previous page">🔙 Go Back</button>
            </div>
        </div>
    </div>

    <!-- Final Page: Thank You -->
    <div id="page5" class="page" role="main">
        <div class="container">
            <div class="stars" aria-hidden="true"></div>
            <div class="twinkling" aria-hidden="true"></div>
            <div class="content">
                <h1 class="thank-you">💝 Thank You! 💝</h1>
                <div class="final-message">
                    <p class="final-text">Thank you for coming into my life and making it so much better! 🌟</p>
                    <p class="final-text">You've brought so much joy, love, and happiness to my world. ✨</p>
                    <p class="final-text">I'm so grateful for every moment we've shared together! 💖</p>
                    <p class="final-text">Just keep slaying like this forever and ever 💖</p>
                    <p class="funny-final">(Even the times when you made fun of my terrible jokes! 😂)</p>
                </div>
                <div class="signature">
                    <p class="signature-text">With all my love,</p>
                    <p class="signature-name">Your dumbest enemy 😄</p>
                    <p class="signature-sub">(But also your biggest fan! 🥰)</p>
                </div>
                <div class="final-jokes">
                    <p class="joke">🎭 What do you call someone who's 22 and still doesn't know how to adult? Tee! 😅</p>
                    <p class="joke">🎭 I refresh this page infinite times while testing? Let's just say I'm very thorough! 🔄</p>
                </div>
                <div class="hearts" aria-label="Heart emojis">
                    💕💖💗💓💝💕💖💗💓💝
                </div>
                <button class="restart-btn" onclick="location.reload()" aria-label="Restart the birthday surprise">🔄 Watch it Again! (Because why not?) 🔄</button>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <script src="script.js" defer></script>
</body>
</html>
