<!DOCTYPE html>
<html lang="pt-PT">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rayssa Bel | Official Landing Page</title>
    <!-- Tailwind CSS para estilização moderna -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Lucide Icons para os ícones do site -->
    <script src="https://unpkg.com/lucide@latest"></script>
    <!-- Google Fonts: Inter -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap" rel="stylesheet">
    
    <style>
        body { 
            font-family: 'Inter', sans-serif; 
            background-color: #0e021a; 
            color: white;
            overflow-x: hidden;
        }

        /* Efeito de Estrelas em Movimento */
        .stars-container {
            position: fixed; inset: 0; z-index: -30; pointer-events: none;
        }

        .stars-layer {
            position: absolute; inset: 0;
            background-image: 
                radial-gradient(1px 1px at 20px 30px, #fff, rgba(0,0,0,0)),
                radial-gradient(1px 1px at 40px 70px, #fff, rgba(0,0,0,0)),
                radial-gradient(2px 2px at 50px 160px, #ddd, rgba(0,0,0,0)),
                radial-gradient(1px 1px at 90px 40px, #fff, rgba(0,0,0,0)),
                radial-gradient(1px 1px at 130px 80px, #fff, rgba(0,0,0,0));
            background-repeat: repeat;
            opacity: 0.3;
        }

        .layer-1 { background-size: 200px 200px; animation: moveStars 100s linear infinite; }
        .layer-2 { background-size: 350px 350px; animation: moveStars 150s linear infinite; opacity: 0.15; }

        @keyframes moveStars {
            from { transform: translateY(0); }
            to { transform: translateY(-1000px); }
        }

        .star-twinkle {
            position: absolute; background: white; border-radius: 50%; opacity: 0;
            animation: twinkle 4s infinite ease-in-out;
            box-shadow: 0 0 5px white;
        }

        @keyframes twinkle {
            0%, 100% { opacity: 0; transform: scale(0.5); }
            50% { opacity: 0.8; transform: scale(1.2); }
        }

        /* Utilidades Visuais */
        .glass-nav { background: rgba(14, 2, 26, 0.6); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.05); }
        .glass-card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.1); }
        
        .tab-active { color: #22d3ee; }
        .tab-active::after {
            content: ''; position: absolute; bottom: -8px; left: 0; width: 100%; height: 2px;
            background: #22d3ee; border-radius: 10px; box-shadow: 0 0 10px #22d3ee;
        }

        .hidden-section { display: none; }
        .fade-in { animation: fadeIn 0.6s ease-out forwards; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

        .shimmer { position: relative; overflow: hidden; }
        .shimmer::after {
            content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            animation: shimmer-effect 2s infinite;
        }
        @keyframes shimmer-effect { 100% { left: 100%; } }
    </style>
</head>
<body>

    <!-- Background Animado -->
    <div class="stars-container" id="star-field">
        <div class="stars-layer layer-1"></div>
        <div class="stars-layer layer-2"></div>
    </div>

    <!-- Brilhos Coloridos de Fundo -->
    <div class="fixed inset-0 -z-10 overflow-hidden pointer-events-none opacity-40">
        <div class="absolute top-[-10%] left-[-10%] w-[60%] h-[60%] bg-[#9146FF]/20 rounded-full blur-[120px]"></div>
        <div class="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-[#00f2ff]/10 rounded-full blur-[100px]"></div>
    </div>

    <!-- Navegação -->
    <nav class="fixed top-0 w-full z-50 glass-nav">
        <div class="max-w-6xl mx-auto px-6 h-20 flex items-center justify-between">
            <div class="flex items-center gap-4 cursor-pointer" onclick="switchTab('inicio')">
                <img src="https://lh3.googleusercontent.com/d/16JFpJDbwAY-QjOCsMFz4FQTUE__lXQ2U" class="w-12 h-12 rounded-full border border-white/10" alt="Logo">
                <div class="flex flex-col -space-y-1">
                    <span class="text-2xl font-black italic tracking-tighter uppercase text-white">RAYSSA BEL</span>
                    <span class="text-[8px] font-black tracking-[0.4em] text-cyan-400 uppercase opacity-80">Official Streamer</span>
                </div>
            </div>
            
            <div class="hidden md:flex gap-10 text-[10px] font-black uppercase tracking-widest text-gray-400">
                <button onclick="switchTab('inicio')" id="nav-inicio" class="relative transition-all tab-active">Início</button>
                <button onclick="switchTab('sobre')" id="nav-sobre" class="relative transition-all">Sobre</button>
                <button onclick="switchTab('apoio')" id="nav-apoio" class="relative transition-all">Apoio</button>
            </div>
            
            <a href="https://www.twitch.tv/rayssabel" target="_blank" class="bg-[#9146FF] hover:bg-[#772ce8] px-6 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all flex items-center gap-2 shadow-[0_0_20px_rgba(145,70,255,0.4)]">
                LIVE <i data-lucide="external-link" size="14"></i>
            </a>
        </div>
    </nav>

    <!-- Conteúdo Principal -->
    <main class="pt-24 pb-20">
        
        <!-- SECÇÃO: INÍCIO -->
        <section id="content-inicio" class="fade-in px-6">
            <div class="max-w-4xl mx-auto text-center py-16 space-y-8">
                <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/5 border border-white/10 text-cyan-400 text-xs font-black uppercase tracking-widest">
                    <span class="w-2 h-2 bg-red-500 rounded-full animate-pulse shadow-[0_0_8px_red]"></span>
                    Live em Breve
                </div>
                
                <h1 class="text-5xl md:text-8xl font-black tracking-tight leading-none">
                    Acompanha a gameplay com <span class="text-transparent bg-clip-text bg-gradient-to-r from-[#9146FF] via-[#d0b3ff] to-[#00f2ff]">Rayssa Bel</span>
                </h1>
                
                <p class="text-gray-300 text-lg md:text-xl max-w-2xl mx-auto font-medium opacity-80">
                    Diversão, interatividade e as melhores gameplays ao vivo. Junta-te à nossa comunidade na Twitch!
                </p>

                <div class="flex flex-col sm:flex-row gap-4 justify-center pt-4">
                    <a href="https://www.twitch.tv/rayssabel" target="_blank" class="shimmer bg-[#9146FF] px-10 py-5 rounded-2xl font-black text-lg transition-all hover:scale-105 shadow-[0_0_30px_rgba(145,70,255,0.4)] flex items-center justify-center gap-3">
                        <i data-lucide="play" fill="white"></i> SEGUIR NA TWITCH
                    </a>
                    
                    <div class="flex gap-3 justify-center">
                        <a href="https://www.instagram.com/rayssabel" target="_blank" class="p-5 glass-card rounded-2xl hover:text-pink-400 transition-all"><i data-lucide="instagram"></i></a>
                        <a href="https://discord.com/invite/cxpJWMkrdM" target="_blank" class="p-5 glass-card rounded-2xl hover:text-indigo-400 transition-all"><i data-lucide="message-square"></i></a>
                    </div>
                </div>
            </div>

            <!-- Cronograma -->
            <div class="max-w-6xl mx-auto py-10">
                <div class="text-center mb-8">
                    <div class="text-[#9146FF] font-black text-xs uppercase tracking-[0.3em] mb-2">Cronograma Semanal</div>
                    <h2 class="text-2xl font-black italic uppercase">Horário das Lives</h2>
                </div>
                <div class="grid grid-cols-2 md:grid-cols-7 gap-3" id="schedule-grid"></div>
            </div>

            <!-- Cards de Info -->
            <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 py-12">
                <div class="glass-card p-8 rounded-3xl">
                    <i data-lucide="users" class="text-purple-400 mb-4" size="32"></i>
                    <h3 class="text-xl font-black mb-2 uppercase italic">Comunidade</h3>
                    <p class="text-gray-400 text-sm">Um lugar acolhedor para quem ama games e boas conversas.</p>
                </div>
                <div class="glass-card p-8 rounded-3xl">
                    <i data-lucide="heart" class="text-pink-400 mb-4" size="32"></i>
                    <h3 class="text-xl font-black mb-2 uppercase italic">Engajamento</h3>
                    <p class="text-gray-400 text-sm">Interação constante e gameplay ativa com o chat.</p>
                </div>
                <div class="glass-card p-8 rounded-3xl">
                    <i data-lucide="bell" class="text-cyan-400 mb-4" size="32"></i>
                    <h3 class="text-xl font-black mb-2 uppercase italic">Notificações</h3>
                    <p class="text-gray-400 text-sm">Ativa o sininho na Twitch e não percas nenhuma Live!</p>
                </div>
            </div>
        </section>

        <!-- SECÇÃO: SOBRE -->
        <section id="content-sobre" class="hidden-section fade-in px-6">
            <div class="max-w-6xl mx-auto py-12 grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
                <div class="space-y-8">
                    <button onclick="switchTab('inicio')" class="flex items-center gap-2 text-gray-500 hover:text-white text-xs font-black uppercase tracking-widest transition-colors">
                        <i data-lucide="arrow-left" size="14"></i> Voltar
                    </button>
                    <h2 class="text-4xl md:text-6xl font-black italic uppercase tracking-tighter leading-none">Live leve… até não ser mais.</h2>
                    <p class="text-gray-300 text-lg leading-relaxed font-medium">
                        Rayssa é streamer carioca e entrega muito mais do que gameplay: é adrenalina, susto e risada no mesmo minuto. Do chill ao caos, ela transforma desde jogos tranquilos até terrores psicológicos em experiências intensas.
                    </p>
                    <div class="bg-white/5 border border-white/10 p-6 rounded-2xl">
                        <div class="text-purple-400 font-bold text-xs uppercase tracking-widest mb-2">Contacto Profissional</div>
                        <div class="text-white font-bold text-lg">contatorayssabel@gmail.com</div>
                    </div>
                </div>
                <div class="relative">
                    <div class="absolute -inset-4 bg-gradient-to-r from-[#9146FF] to-cyan-400 rounded-[3rem] blur-2xl opacity-20"></div>
                    <img src="https://lh3.googleusercontent.com/d/1uUKnA5BeaD53j_3rjIyduZQkjAt6muPx" class="relative rounded-[2.5rem] border border-white/20 w-full aspect-[4/5] object-cover" alt="Rayssa Bel">
                </div>
            </div>
        </section>

        <!-- SECÇÃO: APOIO -->
        <section id="content-apoio" class="hidden-section fade-in px-6">
            <div class="max-w-6xl mx-auto py-12 text-center">
                <button onclick="switchTab('inicio')" class="mb-8 inline-flex items-center gap-2 text-gray-500 hover:text-white text-xs font-black uppercase tracking-widest">
                    <i data-lucide="arrow-left" size="14"></i> Voltar
                </button>
                <h2 class="text-5xl md:text-7xl font-black italic uppercase tracking-tighter mb-16">
                    APOIE O <span class="text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-[#9146FF]">CANAL</span>
                </h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8" id="support-grid"></div>
            </div>
        </section>

    </main>

    <!-- Footer -->
    <footer class="border-t border-white/10 py-16 px-6 bg-black/20 text-center">
        <p class="text-gray-500 text-[10px] font-black uppercase tracking-[0.5em]">© 2024 Rayssa Bel • Todos os direitos reservados</p>
    </footer>

    <script>
        // Inicializar ícones Lucide
        lucide.createIcons();

        // Lógica de Navegação
        function switchTab(tabId) {
            // Esconder todas as secções
            document.querySelectorAll('main > section').forEach(section => {
                section.classList.add('hidden-section');
            });
            // Mostrar a secção selecionada
            document.getElementById('content-' + tabId).classList.remove('hidden-section');

            // Atualizar estilos da Nav
            document.querySelectorAll('nav button').forEach(btn => {
                btn.classList.remove('tab-active', 'text-white');
                btn.classList.add('text-gray-400');
            });
            const activeBtn = document.getElementById('nav-' + tabId);
            if(activeBtn) {
                activeBtn.classList.add('tab-active', 'text-white');
                activeBtn.classList.remove('text-gray-400');
            }

            window.scrollTo({ top: 0, behavior: 'smooth' });
        }

        // Popular Cronograma
        const scheduleData = [
            { day: "Seg", time: "20:00 PM", active: true },
            { day: "Ter", time: "OFF", active: false },
            { day: "Qua", time: "20:00 PM", active: true },
            { day: "Qui", time: "OFF", active: false },
            { day: "Sex", time: "20:00 PM", active: true },
            { day: "Sáb", time: "20:00 PM", active: true },
            { day: "Dom", time: "OFF", active: false }
        ];

        const scheduleGrid = document.getElementById('schedule-grid');
        scheduleData.forEach(item => {
            const div = document.createElement('div');
            div.className = `p-4 rounded-xl border text-center transition-all ${item.active ? 'bg-[#9146FF]/10 border-[#9146FF]/30' : 'bg-white/5 border-white/5 opacity-30'}`;
            div.innerHTML = `
                <div class="text-[9px] font-black uppercase tracking-widest mb-1 ${item.active ? 'text-purple-300' : 'text-gray-500'}">${item.day}</div>
                <div class="text-sm font-black italic">${item.time}</div>
            `;
            scheduleGrid.appendChild(div);
        });

        // Popular Cards de Apoio
        const supportData = [
            { t: "DONATE PIX", d: "Mensagem com voz na live!", i: "circle-dollar-sign", u: "https://pixie.gg/rayssabel", color: "yellow" },
            { t: "SEJA SUB", d: "Emotes e emblemas exclusivos.", i: "star", u: "https://www.twitch.tv/rayssabel/subscribe", color: "purple" },
            { t: "BITS", d: "Reage a momentos épicos.", i: "gem", u: "https://www.twitch.tv/rayssabel", color: "cyan" }
        ];

        const supportGrid = document.getElementById('support-grid');
        supportData.forEach(item => {
            const card = document.createElement('div');
            card.className = "glass-card p-10 rounded-[2.5rem] group hover:scale-105 transition-all flex flex-col items-center";
            card.innerHTML = `
                <div class="mb-6 p-6 rounded-2xl bg-white/5 group-hover:bg-white/10 transition-colors">
                    <i data-lucide="${item.i}" size="32"></i>
                </div>
                <h3 class="text-2xl font-black italic uppercase mb-2">${item.t}</h3>
                <p class="text-gray-400 text-sm mb-8">${item.d}</p>
                <a href="${item.u}" target="_blank" class="w-full py-4 bg-white/10 group-hover:bg-white/20 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all">Apoiar</a>
            `;
            supportGrid.appendChild(card);
        });
        lucide.createIcons();

        // Gerar Estrelas Piscantes dinamicamente
        const starField = document.getElementById('star-field');
        for(let i=0; i<50; i++) {
            const star = document.createElement('div');
            star.className = 'star-twinkle';
            star.style.top = Math.random() * 100 + '%';
            star.style.left = Math.random() * 100 + '%';
            star.style.animationDelay = Math.random() * 5 + 's';
            const size = (Math.random() * 2 + 1) + 'px';
            star.style.width = size; star.style.height = size;
            starField.appendChild(star);
        }
    </script>
</body>
</html>