<?php include 'files/guardiankey.php'; ?>
<?php
ob_start();
session_start();

ini_set('display_errors', 0);
ini_set('log_errors', 1);
ini_set('error_log', __DIR__ . '/../logs/php_errors.log');
error_reporting(E_ALL);

include_once 'db/db_connection.php';

$db_error_message = null; 

try {
    $stmt = $pdo->query("SELECT * FROM website_config WHERE id = 1");
    $config = $stmt->fetch(PDO::FETCH_ASSOC);

    if ($config) {
        $company_name_from_db = htmlspecialchars($config['company_name'] ?? 'Nombre de la Empresa');
        $contact_phone_from_db = htmlspecialchars($config['phone_primary'] ?? '');
        $website_url_from_db = htmlspecialchars($config['website_url'] ?? '');
        $value_proposition_from_db = htmlspecialchars($config['value_proposition'] ?? ''); 

    } else {
        $company_name_from_db = 'Nombre de la Empresa';
        $contact_phone_from_db = '';
        $website_url_from_db = '';
        $value_proposition_from_db = '';
        $db_error_message = 'No se encontró la configuración. Se usarán valores por defecto.';
    }

} catch (PDOException $e) {
    error_log("Error PDO al cargar configuración web: " . $e->getMessage());
    $company_name_from_db = 'Nombre de la Empresa';
    $contact_phone_from_db = '';
    $website_url_from_db = '';
    $value_proposition_from_db = '';
    $db_error_message = 'Error de Base de Datos al cargar configuración: ' . $e->getMessage();
} catch (Exception $e) {
    error_log("General Error al cargar configuración web: " . $e->getMessage());
    $company_name_from_db = 'Nombre de la Empresa';
    $contact_phone_from_db = '';
    $website_url_from_db = '';
    $value_proposition_from_db = '';
    $db_error_message = 'Error inesperado al cargar configuración: ' . $e->getMessage();
}

