<%- include('partials/header') %>

<div class="stage-bg"></div>
<div class="stage-lights"></div>

<div style="min-height: 100vh; display: flex; align-items: center; justify-content: center;">
    <div class="glass-card text-center" style="max-width: 500px; width: 90%;">
        <h1 class="text-neon-blue mb-2" style="font-size: 2.5rem;">webTHI</h1>
        <h2 class="text-neon-purple mb-4">Videokê AI</h2>
        
        <p class="mb-4" style="color: var(--text-muted); font-size: 1.1rem;">
            Crie sua sala agora, escaneie o QR Code com o seu celular e controle a festa na palma da mão!
        </p>

        <form action="/criar-sala" method="POST" class="mb-4">
            <button type="submit" class="btn btn-neon" style="width: 100%; font-size: 1.2rem; padding: 15px;">
                <i class="fas fa-tv"></i> Abrir Telão (Código Aleatório)
            </button>
        </form>

        <form action="/criar-sala-personalizada" method="POST" class="mb-4">
            <p class="text-muted mb-2 text-left" style="font-size: 0.9rem;">Criar sala com código personalizado:</p>
            <div style="display: flex; gap: 10px;">
                <input type="text" name="codigo" class="form-control" placeholder="Ex: FESTA-DO-THIAGO" required style="margin-bottom: 0; text-transform: uppercase;">
                <button type="submit" class="btn btn-neon" style="padding: 10px 20px;">Criar</button>
            </div>
        </form>

        <hr style="border-color: rgba(255,255,255,0.1); margin: 20px 0;">

        <form action="/entrar-sala" method="POST">
            <p class="text-muted mb-2">Já tem uma sala aberta? Digite o código:</p>
            <div style="display: flex; gap: 10px;">
                <input type="text" name="codigo" class="form-control" placeholder="Ex: VK-1234" required style="margin-bottom: 0; text-transform: uppercase;">
                <button type="submit" class="btn btn-pink" style="padding: 10px 20px;">Entrar</button>
            </div>
        </form>

        <div class="mt-4">
            <a href="/admin/login" style="color: var(--text-muted); text-decoration: none; font-size: 0.9rem;">
                <i class="fas fa-lock"></i> Acesso Administrativo
            </a>
        </div>
    </div>
</div>

<%- include('partials/footer') %>
