<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5 Years of Us ❤️</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Quicksand:wght@300;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body {
            background: #0f172a;
            color: white;
            font-family: 'Quicksand', sans-serif;
            overflow-x: hidden;
        }
        .font-romantic { font-family: 'Dancing Script', cursive; }
        .glass {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .heart {
            position: absolute;
            color: #f43f5e;
            animation: float 5s linear infinite;
            opacity: 0;
        }
        @keyframes float {
            0% { transform: translateY(100vh) scale(0); opacity: 1; }
            100% { transform: translateY(-10vh) scale(1.5); opacity: 0; }
        }
    </style>
</head>
<body>

    <div id="hearts-container"></div>

    <main class="relative z-10 min-h-screen flex flex-col items-center justify-center p-6 text-center">
        
        <div class="animate__animated animate__fadeInDown">
            <h1 class="text-5xl md:text-7xl font-romantic text-pink-500 mb-2">Selamat Ulang Tahun Sygggg</h1>
            <p class="text-lg tracking-[0.2em] uppercase opacity-70">1,825 Hari Penuh Makna</p>
        </div>

        <div class="mt-10 animate__animated animate__zoomIn animate__delay-1s">
            <div class="relative inline-block">
                <div class="absolute -inset-2 bg-gradient-to-r from-pink-500 to-purple-600 rounded-2xl blur opacity-75"></div>
                <!-- Gunakan asset gambar dummy jika gambar asli tidak ada -->
                <img src="<?php echo e(asset('img/foto.jpg')); ?>" onerror="this.src='https://images.unsplash.com/photo-1518199266791-5375a83190b7?q=80&w=2070&auto=format&fit=crop'" alt="Kenangan Kita" class="relative rounded-2xl w-64 h-80 object-cover shadow-2xl border-2 border-white/20">
            </div>
        </div>

        <div class="mt-12 max-w-lg glass p-8 rounded-3xl animate__animated animate__fadeInUp animate__delay-2s">
            <p class="text-lg leading-relaxed italic">
                "Aku tau mungkin ini tahun terberat untuk kita, banyak hal yang sudah kita lalui bersama. Percayalah, Tuhan akan selalu bersama kita. Semoga hal-hal yang telah kita lewati bersama, menjadikan sygg Pribadi yang lebih kuat, dan sebagai jalan menuju Kebahagiaan sygg sesungguhnya.<b>Satu hal yang sygg harus tau, hal yang tidak pernah luntur</b> 
                <span class="text-pink-400 font-bold">Rasaku padamu.<br>Love You So Much</span>"
            </p>
            <div class="mt-6 flex justify-center gap-4">
                <div class="text-center">
                    <span class="block text-2xl font-bold">5</span>
                    <span class="text-[10px] uppercase">Tahun</span>
                </div>
                <div class="w-[1px] bg-white/20"></div>
                <div class="text-center">
                    <span class="block text-2xl font-bold">60</span>
                    <span class="text-[10px] uppercase">Bulan</span>
                </div>
                <div class="w-[1px] bg-white/20"></div>
                <div class="text-center">
                    <span class="block text-2xl font-bold">∞</span>
                    <span class="text-[10px] uppercase">Selamanya</span>
                </div>
            </div>
        </div>

        <a href="<?php echo e(route('chat')); ?>" class="mt-12 text-sm opacity-50 hover:opacity-100 transition">
            <i class="fa-solid fa-arrow-left"></i> Kembali ke Chat
        </a>

    </main>

    <script>
        // Efek Hati Berjatuhan
        function createHeart() {
            const heart = document.createElement('div');
            heart.classList.add('heart');
            heart.innerHTML = '❤️';
            heart.style.left = Math.random() * 100 + 'vw';
            heart.style.animationDuration = Math.random() * 3 + 2 + 's';
            heart.style.fontSize = Math.random() * 20 + 10 + 'px';
            
            document.getElementById('hearts-container').appendChild(heart);
            
            setTimeout(() => {
                heart.remove();
            }, 5000);
        }

        setInterval(createHeart, 300);
    </script>

</body>
</html>
<?php /**PATH C:\xampp\htdocs\privatchat-laravel\resources\views/surprise.blade.php ENDPATH**/ ?>