<?php include 'files/guardiankey.php'; ?>
<?php
// =================================================================
//        DATA BLOCK FOR FORM PRE-FILLING (Best Practice)
// =================================================================

// 1. Include the central business information file.
//    This creates the $client_info variable with all the data.
include __DIR__ . '/client-information.php';

// 2. Assign info to easy-to-use variables for this form.
//    Using English names for consistency with the database and array keys.
$client_name       = $client_info['name'] ?? '';
$business_name     = $client_info['business_name'] ?? '';
$phone             = $client_info['phone'] ?? '';
$whatsapp          = $client_info['whatsapp'] ?? '';
$email             = $client_info['email'] ?? '';
$website           = $client_info['website'] ?? '';
$operating_cities  = $client_info['operating_cities'] ?? '';
$value_proposition = $client_info['value_proposition'] ?? '';
$logo_url          = $client_info['logo_url'] ?? '';

// Social links come as an array, hence the '?? []' fallback.
$social_links      = $client_info['social_links'] ?? [];

// =================================================================
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radar De Diagnóstico Empresarial Con IAMarketing™ Powered By OrozCO</title>
    <meta name="description" content="Una Evaluación Estratégica 360° Del Estado Actual De Tu Negocio">
    <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>
        .card-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }
        @media (min-width: 768px) {
            .card-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        .diagnostic-card {
    background-image: linear-gradient(135deg, #f0f2f5 0%, #e2e7ed 100%); /* Un gradiente sutil en tonos grises */
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.diagnostic-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
        .axis-header {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
            border-bottom: 2px solid #e5e7eb;
            padding-bottom: 0.75rem;
        }
        .axis-icon {
            color: var(--color-secondary);
            margin-right: 1rem;
            width: 30px;
            text-align: center;
        }
        .axis-title {
            font-size: 1.8rem;
            line-height: 1.2;
            font-weight: 900;
            color: var(--color-primary);
        }
        .subpoint-item {
            display: flex;
            align-items: flex-start;
            padding: 0.75rem 0;
            cursor: pointer;
        }
        .subpoint-item input[type="checkbox"] {
            appearance: none;
            -webkit-appearance: none;
            width: 1.75rem;
            height: 1.75rem;
            border: 2px solid #d1d5db;
            border-radius: 0.375rem;
            background-color: #f9fafb;
            cursor: pointer;
            flex-shrink: 0;
            margin-top: 2px;
            transition: all 0.2s ease-in-out;
            position: relative;
        }
        .subpoint-item input[type="checkbox"]:hover {
            border-color: var(--color-secondary);
        }
        .subpoint-item input[type="checkbox"]:checked {
            background-color: var(--color-primary);
            border-color: var(--color-primary);
        }
        .subpoint-item input[type="checkbox"]:checked::after {
            content: '✓';
            color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1rem;
        }
        .subpoint-item label {
            margin-left: 1rem;
            color: #374151;
            font-size: 1.125rem;
            line-height: 1.2;
            cursor: pointer;
        }
    </style>
</head>
<body data-page-title="Radar De Diagnóstico Empresarial"
      data-page-subtitle="Una Evaluación Estratégica 360° Del Estado Actual De Tu Negocio"
      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>
    <div id="task-panel-overlay" class="off-canvas-overlay"></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">
            <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">
                <h2 id="page-title"></h2>
                <p id="page-subtitle"></p>
            </div>
        </header>
        
        <div id="content-area" class="p-4 md:p-8">
            <section id="diagnostic-tool" class="dashboard-section">
                <div class="grid grid-cols-1 lg:grid-cols-5 gap-8">
                    <div class="lg:col-span-3">
                        <form id="diagnostic-form" class="space-y-8 bg-white p-8 rounded-xl shadow-md">
                            <div>
                                <div class="step-header">
                                        <h2 class="text-2xl font-black pb-0 mb-0 flex items-center uppercase">
                                            <span class="step-number"> <i data-lucide="lightbulb" class="mr-3 text-[var(--color-secondary)]"></i> PASO 1:</span>
                                            <span class="step-title"> LOS PUNTOS DÉBILES DE TU NEGOCIO
                                            </span>
                                        </h2>
                                        <p class="step-subtitle uppercase">Marca todos los desafíos que enfrenta tu negocio actualmente.</p>
                                    </div>
                                <div class="border-b border-gray-200 pb-4 mb-6"></div>
                                <div id="diagnostic-options" class="card-container"></div>
                            </div>
                        </form>
                    </div>
                    <div class="lg:col-span-2 space-y-8">
                        <img src="img/VideoLeccion.png" alt="VideoLeccion - IAMarketing">
                        <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" id="videoPlayer" controls controlslist="nodownload fullscreen" 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 De Introducción A La Plataforma SiteFlowCMS
                                        </span>
                                        <span class="inline-flex items-center gap-2">
                                            <i data-lucide="clock" class="w-4 h-4"></i> 2–3 min
                                        </span>
                                    </div>
                                </div>
                            </div>
                        <div class="bg-white text-brand-dark p-6 md:p-8 rounded-xl shadow-md">
                            <div class="step-header">
                                <h2 class="text-2xl font-black pb-0 mb-0 flex items-center uppercase justify-center md:justify-start">
                                    <i data-lucide="book-open" class="mr-3 text-[var(--color-highlight)]"></i>
                                    <span class="step-title">INSTRUCCIONES IMPORTANTES</span>
                                </h2>
                                <p class="step-subtitle text-center md:text-left uppercase">REVISA ESTOS PUNTOS DETALLADAMENTE</p>
                            </div>
                            <div class="border-b border-gray-200 pb-4 mb-6"></div>
                            <ul class="space-y-4 text-gray-700">
                                <li class="instructions-list-item"><span class="icon-wrapper"><i data-lucide="list-checks"></i></span><div><strong class="text-brand-dark">ELIGE TUS DESAFÍOS:</strong> Marca los puntos que más te cuestan en tu negocio.</div></li>
                                <li class="instructions-list-item"><span class="icon-wrapper"><i data-lucide="message-circle-question"></i></span><div><strong class="text-brand-dark">AÑADE CONTEXTO:</strong> Describe tu negocio brevemente para un diagnóstico más preciso.</div></li>
                                <li class="instructions-list-item"><span class="icon-wrapper"><i data-lucide="arrow-right-to-line"></i></span><div><strong class="text-brand-dark">RECIBE UN PLAN:</strong> Obtén un diagnóstico claro y un plan de acción priorizado para avanzar.</div></li>
                            </ul>
                        </div>
                    </div>
                    <div class="lg:col-span-5 bg-white p-6 md:p-8 rounded-xl shadow-md mt-6">
                        <div class="step-header">
                            <h2 class="text-2xl font-black pb-0 mb-0 flex items-center uppercase">
                                <i data-lucide="pencil-ruler" class="mr-3 text-[var(--color-secondary)]"></i>
                                <span class="text-[var(--color-secondary)] mr-2">PASO 2:</span> AFINA LOS RESULTADOS
                            </h2>
                            <p class="step-subtitle uppercase">Cuéntanos a qué te dedicas para recibir recomendaciones específicas para tu industria.</p>
                        </div>
                        <div class="border-b border-gray-200 pb-4 mb-6"></div>
                        <input id="diag-other" name="otro" type="text" form="diagnostic-form" placeholder="Ej: Soy Un Contratista De Remodelación En Miami" class="w-full p-3 bg-white border border-gray-300 rounded-lg">
                    </div>
                    <div class="lg:col-span-5 bg-white p-6 md:p-8 rounded-xl shadow-md mt-6">
                        <div class="step-header">
                            <h2 class="text-2xl font-black pb-0 mb-0 flex items-center uppercase">
                                <i data-lucide="gauge" class="mr-3 text-[var(--color-secondary)]"></i>
                                <span class="text-[var(--color-secondary)] mr-2">PASO 3:</span> GENERA TU DIAGNÓSTICO ESTRATÉGICO
                            </h2>
                            <p class="step-subtitle uppercase">Descubre dónde estás y cuál es el camino ideal para crecer con intención.</p>
                        </div>
                        <div class="border-b border-gray-200 pb-4 mb-6"></div>
                        <div class="flex flex-col md:flex-row items-center md:justify-between gap-4">
                            <p class="text-lg text-center md:text-left text-gray-700 md:flex-1 md:pr-4 mb-0">Para una evaluación completa de tu negocio, <strong>es importante</strong> que aportes información de las diferentes áreas de tu negocio. Con la información que proporciones, nuestra Inteligencia Artificial <strong>IA Marketing</strong> generará un <strong>Radar De Diagnóstico Empresarial</strong>, para que obtengas una evaluación estratégica de 360° del estado actual de tu negocio</p>
                        <div class="flex flex-col items-center">
                            <i data-lucide="brain" class="w-12 h-12 text-[var(--color-primary)] mb-2"></i>
                             <button id="generateBtn" type="submit" form="diagnostic-form" class="w-full md:w-auto bg-[var(--color-highlight)] text-[var(--color-primary)] font-bold py-4 px-6 rounded-lg hover:scale-105 transition-transform shadow-lg text-lg flex items-center justify-center gap-2 uppercase">
                               <span id="btn-text">GENERAR CON IA MARKETING</span>
                               <i data-lucide="mouse-pointer-click" class="w-6 h-6 animate-bounce"></i>
                               <div id="loader-container" class="hidden ml-3"></div>
                             </button>
                        </div>
                        </div>
                    </div>
                    <div id="result-container" class="lg:col-span-5 mt-8"></div>
                </div>
            </section>
        </div>
    </main>
</div>

<script type="module">
// --- CARGA DOMCONTENT ---
document.addEventListener('DOMContentLoaded', function() {
    lucide.createIcons();
    
    // MENU MOBILE
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const sidebar = document.getElementById('sidebar');
    const sidebarOverlay = document.getElementById('sidebar-overlay');

    mobileMenuButton.addEventListener('click', () => {
        sidebar.classList.toggle('-translate-x-full');
        sidebarOverlay.classList.toggle('hidden');
    });

    sidebarOverlay.addEventListener('click', () => {
        sidebar.classList.add('-translate-x-full');
        sidebarOverlay.classList.add('hidden');
    });

    // --- NOTIFICACIONES TOAST 
    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.");
        }
    }
    
    
     // MASCARA DEL TELEFONO
    const phoneInput = document.getElementById('contact_phone');
    if (phoneInput) {
        IMask(phoneInput, { mask: '(000) 000-0000' });
    }
    
    const optionsContainer = document.getElementById('diagnostic-options');
    const diagnosticAxes = [
        {
            axis: 'OBJETIVOS Y ESTRATEGIAS',
            icon: 'crosshair',
            subpoints: [
                { id: 'sp1-1', text: 'Siento que mi negocio avanza sin un rumbo claro o metas concretas y definidas.' },
                { id: 'sp1-2', text: 'No tengo un plan de acción con prioridades definidas para alcanzar mis objetivos.' },
                { id: 'sp1-3', text: 'Me es difícil saber si mis estrategias de marketing realmente me están funcionando.' }
            ]
        },
        {
            axis: 'IDENTIDAD CORPORATIVA',
            icon: 'gem',
            subpoints: [
                { id: 'sp2-1', text: 'La imagen de mi negocio no refleja calidad y podría parecer poco profesional.' },
                { id: 'sp2-2', text: 'Mi comunicación visual es inconsistente, lo que debilita la confianza en mi marca.' },
                { id: 'sp2-3', text: 'Siento que mi imagen actual no me ayuda a atraer al tipo de cliente quiero alcanzar.' }
            ]
        },
        {
            axis: 'PRESENCIA<br />DIGITAL',
            icon: 'monitor-smartphone',
            subpoints: [
                { id: 'sp3-1', text: 'Mis redes sociales están desactualizados y su contenido no genera interés.' },
                { id: 'sp3-2', text: 'Mi página web no inspira la confianza necesaria para que me contacten.' },
                { id: 'sp3-3', text: 'Mi negocio no está registrado en directorios clave como Google Mi Negocio.' }
            ]
        },
        {
            axis: 'ESTRATEGIA PUBLICITARIA',
            icon: 'megaphone',
            subpoints: [
                { id: 'sp4-1', text: 'Mi negocio depende de las recomendaciones para conseguir nuevos clientes.' },
                { id: 'sp4-2', text: 'He gastado dinero en publicidad, pero fue como tirar el dinero sin saber qué resultados trajo.' },
                { id: 'sp4-3', text: 'Cuando la publicidad atrae interesados, muchos de ellos se pierden no se convierten en clientes.' }
            ]
        },
        {
            axis: 'CANALES DE COMUNICACIÓN',
            icon: 'message-square',
            subpoints: [
                { id: 'sp5-1', text: 'Siento que pierdo tiempo y oportunidades al no saber en qué canales de comunicación enfocarme.' },
                { id: 'sp5-2', text: 'El desorden en mis canales de comunicación hace que dé una imagen poco profesional y pierda ventas.' },
                { id: 'sp5-3', text: 'No utilizo herramientas como WhatsApp Business para profesionalizar mi comunicación.' }
            ]
        },
        {
            axis: 'PROCESOS DE CONVERSIÓN',
            icon: 'filter',
            subpoints: [
                { id: 'sp6-1', text: 'Recibo muchas preguntas y solicitudes, pero un bajo porcentaje de ellas se convierten en clientes.' },
                { id: 'sp6-2', text: 'No tengo un proceso definido para dar seguimiento a los prospectos interesados.' },
                { id: 'sp6-3', text: 'No califico ni organizo a mis prospectos según su nivel de interés para priorizar mis esfuerzos.' }
            ]
        },
        {
            axis: 'SEGUIMIENTO<br />POST-VENTA',
            icon: 'handshake',
            subpoints: [
                { id: 'sp7-1', text: 'No aprovecho a mis clientes felices para que sus reseñas me ayuden a conseguir nuevos clientes.' },
                { id: 'sp7-2', text: 'No tengo un proceso para pedir a mis clientes actuales que me refieran con nuevos clientes.' },
                { id: 'sp7-3', text: 'No mantengo el contacto con mis clientes después de la venta para fomentar la lealtad.' }
            ]
        },
        {
            axis: 'MONITOREO Y EVALUACIÓN',
            icon: 'line-chart',
            subpoints: [
                { id: 'sp8-1', text: 'No sé qué canales o estrategias de marketing me están trayendo más clientes.' },
                { id: 'sp8-2', text: 'Invierto en crecer mi negocio, pero no sé si esas inversiones son rentables.' },
                { id: 'sp8-3', text: 'Tomo decisiones de negocio basadas en la intuición en lugar de datos y métricas reales.' }
            ]
        }
    ];
    optionsContainer.innerHTML = '';
    diagnosticAxes.forEach(axis => {
        const axisDiv = document.createElement('div');
        axisDiv.className = 'diagnostic-card';
        let subpointsHtml = axis.subpoints.map(sp => `
            <div class="subpoint-item">
                <input type="checkbox" id="${sp.id}" name="${axis.axis}: ${sp.text}">
                <label for="${sp.id}">${sp.text}</label>
            </div>
        `).join('');
        axisDiv.innerHTML = `
            <div class="axis-header">
                <i data-lucide="${axis.icon}" class="axis-icon"></i>
                <h3 class="axis-title">${axis.axis}</h3>
            </div>
            <div class="space-y-2">${subpointsHtml}</div>
        `;
        optionsContainer.appendChild(axisDiv);
    });
    lucide.createIcons();
    optionsContainer.addEventListener('click', e => {
        if(e.target.tagName === 'LABEL') {
            const checkbox = document.getElementById(e.target.getAttribute('for'));
            if(checkbox) checkbox.checked = !checkbox.checked;
        }
    });
    const form = document.getElementById('diagnostic-form');
    const resultContainer = document.getElementById('result-container');
    const generateBtn = document.getElementById('generateBtn');
    form.addEventListener('submit', async function(event) {
        event.preventDefault();
        const btnText = document.getElementById('btn-text');
        const loaderContainer = document.getElementById('loader-container');
        btnText.textContent = 'Analizando Tu Situación...';
        loaderContainer.innerHTML = '<div class="w-6 h-6 border-4 border-t-transparent border-[var(--color-primary)] rounded-full animate-spin"></div>';
        loaderContainer.classList.remove('hidden');
        generateBtn.disabled = true;
        resultContainer.innerHTML = '';
        resultContainer.style.opacity = '0';
        const selectedOptions = Array.from(form.querySelectorAll('input[type=checkbox]:checked')).map(cb => cb.name);
        const otherInput = document.getElementById('diag-other').value.trim();
        if (selectedOptions.length === 0 && !otherInput) {
            alert('Por favor, selecciona al menos una opción o describe tu negocio para continuar.');
            btnText.textContent = 'GENERAR MI DIAGNÓSTICO';
            loaderContainer.classList.add('hidden');
            generateBtn.disabled = false;
            return;
        }
        try {
            const response = await fetch('api/api-radar-de-diagnostico.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ situations: selectedOptions, business_description: otherInput })
            });
            if (!response.ok) {
                const errorData = await response.json();
                throw new Error(errorData.error || `El servidor respondió con un error ${response.status}.`);
            }
            const data = await response.json();
            if(data.error) throw new Error(data.error);
            displayResult(data);
        } catch (error) {
            console.error("Error:", error);
            resultContainer.innerHTML = `<div class="bg-red-100 text-center p-4 text-red-700 rounded-lg border border-red-300"><p><strong>Error:</strong> No se pudo generar el diagnóstico. ${error.message}</p></div>`;
            resultContainer.style.opacity = '1';
        } finally {
            btnText.textContent = 'GENERAR MI DIAGNÓSTICO';
            loaderContainer.classList.add('hidden');
            generateBtn.disabled = false;
        }
    });
    function displayResult(data) {
        const planHtml = data.plan_de_accion.map((step, index) => `
            <div class="plan-action-step-item bg-gray-50 p-4 rounded-lg border border-gray-200 shadow-sm flex items-start">
                <div class="plan-action-number-circle bg-[var(--color-secondary)] text-white font-bold rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0">${index + 1}</div>
                <div class="ml-4 flex-1">
                    <p class="plan-action-step-text text-gray-700 leading-relaxed">${step.replace(/\*\*(.*?)\*\*/g, '<strong class="text-[var(--color-primary)]">$1</strong>')}</p>
                </div>
            </div>`).join('');
        resultContainer.innerHTML = `
            <div class="ai-response p-6 md:p-8 rounded-xl shadow-md space-y-8">
                <div class="text-center bg-gray-50 p-6 rounded-lg">
                    <h2 class="text-3xl font-extrabold text-[var(--color-primary)] mb-3">Tu Puntuación de Madurez Digital</h2>
                    <p class="text-6xl font-black text-brand-dark">${data.puntuacion}<span class="text-3xl">/100</span></p>
                </div>
                <div class="pt-8 border-t">
                    <h3 class="text-2xl font-bold text-gray-800 mb-4 flex items-center"><i data-lucide="search-check" class="mr-3 text-[var(--color-primary)]"></i>Diagnóstico General</h3>
                    <p class="text-gray-700 leading-relaxed">${data.diagnostico_general}</p>
                </div>
                <div class="pt-8 border-t">
                    <h3 class="text-2xl font-bold text-gray-800 mb-4 flex items-center"><i data-lucide="list-ordered" class="mr-3 text-[var(--color-secondary)]"></i>Tu Plan De Acción Personalizado</h3>
                    <div class="mt-6 space-y-6">${planHtml}</div>
                </div>
            </div>`;
        lucide.createIcons();
        resultContainer.style.opacity = '1';
        resultContainer.style.transform = 'scale(1)';
        resultContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
});
</script>
</body>
</html>