<?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);
ob_end_clean();

// --- INCLUSIÓN DE DB Y CARGA DE DATOS ---
require_once('cms/db_connection.php');

$user_id_from_session = $_SESSION['user_id'] ?? 1; 
$user_name = 'Usuario'; // Valor por defecto

// 1. OBTENER EL NOMBRE COMPLETO DESDE LA BASE DE DATOS
try {
    // Usamos $user_id_from_session para buscar el nombre actualizado
    $stmt_user = $pdo->prepare("SELECT full_name FROM users WHERE user_id = ?");
    $stmt_user->execute([$user_id_from_session]);
    $user_data = $stmt_user->fetch(PDO::FETCH_ASSOC);

    if ($user_data && !empty($user_data['full_name'])) {
        $user_name = htmlspecialchars($user_data['full_name']);
        // Opcional: Actualizar la sesión con el nombre correcto para otras páginas
        $_SESSION['user_full_name'] = $user_name; 
    }
} catch (PDOException $e) {
    error_log("Error al cargar full_name en promoter.php: " . $e->getMessage());
}

$website_url = 'https://crm.tunegociolocal.com'; 
try {
$stmt = $pdo->query("SELECT website_url FROM business_info WHERE id = 1 LIMIT 1");
$business_data = $stmt->fetch(PDO::FETCH_ASSOC);
if ($business_data && !empty($business_data['website_url'])) {
$website_url = rtrim($business_data['website_url'], '/');
}
} catch (PDOException $e) {
error_log("Error Al Cargar Los Datos: " . $e->getMessage());
}