ob_end_clean();
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard IAMarketing™ De OrozDesign Powered By OrozCO</title>
    <meta name="description" content="Descubre las herramientas con IA de LocalCRM: automatiza tareas, analiza datos y optimiza tu gestión comercial de forma inteligente">
    <meta name="robots" content="noindex, nofollow">

    <link rel="icon" type="image/png" href="img/favicon.png">
    <link rel="apple-touch-icon" href="img/apple-touch-icon.png">

    <?php include 'files/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@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    
    <script src="https://unpkg.com/lucide@latest"></script>
    <script src="https://unpkg.com/imask"></script>

    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="tools.css">
    <script src="files/header-manager.js"></script>
    
    <style>
        .business-panel { position: fixed; top: 0; right: 0; width: 100%; max-width: 35vw; height: 100%; background-color: white; box-shadow: -4px 0 10px rgba(0, 0, 0, 0.1); z-index: 60; overflow-y: auto; transform: translateX(100%); transition: transform 0.3s ease-out; display: flex; flex-direction: column; }
        @media (max-width: 768px) { .business-panel { max-width: 100%; } }
        .business-panel.open { transform: translateX(0); }
        .business-panel-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 55; display: none; }
        .business-panel-overlay.open { display: block; }
        .input-group { margin-bottom: 1.25rem; }
        .input-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: #374151; font-size: 0.875rem; }
        .input-group input, .input-group textarea { width: 100%; padding: 0.75rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 1rem; color: #1f2937; background-color: #f9fafb; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
        .input-group input:focus, .input-group textarea:focus { border-color: var(--color-primary); outline: 0; box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.25); }
        .input-group input[readonly] { background-color: #f3f4f6; cursor: not-allowed; color: #6b7280; }
        .input-group textarea { min-height: 100px; resize: vertical; }
        .char-count { font-size: 0.75rem; color: #6b7280; text-align: right; margin-top: 0.25rem; }
        .error-message { color: #ef4444; font-size: 0.75rem; margin-top: 0.25rem; }
    </style>
</head>
<body data-page-title="Dashboard De IA Marketing ToolKit" 
      data-page-subtitle="Bienvenidos IA Marketing Center de herramienta potencializadas con IA" 
      data-page-icon="brain">

    <div id="toast-container" class="toast-container"></div>
    
    <?php include 'files/gtm-body.php'; ?>

    <div class="relative min-h-screen md:flex">
        <div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-30 hidden md:hidden"></div>
        
        <?php include 'ia-menu.php'; ?>
        
        <main class="flex-1 overflow-y-auto">
<header class="bg-white shadow-sm p-4 flex justify-between items-center sticky top-0 z-20 flex-wrap gap-4">
  <!-- Menú -->
  <button id="mobile-menu-button" class="md:hidden text-gray-600 hover:text-gray-800">
    <i data-lucide="menu" class="w-6 h-6"></i>
  </button>

  <div class="page-header-container hidden md:block">
    <h2 id="page-title"></h2>
    <p id="page-subtitle"></p>
  </div>
  
  <div class="show-widget-container hidden">
    <button class="show-widget-btn inline-flex items-center gap-3 text-base font-bold text-white bg-[var(--color-primary)] rounded-lg shadow-lg shadow-[var(--color-primary)]/20 py-3 px-6 transform hover:-translate-y-1 hover:shadow-xl transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[var(--color-secondary)]"
        
        data-widget-id="ia-marketing-intro-video">

        <i data-lucide="eye" class="w-5 h-5"></i>
        <span>VER VIDEO PRESENTACIÓN</span>
    </button>
</div>

</header>

 <div id="content-area" class="p-4 md:p-8 space-y-8">
                                  
<section id="ia-marketing-intro-video" class="p-6 md:p-10 video-widget">
    <div class="relative overflow-hidden rounded-2xl md:rounded-3xl bg-gradient-to-br from-[var(--color-primary)] via-[#0b2242] to-[#07162d]">
        <div class="absolute -top-24 -left-16 h-72 w-72 rounded-full blur-3xl opacity-30 bg-[var(--color-secondary)]"></div>
        <div class="absolute -bottom-24 -right-16 h-72 w-72 rounded-full blur-3xl opacity-30 bg-[#ffc857]"></div>
        <div class="relative p-6 md:p-10">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
                <div class="text-white">
                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 ring-1 ring-white/15 mb-4">
                        <i data-lucide="brain-circuit" class="w-4 h-4"></i>
                        <span class="text-xs tracking-wide uppercase">Centro de Herramientas</span>
                    </div>
                    <h1 class="text-3xl md:text-4xl lg:text-5xl font-black leading-tight flex items-center gap-3">
                        <i data-lucide="brain" class="w-9 h-9 text-[var(--color-highlight)]"></i>
                        IA <span class="text-[var(--color-highlight)]">Marketing</span> Center
                    </h1>
                    <p class="mt-3 md:mt-4 text-base md:text-lg text-white/90">
                        <strong>Bienvenidos IA Marketing Center</strong>, el centro de herramienta potencializadas con IA.
                        Aquí estarán varias herramientas y este es como el dashboard de herramientas.
                    </p>
                    <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <div class="rounded-xl bg-white/10 ring-1 ring-white/15 p-4">
                            <div class="flex items-center gap-2">
                                <i data-lucide="circle-fading-plus" class="w-5 h-5 text-[var(--color-highlight)]"></i>
                                <p class="text-sm font-black uppercase">Contenidos & Anuncios</p>
                            </div>
                            <p class="text-xs text-white/80 mt-1">Ideas, copies y creatividades asistidas.</p>
                        </div>
                        <div class="rounded-xl bg-white/10 ring-1 ring-white/15 p-4">
                            <div class="flex items-center gap-2">
                                <i data-lucide="handshake" class="w-5 h-5 text-[var(--color-highlight)]"></i>
                                <p class="text-sm font-black uppercase">Ventas & Seguimiento</p>
                            </div>
                            <p class="text-xs text-white/80 mt-1">Mensajes y propuestas que convierten.</p>
                        </div>
                    </div>
                </div>
                <div class="w-full">
                    <div class="bg-black/40 rounded-xl ring-1 ring-white/10 overflow-hidden">
                        <div class="relative w-full" style="padding-bottom: 56.25%;">
                            <video class="absolute top-0 left-0 w-full h-full object-cover" controls controlslist="nodownload nofullscreen" preload="metadata">
                                <source src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4" 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">
                                <img src="img/VideoLeccion-IAMarketing.jpg" 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-80 group-hover:opacity-100 transition-opacity"></i>
                            </div>
                        </div>
                        <div class="p-4 text-white/90 text-sm flex items-center justify-between">
                        <span class="inline-flex items-center gap-2">
                            <i data-lucide="play-circle" class="w-4 h-4"></i>
                            Video Presentación
                        </span>

                        <button class="hide-widget-btn inline-flex items-center gap-2 text-xs font-black text-[var(--color-highlight)] hover:text-[var(--color-highlight)] transition-colors py-1 px-2 rounded-md"
                                data-widget-id="ia-marketing-intro-video" 
                                title="Ocultar el video de bienvenida">
                            OCULTAR VIDEO
                            <i data-lucide="square-x" class="w-4 h-4"></i>
                        </button>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
                                               
<div class="bg-slate-900 p-6 rounded-xl shadow-lg flex flex-col md:flex-row justify-between items-center gap-6 mt-6">
    
    <div class="text-center md:text-left">
        <h3 class="text-xl font-extrabold text-white uppercase flex items-center gap-2 justify-center md:justify-start">
            <i data-lucide="sparkles" class="w-6 h-6 text-[#ffc857]"></i>
            Propuesta de Valor
        </h3>
        <p class="text-slate-300 text-sm mt-1">
            Consulta tu propuesta actual o utiliza la IA para generar una nueva que te diferencie de la competencia.
        </p>
    </div>

    <div class="flex flex-col sm:flex-row gap-3 w-full sm:w-auto flex-shrink-0">
        <button id="open-business-panel-btn"
                class="border-2 border-[#ffc857] text-[#ffc857] px-6 py-3 rounded-lg font-bold text-base hover:bg-[#ffc857] hover:text-slate-900 transition-all duration-300
                       flex items-center justify-center gap-2 uppercase w-full sm:w-auto transform hover:-translate-y-1">
            <i data-lucide="briefcase" class="w-5 h-5"></i>
            <span>Mi Propuesta</span>
        </button>

        <a href="ia-propuesta-de-valor.php"
           class="bg-[#9e1428] text-white px-6 py-3 rounded-lg font-bold text-base shadow-lg shadow-red-900/40 hover:bg-red-800 transition-all duration-300
                  flex items-center justify-center gap-2 uppercase w-full sm:w-auto transform hover:-translate-y-1">
            <i data-lucide="plus-circle" class="w-5 h-5"></i>
            <span>Crear mi Propuesta</span>
        </a>
    </div>
</div>
  
                <section id="categoria-estrategia" class="dashboard-section">
                    <div class="bg-white p-6 rounded-xl shadow-md">
                        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
                            <div>
                                <h3 class="text-2xl font-extrabold text-gray-800 flex items-center gap-2">
                                    <i data-lucide="compass" class="w-7 h-7 text-[var(--color-secondary)]"></i> ESTRATEGIA Y PLANIFICACIÓN
                                </h3>
                                <p class="text-gray-500 text-sm mt-1 uppercase">(Herramientas Para Definir La Dirección, Audiencia Y Planes)</p>
                            </div>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            <div class="tool-card bg-slate-900 rounded-xl p-6 flex flex-col group">
                                <div class="tool-card-icon w-14 h-14 rounded-full flex items-center justify-center mb-4">
                                    <i data-lucide="radar" class="w-8 h-8 text-[var(--color-highlight)]"></i>
                                </div>
                                <h4 class="font-extrabold text-2xl mb-2 uppercase text-white">Radar De Diagnóstico Empresarial</h4>
                                <p class="text-slate-300 text-sm mb-4 flex-grow uppercase">Una Evaluación Estratégica 360° Del Estado Actual De Tu Negocio.</p>
                                <a href="ia-radar-de-diagnostico" class="tool-card-button w-full mt-auto py-2 px-4 uppercase">
                                    USAR HERRAMIENTA <span class="arrow-icon"><i data-lucide="arrow-big-right-dash" class="w-4 h-4"></i></span>
                                </a>
                            </div>
                            <div class="tool-card bg-slate-900 rounded-xl p-6 flex flex-col group">
                                <div class="tool-card-icon w-14 h-14 rounded-full flex items-center justify-center mb-4">
                                    <i data-lucide="languages" class="w-8 h-8 text-[var(--color-highlight)]"></i>
                                </div>
                                <h4 class="font-extrabold text-2xl mb-2 uppercase text-white">Traductor De Inglés Inteligente</h4>
                                <p class="text-slate-300 text-sm mb-4 flex-grow uppercase">Traduce Textos A Inglés Con Enfoque En Marketing Y Ventas.</p>
                                <a href="ia-traductor-ingles-inteligente" class="tool-card-button w-full mt-auto py-2 px-4 uppercase">
                                    USAR HERRAMIENTA <span class="arrow-icon"><i data-lucide="arrow-big-right-dash" class="w-4 h-4"></i></span>
                                </a>
                            </div>
                            <div class="tool-card bg-slate-900 rounded-xl p-6 flex flex-col group">
                                <div class="tool-card-icon w-14 h-14 rounded-full flex items-center justify-center mb-4">
                                    <i data-lucide="scan" class="w-8 h-8 text-[var(--color-highlight)]"></i>
                                </div>
                                <h4 class="font-extrabold text-2xl mb-2 uppercase text-white">Asistente de Análisis de Negocio FODA</h4>
                                <p class="text-slate-300 text-sm mb-4 flex-grow uppercase">Identifica Fortalezas, Oportunidades, Debilidades y Amenazas.</p>
                                <a href="ia-analisis-de-negocios-foda" class="tool-card-button w-full mt-auto py-2 px-4 uppercase">
                                    USAR HERRAMIENTA <span class="arrow-icon"><i data-lucide="arrow-big-right-dash" class="w-4 h-4"></i></span>
                                </a>
                            </div>
                            <div class="tool-card bg-slate-900 rounded-xl p-6 flex flex-col group">
                                <div class="tool-card-icon w-14 h-14 rounded-full flex items-center justify-center mb-4">
                                    <i data-lucide="search" class="w-8 h-8 text-[var(--color-highlight)]"></i>
                                </div>
                                <h4 class="font-extrabold text-2xl mb-2 uppercase text-white">Asistente de Análisis de Mercado Local</h4>
                                <p class="text-slate-300 text-sm mb-4 flex-grow uppercase">Investiga tu entorno para entender tus oportunidades de crecimiento.</p>
                                <a href="ia-analista-de-mercado-local" class="tool-card-button w-full mt-auto py-2 px-4 uppercase">
                                    USAR HERRAMIENTA <span class="arrow-icon"><i data-lucide="arrow-big-right-dash" class="w-4 h-4"></i></span>
                                </a>
                            </div>
                            <div class="tool-card bg-slate-900 rounded-xl p-6 flex flex-col group">
                                <div class="tool-card-icon w-14 h-14 rounded-full flex items-center justify-center mb-4">
                                    <i data-lucide="user-search" class="w-8 h-8 text-[var(--color-highlight)]"></i>
                                </div>
                                <h4 class="font-extrabold text-2xl mb-2 uppercase text-white">Generador de Perfil de Cliente Ideal</h4>
                                <p class="text-slate-300 text-sm mb-4 flex-grow uppercase">Define con claridad a quién le vendes y cómo comunicarte mejor.</p>
                                <a href="ia-generador-de-cliente-ideal" class="tool-card-button w-full mt-auto py-2 px-4 uppercase">
                                    USAR HERRAMIENTA <span class="arrow-icon"><i data-lucide="arrow-big-right-dash" class="w-4 h-4"></i></span>
                                </a>
                            </div>
                            <div class="tool-card bg-slate-900 rounded-xl p-6 flex flex-col group">
                                <div class="tool-card-icon w-14 h-14 rounded-full flex items-center justify-center mb-4">
                                    <i data-lucide="target" class="w-8 h-8 text-[var(--color-highlight)]"></i>
                                </div>
                                <h4 class="font-extrabold text-2xl mb-2 uppercase text-white">Planificador de Objetivos de Marketing</h4>
                                <p class="text-slate-300 text-sm mb-4 flex-grow uppercase">Crea un plan semanal, mensual o trimestral paso a paso.</p>
                                <a href="ia-planificador-de-objetivos" class="tool-card-button w-full mt-auto py-2 px-4 uppercase">
                                    USAR HERRAMIENTA <span class="arrow-icon"><i data-lucide="arrow-big-right-dash" class="w-4 h-4"></i></span>
                                </a>
                            </div>
                        </div>
                    </div>
                </section>

                <section id="categoria-marketing" class="dashboard-section">
                    <div class="bg-white p-6 rounded-xl shadow-md">
                        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
                            <div>
                                <h3 class="text-2xl font-extrabold text-gray-800 flex items-center gap-2">
                                    <i data-lucide="megaphone" class="w-7 h-7 text-[var(--color-secondary)]"></i> MARKETING Y CONTENIDOS
                                </h3>
                                <p class="text-gray-500 text-sm mt-1 uppercase">(Herramientas Para Crear Mensajes Y Materiales Que Atraen)</p>
                            </div>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                            <div class="tool-card bg-slate-900 rounded-xl p-6 flex flex-col group">
                                <div class="tool-card-icon w-14 h-14 rounded-full flex items-center justify-center mb-4">
                                    <i data-lucide="file-check-2" class="w-8 h-8 text-[var(--color-highlight)]"></i>
                                </div>
                                <h4 class="font-extrabold text-2xl mb-2 uppercase text-white">Generador de Descripciones Para Servicios</h4>
                                <p class="text-slate-300 text-sm mb-4 flex-grow uppercase">Crea textos que explican el valor y los detalles de lo que ofreces.</p>
                                <a href="ia-creador-de-descripciones-de-servicios" class="tool-card-button w-full mt-auto py-2 px-4 uppercase">
                                    USAR HERRAMIENTA <span class="arrow-icon"><i data-lucide="arrow-big-right-dash" class="w-4 h-4"></i></span>
                                </a>
                            </div>
                            <div class="tool-card bg-slate-900 rounded-xl p-6 flex flex-col group">
                                <div class="tool-card-icon w-14 h-14 rounded-full flex items-center justify-center mb-4">
                                    <i data-lucide="ticket" class="w-8 h-8 text-[var(--color-highlight)]"></i>
                                </div>
                                <h4 class="font-extrabold text-2xl mb-2 uppercase text-white">Creador de Ofertas y Promociones</h4>
                                <p class="text-slate-300 text-sm mb-4 flex-grow uppercase">Diseña mensajes atractivos para promociones y descuentos.</p>
                                <a href="ia-creador-de-ofertas-promociones" class="tool-card-button w-full mt-auto py-2 px-4 uppercase">
                                    USAR HERRAMIENTA <span class="arrow-icon"><i data-lucide="arrow-big-right-dash" class="w-4 h-4"></i></span>
                                </a>
                            </div>
                            <div class="tool-card bg-slate-900 rounded-xl p-6 flex flex-col group">
                                <div class="tool-card-icon w-14 h-14 rounded-full flex items-center justify-center mb-4">
                                    <i data-lucide="share-2" class="w-8 h-8 text-[var(--color-highlight)]"></i>
                                </div>
                                <h4 class="font-extrabold text-2xl mb-2 uppercase text-white">Creador de Publicaciones Sociales</h4>
                                <p class="text-slate-300 text-sm mb-4 flex-grow uppercase">Crea posts que abordan el problema, la solución y tu servicio.</p>
                                <a href="ia-creador-de-publicaciones-sociales" class="tool-card-button w-full mt-auto py-2 px-4 uppercase">
                                    USAR HERRAMIENTA <span class="arrow-icon"><i data-lucide="arrow-big-right-dash" class="w-4 h-4"></i></span>
                                </a>
                            </div>
                            <div class="tool-card bg-slate-900 rounded-xl p-6 flex flex-col group">
                                <div class="tool-card-icon w-14 h-14 rounded-full flex items-center justify-center mb-4">
                                    <i data-lucide="clapperboard" class="w-8 h-8 text-[var(--color-highlight)]"></i>
                                </div>
                                <h4 class="font-extrabold text-2xl mb-2 uppercase text-white">Generador de Anuncios Publicitarios</h4>
                                <p class="text-slate-300 text-sm mb-4 flex-grow uppercase">Crea textos de anuncios que realmente venden para tus servicios.</p>
                                <a href="ia-generador-de-anuncios-publicitarios" class="tool-card-button w-full mt-auto py-2 px-4 uppercase">
                                    USAR HERRAMIENTA <span class="arrow-icon"><i data-lucide="arrow-big-right-dash" class="w-4 h-4"></i></span>
                                </a>
                            </div>
                        </div>
                    </div>
                </section>

                <section id="categoria-ventas" class="dashboard-section">
                    <div class="bg-white p-6 rounded-xl shadow-md">
                        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
                            <div>
                                <h3 class="text-2xl font-extrabold text-gray-800 flex items-center gap-2">
                                    <i data-lucide="handshake" class="w-7 h-7 text-[var(--color-secondary)]"></i> VENTAS Y SEGUIMIENTO
                                </h3>
                                <p class="text-gray-500 text-sm mt-1 uppercase">(Herramientas Para Convertir Prospectos En Clientes)</p>
                            </div>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                            <div class="tool-card bg-slate-900 rounded-xl p-6 flex flex-col group">
                                <div class="tool-card-icon w-14 h-14 rounded-full flex items-center justify-center mb-4">
                                    <i data-lucide="send-horizontal" class="w-8 h-8 text-[var(--color-highlight)]"></i>
                                </div>
                                <h4 class="font-extrabold text-2xl mb-2 uppercase text-white">Generador de Mensaje Primer Contacto</h4>
                                <p class="text-slate-300 text-sm mb-4 flex-grow uppercase">Crea mensajes iniciales potentes para posibles nuevos clientes.</p>
                                <a href="ia-generador-de-mensaje-primer-contacto" class="tool-card-button w-full mt-auto py-2 px-4 uppercase">
                                    USAR HERRAMIENTA <span class="arrow-icon"><i data-lucide="arrow-big-right-dash" class="w-4 h-4"></i></span>
                                </a>
                            </div>
                            <div class="tool-card bg-slate-900 rounded-xl p-6 flex flex-col group">
                                <div class="tool-card-icon w-14 h-14 rounded-full flex items-center justify-center mb-4">
                                    <i data-lucide="file-text" class="w-8 h-8 text-[var(--color-highlight)]"></i>
                                </div>
                                <h4 class="font-extrabold text-2xl mb-2 uppercase text-white">Creador de Propuestas de Proyectos</h4>
                                <p class="text-slate-300 text-sm mb-4 flex-grow uppercase">Genera propuestas profesionales para ganar nuevos clientes.</p>
                                <a href="ia-creador-de-propuestas-de-proyectos" class="tool-card-button w-full mt-auto py-2 px-4 uppercase">
                                    USAR HERRAMIENTA <span class="arrow-icon"><i data-lucide="arrow-big-right-dash" class="w-4 h-4"></i></span>
                                </a>
                            </div>
                            <div class="tool-card bg-slate-900 rounded-xl p-6 flex flex-col group">
                                <div class="tool-card-icon w-14 h-14 rounded-full flex items-center justify-center mb-4">
                                    <i data-lucide="user-plus" class="w-8 h-8 text-[var(--color-highlight)]"></i>
                                </div>
                                <h4 class="font-extrabold text-2xl mb-2 uppercase text-white">Asistente de Seguimiento Para Prospectos</h4>
                                <p class="text-slate-300 text-sm mb-4 flex-grow uppercase">Crea mensajes para convertir de clientes potenciales en clientes.</p>
                                <a href="ia-asistente-de-seguimiento-prospectos" class="tool-card-button w-full mt-auto py-2 px-4 uppercase">
                                    USAR HERRAMIENTA <span class="arrow-icon"><i data-lucide="arrow-big-right-dash" class="w-4 h-4"></i></span>
                                </a>
                            </div>
                            <div class="tool-card bg-slate-900 rounded-xl p-6 flex flex-col group">
                                <div class="tool-card-icon w-14 h-14 rounded-full flex items-center justify-center mb-4">
                                    <i data-lucide="user-check" class="w-8 h-8 text-[var(--color-highlight)]"></i>
                                </div>
                                <h4 class="font-extrabold text-2xl mb-2 uppercase text-white">Asistente de Seguimiento Para Clientes</h4>
                                <p class="text-slate-300 text-sm mb-4 flex-grow uppercase">Genera mensajes post-servicio para fidelizar a tus clientes.</p>
                                <a href="ia-asistente-de-seguimiento-clientes" class="tool-card-button w-full mt-auto py-2 px-4 uppercase">
                                    USAR HERRAMIENTA <span class="arrow-icon"><i data-lucide="arrow-big-right-dash" class="w-4 h-4"></i></span>
                                </a>
                            </div>
                        </div>
                    </div>
                </section>

                <section id="categoria-optimizacion" class="dashboard-section">
                    <div class="bg-white p-6 rounded-xl shadow-md">
                        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
                            <div>
                                <h3 class="text-2xl font-extrabold text-gray-800 flex items-center gap-2">
                                    <i data-lucide="book-heart" class="w-7 h-7 text-[var(--color-secondary)]"></i> OPTIMIZACIÓN DE PERFILES DIGITALES
                                </h3>
                                <p class="text-gray-500 text-sm mt-1 uppercase">(Herramientas Para Mejorar Tu Visibilidad Y Reputación Online)</p>
                            </div>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                            <div class="tool-card bg-slate-900 rounded-xl p-6 flex flex-col group">
                                <div class="tool-card-icon w-14 h-14 rounded-full flex items-center justify-center mb-4">
                                    <i data-lucide="map-pin" class="w-8 h-8 text-[var(--color-highlight)]"></i>
                                </div>
                                <h4 class="font-extrabold text-2xl mb-2 uppercase text-white">Optimizador de Perfil de Google Business</h4>
                                <p class="text-slate-300 text-sm mb-4 flex-grow uppercase">Optimiza tu perfil para destacar en búsquedas y mapas locales.</p>
                                <a href="ia-optimizador-perfil-google-business" class="tool-card-button w-full mt-auto py-2 px-4 uppercase">
                                    USAR HERRAMIENTA <span class="arrow-icon"><i data-lucide="arrow-big-right-dash" class="w-4 h-4"></i></span>
                                </a>
                            </div>
                            <div class="tool-card bg-slate-900 rounded-xl p-6 flex flex-col group">
                                <div class="tool-card-icon w-14 h-14 rounded-full flex items-center justify-center mb-4">
                                    <i data-lucide="facebook" class="w-8 h-8 text-[var(--color-highlight)]"></i>
                                </div>
                                <h4 class="font-extrabold text-2xl mb-2 uppercase text-white">Optimizador de Página de Facebook</h4>
                                <p class="text-slate-300 text-sm mb-4 flex-grow uppercase">Ajusta tu página de empresa para mejorar el alcance y la interacción.</p>
                                <a href="ia-optimizador-pagina-de-facebook" class="tool-card-button w-full mt-auto py-2 px-4 uppercase">
                                    USAR HERRAMIENTA <span class="arrow-icon"><i data-lucide="arrow-big-right-dash" class="w-4 h-4"></i></span>
                                </a>
                            </div>
                            <div class="tool-card bg-slate-900 rounded-xl p-6 flex flex-col group">
                                <div class="tool-card-icon w-14 h-14 rounded-full flex items-center justify-center mb-4">
                                    <i data-lucide="message-circle" class="w-8 h-8 text-[var(--color-highlight)]"></i>
                                </div>
                                <h4 class="font-extrabold text-2xl mb-2 uppercase text-white">Optimizador de WhatsApp Business</h4>
                                <p class="text-slate-300 text-sm mb-4 flex-grow uppercase">Saca el máximo provecho a tu cuenta de WhatsApp profesional.</p>
                                <a href="ia-optimizador-de-whatsapp-business" class="tool-card-button w-full mt-auto py-2 px-4 uppercase">
                                    USAR HERRAMIENTA <span class="arrow-icon"><i data-lucide="arrow-big-right-dash" class="w-4 h-4"></i></span>
                                </a>
                            </div>
                            <div class="tool-card bg-slate-900 rounded-xl p-6 flex flex-col group">
                                <div class="tool-card-icon w-14 h-14 rounded-full flex items-center justify-center mb-4">
                                    <i data-lucide="library" class="w-8 h-8 text-[var(--color-highlight)]"></i>
                                </div>
                                <h4 class="font-extrabold text-2xl mb-2 uppercase text-white">Optimizador de Directorios Locales</h4>
                                <p class="text-slate-300 text-sm mb-4 flex-grow uppercase">Asegura que tu información sea consistente en múltiples directorios.</p>
                                <a href="ia-optimizador-directorios-locales" class="tool-card-button w-full mt-auto py-2 px-4 uppercase">
                                    USAR HERRAMIENTA <span class="arrow-icon"><i data-lucide="arrow-big-right-dash" class="w-4 h-4"></i></span>
                                </a>
                            </div>
                        </div>
                    </div>
                </section>
         
         <?php include 'push.php'; ?>

            </div>
        </main>
    </div>

<div id="business-panel" class="business-panel">
    <div class="flex flex-col h-full">
        <div class="bg-slate-800 text-white p-6 flex justify-between items-center flex-shrink-0">
            <div class="flex items-center">
                <i data-lucide="briefcase" class="w-6 h-6 mr-3 text-[var(--color-highlight)]"></i>
                <h3 class="text-xl font-bold uppercase">Mi Propuesta De Valor</h3>
            </div>
            <button id="close-business-panel-btn" class="text-gray-400 hover:text-gray-200">
                <i data-lucide="x" class="w-6 h-6"></i>
            </button>
        </div>
        <div class="p-8 flex-grow flex flex-col">
            <p class="text-gray-500 text-sm mb-6">La información de tu negocio no se puede editar aquí. Solo puedes actualizar tu propuesta de valor.</p>
            <form id="business-info-form" class="flex-grow flex flex-col">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="input-group">
                        <label for="business-name">Nombre del Negocio</label>
                        <input type="text" id="business-name" name="businessName" placeholder="Cargando..." readonly value="<?php echo $company_name_from_db; ?>">
                    </div>
                    <div class="input-group">
                        <label for="website">Página Web (Opcional)</label>
                        <input type="url" id="website" name="website" placeholder="Cargando..." readonly value="<?php echo $website_url_from_db; ?>">
                    </div>
                </div>
                <div class="input-group">
                    <label for="phone-whatsapp">Teléfono / WhatsApp</label>
                    <input type="tel" id="phone-whatsapp" name="phoneWhatsapp" placeholder="Cargando..." readonly value="<?php echo $contact_phone_from_db; ?>">
                </div>
                <div class="input-group flex-grow flex flex-col">
                    <label for="business-description">Mi Propuesta De Valor (Máximo 1500 caracteres)</label>
                    <textarea id="business-description" name="businessDescription" rows="6" placeholder="Escribe aquí la propuesta de valor de tu negocio..." maxlength="1500" required class="flex-grow"><?php echo $value_proposition_from_db; ?></textarea>
                    <div class="char-count" id="description-char-count">0 / 1500 caracteres</div>
                    <div class="error-message" id="description-error"></div>
                </div>
                <button type="button" id="save-proposal-btn" class="bg-[var(--color-secondary)] text-white px-6 py-3 rounded-md font-semibold text-lg hover:opacity-90 transition-opacity flex items-center justify-center gap-2 mt-auto">
                    <i data-lucide="save" class="w-6 h-6"></i> GUARDAR PROPUESTA
                </button>
            </form>
        </div>
    </div>
</div>

    <div id="business-panel-overlay" class="business-panel-overlay"></div>

<script>
    document.addEventListener('DOMContentLoaded', function() {

        // =================================================================
        // CACHÉ DE ELEMENTOS DEL DOM
        // =================================================================
        const DOMElements = {
            // Menú Móvil y Notificaciones
            mobileMenuButton: document.getElementById('mobile-menu-button'),
            sidebar: document.getElementById('sidebar'),
            sidebarOverlay: document.getElementById('sidebar-overlay'),
            phoneInput: document.getElementById('contact_phone'),

            // Panel de Negocio
            openBusinessPanelBtn: document.getElementById('open-business-panel-btn'),
            businessPanel: document.getElementById('business-panel'),
            closeBusinessPanelBtn: document.getElementById('close-business-panel-btn'),
            businessPanelOverlay: document.getElementById('business-panel-overlay'),
            businessInfoForm: document.getElementById('business-info-form'),
            phoneWhatsappInput: document.getElementById('phone-whatsapp'),
            businessDescriptionInput: document.getElementById('business-description'),
            descriptionCharCount: document.getElementById('description-char-count'),
            descriptionError: document.getElementById('description-error'),
            saveProposalBtn: document.getElementById('save-proposal-btn'),
        };

        // =================================================================
        // FUNCIONES DE UTILIDAD
        // =================================================================

        const handleGlobalNotifications = () => {
            const urlParams = new URLSearchParams(window.location.search);
            const notificationType = urlParams.get('notification_type');
            const notificationMessage = urlParams.get('notification_message');
            if (notificationType && notificationMessage) {
                if (typeof showToast === 'function') {
                    showToast(notificationMessage, notificationType);
                } else {
                    console.error("showToast function is not defined. Toast notification might not display.");
                }
            }
        };
        
        const formatPhoneNumber = (phoneStr) => {
            if (!phoneStr) return '';
            const cleaned = ('' + phoneStr).replace(/\D/g, '');
            const match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
            return match ? `(${match[1]}) ${match[2]}-${match[3]}` : phoneStr;
        };

        const setButtonState = (isDisabled) => {
            if (!DOMElements.saveProposalBtn) return;
            DOMElements.saveProposalBtn.disabled = isDisabled;
            DOMElements.saveProposalBtn.classList.toggle('opacity-50', isDisabled);
            DOMElements.saveProposalBtn.classList.toggle('cursor-not-allowed', isDisabled);
        };

        const openBusinessPanel = () => {
            if (!DOMElements.businessPanel || !DOMElements.businessPanelOverlay) return;
            DOMElements.businessPanel.classList.add('open');
            DOMElements.businessPanelOverlay.classList.add('open');
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
            DOMElements.businessDescriptionInput?.dispatchEvent(new Event('input'));
        };

        const closeBusinessPanel = () => {
            if (!DOMElements.businessPanel || !DOMElements.businessPanelOverlay) return;
            DOMElements.businessPanel.classList.remove('open');
            DOMElements.businessPanelOverlay.classList.remove('open');
        };

        // =================================================================
        // MANEJADORES DE EVENTOS
        // =================================================================

        const handleSaveProposal = async (event) => {
            event.preventDefault();
            if (!DOMElements.businessInfoForm || !DOMElements.saveProposalBtn) return;

            if (!DOMElements.businessInfoForm.checkValidity()) {
                DOMElements.businessInfoForm.reportValidity();
                if (typeof showToast === 'function') showToast('Por favor, completa los campos requeridos.', 'error');
                return;
            }

            setButtonState(true);

            try {
                const response = await fetch('db/website-proposal-update.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ proposal_text: DOMElements.businessDescriptionInput.value })
                });
                const result = await response.json();

                if (result.success) {
                    if (typeof showToast === 'function') showToast(result.message, 'success');
                    setTimeout(() => {
                        window.location.reload();
                    }, 1500);
                } else {
                    if (typeof showToast === 'function') showToast(`Error: ${result.message}`, 'error');
                    setButtonState(false);
                }
            } catch (error) {
                console.error('Error al guardar la propuesta:', error);
                if (typeof showToast === 'function') showToast('Error de conexión al guardar. Revisa la consola (F12).', 'error');
                setButtonState(false);
            }
        };

        // =================================================================
        // INICIALIZACIÓN
        // =================================================================
        const init = () => {
            // Aplicar la máscara de teléfono
            if (DOMElements.phoneInput) {
                IMask(DOMElements.phoneInput, { mask: '(000) 000-0000' });
            }
            if (DOMElements.phoneWhatsappInput) {
                DOMElements.phoneWhatsappInput.value = formatPhoneNumber(DOMElements.phoneWhatsappInput.value);
            }

            // Manejadores de eventos para el panel de negocio
            DOMElements.openBusinessPanelBtn?.addEventListener('click', openBusinessPanel);
            DOMElements.closeBusinessPanelBtn?.addEventListener('click', closeBusinessPanel);
            DOMElements.businessPanelOverlay?.addEventListener('click', closeBusinessPanel);
            DOMElements.saveProposalBtn?.addEventListener('click', handleSaveProposal);
            DOMElements.businessDescriptionInput?.addEventListener('input', function() {
                if (DOMElements.descriptionCharCount) {
                    DOMElements.descriptionCharCount.textContent = `${this.value.length} / ${this.maxLength} caracteres`;
                }
                if (DOMElements.descriptionError) {
                    DOMElements.descriptionError.textContent = '';
                }
            });

            // Manejadores de eventos para el menú móvil
            DOMElements.mobileMenuButton?.addEventListener('click', () => {
                DOMElements.sidebar.classList.toggle('-translate-x-full');
                DOMElements.sidebarOverlay.classList.toggle('hidden');
            });
            DOMElements.sidebarOverlay?.addEventListener('click', () => {
                DOMElements.sidebar.classList.add('-translate-x-full');
                DOMElements.sidebarOverlay.classList.add('hidden');
            });

            // Render de íconos
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }

            // Disparar notificaciones iniciales
            handleGlobalNotifications();
        };

        // Iniciar la aplicación
        init();
    });
</script>
<script>
document.addEventListener('DOMContentLoaded', () => {

    // Función principal que maneja el ocultamiento, la reaparición y el Local Storage
    const toggleWidgetVisibility = (widgetId, isHidden) => {
        const widget = document.getElementById(widgetId);
        // Encuentra el contenedor del botón de mostrar usando el data-widget-id
        const showContainer = document.querySelector(`.show-widget-container [data-widget-id="${widgetId}"]`)?.closest('.show-widget-container');
        const videoPlayer = widget ? widget.querySelector('video') : null;

        if (!widget || !showContainer) return; // Se detiene si no encuentra los elementos

        if (isHidden) {
            // Acción para OCULTAR
            widget.classList.add('hidden');
            showContainer.classList.remove('hidden');
            // IMPORTANTE: Detiene el video para ahorrar recursos
            if (videoPlayer) videoPlayer.pause(); 
        } else {
            // Acción para MOSTRAR
            widget.classList.remove('hidden');
            showContainer.classList.add('hidden');
        }

        // Guarda la preferencia en Local Storage, individualmente para cada widget
        localStorage.setItem(`hide_${widgetId}`, isHidden ? 'true' : 'false');
    };

    // 1. Configurar los botones de OCULTAR (clase: hide-widget-btn)
    document.querySelectorAll('.hide-widget-btn').forEach(button => {
        button.addEventListener('click', (event) => {
            const widgetId = event.currentTarget.dataset.widgetId; // Obtiene el ID a ocultar
            toggleWidgetVisibility(widgetId, true); 
        });
    });

    // 2. Configurar los botones de MOSTRAR (clase: show-widget-btn)
    document.querySelectorAll('.show-widget-btn').forEach(button => {
        button.addEventListener('click', (event) => {
            const widgetId = event.currentTarget.dataset.widgetId; // Obtiene el ID a mostrar
            toggleWidgetVisibility(widgetId, false); 
        });
    });

    // 3. Comprobar y aplicar el estado guardado al cargar la página para TODOS los widgets
    document.querySelectorAll('.video-widget').forEach(widget => {
        const widgetId = widget.id;
        const isHidden = localStorage.getItem(`hide_${widgetId}`) === 'true';
        if (isHidden) {
            // Si el usuario lo ocultó antes, se aplica el estado de oculto
            toggleWidgetVisibility(widgetId, true);
        }
    });
});
</script>
</body>
</html>