<?php 
// COMENTARIO: ESTRUCTURA - Manteniendo la lógica de inclusión y configuración de la tienda (Punto 3)
include 'files/guardiankey.php';
// Lógica de configuración, DB, etc. (se asume que existe en config.php o se replica aquí)
// En un entorno real, descomentar o adaptar las líneas necesarias aquí.

// Simulamos la lógica para la página activa y variables
$current_page = 'store-resources';

// COMENTARIO: Definición de datos de producto simulados para la nueva sección
$productosLocal = [
    [
        'id' => 1,
        'title' => 'GUÍA ESTRATÉGICA DE VENTAS',
        'description' => 'Manual digital de 50 páginas con estrategias de cierre de ventas y scripts de comunicación para servicios locales.',
        'mockup_image' => 'img/mockup-guia-ventas.jpg', // Imagen de ejemplo
        'price' => '39.99 USD',
        'is_digital' => true,
        'lucide_icon' => 'book-open-check'
    ],
    [
        'id' => 2,
        'title' => 'PACK DE PLANTILLAS LEGALES',
        'description' => 'Documentos legales esenciales: Contrato de Prestación, Acuerdo de Confidencialidad y Política de Privacidad (Editables).',
        'mockup_image' => 'img/mockup-plantillas-legales.jpg', 
        'price' => '59.00 USD',
        'is_digital' => true,
        'lucide_icon' => 'file-text'
    ],
    [
        'id' => 3,
        'title' => 'CUADERNO DE PLANIFICACIÓN IMPRESO',
        'description' => 'Agenda física de alta calidad diseñada para planificación trimestral, metas de ingresos y seguimiento semanal de leads.',
        'mockup_image' => 'img/mockup-cuaderno-impreso.jpg', 
        'price' => '45.00 USD',
        'is_digital' => false,
        'lucide_icon' => 'package'
    ],
    [
        'id' => 4,
        'title' => 'MASTERCLASS FIDELIZACIÓN',
        'description' => 'Módulo de formación premium en video (2 horas) enfocado en maximizar el Lifetime Value (LTV) de sus clientes activos.',
        'mockup_image' => 'img/mockup-masterclass.jpg', 
        'price' => '49.00 USD',
        'is_digital' => true,
        'lucide_icon' => 'graduation-cap'
    ],
];
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Tienda de Recursos - CRM.TuNegocioLocal.com</title>
    <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>
    <link rel="stylesheet" href="style.css"> 

    <style>
        /* COMENTARIO: PALETA DE COLORES - Variables (Punto 2) */
        :root { 
            --color-primary: #07162d; 
            --color-secondary: #9e1428; 
            --color-highlight: #ffc857; 
            --color-background: #f5f5f5; /* Fondo Principal (Punto 2) */
        }
        /* COMENTARIO: FRAMEWORK Y ESTILO - Fuente Barlow (Punto 1) */
        body { font-family: 'Barlow', sans-serif; } 
        
        /* COMENTARIO: FRAMEWORK Y ESTILO - tool-card con Sombra y Transiciones (Punto 1) */
        .tool-card-custom { 
            transition: all 0.3s ease-in-out;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
        }
        .tool-card-custom:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
        }
        /* COMENTARIO: PALETA DE COLORES - Botón Secundario (Punto 2) */
        .btn-secondary {
            background-color: var(--color-secondary);
            transition: all 0.3s ease-in-out;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        }
        .btn-secondary:hover {
            transform: translateY(-1px);
            opacity: 0.9;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
        }

        /* Estilos del Modal Derecho (Drawer) con transiciones Tailwind */
        .drawer {
            transition: transform 0.3s ease-out;
            transform: translateX(100%);
            z-index: 50;
        }
        .drawer.open {
            transform: translateX(0);
        }
        .drawer-overlay {
            z-index: 40;
            opacity: 0;
            transition: opacity 0.3s ease-out;
        }
        .drawer-overlay.open {
            opacity: 1;
        }
    </style>
