<?php
// =================================================================
// BLOQUE 1: INICIALIZACIÓN Y CONFIGURACIÓN
// =================================================================
session_start();
require_once '../db/business_config.php';

// --- CONFIGURACIÓN ESPECÍFICA DEL DASHBOARD ---
// Beneficio: Elementos que solo aparecen en este panel. Para una organización perfecta,
// puedes mover estas líneas a tu archivo `db/business_config.php`.

define('DASHBOARD_VIDEO_URL', 'https://samplelib.com/lib/preview/mp4/sample-5s.mp4');
define('DASHBOARD_VIDEO_POSTER_URL', 'https://crm.tunegociocrm.com/img/VideoLeccion-IAMarketing.jpg');
define('QR_CODE_MAIN_PAGE_URL', 'https://upload.wikimedia.org/wikipedia/commons/d/d7/Commons_QR_code.png');
define('QR_CODE_OFFER_PAGE_URL', 'https://upload.wikimedia.org/wikipedia/commons/d/d7/Commons_QR_code.png');
define('QR_CODE_REVIEWS_PAGE_URL', 'https://upload.wikimedia.org/wikipedia/commons/d/d7/Commons_QR_code.png');


// =================================================================
// BLOQUE 2: LÓGICA DE NEGOCIO Y PREPARACIÓN DE DATOS
// =================================================================

// 1. Protección de la Sesión
if (!isset($_SESSION['logged_in']) || $_SESSION['logged_in'] !== true) {
    header('Location: login.php');
    exit;
}

// 2. Cálculo de Días para Renovación y Estilo de Alerta
$days_left = 0;
$countdown_style_class = 'bg-gradient-to-r from-[var(--brand-primary)] to-[var(--brand-dark)]';

try {
    $renewal_date = new DateTime(RENEWAL_DATE);
    $today = new DateTime("now");
    
    if ($today < $renewal_date) {
        $days_left = $today->diff($renewal_date)->days;
    }

    if ($days_left <= 7) {
        $countdown_style_class = 'bg-gradient-to-r from-[var(--brand-accent)] to-[#7f1d1d]';
    } elseif ($days_left <= 30) {
        $countdown_style_class = 'bg-gradient-to-r from-[#d97706] to-[var(--brand-secondary)]';
    }
} catch (Exception $e) {
    $days_left = 0;
}

// =================================================================
// BLOQUE 3: PRESENTACIÓN (HTML)
// =================================================================
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboar De <?php echo BUSINESS_NAME; ?> | <?php echo PHONE_PRIMARY; ?> — OrozDesign Multimedia</title>
<meta name="description" content=" — Call Us At <?php echo PHONE_PRIMARY; ?> | <?php echo BUSINESS_NAME; ?> ">

<link rel="icon" type="image/png" sizes="32x32" href="<?php echo LOGO_FILENAME; ?>">
<link rel="icon" type="image/png" sizes="16x16" href="<?php echo LOGO_FILENAME; ?>">
<link rel="shortcut icon" href="<?php echo LOGO_FILENAME; ?>">

<link rel="apple-touch-icon" sizes="180x180" href="<?php echo LOGO_FILENAME; ?>">
<meta name="theme-color" content="#07162d">
    
<?php require_once '../gtm-head.php'; ?>

    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;700;900&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/lucide@latest"></script>
    <link rel="stylesheet" href="../style.css">
</head>

<body class="min-h-screen flex flex-col">
    