// Definiciones de URL para los QR
$default_main_url = $website_url . '/';
$default_offer_url = $website_url . '/oferta.php';
$default_reviews_url = $website_url . '/reviews.php';
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Promocionar Tu Negocio FlowCMS™</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/imask"></script>
    <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>

    <script src="https://unpkg.com/lucide@latest"></script>
    <link rel="stylesheet" href="style.css"> 
    <script src="files/header-manager.js"></script>
    <style>

        .qr-card {
            border: 1px solid #e5e7eb;
            box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
        }
        .qr-canvas {
            min-height: 180px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .qr-card h4 {
            color: var(--color-primary);
        }
        
        .btn-cta-primary {
             background-color: var(--color-primary) !important;
             color: white !important;
             font-weight: 900 !important;
             padding-top: 0.75rem;
             padding-bottom: 0.75rem;
        }
        .btn-cta-secondary {
            background-color: var(--color-secondary) !important;
            color: white !important;
            font-weight: 900 !important;
             padding-top: 0.75rem;
             padding-bottom: 0.75rem;
        }
        .btn-cta-primary:hover { background-color: #1a2b42 !important; }
        .btn-cta-secondary:hover { background-color: #7c1020 !important; }
        
        .manual-card {
            background-color: #fff;
            border: 1px solid #e5e7eb;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 1rem;
            text-align: center;
            transition: all 0.3s ease;
        }
        .manual-mockup-img {
            width: 100%;
            height: auto;
            max-width: 150px;
            object-fit: contain;
            margin-bottom: 0.75rem;
            border-radius: 0.375rem;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
        .qr-card .title-promoter {
            font-size: 1.25rem; /* Text-xl */
            font-weight: 900;
        }
        
        /* * ESTILOS GENÉRICOS PARA WIDGETS DE VIDEO*/
.video-widget{position:relative;overflow:hidden;border-radius:18px;background:linear-gradient(135deg,var(--color-primary,#07162d) 0%,#0b2242 55%,#07162d 100%);color:#fff}
.video-widget .blob{position:absolute;filter:blur(64px);opacity:.35;border-radius:9999px}
.video-widget .blob.bl1{height:280px;width:280px;left:-80px;top:-80px;background:var(--color-secondary,#9e1428)}
.video-widget .blob.bl2{height:280px;width:280px;right:-80px;bottom:-80px;background:#ffc857}
.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .65rem;border-radius:9999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);font-size:.75rem;letter-spacing:.3px}
.hero-cta{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-radius:12px;background:#fff;color:#0b1220;font-weight:800}
.hero-cta.secondary{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.15);font-weight:700}
.video-shell{background:rgba(0,0,0,.35);border-radius:16px;border:1px solid rgba(255,255,255,.12);overflow:hidden}


/* --- CÓDIGO PARA CORREGIR WIDGET EN MÓVIL --- */
@media (max-width: 767px) {
  .video-widget {
    margin-left: -1rem;
    margin-right: -1rem;
    border-radius: 0 !important;
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ===== CÓDIGO PARA MOSTRAR BOTÓN DE VIDEO EN MÓVIL ===== */
@media (max-width: 768px) {
  header.sticky {
    flex-wrap: wrap;
  }

  .show-widget-container {
    width: 100%;
    order: 3;
    text-align: center;
    padding-top: 12px;
    padding-bottom: 4px;
  }
}
    </style>
</head>
<body data-page-title="Material Para Promocionar Tu Negocio"
      data-page-subtitle="Códigos QR de enlaces principales y descarga de manuales"
      data-page-icon="qr-code">

    <div id="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 'cms-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 flex justify-end p-0" id="show-welcome-intro-video-container">
    <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="welcome-intro-video">
        <i data-lucide="eye" class="w-5 h-5"></i>
        <span>VER VIDEO INTRODUCTORIO</span>
    </button>
</div>
        </header>

        <div id="content-area" class="p-4 md:p-8 space-y-8">
            <div class="space-y-8">
                
                <section class="p-6 md:p-10 video-widget" id="welcome-intro-video">
    <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>
                            <span class="chip"><i data-lucide="megaphone" class="w-4 h-4"></i> VIDEO TUTORIAL</span>
                            <h1 class="mt-3 text-3xl md:text-4xl font-extrabold leading-tight text-[var(--color-highlight)]">¡<?php echo htmlspecialchars($user_name); ?>! <br /><spam class="text-white"> Comienza A Promocionar Tu Negocio Con Estratégia</spam></h1>
                            <p class="mt-2 text-white/90 max-w-2xl">
                                Aprende a utilizar estos códigos QR y manuales para impulsar la visibilidad y las ventas de tu negocio local.
                            </p>
                            <div class="mt-4 flex flex-wrap gap-3">
                                <a href="#qr-generators-container" class="hero-cta btn-cta-primary rounded-lg text-sm">
                                    <i data-lucide="scan" class="w-5 h-5"></i> CÓDIGOS DE PROMOCIÓN
                                </a>
                                <a href="#manuals-section" class="hero-cta secondary rounded-lg text-sm">
                                    <i data-lucide="book-open" class="w-4 h-4"></i> RECURSOS ESTRATÉGICOS
                                </a>
                            </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" id="videoPlayer" 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 Tutorial: Promoción Efectiva
                                        </span>
                                        <span class="inline-flex items-center gap-2">
                                            <i data-lucide="clock" class="w-4 h-4"></i> 2–3 min
                                        </span>

                        <button class="hide-widget-btn inline-flex items-center gap-2 text-xs font-semibold text-red-400 hover:text-red-300 transition-colors py-1 px-2 rounded-md" 
                                data-widget-id="welcome-intro-video" 
                                title="Ocultar el video de bienvenida">
                            OCULTAR VIDEO
                            <i data-lucide="x" class="w-4 h-4"></i>
                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                
                <div class="bg-white p-6 rounded-xl shadow-md space-y-6">
    <h3 class="text-3xl font-extrabold text-white mb-4 flex items-center gap-2 px-4 py-3 bg-[var(--color-primary)] rounded-lg">
        <i data-lucide="scan" class="w-7 h-7 text-[var(--color-highlight)]"></i> CÓDIGOS QR DE ALTO IMPACTO
    </h3>
    <p class="text-md text-gray-600">Genera códigos QR de alta calidad para imprimir en material promocional, tarjetas de presentación o flyers.</p>
    
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6" id="qr-generators-container">
        
        <div class="qr-card p-4 rounded-xl space-y-4">
            <h4 class="title-promoter text-center text-2xl font-black text-[var(--color-primary)]">Página Principal</h4>
            <div class="qr-canvas" id="qr-main"></div>
            <input type="url" id="url-main" class="w-full p-2 border border-gray-300 rounded-lg text-sm" placeholder="https://tuweb.com" value="<?php echo htmlspecialchars($default_main_url); ?>">
            
            <button type="button" id="share-main" class="w-full btn-cta-primary rounded-lg uppercase inline-flex items-center justify-center gap-2 text-sm">
                <i data-lucide="copy" class="w-4 h-4"></i> COPIAR ENLACE
            </button>
            
            <a href="#" download="qr-principal.png" id="download-main" class="w-full btn-cta-secondary rounded-lg uppercase inline-flex items-center justify-center gap-2 transition-opacity opacity-50 pointer-events-none text-sm">
                <i data-lucide="download" class="w-4 h-4"></i> DESCARGAR
            </a>
        </div>
        
        <div class="qr-card p-4 rounded-xl space-y-4">
            <h4 class="title-promoter text-center text-2xl font-black text-[var(--color-primary)]">Página De Oferta</h4>
            <div class="qr-canvas" id="qr-offer"></div>
            <input type="url" id="url-offer" class="w-full p-2 border border-gray-300 rounded-lg text-sm" placeholder="https://tuweb.com/oferta" value="<?php echo htmlspecialchars($default_offer_url); ?>">
            
            <button type="button" id="share-offer" class="w-full btn-cta-primary rounded-lg uppercase inline-flex items-center justify-center gap-2 text-sm">
                <i data-lucide="copy" class="w-4 h-4"></i> COPIAR ENLACE
            </button>
            
            <a href="#" download="qr-oferta.png" id="download-offer" class="w-full btn-cta-secondary rounded-lg uppercase inline-flex items-center justify-center gap-2 transition-opacity opacity-50 pointer-events-none text-sm">
                <i data-lucide="download" class="w-4 h-4"></i> DESCARGAR
            </a>
        </div>
        
        <div class="qr-card p-4 rounded-xl space-y-4">
            <h4 class="title-promoter text-center text-2xl font-black text-[var(--color-primary)]">Página De Reseñas</h4>
            <div class="qr-canvas" id="qr-reviews"></div>
            <input type="url" id="url-reviews" class="w-full p-2 border border-gray-300 rounded-lg text-sm" placeholder="https://tuweb.com/reseñas" value="<?php echo htmlspecialchars($default_reviews_url); ?>">
            
            <button type="button" id="share-reviews" class="w-full btn-cta-primary rounded-lg uppercase inline-flex items-center justify-center gap-2 text-sm">
                <i data-lucide="copy" class="w-4 h-4"></i> COPIAR ENLACE
            </button>
            
            <a href="#" download="qr-resenas.png" id="download-reviews" class="w-full btn-cta-secondary rounded-lg uppercase inline-flex items-center justify-center gap-2 transition-opacity opacity-50 pointer-events-none text-sm">
                <i data-lucide="download" class="w-4 h-4"></i> DESCARGAR
            </a>
        </div>
        
    </div>
</div>
                
     <div class="bg-white p-6 rounded-xl shadow-md space-y-6" id="manuals-section">
    <h3 class="text-3xl font-extrabold text-gray-800 mb-4 flex items-center gap-2 border-b pb-2">
        <i data-lucide="book-open-check" class="w-8 h-8 text-[var(--color-secondary)]"></i> RECURSOS ESTRATÉGICOS DE CRECIMIENTO
    </h3>
    <p class="text-sm text-gray-600">Estos recursos te ayudarán a enfocar mejor tus esfuerzos de marketing y a obtener mejores resultados con FlowCMS®.</p>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        
        <div class="manual-card rounded-lg shadow-sm">
            <img src="https://siteflow.generamasclientes.com/img/SiteFlowDark.webp" alt="Mockup Cliente Ideal" style="max-width: 400px;">
            
            <h2 class="text-4xl font-black text-[var(--color-primary)] flex items-center justify-center gap-2 mt-2 mb-1">
                <i data-lucide="target" class="w-6 h-6 text-[var(--color-secondary)]"></i> 
                <span>Manual De Cliente Ideal</span>
            </h2>
            <p class="text-xs font-black text-[var(--color-secondary)] mb-3">RECURSO ESENCIAL DE MARKETING</p>
            
            <p class="text-sm text-gray-600 mb-3">Guía Para Definir Y Atraer A Tu Cliente Perfecto</p>
            <a href="files/manual-cliente-ideal.pdf" download="manual-cliente-ideal.pdf" class="w-full btn-cta-primary rounded-lg uppercase inline-flex items-center justify-center gap-2 text-sm">
                <i data-lucide="download" class="w-4 h-4"></i> DESCARGAR MANUAL
            </a>
        </div>
        
        <div class="manual-card rounded-lg shadow-sm">
            <img src="https://siteflow.generamasclientes.com/img/SiteFlowDark.webp" alt="Mockup Presencia Digital" style="max-width: 400px;">
            
            <h2 class="text-4xl font-black text-[var(--color-primary)] flex items-center justify-center gap-2 mt-2 mb-1">
                <i data-lucide="globe" class="w-6 h-6 text-[var(--color-secondary)]"></i> 
                <span>Manual De Presencia Digital</span>
            </h2>
            <p class="text-xs font-black text-[var(--color-secondary)] mb-3">CHECKLIST DE VISIBILIDAD ONLINE</p>
            
            <p class="text-sm text-gray-600 mb-3">Checklist Para Optimizar Tu Negocio En Línea</p>
            <a href="files/manual-presencia-digital.pdf" download="manual-presencia-digital.pdf" class="w-full btn-cta-primary rounded-lg uppercase inline-flex items-center justify-center gap-2 text-sm">
                <i data-lucide="download" class="w-4 h-4"></i> DESCARGAR MANUAL
            </a>
        </div>
        
    </div>
</div>
                            <?php include 'push.php'; ?>
                            
                <div id="video-instrucciones" class="space-y-6">
                    <div class="bg-white p-6 rounded-xl shadow-md">
                        <div class="text-center md:text-left mb-6">
                            <h4 class="text-2xl font-black uppercase text-black flex items-center justify-center md:justify-start">
                                <i data-lucide="book-open" class="mr-3 text-[var(--color-secondary)] w-7 h-7"></i>
                                INSTRUCCIONES IMPORTANTES
                            </h4>
                            <p class="step-subtitle uppercase text-sm mt-1 text-gray-500">REVISA ESTOS PUNTOS DETALLADAMENTE</p>
                        </div>

                        <div class="space-y-4">
                            <div class="flex items-start gap-3">
                                <i data-lucide="refresh-cw" class="w-5 h-5 mt-0.5" style="color: var(--color-secondary);"></i>
                                <div>
                                    <h5 class="font-black text-gray-800">MANTÉN LA INFORMACIÓN ACTUALIZADA</h5>
                                    <p class="text-sm text-gray-600">Aseg\u00farate de que las URLs en los campos de texto est\u00e9n siempre actualizadas a tus p\u00e1ginas de destino m\u00e1s recientes.</p>
                                </div>
                            </div>
                            <div class="flex items-start gap-3">
                                <i data-lucide="printer" class="w-5 h-5 mt-0.5" style="color: var(--color-secondary);"></i>
                                <div>
                                    <h5 class="font-black text-gray-800">DESCARGA Y DISTRIBUYE EL QR</h5>
                                    <p class="text-sm text-gray-600">Usa el bot\u00f3n "Descargar" para obtener el c\u00f3digo QR en formato PNG. Impr\u00edntelo en volantes, tarjetas o en tus veh\u00edculos.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

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

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

    // --- NOTIFICACIONES TOAST (Para referencia si lo necesitas) ---
    /*
    const showToast = (message, type = 'success') => {
        const toastContainer = document.getElementById('toast-container');
        const toast = document.createElement('div');
        toast.className = `toast ${type}`;
        toast.textContent = message;
        toastContainer.appendChild(toast);
        setTimeout(() => { toast.classList.add('show'); }, 100);
        setTimeout(() => {
            toast.classList.remove('show');
            setTimeout(() => { toast.remove(); }, 300);
        }, 3000);
    };
    */
    
    const WIDGET_ID = 'promoter-intro-video';
    
    // --- LÓGICA DE VISIBILIDAD DE WIDGET (Consolidada y Limpia) ---
    const toggleWidgetVisibility = (widgetId, isHidden) => {
        const widget = document.getElementById(widgetId);
        // Usamos querySelector para encontrar el bot\u00f3n dentro del show-widget-container
        const showButton = document.querySelector(`.show-widget-container [data-widget-id="${widgetId}"]`);
        const showContainer = showButton ? showButton.closest('.show-widget-container') : null;
        const videoPlayer = widget ? widget.querySelector('video') : null;

        if (!widget || !showContainer) return; 

        if (isHidden) {
            widget.classList.add('hidden');
            showContainer.classList.remove('hidden');
            if (videoPlayer) videoPlayer.pause(); 
        } else {
            widget.classList.remove('hidden');
            showContainer.classList.add('hidden');
        }
        localStorage.setItem(`hide_${widgetId}`, isHidden ? 'true' : 'false');
    };

    // Aplicar estado de visibilidad al cargar
    const isHidden = localStorage.getItem(`hide_${WIDGET_ID}`) === 'true';
    toggleWidgetVisibility(WIDGET_ID, isHidden);
    
    // Event listeners para los botones de ocultar/mostrar (Solo necesitamos estos)
    document.querySelectorAll('.hide-widget-btn').forEach(button => {
        button.addEventListener('click', (event) => {
            toggleWidgetVisibility(WIDGET_ID, true); 
        });
    });
    document.querySelectorAll('.show-widget-btn').forEach(button => {
        button.addEventListener('click', (event) => {
            toggleWidgetVisibility(WIDGET_ID, false); 
        });
    });
    
    // --- LÓGICA DE GENERACIÓN Y DESCARGA DE QR (Con caracteres arreglados) ---
    const qrTargets = [
        { id: 'main', label: 'Página Principal' },
        { id: 'offer', label: 'Página de Oferta' },
        { id: 'reviews', label: 'Página de Reseñas' }
    ];
    
    const generateQRCode = (url, containerId, downloadId) => {
        const container = document.getElementById(containerId);
        const downloadBtn = document.getElementById(downloadId);
        
        container.innerHTML = ''; 
        
        if (url && url !== 'https://') {
            container.style.display = 'flex'; 
            
            const qr = new QRCode(container, {
                text: url,
                width: 160,
                height: 160,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H
            });

            setTimeout(() => {
                const canvas = container.querySelector('canvas');
                if (canvas) {
                    const dataUrl = canvas.toDataURL('image/png');
                    downloadBtn.href = dataUrl;
                    downloadBtn.classList.remove('opacity-50', 'pointer-events-none');
                }
            }, 150);

        } else {
            downloadBtn.classList.add('opacity-50', 'pointer-events-none');
            container.innerHTML = '<span class="text-sm text-gray-400">Ingresa una URL válida</span>';
            container.style.display = 'flex'; 
        }
    };

    // Inicializar y vincular los generadores de QR
    qrTargets.forEach(target => {
        const urlInput = document.getElementById(`url-${target.id}`);
        const shareButton = document.getElementById(`share-${target.id}`); // Ahora es un bot\u00f3n

        const updateQr = () => {
            let url = urlInput.value.trim();
            if (url && !url.match(/^[a-zA-Z]+:\/\//)) {
                 url = 'https://' + url;
            }
            generateQRCode(url, `qr-${target.id}`, `download-${target.id}`);
        };

        updateQr();
        urlInput.addEventListener('input', updateQr);

        // Lógica de Copiar Enlace (Ajustada para el nuevo bot\u00f3n)
        shareButton.addEventListener('click', (e) => {
            e.preventDefault();
            const textToCopy = urlInput.value.trim();
            if (textToCopy) {
                navigator.clipboard.writeText(textToCopy).then(() => {
                    const originalText = shareButton.innerHTML;
                    // Feedback visual r\u00e1pido
                    shareButton.innerHTML = '<i data-lucide="check" class="w-4 h-4"></i> ¡COPIADO!';
                    lucide.createIcons();
                    setTimeout(() => {
                        shareButton.innerHTML = originalText;
                        lucide.createIcons();
                    }, 2000);
                });
            }
        });
    });

    // Inicializar iconos de Lucide
    lucide.createIcons();
});
</script>

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

    const toggleWidgetVisibility = (widgetId, isHidden) => {
        const widget = document.getElementById(widgetId);
        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;

        if (isHidden) {
            widget.classList.add('hidden');
            showContainer.classList.remove('hidden');
            if (videoPlayer) videoPlayer.pause(); 
        } else {
            widget.classList.remove('hidden');
            showContainer.classList.add('hidden');
        }
        localStorage.setItem(`hide_${widgetId}`, isHidden ? 'true' : 'false');
    };

    document.querySelectorAll('.hide-widget-btn').forEach(button => {
        button.addEventListener('click', (event) => {
            const widgetId = event.currentTarget.dataset.widgetId;
            toggleWidgetVisibility(widgetId, true); 
        });
    });

    document.querySelectorAll('.show-widget-btn').forEach(button => {
        button.addEventListener('click', (event) => {
            const widgetId = event.currentTarget.dataset.widgetId;
            toggleWidgetVisibility(widgetId, false); 
        });
    });

    document.querySelectorAll('.video-widget').forEach(widget => {
        const widgetId = widget.id;
        const isHidden = localStorage.getItem(`hide_${widgetId}`) === 'true';
        if (isHidden) {
            toggleWidgetVisibility(widgetId, true);
        }
    });
});
</script>

</body>
</html>