<?php
// index.php
require_once 'config.php';

ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

$database = new DatabaseConfig();
$conn = $database->getConnection();

// Registrar visita atual
registerVisit($conn, 'index.php');

// Processar voto da enquete se o formulário foi enviado
$vote_success = false;
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['poll_vote'])) {
    $option_id = isset($_POST['option_id']) ? $_POST['option_id'] : '';
    if (!empty($option_id)) {
        $vote_success = registerPollVote($conn, $option_id);
    }
}

// Processar pedido musical se formulário foi enviado
$request_success = false;
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['music_request'])) {
    $request_data = array(
        'listener_name' => isset($_POST['listener_name']) ? $_POST['listener_name'] : '',
        'song_artist' => isset($_POST['song_artist']) ? $_POST['song_artist'] : '',
        'song_title' => isset($_POST['song_title']) ? $_POST['song_title'] : '',
        'message' => isset($_POST['message']) ? $_POST['message'] : '',
        'contact_info' => isset($_POST['contact_info']) ? $_POST['contact_info'] : ''
    );
    
    $request_success = registerMusicRequest($conn, $request_data);
}

// Obter dados do banco
$site_config = getSiteConfig($conn);
$color_scheme = getActiveColorScheme($conn);
$news = getNewsFromAPI($conn, 4);
$sponsors_rotative = getSponsorsWithImages($conn, 'rotativo', 4);
$sponsors_destaque = getSponsorsDestaque($conn, 5);
$sponsors_lateral = getSponsorsWithImages($conn, 'lateral', 4);
$poll = getActivePoll($conn);
$carousel_items = getCarouselItems($conn, 4);
$banner_ads = getBannerAds($conn, '300x250', 6);
$site_stats = getSiteStatistics($conn);
$social_media = getSocialMedia($conn);
$mobile_apps = getMobileApps($conn);

// Obter dados adicionais
$header_logo = getSiteLogo($conn, 'header');
$camera_config = getCameraConfig($conn);
$camera_url = isset($camera_config['camera_url']) ? $camera_config['camera_url'] : '';

// Obter mensagens do chat
$chat_messages = getChatMessages($conn, 20);
$chat_config = getChatConfig($conn);

// Obter temperatura (APIS REAIS)
$weather_data = getWeatherData('Mossoró');

// Obter música atual
$stream_url = isset($site_config['stream_url']) ? $site_config['stream_url'] : 'https://stm1.midiahosts.com:6678';
$stream_stats = getShoutcastStatsWithCurl($stream_url);
$current_song = isset($stream_stats['current_song']) ? $stream_stats['current_song'] : 'Carregando...';

// Forçar status online
$stream_stats['status'] = 'online';

// Processar esquema de cores
$primary_color = isset($color_scheme['primary_color']) ? $color_scheme['primary_color'] : '#FF6B35';
$secondary_color = isset($color_scheme['secondary_color']) ? $color_scheme['secondary_color'] : '#2A5298';
$accent_color = isset($color_scheme['accent_color']) ? $color_scheme['accent_color'] : '#FF4081';
$dark_color = isset($color_scheme['dark_color']) ? $color_scheme['dark_color'] : '#1A1A2E';
$light_color = isset($color_scheme['light_color']) ? $color_scheme['light_color'] : '#F8F9FA';
$background_color = isset($color_scheme['background_color']) ? $color_scheme['background_color'] : '#1A1A2E';
$text_color = isset($color_scheme['text_color']) ? $color_scheme['text_color'] : '#FFFFFF';

// Verificar se deve usar imagem de fundo
$use_bg_image = isset($color_scheme['use_background_image']) && $color_scheme['use_background_image'];
$bg_image = isset($color_scheme['background_image']) ? $color_scheme['background_image'] : '';

// Obter espaços publicitários
$ad_spaces = getAllAdSpaces($conn);

// =============================================================================
// OBTER TODOS OS BANNERS 1070x320 INDIVIDUALMENTE - CONTROLE POR TABELA/COLUNA
// =============================================================================

// Banners principais no conteúdo
$banner_grande_1 = getBanner1070x320($conn, 'espaco_publicitario_1');
$banner_grande_2 = getBanner1070x320($conn, 'espaco_publicitario_2');
$banner_grande_3 = getBanner1070x320($conn, 'espaco_publicitario_3');
$banner_grande_4 = getBanner1070x320($conn, 'espaco_publicitario_4');
$banner_grande_5 = getBanner1070x320($conn, 'espaco_publicitario_5'); // NOVO
$banner_grande_top = getBanner1070x320($conn, 'topo');

// Banners na sidebar
$banner_grande_sidebar = getBanner1070x320($conn, 'lateral');
$banner_grande_mobile = getBanner1070x320($conn, 'mobile');

// Banners para NOSSOS PATROCINADORES
$banner_patrocinadores_1 = getBanner1070x320($conn, 'patrocinadores_1');
$banner_patrocinadores_2 = getBanner1070x320($conn, 'patrocinadores_2');
$banner_patrocinadores_3 = getBanner1070x320($conn, 'patrocinadores_3');

// Banner para PARCEIROS
$banner_parceiros = getBanner1070x320($conn, 'parceiros');

// Banners extras
$banner_extra_1 = getBanner1070x320($conn, 'extra_1');

// Obter carousel de MAIS PATROCINADORES
$sponsors_carousel = getSponsorsCarousel($conn, 10);

