<?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 Socios De Crecimiento™ 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; }
    }

    #socios-dashboard .cat-chip{
        display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
        padding:.5rem .75rem;border-radius:12px;border:1px solid rgba(0,0,0,.1);
        background:#0f172a;color:#fff;font-weight:600;transition:.2s ease;
        letter-spacing:.2px;
    }
    #socios-dashboard .cat-chip:hover{ background:#1f2937; }
    #socios-dashboard .cat-chip svg{ width:20px;height:20px }

    .club-card{
        background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:14px;
        box-shadow:0 2px 8px rgba(0,0,0,.06);padding:20px;display:flex;flex-direction:column;
        transition:box-shadow .2s ease, transform .2s ease;
    }
    .club-card:hover{ box-shadow:0 10px 24px rgba(0,0,0,.12); transform:translateY(-2px); }
    .club-card__top{ display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem; }
    .club-card__top svg{ width:24px;height:24px;color:#0f172a;opacity:.9 }
    .club-card__title{ font-weight:800;font-size:1.05rem;color:#111827;line-height:1.25;margin:4px 0 2px; }
    .club-card__desc{ font-size:.9rem;color:#4b5563;line-height:1.45;margin-top:2px;flex:1 1 auto; }
    .club-card__meta{ display:flex;gap:.75rem;align-items:center;margin-top:.5rem;color:#6b7280;font-size:.78rem; }
    .club-card__meta .meta{ display:inline-flex;gap:.35rem;align-items:center; }
    .club-card__meta .meta svg{ width:16px;height:16px }
    .club-card__btn{
        margin-top:.9rem;display:inline-flex;gap:.5rem;align-items:center;justify-content:center;
        padding:.55rem 1rem;border-radius:10px;background:#0f172a;color:#fff;font-weight:700;
        transition:.2s ease;text-decoration:none
    }
    .club-card__btn:hover{ opacity:.9 }

    .pill{ display:inline-flex;gap:.35rem;align-items:center;border-radius:999px;
        font-weight:700;text-transform:uppercase;font-size:.7rem;padding:.35rem .6rem;
        background:#e5e7eb;color:#111827;letter-spacing:.3px;
    }
    .pill--new{ background:#ffc857;color:#0b1220 }
    .pill--hot{ background:var(--color-secondary,#9e1428);color:#fff }

    #recursos h3, #nuevos h3{ margin-bottom:.25rem }
    #results-counter{ color:#6b7280 }
</style>

</head>

<body data-page-title="Bienvenido Socio De Crecimiento"
      data-page-subtitle="Tu Centro De Aprendizaje Para Aplicar A Tu Negocio"
      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 'socios-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="socios-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="socios-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-3">
                <i data-lucide="badge-check" class="w-4 h-4"></i>
                <span class="text-xs tracking-wide uppercase">Tu Club De Negocios</span>
            </div>
            <h1 class="mt-3 text-3xl md:text-5xl font-extrabold leading-tight text-[var(--color-highlight)]">Socios De Crecimiento</h1>
            <h1 class="text-3xl md:text-4xl font-extrabold leading-tight text-white">Aprende - Aplica - Crece - Repite</h1>
            <p class="text-white/90 mt-2 max-w-2xl">
                Este es tu panel central. Encuentra mentalidad, estrategias, mini cursos, toolkits, plantillas, audios y más para acelerar tu crecimiento.
            </p>
            <div class="mt-4 flex flex-wrap gap-2">
                <a href="#club-categories" class="inline-flex items-center gap-2 text-sm font-semibold px-3 py-2 rounded-lg bg-white text-slate-900 hover:bg-white/90 transition">
                    <i data-lucide="compass" class="w-4 h-4"></i> EXPLORAR CATEGORIAS
                </a>
                <a href="#nuevos" class="inline-flex items-center gap-2 text-sm font-semibold px-3 py-2 rounded-lg bg-white/10 ring-1 ring-white/15 hover:bg-white/15 transition text-white">
                    <i data-lucide="package-plus" class="w-4 h-4"></i> ÚLTIMOS RECURSOS
                </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="socios-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>
            
            <!-- =========================
                 SOCIOS DE CRECIMIENTO — DASHBOARD
                 ========================= -->
            <section id="socios-dashboard" class="p-0">


<!-- CATEGORÍAS (con <a>) -->
<div class="mt-6 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3" id="club-categories">
  <a class="cat-chip" href="/mentalidad"><i data-lucide="brain" class="w-5 h-5"></i> MENTALIDAD</a>
  <a class="cat-chip" href="/audio"><i data-lucide="audio-lines" class="w-5 h-5"></i> AUDIOS</a>
  <a class="cat-chip" href="/entrevistas"><i data-lucide="mic" class="w-5 h-5"></i> ENTREVISTAS</a>
  <a class="cat-chip" href="/businessclass"><i data-lucide="building-2" class="w-5 h-5"></i> BUSINESSCLASS</a>
  <a class="cat-chip" href="/estrategias"><i data-lucide="lightbulb" class="w-5 h-5"></i> ESTRATEGIAS</a>
  <a class="cat-chip" href="/minicursos"><i data-lucide="graduation-cap" class="w-5 h-5"></i> MINI CURSOS</a>
  <a class="cat-chip" href="/toolkits"><i data-lucide="git-merge" class="w-5 h-5"></i> TOOLKITS</a>
  <a class="cat-chip" href="/digitalbooks"><i data-lucide="book-open" class="w-5 h-5"></i> DIGITALBOOKS</a>
  <a class="cat-chip" href="/herramientas"><i data-lucide="wrench" class="w-5 h-5"></i> HERRAMIENTAS</a>
  <a class="cat-chip" href="/plantillas"><i data-lucide="file-spreadsheet" class="w-5 h-5"></i> PLANTILLAS</a>
  <a class="cat-chip" href="/youtube"><i data-lucide="youtube" class="w-5 h-5"></i> YOUTUBE</a>
</div>

              <!-- ÚLTIMAS INCORPORACIONES -->
              <div id="nuevos" class="mt-8">
                <div class="flex items-center justify-between mb-3">
                  <h3 class="text-xl font-extrabold text-gray-800">Últimas Herramientas Incorporadas</h3>
                </div>
                <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="club-card" data-category="estrategias" data-title="Framework de Mensajes 4D" data-tags="copy,oferta">
                    <div class="club-card__top">
                      <span class="pill pill--new">Nuevo</span>
                      <i data-lucide="lightbulb" class="w-6 h-6"></i>
                    </div>
                    <h4 class="club-card__title">Framework de Mensajes 4D</h4>
                    <p class="club-card__desc">Plantilla táctica para alinear dolor, deseo, diferenciador y demostración.</p>
                    <div class="club-card__meta">
                      <span class="meta"><i data-lucide="clock"></i> 8 min</span>
                      <span class="meta"><i data-lucide="file-text"></i> PDF</span>
                    </div>
                    <a href="club/framework-4d.pdf" class="club-card__btn">ABRIR RECURSO</a>
                  </article>

                  <article class="club-card" data-category="minicursos" data-title="Mini Curso: Anuncios Locales" data-tags="ads,facebook">
                    <div class="club-card__top">
                      <span class="pill pill--hot">Popular</span>
                      <i data-lucide="graduation-cap" class="w-6 h-6"></i>
                    </div>
                    <h4 class="club-card__title">Mini Curso: Anuncios Locales</h4>
                    <p class="club-card__desc">3 lecciones para lanzar y optimizar anuncios que convierten.</p>
                    <div class="club-card__meta">
                      <span class="meta"><i data-lucide="clock"></i> 22 min</span>
                      <span class="meta"><i data-lucide="video"></i> Video</span>
                    </div>
                    <a href="club/minicurso-anuncios.php" class="club-card__btn">COMENZAR</a>
                  </article>

                  <article class="club-card" data-category="plantillas" data-title="Plantilla de Presupuesto Pro" data-tags="cotizacion,ventas">
                    <div class="club-card__top">
                      <span class="pill">Actualizado</span>
                      <i data-lucide="file-spreadsheet" class="w-6 h-6"></i>
                    </div>
                    <h4 class="club-card__title">Plantilla de Presupuesto Pro</h4>
                    <p class="club-card__desc">Modelo editable para cotizaciones con cálculos automáticos.</p>
                    <div class="club-card__meta">
                      <span class="meta"><i data-lucide="clock"></i> 5 min</span>
                      <span class="meta"><i data-lucide="sheet"></i> Hoja</span>
                    </div>
                    <a href="club/plantilla-presupuesto.xlsx" class="club-card__btn">DESCARGAR</a>
                  </article>

                  <article class="club-card" data-category="herramientas" data-title="Generador de Propuestas" data-tags="propuesta,ventas">
                    <div class="club-card__top">
                      <i data-lucide="wrench" class="w-6 h-6"></i>
                    </div>
                    <h4 class="club-card__title">Generador de Propuestas</h4>
                    <p class="club-card__desc">Crea propuestas con tu branding en minutos.</p>
                    <div class="club-card__meta">
                      <span class="meta"><i data-lucide="clock"></i> 10 min</span>
                      <span class="meta"><i data-lucide="wand-2"></i> IA</span>
                    </div>
                    <a href="ia-creador-de-propuestas-de-proyectos.php" class="club-card__btn">USAR HERRAMIENTA</a>
                  </article>
                </div>
              </div>
            </section>

            <!-- BLOQUES ADICIONALES (ejemplo curso / CTA) -->
            <section class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="bg-white p-6 rounded-xl shadow-md flex items-center gap-4">
                    <div class="relative w-24 h-24 flex-shrink-0">
                        <svg class="w-full h-full" viewBox="0 0 36 36">
                            <path class="text-gray-200" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="3"></path>
                            <path class="text-[var(--color-secondary)]" stroke-dasharray="25, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"></path>
                        </svg>
                        <div class="absolute inset-0 flex items-center justify-center text-xl font-bold text-[var(--color-primary)]">25%</div>
                    </div>
                    <div>
                        <h4 class="font-bold text-gray-800 text-lg">PROGRESO DEL CURSO</h4>
                        <p class="text-gray-500">¡Sigue Así! Estás En El Camino Correcto</p>
                    </div>
                </div>
                <div class="bg-[var(--color-primary)] text-white p-6 rounded-xl shadow-md md:col-span-2 flex flex-col justify-center">
                    <div class="flex items-center gap-3 mb-2">
                        <i data-lucide="fast-forward" class="w-6 h-6 text-[var(--color-highlight)]"></i>
                        <h4 class="font-bold text-xl uppercase">TU SIGUIENTE PASO...</h4>
                    </div>
                    <p class="text-gray-300 mb-4">La primera impresión es clave. Aprende a optimizar tus fotos para generar confianza inmediata.</p>
                    <a href="lessons.php" class="bg-[var(--color-highlight)] text-[var(--color-primary)] font-bold py-2 px-4 rounded-lg self-start hover:bg-yellow-300 transition-colors">
                        Ir a Módulo 1: Prepara Tu Página
                    </a>
                </div>
            </section>

            <?php include 'push.php'; ?>

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

<!-- ======= JS de filtrado / búsqueda (ligero, sin dependencias) ======= -->
<script>
(function(){
  const $ = (sel, ctx=document) => ctx.querySelector(sel);
  const $$ = (sel, ctx=document) => Array.from(ctx.querySelectorAll(sel));

  const grid = $('#club-grid');
  const latest = $('#club-latest');
  const search = $('#club-search');
  const chips = $$('#club-categories .cat-chip');
  const clearBtn = $('#btn-clear-filters');
  const resultsCounter = $('#results-counter');

  let activeCategory = localStorage.getItem('clubCat') || 'todos';
  let query = '';

  function applyActiveChip(){
    chips.forEach(c => {
      c.classList.toggle('ring-2', c.dataset.category === activeCategory);
      c.classList.toggle('ring-[var(--color-secondary)]', c.dataset.category === activeCategory);
    });
  }

  function filterCards(){
    const cards = $$('.club-card', grid);
    let shown = 0;

    cards.forEach(card => {
      const cat = card.dataset.category || 'otros';
      const text = (card.dataset.title + ' ' + (card.dataset.tags||'')).toLowerCase();
      const matchCat = (activeCategory === 'todos') ? true : (cat === activeCategory);
      const matchText = !query || text.includes(query);

      const visible = matchCat && matchText;
      card.style.display = visible ? '' : 'none';
      if (visible) shown++;
    });

    if(resultsCounter){
      resultsCounter.textContent = `Mostrando ${shown} resultado${shown===1?'':'s'}`;
    }
  }

  // Eventos
  chips.forEach(chip => {
    chip.addEventListener('click', () => {
      activeCategory = chip.dataset.category;
      localStorage.setItem('clubCat', activeCategory);
      applyActiveChip();
      filterCards();
    });
  });

  search?.addEventListener('input', (e) => {
    query = (e.target.value || '').toLowerCase().trim();
    filterCards();
  });

  clearBtn?.addEventListener('click', () => {
    query = '';
    activeCategory = 'todos';
    localStorage.setItem('clubCat', activeCategory);
    if (search) search.value = '';
    applyActiveChip();
    filterCards();
  });

  // Inicial
  if (!chips.some(c => c.dataset.category === activeCategory)) activeCategory = 'todos';
  applyActiveChip();
  filterCards();

  // Render de íconos 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>