<?php require_once '../gtm-body.php'; ?>

    <header class="bg-white shadow-md sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
            <img src="../<?php echo htmlspecialchars(LOGO_FILENAME); ?>" alt="Logo de <?php echo htmlspecialchars(BUSINESS_NAME); ?>" class="h-12">
            <a href="logout.php" class="inline-flex items-center gap-2 px-4 py-2 text-sm font-bold text-black bg-[var(--brand-secondary)] rounded-lg hover:brightness-110 transition-all duration-300">
                <i data-lucide="log-out" class="w-4 h-4"></i>
                <span>CERRAR SESIÓN</span>
            </a>
        </div>
        <div class="h-1.5 w-full" style="background:#e2c087"></div>
    </header>

    <main class="flex-grow">
        
        <section class="w-full bg-gradient-to-br from-[var(--brand-dark)] to-[var(--brand-primary)]">
            <div class="max-w-7xl mx-auto text-center py-16 px-4 sm:px-6 lg:px-8">
                <div id="greeting-container"></div>
                
                <script>
                    (function() {
                        const ownerName = "<?php echo htmlspecialchars(BUSINESS_OWNER, ENT_QUOTES, 'UTF-8'); ?>";
                        const day = new Date();
                        const currentHour = day.getHours();
                        let greetingText; let iconName;
                        if (currentHour >= 5 && currentHour < 12) { greetingText = "Buenos Días"; iconName = "sun"; } 
                        else if (currentHour >= 12 && currentHour < 20) { greetingText = "Buenas Tardes"; iconName = "cloud-sun"; } 
                        else { greetingText = "Buenas Noches"; iconName = "moon"; }
                        const greetingHTML = `<h1 class="text-4xl md:text-4xl font-black text-white flex items-center justify-center flex-wrap gap-2"><i data-lucide="${iconName}" class="w-10 h-10 text-[var(--brand-secondary)]"></i><span>${greetingText}, ${ownerName}</span></h1>`;
                        document.getElementById('greeting-container').innerHTML = greetingHTML;
                        if (window.lucide) { lucide.createIcons(); }
                    })();
                </script>
                <p class="text-lg text-[var(--brand-secondary)] max-w-3xl mx-auto">Te Damos La Bienvenida Al Portal De Marketing Para <strong><?php echo htmlspecialchars(BUSINESS_NAME); ?></strong></p>
            </div>
        </section>

        <section class="py-16 sm:py-20">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-12">
                    <h2 class="font-extrabold leading-tight tracking-tight text-3xl sm:text-6xl text-[var(--brand-primary)]">Promoción y Herramientas Estratégicas</h2>
                    <div class="mt-4 h-1.5 w-24 bg-[var(--brand-secondary)] mx-auto rounded-full"></div>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
                    <a href="../offer.php" target="_blank" class="bg-gradient-to-br from-[var(--brand-dark)] to-[var(--brand-primary)] text-white rounded-2xl shadow-lg p-6 text-center hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 flex flex-col items-center border-2 border-transparent hover:border-[var(--brand-secondary)]"><span class="w-16 h-16 flex items-center justify-center bg-gradient-to-br from-[var(--brand-secondary)] to-amber-400 text-[var(--brand-dark)] rounded-2xl mb-4 shadow-lg"><i data-lucide="megaphone" class="w-8 h-8"></i></span><h3 class="font-extrabold text-lg">Página De Generación De Prospectos</h3><p class="text-sm text-white/80 mt-2 flex-grow">Tu landing page para captar clientes con la oferta del 25% OFF.</p></a>
                    <a href="../reviews.php" target="_blank" class="bg-gradient-to-br from-[var(--brand-dark)] to-[var(--brand-primary)] text-white rounded-2xl shadow-lg p-6 text-center hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 flex flex-col items-center border-2 border-transparent hover:border-[var(--brand-secondary)]"><span class="w-16 h-16 flex items-center justify-center bg-gradient-to-br from-[var(--brand-secondary)] to-amber-400 text-[var(--brand-dark)] rounded-2xl mb-4 shadow-lg"><i data-lucide="star" class="w-8 h-8"></i></span><h3 class="font-extrabold text-lg">Página Para Solicitar Reseñas</h3><p class="text-sm text-white/80 mt-2 flex-grow">Utilidad para solicitar valoraciones a tus clientes de forma fácil.</p></a>
                    <a href="quotes.php" class="bg-gradient-to-br from-[var(--brand-dark)] to-[var(--brand-primary)] text-white rounded-2xl shadow-lg p-6 text-center hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 flex flex-col items-center border-2 border-transparent hover:border-[var(--brand-secondary)]"><span class="w-16 h-16 flex items-center justify-center bg-gradient-to-br from-[var(--brand-secondary)] to-amber-400 text-[var(--brand-dark)] rounded-2xl mb-4 shadow-lg"><i data-lucide="file-spreadsheet" class="w-8 h-8"></i></span><h3 class="font-extrabold text-lg">Herramienta Generador De Cotizaciones</h3><p class="text-sm text-white/80 mt-2 flex-grow">Crea y descarga cotizaciones profesionales en formato PDF.</p></a>
                    <a href="invoices.php" class="bg-gradient-to-br from-[var(--brand-dark)] to-[var(--brand-primary)] text-white rounded-2xl shadow-lg p-6 text-center hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 flex flex-col items-center border-2 border-transparent hover:border-[var(--brand-secondary)]"><span class="w-16 h-16 flex items-center justify-center bg-gradient-to-br from-[var(--brand-secondary)] to-amber-400 text-[var(--brand-dark)] rounded-2xl mb-4 shadow-lg"><i data-lucide="file-text" class="w-8 h-8"></i></span><h3 class="font-extrabold text-lg">Herramienta Generador De Facturas</h3><p class="text-sm text-white/80 mt-2 flex-grow">Genera facturas para tus servicios de forma rápida y sencilla.</p></a>
                </div>
            </div>
        </section>

        <section class="w-full bg-gradient-to-br from-[var(--brand-dark)] to-[var(--brand-primary)] py-16 sm:py-20">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-12">
                    <h2 class="font-extrabold leading-tight tracking-tight text-3xl sm:text-6xl text-white">Códigos QR Para Imprimir Y Compartir</h2>
                    <div class="mt-4 h-1.5 w-24 bg-[var(--brand-secondary)] mx-auto rounded-full"></div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    
                    <div class="bg-gradient-to-br from-gray-900 to-gray-800 text-white rounded-2xl shadow-lg p-6 flex flex-col text-center border-2 border-white/10"><h3 class="font-extrabold text-3xl sm:text-3xl text-[var(--brand-secondary)]">QR Para Página Principal</h3><p class="text-sm text-white/80 mt-2">Ideal para tarjetas de presentación y publicidad</p><img src="<?php echo htmlspecialchars(QR_CODE_MAIN_PAGE_URL); ?>" alt="QR a Página Principal" class="mx-auto my-6 rounded-lg bg-white p-1.5 shadow-md">
                        <a href="#" onclick="descargarQR_Forzada('<?php echo htmlspecialchars(QR_CODE_MAIN_PAGE_URL); ?>', 'qr_pagina_principal.png'); return false;" class="mt-auto w-full flex items-center justify-center gap-2 px-4 py-3 font-bold bg-[var(--brand-secondary)] text-[var(--brand-primary)] hover:brightness-110 rounded-lg transition-all duration-300">
                            <i data-lucide="download" class="w-4 h-4"></i><span>DESCARGAR</span>
                        </a>
                    </div>
                    
                    <div class="bg-gradient-to-br from-gray-900 to-gray-800 text-white rounded-2xl shadow-lg p-6 flex flex-col text-center border-2 border-white/10"><h3 class="font-extrabold text-3xl sm:text-3xl text-[var(--brand-secondary)]">QR Para Página De Prospectos</h3><p class="text-sm text-white/80 mt-2">Úsalo en flyers para dirigir clientes a tu oferta especial.</p><img src="<?php echo htmlspecialchars(QR_CODE_OFFER_PAGE_URL); ?>" alt="QR a Página de Promoción" class="mx-auto my-6 rounded-lg bg-white p-1.5 shadow-md">
                        <a href="#" onclick="descargarQR_Forzada('<?php echo htmlspecialchars(QR_CODE_OFFER_PAGE_URL); ?>', 'qr_prospectos.png'); return false;" class="mt-auto w-full flex items-center justify-center gap-2 px-4 py-3 font-bold bg-[var(--brand-secondary)] text-[var(--brand-primary)] hover:brightness-110 rounded-lg transition-all duration-300">
                            <i data-lucide="download" class="w-4 h-4"></i><span>DESCARGAR</span>
                        </a>
                    </div>
                    
                    <div class="bg-gradient-to-br from-gray-900 to-gray-800 text-white rounded-2xl shadow-lg p-6 flex flex-col text-center border-2 border-white/10"><h3 class="font-extrabold text-3xl sm:text-3xl text-[var(--brand-secondary)]">QR Para Solicitar Reseñas</h3><p class="text-sm text-white/80 mt-2">Pónlo en tus facturas o comunicaciones post-servicio.</p><img src="<?php echo htmlspecialchars(QR_CODE_REVIEWS_PAGE_URL); ?>" alt="QR a Página de Reseñas" class="mx-auto my-6 rounded-lg bg-white p-1.5 shadow-md">
                        <a href="#" onclick="descargarQR_Forzada('<?php echo htmlspecialchars(QR_CODE_REVIEWS_PAGE_URL); ?>', 'qr_resenas.png'); return false;" class="mt-auto w-full flex items-center justify-center gap-2 px-4 py-3 font-bold bg-[var(--brand-secondary)] text-[var(--brand-primary)] hover:brightness-110 rounded-lg transition-all duration-300">
                            <i data-lucide="download" class="w-4 h-4"></i><span>DESCARGAR</span>
                        </a>
                    </div>
                    
                </div>
            </div>
        </section>

        <section class="py-16 sm:py-20">
            <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-white rounded-3xl shadow-2xl p-8 text-center <?php echo $countdown_style_class; ?>">
                    <p class="font-bold uppercase tracking-wider text-sm">Renovación De Tu Membresía SiteFlow</p>
                    <h3 class="font-extrabold text-2xl sm:text-3xl mt-1 break-all text-[var(--brand-secondary)]"><?php echo htmlspecialchars(str_replace(['http://', 'https://'], '', WEBSITE_URL)); ?></h3>
                    <div class="flex items-center justify-center gap-4 mt-4">
                        <i data-lucide="calendar-clock" class="w-12 h-12 opacity-80"></i>
                        <div class="text-left">
                            <p class="text-6xl font-black leading-none"><?php echo $days_left; ?></p>
                            <p class="text-lg font-bold">DÍAS RESTANTES</p>
                        </div>
                    </div>
                    <p class="text-xs mt-4 text-[var(--brand-secondary)]">Fecha De Renovación: <?php echo date("d/m/Y", strtotime(RENEWAL_DATE)); ?></p>
                </div>
                <div class="mt-8 text-center">
                    <a href="https://wa.me/<?php echo htmlspecialchars(WHATSAPP_NUMBER_CLICK); ?>?text=Hola,%20estoy%20interesado%20en%20renovar%20mi%20membresía%20de%20SiteFlow." target="_blank" class="inline-flex items-center justify-center gap-3 px-8 py-4 font-extrabold bg-green-500 text-white rounded-xl shadow-lg hover:bg-green-600 transition-all duration-300 text-lg">
                        <i data-lucide="message-circle-code" class="w-6 h-6"></i>
                        <span>RENOVAR SITEFLOW™ AHORA</span>
                    </a>
                </div>
            </div>
        </section>
        
        <section class="w-full bg-gradient-to-br from-[var(--brand-dark)] to-[var(--brand-primary)] py-16 sm:py-20">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="bg-gradient-to-br from-[var(--brand-primary)] to-[var(--brand-dark)] border border-white/10 rounded-3xl shadow-2xl p-8 lg:p-12">
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                        
                        <div class="text-white">
                            <span class="inline-flex items-center gap-2 px-3 py-1 text-sm font-bold bg-white/10 text-[var(--brand-secondary)] rounded-full mb-6">
                                <i data-lucide="play-circle" class="w-5 h-5"></i>
                                TU CAMINO COMIENZA AQUÍ
                            </span>
                            <h2 class="text-3xl lg:text-4xl font-black leading-tight">Domina Tu Portal De Marketing</h2>
                            <p class="mt-4 text-lg text-white/80">Centraliza Tus Herramientas, Automatiza Tareas Y Mantén Tu Operación Avanzando Todos Los Días. Y Si Estas Satisfecho Con El Servicio… DEJANOS UNA RESEÑA</p>
                            <div class="mt-8 flex flex-wrap items-center gap-4">
                                <a href="<?php echo htmlspecialchars(OROZDESIGN_REVIEW_LINK); ?>" target="_blank" class="inline-flex items-center justify-center gap-3 px-6 py-3 font-bold bg-white text-[var(--brand-primary)] rounded-lg shadow-lg hover:bg-gray-200 transition-all duration-300">
                                    <i data-lucide="star" class="w-5 h-5 text-yellow-500"></i>
                                    <span>DÉJANOS UNA RESEÑA</span>
                                </a>
                                <a href="mailto:<?php echo htmlspecialchars(EMAIL_PRIMARY); ?>" class="inline-flex items-center justify-center gap-3 px-6 py-3 font-bold border-2 border-white/40 text-white rounded-lg hover:bg-white/10 transition-all duration-300">
                                    <i data-lucide="send" class="w-5 h-5"></i>
                                    <span>SOPORTE TÉCNICO</span>
                                </a>
                            </div>
                        </div>

                        <div>
                            <div class="relative pt-[56.25%] rounded-3xl overflow-hidden shadow-2xl">
                                <video class="absolute top-0 left-0 w-full h-full object-cover" id="videoPlayer" controls controlslist="nodownload fullscreen" preload="metadata" poster="<?php echo htmlspecialchars(DASHBOARD_VIDEO_POSTER_URL); ?>">
                                    <source src="<?php echo htmlspecialchars(DASHBOARD_VIDEO_URL); ?>" type="video/mp4">
                                    TU NAVEGADOR NO SOPORTA LA ETIQUETA DE VIDEO
                                </video>

                                <div id="playOverlay" class="absolute inset-0 flex justify-center items-center cursor-pointer group transition-opacity duration-300">
                                    <img src="<?php echo htmlspecialchars(DASHBOARD_VIDEO_POSTER_URL); ?>" alt="VideoLeccion - IAMarketing" class="absolute inset-0 w-full h-full object-cover">
                                    <div class="absolute inset-0 w-full h-full bg-black/40 transition-colors group-hover:bg-black/60"></div>
                                    <i data-lucide="play" class="relative w-16 h-16 text-white opacity-90 group-hover:opacity-100 transition-opacity"></i>
                                </div>
                            </div>
                            
                            <div class="flex items-center justify-between mt-4 text-white/80">
                                <div class="inline-flex items-center gap-2 text-sm">
                                    <i data-lucide="video" class="w-4 h-4 text-[var(--brand-secondary)]"></i>
                                    <span>Video De Bienvenida Al Portal SiteFlow™</span>
                                </div>
                                <div class="inline-flex items-center gap-2 text-sm">
                                    <i data-lucide="clock" class="w-4 h-4 text-[var(--brand-secondary)]"></i>
                                    <span>Aprox. 3 min</span>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </section>
        
    </main>
    
    <footer class="mt-auto bg-[var(--brand-dark)] text-white py-6">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <p class="text-xs text-gray-500 text-center">© <?php echo date('Y'); ?> <?php echo htmlspecialchars(BUSINESS_NAME); ?>. Todos Los Derechos Reservados</p>
            <div class="footer-logo-container flex justify-center mt-4">
                <a href="https://orozdesign.com/?utm_source=LinksWebs&amp;utm_medium=Organico&amp;utm_campaign=LocalCRM-ToolKit" target="_blank">
                    <img src="https://orozdesign.net/admin/orozdesign/PoweredByOROZCO.png" alt="OrozDesign Multimedia" height="25px" width="auto" onerror="this.onerror=null; this.src='https://placehold.co/100x25/f5f5f5/2a9d8f?text=Powered+by+OROZCO';"/>
                </a>
            </div>
    </footer>

    <script>
        // Inicializa los íconos de Lucide
        lucide.createIcons();
        
        // ** FUNCIÓN CORREGIDA DEFINITIVAMENTE PARA LA DESCARGA **
        async function descargarQR_Forzada(url, fileName) {
            try {
                const response = await fetch(url, { cache: 'no-store' }); // Evita caché
                const blob = await response.blob();
                const blobUrl = URL.createObjectURL(blob);
                
                const linkDescarga = document.createElement('a');
                linkDescarga.href = blobUrl;
                linkDescarga.download = fileName;
                
                document.body.appendChild(linkDescarga);
                linkDescarga.click();
                
                document.body.removeChild(linkDescarga);
                URL.revokeObjectURL(blobUrl);
            } catch (error) {
                console.error('Error al intentar descargar el QR:', error);
                alert('Error al descargar. Intenta clic derecho en la imagen > "Guardar imagen como...".');
            }
        }
        
        // ** LÓGICA DE REPRODUCCIÓN DEL VIDEO **
        document.addEventListener('DOMContentLoaded', () => {
            const playOverlay = document.getElementById('playOverlay');
            const videoPlayer = document.getElementById('videoPlayer');

            if (playOverlay && videoPlayer) {
                playOverlay.addEventListener('click', () => {
                    playOverlay.style.display = 'none';
                    videoPlayer.play();
                });
            }
        });
    </script>
</body>
</html>