<?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'] ?? ''); // Leer la propuesta guardada
    } 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 IAStock™ De OrozDesign Powered By OrozCO</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>
    <script src="https://unpkg.com/imask"></script>

    <link rel="stylesheet" href="style.css">
    <script src="files/header-manager.js"></script>
    
   <style>
        @media (max-width: 768px) {
            .page-header-container { display: none !important; }
        }

        /* =================================================================== */
        /* FICHAS DE CATEGORÍAS (cat-chip)                                   */
        /* =================================================================== */
        .cat-chip {
            display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
            padding: .5rem 1rem; border-radius: 999px; border: 1px solid #e5e7eb;
            background: #f9fafb; color: #1f2937; font-weight: 600;
            transition: all .2s ease; text-decoration: none; white-space: nowrap;
        }
        .cat-chip:hover { background: #f3f4f6; border-color: #d1d5db; transform: translateY(-2px); }
        .cat-chip.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
        .cat-chip svg { width: 18px; height: 18px; }

        /* =================================================================== */
        /* TARJETAS DE RECURSOS (asset-card) - VERSIÓN OSCURA/INVERTIDA      */
        /* =================================================================== */
        .asset-card {
            background: #0f172a; border: 1px solid #334155; border-radius: 16px;
            padding: 24px; display: flex; flex-direction: column; transition: all .2s ease;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.06);
        }
        .asset-card:hover { transform: translateY(-5px); border-color: #475569; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.2), 0 4px 6px -4px rgba(0,0,0,0.1); }
        .asset-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
        .asset-card__top svg { width: 24px; height: 24px; color: #94a3b8; }
        .asset-card__title { font-weight: 800; font-size: 1.125rem; color: #f1f5f9; line-height: 1.3; margin: 4px 0 2px; }
        .asset-card__desc { font-size: .95rem; color: #94a3b8; line-height: 1.5; margin-top: 4px; flex: 1 1 auto; }
        .asset-card__meta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: .75rem; color: #94a3b8; font-size: .8rem; }
        .asset-card__meta .meta { display: inline-flex; gap: .35rem; align-items: center; }
        .asset-card__meta .meta svg { width: 16px; height: 16px; }
        .asset-card__btn {
            margin-top: 1.25rem; display: inline-flex; gap: .5rem; align-items: center;
            justify-content: center; padding: .65rem 1rem; border-radius: 10px;
            background: var(--color-highlight); color: #0f172a; font-weight: 700;
            transition: all .2s ease; text-decoration: none;
        }
        .asset-card__btn:hover { opacity: .9; transform: scale(1.02); }
        .asset-card__btn svg { width: 18px; height: 18px; }

        /* =================================================================== */
        /* ETIQUETAS (Pills)                                                 */
        /* =================================================================== */
        .pill {
            display: inline-flex; gap: .35rem; align-items: center; border-radius: 999px;
            font-weight: 700; text-transform: uppercase; font-size: .7rem;
            padding: .35rem .6rem; letter-spacing: .4px;
        }
        .pill--new { background: #dcfce7; color: #166534; }
        .pill--hot { background: #fee2e2; color: #991b1b; }
        .pill--updated { background: #dbeafe; color: #1e40af; }
        .pill--premium { background: #fffbeb; color: #b45309; }

        /* =================================================================== */
        /* TARJETAS DE ESTADÍSTICAS (stat-card)                              */
        /* =================================================================== */
        .stat-card {
            background: #ffffff; border-radius: 16px; padding: 24px;
            display: flex; flex-direction: column; align-items: center;
            text-align: center; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05);
            transition: all 0.2s ease;
        }
        .stat-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); }
        .stat-card__icon {
            background-color: var(--color-secondary); color: #ffffff;
            border-radius: 12px; padding: 10px; margin-bottom: 1rem;
            display: inline-flex; align-items: center; justify-content: center;
        }
        .stat-card__icon svg { width: 50px; height: 50px; }
        .stat-card__value { font-size: 2.25rem; font-weight: 800; color: #111827; line-height: 1; margin-bottom: 0.5rem; }
        .stat-card__label { font-size: 0.9rem; font-weight: 600; color: #4b5563; line-height: 1.2; }
      </style>
</head>

<body data-page-title="Bienvenido Al Panel Crativo AIStock"
      data-page-subtitle="Tu Centro De Recursos Y Activos Para Promoción"
      data-page-icon="graduation-cap">

   <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>
            
            <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="iastock-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-12">

<section id="iastock-intro-video" class="p-6 md:p-10 video-widget">
    <div class="blob bl1"></div><div class="blob bl2"></div>
    <div class="relative grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
        <div>
            <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="archive" class="w-4 h-4"></i>
                <span class="text-xs tracking-wide uppercase font-semibold">Tu Banco De Contenido</span>
            </div>
            <h1 class="text-3xl md:text-4xl font-extrabold leading-tight tracking-tight">
                <span class="text-[var(--color-highlight)]">IAStock</span> Para Negocios
                <span class="block text-white/90 text-2xl md:text-4xl mt-1">Imágenes, Videos y Plantillas</span>
            </h1>
            <p class="text-white/80 mt-4 max-w-2xl text-base md:text-lg">
                Encuentra contenido profesional listo para usar y haz que tu negocio de limpieza, jardinería o autodetallado destaque sobre la competencia.
            </p>
            <div class="mt-6 flex flex-wrap gap-3">
                <a href="#ia-stock-dashboard" class="inline-flex items-center gap-2 text-sm font-bold px-4 py-2 rounded-lg bg-[var(--color-highlight)] text-slate-900 hover:opacity-90 transition-all transform hover:scale-105">
                    <i data-lucide="compass" class="w-5 h-5"></i> EXPLORAR CONTENIDO
                </a>
            </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="iastock-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>
</section>
            
<section id="ia-stock-stats">
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
                    
                    <div class="stat-card">
                        <div class="stat-card__icon">
                            <i data-lucide="image"></i>
                        </div>
                        <div class="stat-card__value">500+</div>
                        <div class="stat-card__label">Imágenes</div>
                        <div class="stat-card__action">
                            <a href="stock-images.php" class="asset-card__btn">
                                <i data-lucide="square-arrow-up-right"></i> <span> ACCEDER</span>
                            </a>
                        </div>
                    </div>
                    
                    <div class="stat-card">
                        <div class="stat-card__icon">
                            <i data-lucide="video"></i>
                        </div>
                        <div class="stat-card__value">100+</div>
                        <div class="stat-card__label">Videos</div>
                        <div class="stat-card__action">
                            <a href="stock-videos.php" class="asset-card__btn">
                                <i data-lucide="square-arrow-up-right"></i> <span> ACCEDER</span>
                            </a>
                        </div>
                    </div>
                    
                    <div class="stat-card">
                        <div class="stat-card__icon">
                            <i data-lucide="headphones"></i>
                        </div>
                        <div class="stat-card__value">50+</div>
                        <div class="stat-card__label">Audios</div>
                        <div class="stat-card__action">
                            <a href="stock-audios.php" class="asset-card__btn">
                                <i data-lucide="square-arrow-up-right"></i> <span> ACCEDER</span>
                            </a>
                        </div>
                    </div>
                    
                    <div class="stat-card">
                        <div class="stat-card__icon">
                            <i data-lucide="file-text"></i>
                        </div>
                        <div class="stat-card__value">10+</div>
                        <div class="stat-card__label">Documentos</div>
                        <div class="stat-card__action">
                            <a href="stock-documents.php" class="asset-card__btn">
                                <i data-lucide="square-arrow-up-right"></i> <span> ACCEDER</span>
                            </a>
                        </div>
                    </div>
                    
                    <div class="stat-card">
                        <div class="stat-card__icon">
                            <i data-lucide="layout-template"></i>
                        </div>
                        <div class="stat-card__value">10+</div>
                        <div class="stat-card__label">Plantillas</div>
                        <div class="stat-card__action">
                            <a href="stock-templates.php" class="asset-card__btn">
                               <i data-lucide="square-arrow-up-right"></i> <span> ACCEDER</span>
                            </a>
                        </div>
                    </div>
                    
                </div>
            </section>

            <section id="ia-stock-latest">
                <h3 class="text-2xl font-extrabold text-gray-800 mb-6">ÚLTIMOS ARCHIVOS AÑADIDOS</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" id="club-latest">
                    
                    <article class="asset-card">
                        <div class="asset-card__top">
                            <span class="pill pill--new">Nuevo</span>
                            <i data-lucide="image"></i>
                        </div>
                        <h4 class="asset-card__title">Pack de Fotos: Limpieza Residencial</h4>
                        <p class="asset-card__desc">15 imágenes de alta calidad listas para usar en tu sitio web y redes sociales.</p>
                        <div class="asset-card__meta">
                            <span class="meta"><i data-lucide="layers"></i> 15 Archivos</span>
                            <span class="meta"><i data-lucide="maximize"></i> 4K</span>
                        </div>
                        <a href="#" class="asset-card__btn"><i data-lucide="download"></i> DESCARGAR PACK</a>
                    </article>

                    <article class="asset-card">
                        <div class="asset-card__top">
                            <span class="pill pill--hot">Popular</span>
                            <i data-lucide="video"></i>
                        </div>
                        <h4 class="asset-card__title">Video Vertical: Antes y Después</h4>
                        <p class="asset-card__desc">Ideal para Reels y TikTok. Muestra un resultado impactante de autodetallado.</p>
                         <div class="asset-card__meta">
                            <span class="meta"><i data-lucide="smartphone"></i> 9:16</span>
                            <span class="meta"><i data-lucide="clock"></i> 12 seg</span>
                        </div>
                        <a href="#" class="asset-card__btn"><i data-lucide="download"></i> DESCARGAR VIDEO</a>
                    </article>
                    
                    <article class="asset-card">
                        <div class="asset-card__top">
                            <span class="pill pill--updated">Actualizado</span>
                            <i data-lucide="file-spreadsheet"></i>
                        </div>
                        <h4 class="asset-card__title">Plantilla de Presupuesto Pro</h4>
                        <p class="asset-card__desc">Modelo editable para cotizaciones con cálculos automáticos para jardinería.</p>
                        <div class="asset-card__meta">
                            <span class="meta"><i data-lucide="sheet"></i> Google Sheet</span>
                            <span class="meta"><i data-lucide="file-check"></i> Editable</span>
                        </div>
                        <a href="#" class="asset-card__btn"><i data-lucide="download"></i> DESCARGAR</a>
                    </article>

                    <article class="asset-card">
                        <div class="asset-card__top">
                            <span class="pill pill--new">Nuevo</span>
                            <i data-lucide="image"></i>
                        </div>
                        <h4 class="asset-card__title">Pack de Fotos: Jardinería Profesional</h4>
                        <p class="asset-card__desc">20 imágenes de alta resolución para promocionar tus servicios de jardinería.</p>
                        <div class="asset-card__meta">
                            <span class="meta"><i data-lucide="layers"></i> 20 Archivos</span>
                            <span class="meta"><i data-lucide="maximize"></i> HD</span>
                        </div>
                        <a href="#" class="asset-card__btn"><i data-lucide="download"></i> DESCARGAR PACK</a>
                    </article>
                    
                </div>
            </section>
            <?php include 'push.php'; ?>
        </div>
    </main>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        // JS para el menú móvil
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const sidebar = document.getElementById('sidebar');
        const sidebarOverlay = document.getElementById('sidebar-overlay');
        const sidebarCloseBtn = document.getElementById('sidebarCloseBtn');

        function toggleSidebar() {
            if (sidebar) sidebar.classList.toggle('-translate-x-full');
            if (sidebarOverlay) sidebarOverlay.classList.toggle('hidden');
        }

        if (mobileMenuButton) mobileMenuButton.addEventListener('click', toggleSidebar);
        if (sidebarCloseBtn) sidebarCloseBtn.addEventListener('click', toggleSidebar);
        if (sidebarOverlay) sidebarOverlay.addEventListener('click', toggleSidebar);
        
        // Inicializar iconos Lucide
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    });
</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>