</head>
<body data-page-title="Tienda De Recursos Para Tu Negocio Local"
      data-page-subtitle="Adquiere Activos Digitales E Impresos De Alto Valor"
      data-page-icon="store"
      class="bg-[var(--color-background)]">

    <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 'stock-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 space-y-12">
                <div class="mb-12">
                    <h2 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-center" style="color: var(--color-primary);">
                        CATÁLOGO DE ACTIVOS ESTRATÉGICOS
                    </h2>
                    <h3 class="mt-2 text-lg md:text-xl font-medium text-center max-w-3xl mx-auto text-gray-600">
                        Acceda a recursos digitales e impresos verificados que garantizan un crecimiento exponencial y profesional de su negocio.
                    </h3>
                </div>

                <div id="product-grid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">

                    <?php foreach ($productosLocal as $producto): ?>
                    <div 
                        class="tool-card-custom bg-white p-5 rounded-xl cursor-pointer" 
                        onclick="openProductDrawer('<?php echo htmlspecialchars($producto['title']); ?>', '<?php echo htmlspecialchars($producto['description']); ?>', '<?php echo $producto['is_digital'] ? 'DIGITAL' : 'IMPRESO'; ?>', '<?php echo htmlspecialchars($producto['is_digital'] ? 'Descarga Inmediata' : 'Envío Físico'); ?>', '<?php echo htmlspecialchars($producto['price']); ?>', <?php echo $producto['is_digital'] ? 'true' : 'false'; ?>, '<?php echo $producto['lucide_icon']; ?>')">
                        
                        <div class="text-center">
                             <i data-lucide="<?php echo htmlspecialchars($producto['lucide_icon']); ?>" class="w-12 h-12 mx-auto mb-3" style="color: var(--color-secondary);"></i>
                            <h3 class="text-xl font-bold mb-2 font-barlow" style="color: var(--color-primary);"><?php echo htmlspecialchars($producto['title']); ?></h3>
                            <p class="text-sm text-gray-500 mb-4 font-barlow"><?php echo htmlspecialchars($producto['description']); ?></p>
                            
                            <div class="flex justify-between items-center mt-4 pt-3 border-t border-gray-100">
                                 <span class="text-lg font-extrabold" style="color: var(--color-primary);"><?php echo htmlspecialchars($producto['price']); ?></span>
                                  <button class="text-sm font-semibold text-white px-3 py-1 rounded-full btn-secondary">DETALLES</button>
                            </div>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
                </div>
        </main>
    </div>
    
    
    <div id="product-drawer-overlay" class="drawer-overlay fixed inset-0 bg-gray-900 bg-opacity-75 hidden" onclick="closeProductDrawer()"></div>
    
    <div id="product-drawer" class="drawer fixed top-0 right-0 w-full md:w-96 h-full bg-white shadow-2xl overflow-y-auto p-6 flex flex-col justify-between">
        
        <div class="flex-1">
            <div class="flex justify-between items-center mb-6 border-b-2 border-gray-100 pb-4">
                <div id="drawer-icon-container" class="p-2 rounded-lg mr-3 flex items-center" style="background-color: var(--color-primary);">
                     </div>
                <h2 id="drawer-title" class="text-2xl font-extrabold flex-1 font-barlow" style="color: var(--color-primary);"></h2>
                <button onclick="closeProductDrawer()" class="p-2 rounded-full hover:bg-gray-100 text-gray-700 transition">
                     <i data-lucide="x" class="w-6 h-6"></i>
                </button>
            </div>
            
            <p id="drawer-description" class="mb-6 text-gray-600 font-barlow leading-relaxed"></p>
            
            <div class="space-y-4 mb-8 p-4 rounded-lg bg-gray-50 border border-gray-200">
                <h3 class="text-lg font-bold flex items-center font-barlow" style="color: var(--color-secondary);">
                     <i data-lucide="settings" class="w-5 h-5 mr-2"></i> ESPECIFICACIONES TÉCNICAS
                </h3>
                <div class="flex justify-between border-b pb-2">
                    <span class="text-sm font-medium text-gray-500 font-barlow">TIPO DE ACTIVO:</span>
                    <span id="drawer-type" class="text-sm font-semibold font-barlow" style="color: var(--color-primary);"></span>
                </div>
                <div class="flex justify-between border-b pb-2">
                    <span class="text-sm font-medium text-gray-500 font-barlow">FORMATO/ENTREGA:</span>
                    <span id="drawer-content" class="text-sm font-semibold font-barlow" style="color: var(--color-primary);"></span>
                </div>
                
                <div class="flex justify-between items-center pt-2">
                    <span class="text-xl font-bold text-gray-700 font-barlow">INVERSIÓN:</span>
                    <span id="drawer-price" class="text-2xl font-extrabold font-barlow" style="color: var(--color-secondary);"></span>
                </div>
            </div>
            
            <h3 class="text-xl font-bold flex items-center mb-4 font-barlow" style="color: var(--color-primary);">
                 <i data-lucide="award" class="w-6 h-6 mr-2" style="color: var(--color-highlight);"></i> BENEFICIOS CLAVE
            </h3>
            
            <ul class="space-y-3 text-gray-700 mb-8 list-none pl-0">
                <li class="flex items-start font-barlow">
                    <i data-lucide="check" class="w-5 h-5 mr-3 mt-1 flex-shrink-0" style="color: var(--color-highlight);"></i> 
                    Derechos de uso profesional y comercial para su negocio.
                </li>
                <li class="flex items-start font-barlow">
                    <i data-lucide="check" class="w-5 h-5 mr-3 mt-1 flex-shrink-0" style="color: var(--color-highlight);"></i> 
                    Soporte técnico prioritario sobre la implementación del recurso.
                </li>
                <li class="flex items-start font-barlow">
                    <i data-lucide="check" class="w-5 h-5 mr-3 mt-1 flex-shrink-0" style="color: var(--color-highlight);"></i> 
                    Garantía de cumplimiento con los estándares de su mercado.
                </li>
                <li id="drawer-bonus" class="flex items-start font-barlow">
                    </li>
            </ul>

        </div>
        
        <div class="mt-6 pt-4 border-t border-gray-100">
             <button id="drawer-buy-button" class="w-full text-lg p-3 rounded-xl text-white font-bold btn-secondary">
                 <i data-lucide="credit-card" class="w-5 h-5 mr-2 inline-block align-text-bottom"></i> 
                PROCEDER A LA ADQUISICIÓN
            </button>
            <p id="drawer-delivery-notice" class="text-xs text-center mt-2 text-gray-500 font-barlow"></p>
        </div>
        
    </div>
    <script>
        /**
         * Abre el drawer lateral derecho y lo rellena con la información del producto.
         */
        function openProductDrawer(title, description, type, content, price, isDigital, iconName) {
            document.getElementById('drawer-title').innerText = title.toUpperCase();
            document.getElementById('drawer-description').innerText = description;
            document.getElementById('drawer-type').innerText = type.toUpperCase();
            document.getElementById('drawer-content').innerText = content;
            document.getElementById('drawer-price').innerText = price;
            
            const deliveryNotice = document.getElementById('drawer-delivery-notice');
            const bonusItem = document.getElementById('drawer-bonus');
            const iconContainer = document.getElementById('drawer-icon-container');
            const highlightColor = 'white'; // Iconos dentro de fondo Primary deben ser blancos

            // Insertar el ícono dinámico en el encabezado del drawer
            iconContainer.innerHTML = `<i data-lucide="${iconName}" class="w-7 h-7" style="color: ${highlightColor};"></i>`;

            if (isDigital) {
                deliveryNotice.innerText = 'Entrega digital instantánea 24/7.';
                // COMENTARIO: ICONOGRAFÍA - Lucide con color de Resalte (Punto 2)
                bonusItem.innerHTML = `<i data-lucide="download-cloud" class="w-5 h-5 mr-3 mt-1 flex-shrink-0" style="color: var(--color-highlight);"></i>
                                       Acceso directo e ilimitado a la descarga en la sección Mi Cuenta.`;
            } else {
                deliveryNotice.innerText = 'Producto impreso. El envío está sujeto a los tiempos de logística (3-5 días).';
                // COMENTARIO: ICONOGRAFÍA - Lucide con color de Resalte (Punto 2)
                bonusItem.innerHTML = `<i data-lucide="truck" class="w-5 h-5 mr-3 mt-1 flex-shrink-0" style="color: var(--color-highlight);"></i>
                                       Servicio de seguimiento de envío incluido en la compra.`;
            }

            document.getElementById('product-drawer').classList.add('open');
            document.getElementById('product-drawer-overlay').classList.add('open');
            document.getElementById('product-drawer-overlay').classList.remove('hidden');
            
            // Re-renderizar íconos de Lucide
            lucide.createIcons();
        }

        function closeProductDrawer() {
            document.getElementById('product-drawer').classList.remove('open');
            document.getElementById('product-drawer-overlay').classList.remove('open');
            setTimeout(() => {
                 document.getElementById('product-drawer-overlay').classList.add('hidden');
            }, 300); 
        }
        
        window.onload = function() {
            lucide.createIcons();
        };

    </script>
    
    <script src="files/header-manager.js"></script>
    <?php include 'files/footer.php'; ?>
</body>
</html>