<div id="tab-promotion" class="tab-content">
    <div class="grid">
        <!-- Anuncios "Go Live" -->
        <div class="card">
            <h2>🚀 Anuncios "Go Live"</h2>
            <p style="color: #888;">Avisa en Discord cuando empieces a transmitir.</p>
            <form action="/config/announcements" method="POST">
                <label>Canal de Anuncios en Discord:</label>
                <select name="channel_id" id="announcement-channel-select" required>
                    <option value="">-- Selecciona un canal de texto --</option>
                </select>

                <label style="margin-top: 1rem;">Mensaje del Anuncio:</label>
                <textarea name="message" rows="4" style="width: 100%; background: #222; border: 1px solid #444; color: #fff; padding: 10px; border-radius: 4px; box-sizing: border-box;"><%= announcementConfig.message || '¡Atención @everyone! Ya estamos en vivo en {platform}. ¡No te lo pierdas! {link}' %></textarea>
                <small style="color: #666;">Puedes usar `{platform}` y `{link}` como variables.</small>

                <div style="display: flex; align-items: center; gap: 10px; margin-top: 1rem;">
                    <input type="checkbox" name="is_active" <%= announcementConfig.is_active ? 'checked' : '' %> style="width: 20px; height: 20px;">
                    <label>Activado</label>
                </div>

                <button type="submit" class="btn-save" style="margin-top: 1rem;">💾 Guardar Anuncios</button>
            </form>
        </div>

        <!-- Comando !redes -->
        <div class="card">
            <h2>📱 Comando !redes</h2>
            <p style="color: #888;">Configura los links de tus redes sociales.</p>
            
            <form action="/config/socials/add" method="POST" style="display: flex; gap: 10px; margin-bottom: 1rem;">
                <input type="text" name="name" placeholder="Plataforma (ej: Twitch)" required style="margin:0;">
                <input type="text" name="url" placeholder="URL completa" required style="margin:0;">
                <button type="submit" class="btn-add" style="margin:0;">+</button>
            </form>

            <ul class="user-list">
                <% (socialLinks || []).forEach(function(link) { %>
                    <li class="user-item">
                        <span>
                            <strong><%= link.name %>:</strong> 
                            <a href="<%= link.url %>" target="_blank" style="color: #D4AF37; text-decoration: none;"><%= link.url %></a>
                        </span>
                        <form action="/config/socials/delete" method="POST">
                            <input type="hidden" name="id" value="<%= link.id %>">
                            <button type="submit" class="btn-remove">🗑️</button>
                        </form>
                    </li>
                <% }); %>
            </ul>
        </div>
    </div>
</div>