// Obter carousel de NOSSOS PATROCINADORES
$patrocinadores_carousel = getSponsorsCarousel($conn, 6, 'principal');
?>

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo isset($site_config['site_name']) ? $site_config['site_name'] : 'Rádio Conexão Pop'; ?> - A Rádio Mais Ouvida</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        :root {
            --primary: <?php echo $primary_color; ?>;
            --secondary: <?php echo $secondary_color; ?>;
            --accent: <?php echo $accent_color; ?>;
            --dark: <?php echo $dark_color; ?>;
            --light: <?php echo $light_color; ?>;
            --background: <?php echo $background_color; ?>;
            --text: <?php echo $text_color; ?>;
            --gray: #6C757D;
        }
        
        body {
            color: var(--text);
            line-height: 1.6;
            min-height: 100vh;
            <?php if ($use_bg_image && !empty($bg_image)): ?>
            background: linear-gradient(rgba(26, 26, 46, 0.85), rgba(26, 26, 46, 0.85)), 
                        url('uploads/backgrounds/<?php echo $bg_image; ?>');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            background-repeat: no-repeat;
            <?php else: ?>
            background: var(--background);
            <?php endif; ?>
        }
        
        /* Estilos quando imagem de fundo está ativa */
        <?php if ($use_bg_image && !empty($bg_image)): ?>
        .main-content,
        .sidebar,
        .chat-container,
        .poll-container,
        .stats-container,
        .weather-container,
        .news-card,
        .app-card,
        .ad-space,
        .webtv-player,
        .banner-large,
        .patrocinadores-banner,
        .patrocinadores-banner-full,
        .parceiros-banner,
        .sidebar-banner-carousel,
        .sponsor-carousel-large {
            background: rgba(26, 26, 46, 0.85) !important;
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
        }
        
        /* Melhorar legibilidade do texto */
        .section-title,
        .news-title,
        .stat-number,
        .weather-temp,
        .weather-city,
        .news-excerpt,
        .stat-label,
        .form-label,
        .poll-option label {
            text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
        }
        
        /* Ajustar cores para melhor contraste */
        .section-title {
            color: var(--primary) !important;
            border-bottom-color: var(--primary) !important;
        }
        
        .weather-temp {
            color: var(--accent) !important;
        }
        
        .stat-number {
            color: var(--accent) !important;
        }
        
        /* Ajustar transparência do menu */
        .radio-player {
            background: rgba(26, 26, 46, 0.95) !important;
            backdrop-filter: blur(10px);
        }
        <?php endif; ?>
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }
        
        /* Botão Flutuante do WhatsApp */
        .whatsapp-float {
            position: fixed;
            width: 60px;
            height: 60px;
            bottom: 25px;
            right: 25px;
            background-color: #25d366;
            color: white;
            border-radius: 50px;
            text-align: center;
            font-size: 30px;
            box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: all 0.3s ease;
            animation: pulse-whatsapp 2s infinite;
        }
        
        .whatsapp-float:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 25px rgba(37, 211, 102, 0.6);
            text-decoration: none;
            color: white;
        }
        
        @keyframes pulse-whatsapp {
            0% {
                box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
            }
            50% {
                box-shadow: 0 4px 25px rgba(37, 211, 102, 0.8);
            }
            100% {
                box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
            }
        }
        
        /* Content Layout */
        .content-wrapper {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 30px;
            margin: 30px 0;
        }
        
        .main-content {
            background: rgba(255,255,255,0.05);
            backdrop-filter: blur(10px);
            padding: 30px;
            border-radius: 15px;
            border: 1px solid rgba(255,255,255,0.1);
        }
        
        .sidebar {
            background: rgba(255,255,255,0.05);
            backdrop-filter: blur(10px);
            padding: 30px;
            border-radius: 15px;
            border: 1px solid rgba(255,255,255,0.1);
        }
        
        /* Section Styles */
        .section-title {
            color: var(--primary);
            font-size: 18px;
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 2px solid var(--primary);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .section-title i {
            color: var(--accent);
        }
        
        /* Web TV Player */
        .webtv-player {
            background: rgba(0,0,0,0.3);
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .webtv-placeholder {
            width: 100%;
            height: 300px;
            background: linear-gradient(45deg, var(--primary), var(--accent));
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 18px;
            position: relative;
            overflow: hidden;
        }
        
        .webtv-placeholder iframe {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 10px;
        }
        
        .camera-error {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            padding: 20px;
        }
        
        .camera-error button {
            background: var(--primary);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.3s ease;
        }
        
        .camera-error button:hover {
            background: var(--accent);
        }
        
        /* Estilos para o Chat */
        .chat-container {
            background: rgba(255,255,255,0.05);
            border-radius: 15px;
            border: 1px solid rgba(255,255,255,0.1);
            overflow: hidden;
            margin-top: 20px;
        }

        .chat-header {
            background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
            padding: 15px 20px;
            color: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .chat-header h3 {
            margin: 0;
            font-size: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .chat-messages {
            height: 300px;
            overflow-y: auto;
            padding: 15px;
            background: rgba(0,0,0,0.3);
        }

        .chat-message {
            margin-bottom: 12px;
            padding: 10px;
            background: rgba(255,255,255,0.1);
            border-radius: 10px;
            border-left: 3px solid var(--primary);
            animation: fadeInUp 0.3s ease;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .message-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 5px;
        }

        .user-name {
            font-weight: bold;
            color: var(--primary);
            font-size: 14px;
        }

        .message-time {
            font-size: 11px;
            color: #ccc;
        }

        .message-text {
            font-size: 14px;
            color: white;
            line-height: 1.4;
            word-break: break-word;
        }

        .chat-form {
            padding: 15px;
            background: rgba(255,255,255,0.05);
            border-top: 1px solid rgba(255,255,255,0.1);
        }

        .chat-input-group {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
        }

        .chat-input {
            flex: 1;
            padding: 10px 15px;
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 8px;
            color: white;
            font-size: 14px;
        }

        .chat-input::placeholder {
            color: #ccc;
        }

        .chat-btn {
            background: var(--primary);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .chat-btn:hover {
            background: var(--accent);
        }

        .chat-notice {
            font-size: 11px;
            color: #ccc;
            text-align: center;
            margin-top: 5px;
        }

        /* Estilos para Clima MODIFICADOS */
        .weather-container {
            background: transparent;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
            text-align: center;
        }

        .weather-header {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-bottom: 8px;
        }

        .weather-icon {
            font-size: 1.5em;
            color: var(--primary);
        }

        .weather-city {
            font-size: 14px;
            font-weight: bold;
            color: var(--text);
        }

        .weather-temp {
            font-size: 1.8em;
            font-weight: bold;
            color: var(--accent);
            margin-bottom: 5px;
        }

        .weather-condition {
            font-size: 12px;
            color: var(--text);
            opacity: 0.8;
            margin-bottom: 10px;
        }

        .weather-details {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }

        .weather-detail {
            text-align: center;
        }

        .weather-detail i {
            font-size: 1.2em;
            margin-bottom: 5px;
            color: var(--primary);
        }

        .weather-detail span {
            font-size: 11px;
            display: block;
            color: var(--text);
        }

        /* Poll Styles */
        .poll-container {
            background: rgba(255,255,255,0.1);
            padding: 20px;
            border-radius: 10px;
            margin: 15px 0;
        }
        
        .poll-option {
            margin: 12px 0;
            display: flex;
            align-items: center;
        }
        
        .poll-option input {
            margin-right: 10px;
            transform: scale(1.1);
        }
        
        .btn {
            background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            font-size: 14px;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255,107,53,0.4);
        }
        
        /* Banner Grande 1070x320 */
        .banner-large {
            width: 100%;
            height: 150px;
            border-radius: 10px;
            overflow: hidden;
            margin: 15px 0;
            transition: all 0.3s ease;
            border: 1px solid rgba(255,255,255,0.1);
        }
        
        .banner-large:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }
        
        .banner-large img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* Carousel de NOSSOS PATROCINADORES e MAIS PATROCINADORES */
        .sponsor-carousel-large {
            position: relative;
            width: 100%;
            height: 320px;
            border-radius: 15px;
            overflow: hidden;
            margin: 20px 0;
            background: rgba(255,255,255,0.05);
        }
        
        .sponsor-carousel-item {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.8s ease-in-out;
        }
        
        .sponsor-carousel-item.active {
            opacity: 1;
        }
        
        .sponsor-carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* Indicadores do carousel */
        .carousel-indicators {
            position: absolute;
            bottom: 10px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            gap: 6px;
            z-index: 10;
        }
        
        .indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .indicator.active {
            background: var(--primary);
            transform: scale(1.2);
        }
        
        .indicator:hover {
            background: var(--accent);
        }
        
        /* Botões de navegação */
        .carousel-prev,
        .carousel-next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0,0,0,0.5);
            color: white;
            border: none;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            font-size: 16px;
            cursor: pointer;
            z-index: 10;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .carousel-prev {
            left: 10px;
        }
        
        .carousel-next {
            right: 10px;
        }
        
        .carousel-prev:hover,
        .carousel-next:hover {
            background: var(--primary);
        }
        
        /* Banners Carousel para Sidebar */
        .sidebar-banner-carousel {
            position: relative;
            width: 100%;
            height: 150px;
            border-radius: 10px;
            overflow: hidden;
            margin: 10px 0;
            background: rgba(255,255,255,0.05);
        }
        
        .sidebar-banner-item {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }
        
        .sidebar-banner-item.active {
            opacity: 1;
        }
        
        .sidebar-banner-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* Indicadores dos banners sidebar */
        .sidebar-banner-indicators {
            position: absolute;
            bottom: 8px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            gap: 5px;
            z-index: 10;
        }
        
        .sidebar-banner-indicator {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .sidebar-banner-indicator.active {
            background: var(--accent);
            transform: scale(1.2);
        }
        
        .sidebar-banner-indicator:hover {
            background: var(--primary);
        }
        
        /* Apps Section */
        .apps-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 12px;
            margin: 15px 0;
        }
        
        .app-card {
            background: rgba(255,255,255,0.1);
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            text-decoration: none;
            color: inherit;
            transition: all 0.3s ease;
            border: 1px solid rgba(255,255,255,0.1);
            font-size: 14px;
        }
        
        .app-card:hover {
            background: rgba(255,255,255,0.15);
            transform: translateY(-2px);
            text-decoration: none;
            color: inherit;
        }
        
        .app-icon {
            font-size: 1.5em;
            margin-bottom: 8px;
            color: var(--primary);
        }
        
        .app-name {
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .app-platform {
            font-size: 0.8em;
            color: #ccc;
        }
        
        /* Form Styles */
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: var(--primary);
            font-size: 14px;
        }
        
        .form-control {
            width: 100%;
            padding: 10px 12px;
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 6px;
            color: var(--text);
            font-size: 14px;
            transition: all 0.3s ease;
        }
        
        .form-control:focus {
            outline: none;
            border-color: var(--primary);
            background: rgba(255,255,255,0.15);
        }
        
        .form-control::placeholder {
            color: #999;
        }
        
        textarea.form-control {
            resize: vertical;
            min-height: 80px;
        }
        
        .alert {
            padding: 12px;
            border-radius: 6px;
            margin-bottom: 15px;
            text-align: center;
            font-size: 14px;
        }
        
        .alert-success {
            background: rgba(76, 175, 80, 0.2);
            border: 1px solid #4CAF50;
            color: #4CAF50;
        }
        
        .alert-danger {
            background: rgba(244, 67, 54, 0.2);
            border: 1px solid #f44336;
            color: #f44336;
        }
        
        /* News Section */
        .news-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }
        
        .news-card {
            background: rgba(255,255,255,0.05);
            border-radius: 8px;
            padding: 15px;
            transition: all 0.3s ease;
            border: 1px solid rgba(255,255,255,0.1);
            text-decoration: none;
            color: inherit;
            display: block;
        }
        
        .news-card:hover {
            transform: translateY(-3px);
            background: rgba(255,255,255,0.08);
            text-decoration: none;
            color: inherit;
        }
        
        .news-image {
            width: 100%;
            height: 140px;
            border-radius: 6px;
            object-fit: cover;
            margin-bottom: 12px;
        }
        
        .news-category {
            background: var(--primary);
            color: white;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: bold;
            display: inline-block;
            margin-bottom: 8px;
        }
        
        .news-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 8px;
            color: white;
            line-height: 1.3;
        }
        
        .news-excerpt {
            font-size: 13px;
            color: #ccc;
            line-height: 1.4;
        }
        
        /* Main Carousel - SEM TEXTO E SEM PELÍCULA */
        .main-carousel {
            margin: 25px 0;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 8px 25px rgba(0,0,0,0.4);
            height: 350px;
        }
        
        .carousel-slide {
            height: 350px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            display: flex !important;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2em;
            font-weight: bold;
            text-align: center;
            padding: 20px;
            position: relative;
            text-decoration: none;
        }
        
        /* REMOVER a película escura (gradiente preto) */
        .carousel-slide::before {
            content: none; /* Remove completamente a película escura */
        }
        
        .carousel-slide > * {
            position: relative;
            z-index: 2;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
        }
        
        /* Statistics Styles */
        .stats-container {
            background: rgba(255,255,255,0.1);
            padding: 15px;
            border-radius: 8px;
            margin: 15px 0;
            text-align: center;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-top: 12px;
        }
        
        .stat-item {
            background: rgba(255,255,255,0.05);
            padding: 12px;
            border-radius: 6px;
            text-align: center;
        }
        
        .stat-number {
            font-size: 1.5em;
            font-weight: bold;
            color: var(--accent);
            margin-bottom: 5px;
        }
        
        .stat-label {
            font-size: 0.8em;
            color: #ccc;
        }
        
        /* Espaços Publicitários */
        .ad-space {
            background: rgba(255,255,255,0.05);
            border: 2px dashed var(--primary);
            border-radius: 8px;
            padding: 15px;
            margin: 12px 0;
            text-align: center;
            transition: all 0.3s ease;
        }
        
        .ad-space:hover {
            background: rgba(255,255,255,0.08);
            border-color: var(--accent);
        }
        
        .ad-space-title {
            color: var(--primary);
            font-weight: bold;
            margin-bottom: 8px;
            font-size: 13px;
        }
        
        .ad-space-size {
            color: #ccc;
            font-size: 11px;
            margin-bottom: 8px;
        }
        
        .ad-space-content {
            min-height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
        }
        
        /* Animations */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(15px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .fade-in {
            animation: fadeIn 0.5s ease forwards;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            body {
                padding-top: 120px;
            }
            
            .content-wrapper {
                grid-template-columns: 1fr;
            }
            
            .carousel-slide {
                height: 200px;
                font-size: 1.5em;
            }
            
            .main-carousel {
                height: 200px;
            }
            
            .chat-messages {
                height: 200px;
            }
            
            .weather-details {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .stats-grid {
                grid-template-columns: 1fr;
            }
            
            .apps-grid {
                grid-template-columns: 1fr;
            }
            
            .whatsapp-float {
                width: 50px;
                height: 50px;
                bottom: 20px;
                right: 20px;
                font-size: 25px;
            }
            
            .banner-large {
                height: 120px;
            }
            
            .sponsor-carousel-large {
                height: 200px;
            }
            
            .sidebar-banner-carousel {
                height: 120px;
            }
        }

        @media (max-width: 480px) {
            .main-content, .sidebar {
                padding: 20px 15px;
            }
            
            .section-title {
                font-size: 16px;
            }
            
            .news-grid {
                grid-template-columns: 1fr;
            }
            
            .banner-large {
                height: 100px;
            }
            
            .sidebar-banner-carousel {
                height: 100px;
            }
        }

        /* Touch improvements */
        .btn, .player-btn, .social-link {
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }

        /* Prevent zoom on input focus for mobile */
        @media (max-width: 768px) {
            input, select, textarea {
                font-size: 16px !important;
            }
        }
    </style>
</head>
<body>
    <!-- Botão Flutuante do WhatsApp -->
    <a href="https://wa.me/55<?php echo preg_replace('/[^0-9]/', '', isset($site_config['whatsapp_number']) ? $site_config['whatsapp_number'] : '84988587429'); ?>?text=Olá! Gostaria de fazer um pedido musical para a Rádio Conexão Pop!" 
       class="whatsapp-float" 
       target="_blank"
       title="Fazer pedido musical via WhatsApp">
        <i class="fab fa-whatsapp"></i>
    </a>

    <!-- Incluir Menu com Player -->
    <?php include 'menu.php'; ?>

    <!-- Main Carousel COM IMAGENS DO BANCO - SEM TEXTO E SEM PELÍCULA -->
    <div class="container">
        <div class="main-carousel">
            <?php if ($carousel_items && count($carousel_items) > 0): ?>
                <?php foreach ($carousel_items as $item): ?>
                    <a href="<?php echo isset($item['link_url']) ? $item['link_url'] : '#'; ?>" class="carousel-slide" 
                       style="background-image: url('<?php echo $item['image_url']; ?>')">
                        <!-- Texto removido para melhor visibilidade das imagens -->
                    </a>
                <?php endforeach; ?>
            <?php else: ?>
                <!-- Fallback caso não tenha itens no banco -->
                <div class="carousel-slide" style="background-image: url('https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80')">
                    <!-- Texto removido -->
                </div>
                <div class="carousel-slide" style="background-image: url('https://images.unsplash.com/photo-1470225620780-dba8ba36b745?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80')">
                    <!-- Texto removido -->
                </div>
            <?php endif; ?>
        </div>
    </div>

    <!-- Main Content -->
    <div class="container">
        <div class="content-wrapper">
            <!-- Left Column -->
            <div class="main-content">
                <!-- Câmera do Estúdio -->
                <div class="webtv-player">
                    <h3 class="section-title"><i class="fas fa-tv"></i> AO VIVO</h3>
                    <div class="webtv-placeholder" id="cameraPlaceholder">
                        <!-- A câmera será carregada via JavaScript -->
                    </div>
                </div>

                <!-- Chat abaixo da câmera -->
                <div class="chat-container">
                    <div class="chat-header">
                        <h3><i class="fas fa-comments"></i> CHAT AO VIVO</h3>
                        <span style="color: #4CAF50;">●</span>
                    </div>
                    
                    <div class="chat-messages" id="chatMessages">
                        <div style="text-align: center; color: #ccc; padding: 20px;">
                            <i class="fas fa-spinner fa-spin" style="font-size: 2em; margin-bottom: 10px;"></i>
                            <p>Carregando mensagens...</p>
                        </div>
                    </div>
                    
                    <form class="chat-form" id="chatForm">
                        <div class="chat-input-group">
                            <input type="text" name="user_name" class="chat-input" 
                                   placeholder="Seu nome" maxlength="20" required>
                        </div>
                        <div class="chat-input-group">
                            <input type="text" name="message" class="chat-input" 
                                   placeholder="Digite sua mensagem..." maxlength="200" required>
                            <button type="submit" class="chat-btn">
                                <i class="fas fa-paper-plane"></i>
                            </button>
                        </div>
                        <div class="chat-notice">
                            Máximo 200 caracteres • Mensagens moderadas
                        </div>
                    </form>
                </div>

                <!-- Banner Grande 1070x320 - Espaço Publicitário 1 -->
                <div class="banner-large">
                    <?php if ($banner_grande_1): ?>
                        <a href="<?php echo isset($banner_grande_1['link_url']) ? $banner_grande_1['link_url'] : '#'; ?>" target="_blank">
                            <img src="<?php echo $banner_grande_1['image_url']; ?>" 
                                 alt="<?php echo $banner_grande_1['sponsor_name']; ?>">
                        </a>
                    <?php else: ?>
                        <div style="width: 100%; height: 100%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: #ccc;">
                            Banner 1070x320 - Espaço Publicitário 1
                        </div>
                    <?php endif; ?>
                </div>

                <!-- Banner Grande 1070x320 - Topo -->
                <div class="banner-large">
                    <?php if ($banner_grande_top): ?>
                        <a href="<?php echo isset($banner_grande_top['link_url']) ? $banner_grande_top['link_url'] : '#'; ?>" target="_blank">
                            <img src="<?php echo $banner_grande_top['image_url']; ?>" 
                                 alt="<?php echo $banner_grande_top['sponsor_name']; ?>">
                        </a>
                    <?php else: ?>
                        <div style="width: 100%; height: 100%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: #ccc;">
                            Banner 1070x320 - Topo
                        </div>
                    <?php endif; ?>
                </div>

                <!-- NOSSOS PATROCINADORES - Carousel Automático -->
                <h3 class="section-title"><i class="fas fa-star"></i> NOSSOS PATROCINADORES</h3>
                <div class="sponsor-carousel-large">
                    <?php if ($patrocinadores_carousel && count($patrocinadores_carousel) > 0): ?>
                        <?php foreach ($patrocinadores_carousel as $index => $patrocinador): ?>
                            <div class="sponsor-carousel-item <?php echo $index === 0 ? 'active' : ''; ?>" 
                                 data-index="<?php echo $index; ?>">
                                <a href="<?php echo isset($patrocinador['link_url']) ? $patrocinador['link_url'] : '#'; ?>" target="_blank">
                                    <img src="<?php echo $patrocinador['image_url']; ?>" 
                                         alt="<?php echo htmlspecialchars($patrocinador['sponsor_name']); ?>"
                                         onerror="this.src='https://via.placeholder.com/1070x320/FF6B35/FFFFFF?text=Patrocinador+Principal'">
                                </a>
                            </div>
                        <?php endforeach; ?>
                        
                        <!-- Indicadores do carousel -->
                        <div class="carousel-indicators">
                            <?php for ($i = 0; $i < count($patrocinadores_carousel); $i++): ?>
                                <span class="indicator <?php echo $i === 0 ? 'active' : ''; ?>" 
                                      data-slide-to="<?php echo $i; ?>"></span>
                            <?php endfor; ?>
                        </div>
                        
                        <!-- Botões de navegação -->
                        <button class="carousel-prev">‹</button>
                        <button class="carousel-next">›</button>
                    <?php else: ?>
                        <!-- Fallback caso não tenha patrocinadores principais -->
                        <div class="sponsor-carousel-item active">
                            <div style="width: 100%; height: 100%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: #ccc;">
                                NOSSOS PATROCINADORES - Espaço 1070x320
                            </div>
                        </div>
                        <div class="sponsor-carousel-item">
                            <div style="width: 100%; height: 100%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: #ccc;">
                                Seja um Patrocinador
                            </div>
                        </div>
                        <div class="sponsor-carousel-item">
                            <div style="width: 100%; height: 100%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: #ccc;">
                                Divulgue sua Marca
                            </div>
                        </div>
                        
                        <!-- Indicadores do carousel fallback -->
                        <div class="carousel-indicators">
                            <span class="indicator active" data-slide-to="0"></span>
                            <span class="indicator" data-slide-to="1"></span>
                            <span class="indicator" data-slide-to="2"></span>
                        </div>
                        
                        <!-- Botões de navegação -->
                        <button class="carousel-prev">‹</button>
                        <button class="carousel-next">›</button>
                    <?php endif; ?>
                </div>

                <!-- Banner Grande 1070x320 - Espaço Publicitário 2 -->
                <div class="banner-large">
                    <?php if ($banner_grande_2): ?>
                        <a href="<?php echo isset($banner_grande_2['link_url']) ? $banner_grande_2['link_url'] : '#'; ?>" target="_blank">
                            <img src="<?php echo $banner_grande_2['image_url']; ?>" 
                                 alt="<?php echo $banner_grande_2['sponsor_name']; ?>">
                        </a>
                    <?php else: ?>
                        <div style="width: 100%; height: 100%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: #ccc;">
                            Banner 1070x320 - Espaço Publicitário 2
                        </div>
                    <?php endif; ?>
                </div>

                <!-- News Section com API + Banco de Dados -->
                <h3 class="section-title"><i class="fas fa-newspaper"></i> NOTÍCIAS </h3>
                <div class="news-grid">
                    <?php if ($news && count($news) > 0): ?>
                        <?php foreach ($news as $news_item): ?>
                            <a href="<?php echo isset($news_item['url']) ? $news_item['url'] : '#'; ?>" class="news-card fade-in" target="_blank">
                                <?php if (!empty($news_item['image_url'])): ?>
                                    <img src="<?php echo $news_item['image_url']; ?>" alt="<?php echo htmlspecialchars($news_item['title']); ?>" class="news-image">
                                <?php else: ?>
                                    <div class="news-image" style="background: linear-gradient(45deg, var(--primary), var(--accent)); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">
                                        <?php echo isset($news_item['category']) ? substr($news_item['category'], 0, 1) : 'N'; ?>
                                    </div>
                                <?php endif; ?>
                                <span class="news-category"><?php echo isset($news_item['category']) ? strtoupper($news_item['category']) : 'GERAL'; ?></span>
                                <h4 class="news-title"><?php echo $news_item['title']; ?></h4>
                                <p class="news-excerpt"><?php echo isset($news_item['excerpt']) ? $news_item['excerpt'] : ''; ?></p>
                            </a>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <!-- Fallback -->
                        <div class="news-card fade-in">
                            <img src="https://via.placeholder.com/300x200/FF6B35/FFFFFF?text=Felipe+Araújo" alt="Felipe Araújo" class="news-image">
                            <span class="news-category">MÚSICA</span>
                            <h4 class="news-title">Felipe Araújo lança novo hit "Hoje Eu Bebere"</h4>
                            <p class="news-excerpt">O cantor surpreende fãs com novo single que já é sucesso nas rádios...</p>
                        </div>
                        
                        <div class="news-card fade-in">
                            <img src="https://via.placeholder.com/300x200/2A5298/FFFFFF?text=Festival+Verão" alt="Festival" class="news-image">
                            <span class="news-category">REGIONAL</span>
                            <h4 class="news-title">Festival de Verão 2024 confirmado na cidade</h4>
                            <p class="news-excerpt">Evento trás grandes atrações nacionais para o mês de julho...</p>
                        </div>
                        
                        <div class="news-card fade-in">
                            <img src="https://via.placeholder.com/300x200/FF4081/FFFFFF?text=Sono+Adysson" alt="Sono e Adysson" class="news-image">
                            <span class="news-category">ENTREVISTA</span>
                            <h4 class="news-title">Sono e Adysson falam sobre novo EP</h4>
                            <p class="news-excerpt">Dupla ex-The Voice lança "Live Session" com 6 músicas inéditas...</p>
                        </div>
                    <?php endif; ?>
                </div>

                <!-- Banner Grande 1070x320 - Espaço Publicitário 3 -->
                <div class="banner-large">
                    <?php if ($banner_grande_3): ?>
                        <a href="<?php echo isset($banner_grande_3['link_url']) ? $banner_grande_3['link_url'] : '#'; ?>" target="_blank">
                            <img src="<?php echo $banner_grande_3['image_url']; ?>" 
                                 alt="<?php echo $banner_grande_3['sponsor_name']; ?>">
                        </a>
                    <?php else: ?>
                        <div style="width: 100%; height: 100%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: #ccc;">
                            Banner 1070x320 - Espaço Publicitário 3
                        </div>
                    <?php endif; ?>
                </div>

                <!-- MAIS PATROCINADORES - Carousel Automático -->
                <h3 class="section-title"><i class="fas fa-bullhorn"></i> MAIS PATROCINADORES</h3>
                <div class="sponsor-carousel-large">
                    <?php if ($sponsors_carousel && count($sponsors_carousel) > 0): ?>
                        <?php foreach ($sponsors_carousel as $index => $sponsor): ?>
                            <div class="sponsor-carousel-item <?php echo $index === 0 ? 'active' : ''; ?>" 
                                 data-index="<?php echo $index; ?>">
                                <a href="<?php echo isset($sponsor['link_url']) ? $sponsor['link_url'] : '#'; ?>" target="_blank">
                                    <img src="<?php echo $sponsor['image_url']; ?>" 
                                         alt="<?php echo htmlspecialchars($sponsor['sponsor_name']); ?>"
                                         onerror="this.src='https://via.placeholder.com/1070x320/2A5298/FFFFFF?text=Patrocinador'">
                                </a>
                            </div>
                        <?php endforeach; ?>
                        
                        <!-- Indicadores do carousel -->
                        <div class="carousel-indicators">
                            <?php for ($i = 0; $i < count($sponsors_carousel); $i++): ?>
                                <span class="indicator <?php echo $i === 0 ? 'active' : ''; ?>" 
                                      data-slide-to="<?php echo $i; ?>"></span>
                            <?php endfor; ?>
                        </div>
                        
                        <!-- Botões de navegação -->
                        <button class="carousel-prev">‹</button>
                        <button class="carousel-next">›</button>
                    <?php else: ?>
                        <!-- Fallback caso não tenha patrocinadores -->
                        <div class="sponsor-carousel-item active">
                            <div style="width: 100%; height: 100%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: #ccc;">
                                MAIS PATROCINADORES - Espaço 1070x320
                            </div>
                        </div>
                    <?php endif; ?>
                </div>

                <!-- Banner Grande 1070x320 - Espaço Publicitário 4 -->
                <div class="banner-large">
                    <?php if ($banner_grande_4): ?>
                        <a href="<?php echo isset($banner_grande_4['link_url']) ? $banner_grande_4['link_url'] : '#'; ?>" target="_blank">
                            <img src="<?php echo $banner_grande_4['image_url']; ?>" 
                                 alt="<?php echo $banner_grande_4['sponsor_name']; ?>">
                        </a>
                    <?php else: ?>
                        <div style="width: 100%; height: 100%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: #ccc;">
                            Banner 1070x320 - Espaço Publicitário 4
                        </div>
                    <?php endif; ?>
                </div>

                <!-- Banner Grande 1070x320 - Espaço Publicitário 5 (NOVO) -->
                <div class="banner-large">
                    <?php if ($banner_grande_5): ?>
                        <a href="<?php echo isset($banner_grande_5['link_url']) ? $banner_grande_5['link_url'] : '#'; ?>" target="_blank">
                            <img src="<?php echo $banner_grande_5['image_url']; ?>" 
                                 alt="<?php echo $banner_grande_5['sponsor_name']; ?>">
                        </a>
                    <?php else: ?>
                        <div style="width: 100%; height: 100%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: #ccc;">
                            Banner 1070x320 - Espaço Publicitário 5
                        </div>
                    <?php endif; ?>
                </div>
            </div>

            <!-- Right Column - Sidebar -->
            <div class="sidebar">
                <!-- Seção de Clima MODIFICADA -->
                <div class="weather-container">
                    <div class="weather-header">
                        <div class="weather-icon"><?php echo isset($weather_data['icon']) ? $weather_data['icon'] : '☀️'; ?></div>
                        <div class="weather-city"><?php echo isset($weather_data['city']) ? $weather_data['city'] : 'Mossoró-RN'; ?></div>
                    </div>
                    <div class="weather-temp"><?php echo isset($weather_data['temperature']) ? $weather_data['temperature'] : '32°C'; ?></div>
                    <div class="weather-condition"><?php echo isset($weather_data['condition']) ? $weather_data['condition'] : 'Ensolarado'; ?></div>
                    <div class="weather-details">
                        <div class="weather-detail">
                            <i class="fas fa-temperature-high"></i>
                            <span><?php echo isset($weather_data['feels_like']) ? $weather_data['feels_like'] : '35°C'; ?></span>
                        </div>
                        <div class="weather-detail">
                            <i class="fas fa-tint"></i>
                            <span><?php echo isset($weather_data['humidity']) ? $weather_data['humidity'] : '65%'; ?></span>
                        </div>
                        <div class="weather-detail">
                            <i class="fas fa-wind"></i>
                            <span><?php echo isset($weather_data['wind']) ? $weather_data['wind'] : '12 km/h'; ?></span>
                        </div>
                    </div>
                </div>

                <!-- Banner Grande 1070x320 - Mobile -->
                <div class="banner-large" style="display: none;" id="mobileBannerLarge">
                    <?php if ($banner_grande_mobile): ?>
                        <a href="<?php echo isset($banner_grande_mobile['link_url']) ? $banner_grande_mobile['link_url'] : '#'; ?>" target="_blank">
                            <img src="<?php echo $banner_grande_mobile['image_url']; ?>" 
                                 alt="<?php echo $banner_grande_mobile['sponsor_name']; ?>">
                        </a>
                    <?php else: ?>
                        <div style="width: 100%; height: 100%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: #ccc;">
                            Banner 1070x320 - Mobile
                        </div>
                    <?php endif; ?>
                </div>

                <!-- Poll Section -->
                <h3 class="section-title"><i class="fas fa-poll"></i> ENQUETE</h3>
                <div class="poll-container">
                    <?php if ($poll): ?>
                        <p><strong><?php echo $poll['question']; ?></strong></p>
                        
                        <?php if ($vote_success): ?>
                            <div class="alert alert-success">
                                ✅ Obrigado pelo seu voto!
                            </div>
                        <?php else: ?>
                            <form method="POST" action="">
                                <input type="hidden" name="poll_vote" value="1">
                                <?php 
                                $option_texts = isset($poll['option_texts']) ? explode(',', $poll['option_texts']) : array();
                                $option_ids = isset($poll['option_ids']) ? explode(',', $poll['option_ids']) : array();
                                
                                for ($i = 0; $i < count($option_texts); $i++): 
                                ?>
                                    <div class="poll-option">
                                        <input type="radio" id="option_<?php echo isset($option_ids[$i]) ? $option_ids[$i] : $i; ?>" name="option_id" value="<?php echo isset($option_ids[$i]) ? $option_ids[$i] : $i; ?>" required>
                                        <label for="option_<?php echo isset($option_ids[$i]) ? $option_ids[$i] : $i; ?>"><?php echo isset($option_texts[$i]) ? $option_texts[$i] : ''; ?></label>
                                    </div>
                                <?php endfor; ?>
                                
                                <button type="submit" class="btn">VOTAR</button>
                                <a href="resultados.php" style="margin-left: 15px; color: var(--primary); text-decoration: none;">Ver Resultados</a>
                            </form>
                        <?php endif; ?>
                    <?php else: ?>
                        <p><strong>O que achou da nossa programação?</strong></p>
                        
                        <?php if ($vote_success): ?>
                            <div class="alert alert-success">
                                ✅ Obrigado pelo seu voto!
                            </div>
                        <?php else: ?>
                            <form method="POST" action="">
                                <input type="hidden" name="poll_vote" value="1">
                                <div class="poll-option">
                                    <input type="radio" id="excelente" name="option_id" value="excelente" required>
                                    <label for="excelente"> Excelente!</label>
                                </div>
                                
                                <div class="poll-option">
                                    <input type="radio" id="muito-boa" name="option_id" value="muito-boa">
                                    <label for="muito-boa"> Muito Boa</label>
                                </div>
                                
                                <div class="poll-option">
                                    <input type="radio" id="regular" name="option_id" value="regular">
                                    <label for="regular"> Regular</label>
                                </div>
                                
                                <div class="poll-option">
                                    <input type="radio" id="ruim" name="option_id" value="ruim">
                                    <label for="ruim"> Precisa Melhorar</label>
                                </div>
                                
                                <button type="submit" class="btn">VOTAR</button>
                                <a href="resultados.php" style="margin-left: 15px; color: var(--primary); text-decoration: none;">Ver Resultados</a>
                            </form>
                        <?php endif; ?>
                    <?php endif; ?>
                </div>

                <!-- Banner Grande 1070x320 - Lateral -->
                <div class="banner-large">
                    <?php if ($banner_grande_sidebar): ?>
                        <a href="<?php echo isset($banner_grande_sidebar['link_url']) ? $banner_grande_sidebar['link_url'] : '#'; ?>" target="_blank">
                            <img src="<?php echo $banner_grande_sidebar['image_url']; ?>" 
                                 alt="<?php echo $banner_grande_sidebar['sponsor_name']; ?>">
                        </a>
                    <?php else: ?>
                        <div style="width: 100%; height: 100%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: #ccc;">
                            Banner 1070x320 - Lateral
                        </div>
                    <?php endif; ?>
                </div>

                <!-- PARCEIROS - 1 banner grande -->
                <h3 class="section-title"><i class="fas fa-handshake"></i> PARCEIROS</h3>
                <div class="banner-large">
                    <?php if ($banner_parceiros): ?>
                        <a href="<?php echo isset($banner_parceiros['link_url']) ? $banner_parceiros['link_url'] : '#'; ?>" target="_blank">
                            <img src="<?php echo $banner_parceiros['image_url']; ?>" 
                                 alt="<?php echo $banner_parceiros['sponsor_name']; ?>">
                        </a>
                    <?php else: ?>
                        <div style="width: 100%; height: 100%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: #ccc; font-size: 12px;">
                            Parceiros<br>1070x320
                        </div>
                    <?php endif; ?>
                </div>

                <!-- Quick Links -->
                <h3 class="section-title"><i class="fas fa-link"></i> LINKS RÁPIDOS</h3>
                <div style="display: flex; flex-direction: column; gap: 8px;">
                    <button class="btn" onclick="openMusicRequestModal()" style="text-align: center;">
                        🎤 PEDIDO MUSICAL
                    </button>
                </div>

                <!-- Apps Mobile -->
                <h3 class="section-title"><i class="fas fa-mobile-alt"></i> BAIXE NOSSOS APPS</h3>
                <div style="display: flex; flex-direction: column; gap: 10px; margin: 15px 0;">
                    <?php if ($mobile_apps && count($mobile_apps) > 0): ?>
                        <?php foreach ($mobile_apps as $app): ?>
                            <?php if ($app['is_active']): ?>
                                <a href="<?php echo $app['download_url']; ?>" class="btn" style="text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px;" target="_blank">
                                    <i class="<?php echo $app['icon_class']; ?>"></i> 
                                    <?php echo htmlspecialchars($app['app_name']); ?>
                                    <?php if ($app['is_multi_platform']): ?>
                                        <small style="font-size: 0.7em; opacity: 0.8;">(Multiplataforma)</small>
                                    <?php else: ?>
                                        <small style="font-size: 0.7em; opacity: 0.8;">(<?php echo ucfirst($app['platform']); ?>)</small>
                                    <?php endif; ?>
                                </a>
                            <?php endif; ?>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <a href="https://play.google.com/store/apps" class="btn" style="text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px;" target="_blank">
                            <i class="fab fa-android"></i> App Android
                        </a>
                        <a href="https://www.apple.com/app-store/" class="btn" style="text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px;" target="_blank">
                            <i class="fab fa-apple"></i> App iOS
                        </a>
                        <a href="https://player.midiahosts.com/player-app-multi-plataforma/6678" class="btn" style="text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px;" target="_blank">
                            <i class="fas fa-mobile-alt"></i> App Web
                        </a>
                    <?php endif; ?>
                </div>

                <!-- Site Statistics -->
                <div class="stats-container">
                    <h4 style="color: var(--primary); margin-bottom: 12px;">📊 ESTATÍSTICAS DO SITE</h4>
                    <div class="stats-grid">
                        <div class="stat-item">
                            <div class="stat-number" id="visitorsToday"><?php echo isset($site_stats['visitors_today']) ? $site_stats['visitors_today'] : '0'; ?></div>
                            <div class="stat-label">Visitantes Agora</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-number"><?php echo isset($site_stats['visitors_total']) ? $site_stats['visitors_total'] : '0'; ?></div>
                            <div class="stat-label">Total Visitantes</div>
                        </div>
                    </div>
                </div>

                <!-- BANNERS EM DESTAQUE DINÂMICOS - Apenas se tiver conteúdo -->
                <?php
                $carousels_with_content = 0;
                for ($carousel_num = 1; $carousel_num <= 10; $carousel_num++):
                    $banners_carousel = getBannersForCarousel($conn, $carousel_num, 3);
                    if ($banners_carousel && count($banners_carousel) > 0):
                        $carousels_with_content++;
                ?>
                    <h3 class="section-title"><i class="fas fa-ad"></i> DESTAQUE <?php echo $carousel_num; ?></h3>
                    <div class="sidebar-banner-carousel" id="sidebarBannersCarousel<?php echo $carousel_num; ?>">
                        <?php foreach ($banners_carousel as $index => $banner): ?>
                            <div class="sidebar-banner-item <?php echo $index === 0 ? 'active' : ''; ?>" data-index="<?php echo $index; ?>">
                                <a href="<?php echo isset($banner['link_url']) ? $banner['link_url'] : '#'; ?>" target="_blank">
                                    <img src="<?php echo $banner['image_url']; ?>" 
                                         alt="<?php echo $banner['sponsor_name']; ?>"
                                         onerror="this.src='https://via.placeholder.com/1070x150/2A5298/FFFFFF?text=Destaque+<?php echo $carousel_num; ?>'">
                                </a>
                            </div>
                        <?php endforeach; ?>
                        
                        <!-- Indicadores -->
                        <div class="sidebar-banner-indicators">
                            <?php for ($i = 0; $i < count($banners_carousel); $i++): ?>
                                <span class="sidebar-banner-indicator <?php echo $i === 0 ? 'active' : ''; ?>" 
                                      data-slide-to="<?php echo $i; ?>" 
                                      data-carousel="sidebar<?php echo $carousel_num; ?>"></span>
                            <?php endfor; ?>
                        </div>
                    </div>
                <?php
                    endif;
                endfor;
                ?>
            </div>
        </div>
    </div>

    <!-- Modal para Pedido Musical -->
    <div id="musicRequestModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 2000; align-items: center; justify-content: center;">
        <div style="background: var(--background); padding: 25px; border-radius: 12px; max-width: 450px; width: 90%; max-height: 90vh; overflow-y: auto;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                <h3 style="color: var(--primary); margin: 0; font-size: 18px;">🎤 PEDIDO MUSICAL</h3>
                <button onclick="closeMusicRequestModal()" style="background: none; border: none; color: var(--text); font-size: 1.3em; cursor: pointer;">&times;</button>
            </div>
            
            <?php if ($request_success): ?>
                <div class="alert alert-success">
                    ✅ Seu pedido musical foi enviado com sucesso!
                </div>
            <?php endif; ?>
            
            <form method="POST" action="">
                <input type="hidden" name="music_request" value="1">
                
                <div class="form-group">
                    <label class="form-label">Seu Nome *</label>
                    <input type="text" name="listener_name" class="form-control" required placeholder="Digite seu nome">
                </div>
                
                <div class="form-group">
                    <label class="form-label">Artista *</label>
                    <input type="text" name="song_artist" class="form-control" required placeholder="Nome do artista">
                </div>
                
                <div class="form-group">
                    <label class="form-label">Música *</label>
                    <input type="text" name="song_title" class="form-control" required placeholder="Nome da música">
                </div>
                
                <div class="form-group">
                    <label class="form-label">Mensagem (opcional)</label>
                    <textarea name="message" class="form-control" placeholder="Deixe uma mensagem especial..."></textarea>
                </div>
                
                <div class="form-group">
                    <label class="form-label">Contato (opcional)</label>
                    <input type="text" name="contact_info" class="form-control" placeholder="WhatsApp, email, etc.">
                </div>
                
                <button type="submit" class="btn" style="width: 100%;">🎵 ENVIAR PEDIDO</button>
            </form>
        </div>
    </div>

    <!-- Incluir Footer -->
    <?php include 'footer.php'; ?>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
    
    <script>
        // Variáveis globais
        const cameraUrl = '<?php echo $camera_url; ?>';
        let carouselIntervals = {};
        
        // Função para carregar a câmera
        function loadCamera() {
            const placeholder = document.getElementById('cameraPlaceholder');
            if (!placeholder) return;
            
            if (!cameraUrl) {
                placeholder.innerHTML = '<div class="camera-error"><i class="fas fa-camera-off" style="font-size: 2em; opacity: 0.5; margin-bottom: 10px;"></i><p>Câmera não disponível</p></div>';
                return;
            }

            placeholder.innerHTML = '<iframe style="width:100%; height:100%;" src="' + cameraUrl + '" scrolling="No" frameborder="0" allowfullscreen="allowfullscreen" onerror="handleCameraError()"></iframe>';
        }

        function handleCameraError() {
            const placeholder = document.getElementById('cameraPlaceholder');
            if (!placeholder) return;
            
            placeholder.innerHTML = '<div class="camera-error"><i class="fas fa-wifi-off" style="font-size: 2em; opacity: 0.5; margin-bottom: 10px;"></i><p>Erro ao carregar câmera</p><button onclick="loadCamera()" class="btn" style="margin-top: 10px;">Tentar novamente</button></div>';
        }
        
        // Funções para os Carousels de PATROCINADORES
        function initSponsorCarousels() {
            const carousels = document.querySelectorAll('.sponsor-carousel-large');
            
            carousels.forEach((carousel, carouselIndex) => {
                const items = carousel.querySelectorAll('.sponsor-carousel-item');
                const indicators = carousel.querySelectorAll('.indicator');
                const prevBtn = carousel.querySelector('.carousel-prev');
                const nextBtn = carousel.querySelector('.carousel-next');
                
                if (items.length === 0) return;
                
                let currentIndex = 0;
                
                function showSlide(index) {
                    // Remove active class de todos os items e indicators
                    items.forEach(item => item.classList.remove('active'));
                    indicators.forEach(indicator => indicator.classList.remove('active'));
                    
                    // Adiciona active class no item e indicator atual
                    items[index].classList.add('active');
                    indicators[index].classList.add('active');
                    
                    currentIndex = index;
                }
                
                function nextSlide() {
                    let nextIndex = (currentIndex + 1) % items.length;
                    showSlide(nextIndex);
                }
                
                function prevSlide() {
                    let prevIndex = (currentIndex - 1 + items.length) % items.length;
                    showSlide(prevIndex);
                }
                
                // Event listeners para os botões
                if (nextBtn) {
                    nextBtn.addEventListener('click', nextSlide);
                }
                
                if (prevBtn) {
                    prevBtn.addEventListener('click', prevSlide);
                }
                
                // Event listeners para os indicators
                indicators.forEach((indicator, index) => {
                    indicator.addEventListener('click', () => {
                        showSlide(index);
                        resetCarouselInterval(carouselIndex);
                    });
                });
                
                // Auto-rotate a cada 10 segundos
                function startCarouselInterval() {
                    carouselIntervals['sponsor_' + carouselIndex] = setInterval(nextSlide, 10000);
                }
                
                function resetCarouselInterval() {
                    clearInterval(carouselIntervals['sponsor_' + carouselIndex]);
                    startCarouselInterval();
                }
                
                // Iniciar o carousel automático
                startCarouselInterval();
                
                // Pausar carousel quando hover
                carousel.addEventListener('mouseenter', () => {
                    clearInterval(carouselIntervals['sponsor_' + carouselIndex]);
                });
                
                carousel.addEventListener('mouseleave', () => {
                    startCarouselInterval();
                });
            });
        }
        
        // Função para os Banners em Destaque da Sidebar
        function initSidebarBannersCarousels() {
            // Inicializar apenas os carrosseis que existem
            for (let carouselNum = 1; carouselNum <= 10; carouselNum++) {
                const carousel = document.getElementById(`sidebarBannersCarousel${carouselNum}`);
                if (carousel) {
                    initSingleSidebarBannerCarousel(carouselNum);
                }
            }
        }
        
        function initSingleSidebarBannerCarousel(carouselNum) {
            const items = document.querySelectorAll(`#sidebarBannersCarousel${carouselNum} .sidebar-banner-item`);
            const indicators = document.querySelectorAll(`#sidebarBannersCarousel${carouselNum} .sidebar-banner-indicator`);
            
            if (items.length === 0) return;
            
            let currentIndex = 0;
            
            function showSlide(index) {
                // Remove active class de todos os items e indicators
                items.forEach(item => item.classList.remove('active'));
                indicators.forEach(indicator => indicator.classList.remove('active'));
                
                // Adiciona active class no item e indicator atual
                items[index].classList.add('active');
                indicators[index].classList.add('active');
                
                currentIndex = index;
            }
            
            function nextSlide() {
                let nextIndex = (currentIndex + 1) % items.length;
                showSlide(nextIndex);
            }
            
            // Event listeners para os indicators
            indicators.forEach((indicator, index) => {
                indicator.addEventListener('click', () => {
                    showSlide(index);
                    resetCarouselInterval(carouselNum);
                });
            });
            
            // Auto-rotate a cada 8 segundos
            function startCarouselInterval() {
                carouselIntervals[`sidebarBanner${carouselNum}`] = setInterval(nextSlide, 8000);
            }
            
            function resetCarouselInterval(carouselNum) {
                clearInterval(carouselIntervals[`sidebarBanner${carouselNum}`]);
                startCarouselInterval();
            }
            
            // Iniciar o carousel automático
            startCarouselInterval();
            
            // Pausar carousel quando hover
            const carousel = document.getElementById(`sidebarBannersCarousel${carouselNum}`);
            if (carousel) {
                carousel.addEventListener('mouseenter', () => {
                    clearInterval(carouselIntervals[`sidebarBanner${carouselNum}`]);
                });
                
                carousel.addEventListener('mouseleave', () => {
                    startCarouselInterval();
                });
            }
        }
        
        // Modal functions
        function openMusicRequestModal() {
            document.getElementById('musicRequestModal').style.display = 'flex';
        }
        
        function closeMusicRequestModal() {
            document.getElementById('musicRequestModal').style.display = 'none';
        }
        
        // Fechar modal ao clicar fora
        document.addEventListener('DOMContentLoaded', function() {
            const modal = document.getElementById('musicRequestModal');
            if (modal) {
                modal.addEventListener('click', function(e) {
                    if (e.target === this) {
                        closeMusicRequestModal();
                    }
                });
            }
        });
        
        // =============================================
        // FUNÇÕES DO CHAT - VERSÃO CORRIGIDA
        // =============================================
        
        function scrollChatToBottom() {
            const chatMessages = document.getElementById('chatMessages');
            if (chatMessages) {
                chatMessages.scrollTop = chatMessages.scrollHeight;
            }
        }

        function updateChat() {
            console.log('🔄 Atualizando chat...');
            
            fetch('chat.php?action=get_messages&limit=20')
                .then(function(response) {
                    console.log('📨 Status:', response.status);
                    if (!response.ok) {
                        throw new Error('HTTP error: ' + response.status);
                    }
                    return response.json();
                })
                .then(function(data) {
                    console.log('📝 Dados recebidos:', data);
                    
                    if (data.success && data.html) {
                        const chatMessages = document.getElementById('chatMessages');
                        if (chatMessages) {
                            chatMessages.innerHTML = data.html;
                            scrollChatToBottom();
                        }
                    } else {
                        console.error('❌ Erro no chat:', data.message);
                        showChatMessage('❌ ' + (data.message || 'Erro ao carregar mensagens'));
                    }
                })
                .catch(function(error) {
                    console.error('💥 Erro de conexão:', error);
                    const chatMessages = document.getElementById('chatMessages');
                    if (chatMessages) {
                        chatMessages.innerHTML = '<div style="text-align: center; color: #ff6b6b; padding: 20px;">Erro ao carregar mensagens. Verifique o console.</div>';
                    }
                });
        }

        // Enviar mensagem do chat
        function setupChatForm() {
            const chatForm = document.getElementById('chatForm');
            if (!chatForm) {
                console.error('❌ Formulário do chat não encontrado!');
                return;
            }

            chatForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const user_name = this.querySelector('input[name="user_name"]').value.trim();
                const message = this.querySelector('input[name="message"]').value.trim();
                
                console.log('📤 Tentando enviar:', { user_name, message });
                
                // Validação básica
                if (!user_name || !message) {
                    showChatMessage('❌ Preencha nome e mensagem!');
                    return;
                }
                
                if (user_name.length < 2) {
                    showChatMessage('❌ Nome muito curto!');
                    return;
                }
                
                if (message.length > 200) {
                    showChatMessage('❌ Mensagem muito longa!');
                    return;
                }

                const formData = new FormData();
                formData.append('user_name', user_name);
                formData.append('message', message);

                fetch('chat.php?action=send_message', {
                    method: 'POST',
                    body: formData
                })
                .then(function(response) {
                    console.log('📨 Status do envio:', response.status);
                    if (!response.ok) {
                        throw new Error('HTTP error: ' + response.status);
                    }
                    return response.json();
                })
                .then(function(data) {
                    console.log('📝 Resposta do servidor:', data);
                    
                    if (data.success) {
                        // Limpar apenas o campo de mensagem, manter o nome
                        chatForm.querySelector('input[name="message"]').value = '';
                        
                        // Atualizar mensagens
                        if (data.html) {
                            const chatMessages = document.getElementById('chatMessages');
                            if (chatMessages) {
                                chatMessages.innerHTML = data.html;
                                scrollChatToBottom();
                            }
                        }
                        
                        showChatMessage('✅ Mensagem enviada!');
                    } else {
                        console.error('❌ Erro no envio:', data.message);
                        showChatMessage('❌ ' + (data.message || 'Erro ao enviar mensagem'));
                    }
                })
                .catch(function(error) {
                    console.error('💥 Erro de conexão:', error);
                    showChatMessage('❌ Erro de conexão!');
                });
            });
        }

        function showChatMessage(text) {
            // Remover mensagem anterior se existir
            const existingMsg = document.querySelector('.chat-temp-message');
            if (existingMsg) {
                existingMsg.remove();
            }
            
            // Criar nova mensagem
            const tempMsg = document.createElement('div');
            tempMsg.className = 'chat-temp-message';
            tempMsg.style.cssText = 'position: fixed; top: 20px; right: 20px; background: #4CAF50; color: white; padding: 10px 20px; border-radius: 5px; z-index: 10000; font-size: 14px;';
            tempMsg.textContent = text;
            
            // Se for erro, mudar cor
            if (text.includes('❌')) {
                tempMsg.style.background = '#f44336';
            }
            
            document.body.appendChild(tempMsg);
            
            setTimeout(function() {
                if (tempMsg.parentNode) {
                    tempMsg.parentNode.removeChild(tempMsg);
                }
            }, 3000);
        }

        // Função para testar a conexão com o chat
        function testChatConnection() {
            console.log('🧪 Testando conexão com chat...');
            
            fetch('chat.php?action=get_messages&limit=1')
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        console.log('✅ Conexão com chat OK!');
                    } else {
                        console.error('❌ Chat retornou erro:', data.message);
                    }
                })
                .catch(error => {
                    console.error('💥 Falha na conexão com chat:', error);
                });
        }

        // Inicializar chat quando documento estiver pronto
        function initializeChat() {
            console.log('🚀 Inicializando chat...');
            
            // Testar conexão primeiro
            testChatConnection();
            
            // Configurar formulário
            setupChatForm();
            
            // Carregar mensagens iniciais
            updateChat();
            
            // Atualizar chat a cada 5 segundos
            setInterval(updateChat, 5000);
            
            console.log('✅ Chat inicializado!');
        }

        // Mostrar/ocultar banners mobile
        function checkMobileBanners() {
            const isMobile = window.innerWidth <= 768;
            const mobileBannerLarge = document.getElementById('mobileBannerLarge');
            
            if (mobileBannerLarge) {
                mobileBannerLarge.style.display = isMobile ? 'block' : 'none';
            }
        }

        // Configuração dos carousels
        $(document).ready(function(){
            // Carousel principal com imagens - SEM TEXTO E SEM PELÍCULA
            $('.main-carousel').slick({
                dots: true,
                arrows: true,
                infinite: true,
                speed: 500,
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 4000,
                fade: true,
                cssEase: 'linear',
                responsive: [
                    {
                        breakpoint: 768,
                        settings: {
                            arrows: false,
                            dots: true
                        }
                    }
                ]
            });
            
            // Carregar câmera
            loadCamera();
            
            // Inicializar carousels de PATROCINADORES
            initSponsorCarousels();
            
            // Inicializar os banners em destaque da sidebar
            initSidebarBannersCarousels();
            
            // Inicializar chat
            initializeChat();
            
            // Verificar banners mobile
            checkMobileBanners();
            window.addEventListener('resize', checkMobileBanners);
        });
        
        // Melhorar experiência touch
        document.addEventListener('touchstart', function() {}, {passive: true});
    </script>
</body>
</html>