<!--
═══════════════════════════════════════════════════════════════════════════════
███████╗██╗   ██╗██╗  ██╗ ██████╗ ███╗   ███╗███████╗██████╗  ██████╗██╗ ██████╗ 
╚══██╔══╝██║   ██║██║ ██╔╝██╔═══██╗████╗ ████║██╔════╝██╔══██╗██╔════╝██║██╔═══██╗
   ██║   ██║   ██║█████╔╝ ██║   ██║██╔████╔██║█████╗  ██████╔╝██║     ██║██║   ██║
   ██║   ██║   ██║██╔═██╗ ██║   ██║██║╚██╔╝██║██╔══╝  ██╔══██╗██║     ██║██║   ██║
   ██║   ╚██████╔╝██║  ██╗╚██████╔╝██║ ╚═╝ ██║███████╗██║  ██║╚██████╗██║╚██████╔╝
   ╚═╝    ╚═════╝ ╚═╝  ╚═╝ ╚═════╝ ╚═╝     ╚═╝╚══════╝╚═╝  ╚═╝ ╚═════╝╚═╝ ╚═════╝ 
═══════════════════════════════════════════════════════════════════════════════

TUKOMERCIO - Plataforma de Comercio Electrónico, Gamificación y Gestión Empresarial
Anteriormente conocido como: Trayectoria / BizFlow Studio

═══════════════════════════════════════════════════════════════════════════════
AVISO DE PROPIEDAD INTELECTUAL Y DERECHOS DE AUTOR
═══════════════════════════════════════════════════════════════════════════════

© 2024-2026 Carlos Eduardo Huérfano Bermúdez. Todos los derechos reservados.

TITULAR DE DERECHOS:
  Nombre:     Carlos Eduardo Huérfano Bermúdez
  C.C.:       1.064.986.917 (Cereté, Córdoba, Colombia)
  Contacto:   carlos-5100@hotmail.com | +57 322 818 8375
  Ubicación:  Bogotá D.C., Colombia

INFORMACIÓN DEL PROYECTO:
  Nombre:     TuKomercio
  Inicio:     Julio 24, 2024
  Repositorio: github.com/routeres (routeres@gmail.com)

═══════════════════════════════════════════════════════════════════════════════
TÉRMINOS DE USO Y RESTRICCIONES
═══════════════════════════════════════════════════════════════════════════════

Este código fuente es CONFIDENCIAL y constituye un SECRETO COMERCIAL.

QUEDA ESTRICTAMENTE PROHIBIDO sin autorización ESCRITA del titular:

  1. Copiar, reproducir o duplicar este código, total o parcialmente
  2. Modificar, adaptar o crear obras derivadas
  3. Distribuir, publicar, sublicenciar o transferir a terceros
  4. Usar para desarrollo de productos competidores
  5. Realizar ingeniería inversa, descompilar o desensamblar
  6. Remover o alterar este aviso de propiedad intelectual

El acceso a este código NO otorga ninguna licencia implícita o explícita.

═══════════════════════════════════════════════════════════════════════════════
PROTECCIÓN LEGAL
═══════════════════════════════════════════════════════════════════════════════

Este software está protegido por:

  • Ley 23 de 1982 - Derechos de Autor (Colombia)
  • Ley 1915 de 2018 - Modernización Derechos de Autor (Colombia)
  • Decisión Andina 351 de 1993 - Régimen Común sobre Derecho de Autor
  • Convenio de Berna para la Protección de Obras Literarias y Artísticas
  • Tratado OMPI sobre Derecho de Autor (WCT)
  • Acuerdo ADPIC/TRIPS - Organización Mundial del Comercio

SANCIONES POR INFRACCIÓN:
  • Civiles: Indemnización por daños y perjuicios (Art. 57, Ley 23/1982)
  • Penales: Prisión de 4 a 8 años y multa (Art. 271, Código Penal Colombiano)

═══════════════════════════════════════════════════════════════════════════════
JURISDICCIÓN
═══════════════════════════════════════════════════════════════════════════════

Cualquier disputa será resuelta exclusivamente por los tribunales de
Bogotá D.C., Colombia, bajo las leyes de la República de Colombia.

═══════════════════════════════════════════════════════════════════════════════

Para solicitar autorización de uso: carlos-5100@hotmail.com

═══════════════════════════════════════════════════════════════════════════════
-->


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cargando tienda...</title>

    <!-- ★ SEO / Open Graph (se actualizan dinámicamente con JS tras cargar la tienda) -->
    <meta name="description" id="metaDesc" content="Tienda online en TuKomercio">
    <meta name="keywords"    id="metaKeywords" content="">
    <meta property="og:type"        content="website">
    <meta property="og:title"       id="ogTitle"       content="Tienda online">
    <meta property="og:description" id="ogDesc"        content="Tienda online en TuKomercio">
    <meta property="og:image"       id="ogImage"       content="/assets/icons/pwa-512.svg">
    <meta property="og:url"         id="ogUrl"         content="">
    <meta property="og:site_name"   id="ogSiteName"    content="TuKomercio">
    <meta name="twitter:card"       content="summary_large_image">
    <meta name="twitter:title"      id="twTitle"       content="Tienda online">
    <meta name="twitter:description" id="twDesc"       content="Tienda online en TuKomercio">
    <meta name="twitter:image"      id="twImage"       content="/assets/icons/pwa-512.svg">

    <!-- ★ PWA — manifest estático -->
    <link rel="manifest" id="pwaManifest" href="/tienda/manifest.json">
    <meta name="theme-color" id="themeColor" content="#D63329">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" id="appleTitle" content="Mi Tienda">
    <link rel="apple-touch-icon" id="appleTouchIcon" href="/assets/icons/pwa-192.svg">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Caveat:wght@500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="/assets/tienda/tienda.css">
    <link rel="stylesheet" href="/assets/tienda/product-detail.css">
    <style>
    /* ★ TRUST STRIP — Indicadores de confianza del vendedor */
    #trustStrip {
        background: #fff;
        border-top: 1px solid #e2e8f0;
        border-bottom: 1px solid #e2e8f0;
        padding: 10px 20px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .trust-inner {
        display: flex;
        align-items: center;
        gap: 28px;
        max-width: 1200px;
        margin: 0 auto;
        white-space: nowrap;
    }
    .trust-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.82rem;
        color: #475569;
        flex-shrink: 0;
    }
    .trust-item .ti-icon {
        font-size: 0.9rem;
        flex-shrink: 0;
    }
    .trust-item strong { color: #1e293b; }
    .trust-sep {
        width: 1px;
        height: 16px;
        background: #e2e8f0;
        flex-shrink: 0;
    }
    .trust-stars {
        display: inline-flex;
        gap: 1px;
        color: #f59e0b;
        font-size: 0.75rem;
    }
    .trust-verified {
        background: #dbeafe;
        color: #1d4ed8;
        padding: 2px 8px;
        border-radius: 20px;
        font-size: 0.72rem;
        font-weight: 700;
    }
    @media (max-width: 600px) {
        .trust-inner { gap: 18px; }
        .trust-item { font-size: 0.78rem; }
    }
    </style>
</head>
<body>

<!-- SPLASH SCREEN -->
<div class="splash-screen" id="splashScreen">
    <div class="splash-content">
        <div class="splash-logo"><i class="fas fa-store"></i></div>
        <h1 class="splash-title" id="splashTitle">Mi Tienda</h1>
        <p class="splash-subtitle" id="splashSubtitle">Bienvenido</p>
        <div class="splash-spinner"></div>
    </div>
    <p class="splash-tap-hint">Toca para continuar</p>
</div>

<!-- LOADING -->
<div class="loading-screen" id="loadingScreen">
    <div class="loading-spinner"></div>
    <p>Cargando tienda...</p>
</div>

<!-- ERROR -->
<div class="error-screen" id="errorScreen">
    <i class="fas fa-store-slash error-icon"></i>
    <h2>Tienda no encontrada</h2>
    <p id="errorMessage">No pudimos encontrar esta tienda.</p>
    <a href="/" class="error-btn">Ir al inicio</a>
</div>

<!-- TOP BANNER -->
<div class="top-banner" id="topBanner">
    <i class="fas fa-truck"></i>
    <span id="bannerText">Envío gratis en compras mayores a $150.000</span>
</div>

<!-- NAVBAR -->
<nav class="navbar">
    <div class="navbar-content">
        <button class="menu-toggle mobile-only" onclick="toggleSidebar()">
            <i class="fas fa-bars"></i>
        </button>
        
        <a href="#" class="navbar-brand">
            <img src="" alt="Logo" class="store-logo hidden" id="storeLogo">
            <div class="store-logo-placeholder" id="logoPlaceholder">
                <i class="fas fa-store"></i>
            </div>
            <span class="store-name" id="storeNameDisplay">Mi Tienda</span>
        </a>
        
        <div class="search-bar" id="searchBar">
            <i class="fas fa-search search-icon" aria-hidden="true"></i>
            <input
                type="search"
                id="searchInput"
                placeholder="Buscar productos..."
                autocomplete="off"
                autocorrect="off"
                autocapitalize="off"
                spellcheck="false"
                inputmode="search"
                enterkeyhint="search"
                aria-label="Buscar productos">
            <button
                type="button"
                class="search-clear"
                id="searchClear"
                onclick="clearSearchInput()"
                aria-label="Limpiar búsqueda"
                tabindex="-1">
                <i class="fas fa-times" aria-hidden="true"></i>
            </button>
        </div>
        
        <button class="cart-btn" onclick="goToCart()">
            <i class="fas fa-shopping-cart"></i>
            <span class="cart-text">Carrito</span>
            <span class="cart-badge" id="cartBadge" style="display:none;">0</span>
        </button>
    </div>
</nav>

<!-- ★ v3.7 SEARCH OVERLAY — fullscreen search con resultados en vivo (mobile-first) -->
<div class="search-overlay" id="searchOverlay" aria-hidden="true">
    <div class="search-overlay-backdrop" id="searchOverlayBackdrop"></div>
    <div class="search-overlay-content">
        <header class="search-overlay-header">
            <button type="button" class="search-back" id="searchOverlayClose" aria-label="Cerrar búsqueda">
                <i class="fas fa-chevron-left" aria-hidden="true"></i>
            </button>
            <div class="search-overlay-field">
                <i class="fas fa-search search-icon" aria-hidden="true"></i>
                <input
                    type="search"
                    id="searchOverlayInput"
                    placeholder="¿Qué estás buscando?"
                    autocomplete="off"
                    autocorrect="off"
                    autocapitalize="off"
                    spellcheck="false"
                    inputmode="search"
                    enterkeyhint="search"
                    aria-label="Buscar productos">
                <button type="button" class="search-clear" id="searchOverlayClear" aria-label="Limpiar" tabindex="-1">
                    <i class="fas fa-times" aria-hidden="true"></i>
                </button>
            </div>
        </header>
        <div class="search-overlay-body" id="searchOverlayBody">
            <!-- Estado vacío / resultados / sin resultados se inyectan aquí -->
        </div>
    </div>
</div>

<!-- HERO BANNER (Ecosistema) -->
<section class="hero-banner" id="heroBanner">
    <div class="hero-banner-overlay"></div>
    <div class="hero-banner-content">
        <h2 class="hero-banner-title" id="heroBannerTitle">Tu Ecosistema de Soluciones</h2>
        <p class="hero-banner-subtitle" id="heroBannerSubtitle">Descripción del negocio</p>
        <div class="hero-banner-badges" id="heroBannerBadges"></div>
    </div>
</section>

<!-- PROMO BANNER -->
<div class="promo-banner" id="promoBanner">
    <span id="promoText">⚡ ¡OFERTAS DE TEMPORADA!</span>
</div>

<!-- SLIDER -->
<section class="slider-section" id="sliderSection">
    <div class="slider-container">
        <div class="slider-track" id="sliderTrack"></div>
        <button class="slider-btn prev" onclick="slideMove(-1)">
            <i class="fas fa-chevron-left"></i>
        </button>
        <button class="slider-btn next" onclick="slideMove(1)">
            <i class="fas fa-chevron-right"></i>
        </button>
        <div class="slider-dots" id="sliderDots"></div>
    </div>
</section>

<!-- ★ TRUST STRIP — Indicadores de confianza del vendedor -->
<div id="trustStrip" style="display:none;">
    <!-- Se inyecta dinámicamente por tienda.js loadTrustData() -->
</div>

<!-- ★ STATS PERSONALIZADOS (Sprint 9) -->
<div id="statsSection" style="display:none;"></div>

<!-- PROMO BOXES -->
<section class="promo-boxes-section" id="promoBoxesSection">
    <div class="promo-boxes-grid" id="promoBoxesGrid"></div>
</section>

<!-- SIDEBAR OVERLAY (Mobile) -->
<div class="sidebar-overlay" id="sidebarOverlay"></div>

<!-- MAIN CONTAINER -->
<main class="main-container" id="mainContainer">
    
    <!-- SIDEBAR -->
    <aside class="sidebar" id="sidebar">
        <div class="sidebar-header">
            <h3 class="sidebar-title">
                <i class="fas fa-layer-group"></i> 
                Categorías
            </h3>
            <button class="sidebar-close" onclick="toggleSidebar(true)">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <ul class="category-list" id="categoryList">
            <li class="category-item active" data-category="todas" onclick="filterCategory('todas', this)">
                <i class="fas fa-th-large"></i>
                <span>Todas</span>
            </li>
        </ul>
        
        <!-- Sidebar Toggle Button -->
        <button class="sidebar-toggle-btn desktop-only" onclick="toggleSidebar()">
            <i class="fas fa-chevron-left"></i>
        </button>
    </aside>
    
    <!-- PRODUCTS -->
    <section class="products-section">
        <div class="products-header">
            <div>
                <h2 class="products-title" id="productsTitle">Todos los productos</h2>
                <p class="products-count">
                    <span id="productCount">0</span> productos encontrados
                </p>
            </div>
            <div class="products-view-options">
                <button class="view-btn active" onclick="setGridView('grid')" title="Vista cuadrícula">
                    <i class="fas fa-th"></i>
                </button>
                <button class="view-btn" onclick="setGridView('list')" title="Vista lista">
                    <i class="fas fa-list"></i>
                </button>
            </div>
        </div>
        <div class="products-grid" id="productsGrid"></div>
    </section>
</main>

<!-- ★ GALERÍA LIBRE (Sprint 10) -->
<section id="galeriaSection" style="display:none;padding:36px 20px 40px;background:#fff;border-top:1px solid #e2e8f0;">
    <div style="max-width:1100px;margin:0 auto;">
        <h2 id="galeriaTitulo" style="text-align:center;font-size:1.3rem;font-weight:700;margin-bottom:22px;color:#1a1a1a;">📸 Nuestra galería</h2>
        <div id="galeriaGrid"></div>
    </div>
</section>

<!-- ★ TESTIMONIOS (Sprint 8) -->
<section id="testimoniosSection" style="display:none;padding:40px 20px;background:#f8fafc;border-top:1px solid #e2e8f0;">
    <div style="max-width:1100px;margin:0 auto;">
        <h2 id="testimoniosTitulo" style="text-align:center;font-size:1.4rem;font-weight:700;margin-bottom:28px;color:#1a1a1a;">Lo que dicen nuestros clientes</h2>
        <div id="testimoniosGrid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;"></div>
    </div>
</section>

<!-- ★ REDES SOCIALES FLOTANTES (Sprint 7) -->
<div class="social-float-stack" id="socialFloatStack" style="display:none;"></div>

<!-- WHATSAPP FLOAT -->
<a href="#" class="whatsapp-float" id="whatsappBtn" target="_blank">
    <i class="fab fa-whatsapp"></i>
    <span class="whatsapp-tooltip">¿Necesitas ayuda?</span>
</a>

<!-- TOAST -->
<div class="toast" id="toast"></div>

<!-- BACK TO TOP -->
<button class="back-to-top" id="backToTop" onclick="scrollToTop()">
    <i class="fas fa-chevron-up"></i>
</button>

<!-- ★ FOOTER con link a perfil del negocio -->
<footer id="storeFooter" style="display:none;background:#f8fafc;border-top:1px solid #e2e8f0;padding:20px 24px;text-align:center;font-size:0.82rem;color:#64748b;">
    <div style="max-width:900px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;">
        <a id="footerPerfilLink" href="#" style="color:#475569;text-decoration:none;display:inline-flex;align-items:center;gap:5px;">
            <i class="fas fa-store" style="font-size:0.85rem;"></i>
            <span id="footerNombre">Ver perfil del negocio</span>
        </a>
        <span style="color:#cbd5e1;">|</span>
        <span>Powered by <strong style="color:#D63329;">TuKomercio</strong></span>
        <!-- Botón instalar PWA (solo aparece si el navegador soporta install) -->
        <button id="pwaInstallBtn" style="display:none;align-items:center;gap:6px;background:#D63329;color:#fff;border:none;padding:7px 16px;border-radius:20px;font-size:0.8rem;font-weight:600;cursor:pointer;" onclick="instalarPWA()">
            <i class="fas fa-download"></i> Instalar app
        </button>
    </div>
</footer>

<!-- SCRIPTS -->
<script src="/assets/tienda/product-detail.js"></script>
<script src="/assets/tienda/tienda.js"></script>

<script>
// ──────────────────────────────────────────────────────────────────────────
// Back to top
// ──────────────────────────────────────────────────────────────────────────
window.addEventListener('scroll', function() {
    const btn = document.getElementById('backToTop');
    if (btn) btn.classList.toggle('visible', window.scrollY > 400);
});
function scrollToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); }

// Grid view toggle
function setGridView(view) {
    const grid = document.getElementById('productsGrid');
    if (!grid) return;
    grid.classList.remove('view-grid', 'view-list');
    grid.classList.add('view-' + view);
    document.querySelectorAll('.view-btn').forEach(btn => {
        btn.classList.toggle('active', btn.querySelector('i').className.includes(view === 'grid' ? 'th' : 'list'));
    });
}

// ──────────────────────────────────────────────────────────────────────────
// ★ PWA — Service Worker + Install prompt
// ──────────────────────────────────────────────────────────────────────────
const PWA_LOG = (msg, ...a) => console.log(`[PWA tienda] ${msg}`, ...a);
const PWA_WARN = (msg, ...a) => console.warn(`[PWA tienda] ⚠️ ${msg}`, ...a);
let _deferredInstallPrompt = null;

// Registrar SW
if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/sw.js', { scope: '/' })
            .then(reg => {
                PWA_LOG(`✅ SW registrado (scope: ${reg.scope})`);
                reg.addEventListener('updatefound', () => {
                    const newSW = reg.installing;
                    PWA_LOG('🔄 Nueva versión del SW encontrada, instalando...');
                    newSW.addEventListener('statechange', () => {
                        PWA_LOG(`SW state: ${newSW.state}`);
                        if (newSW.state === 'installed' && navigator.serviceWorker.controller) {
                            PWA_LOG('✅ Nueva versión lista — recarga para activar');
                        }
                    });
                });
            })
            .catch(err => {
                PWA_WARN(`SW no se pudo registrar: ${err.message}`);
            });
    });
} else {
    PWA_WARN('Este navegador no soporta Service Workers');
}

// Capturar evento de instalación
window.addEventListener('beforeinstallprompt', (e) => {
    e.preventDefault();
    _deferredInstallPrompt = e;
    PWA_LOG('📲 PWA instalable — mostrando botón');
    const btn = document.getElementById('pwaInstallBtn');
    if (btn) btn.style.display = 'inline-flex';
});

window.addEventListener('appinstalled', () => {
    PWA_LOG('✅ App instalada por el usuario');
    _deferredInstallPrompt = null;
    const btn = document.getElementById('pwaInstallBtn');
    if (btn) btn.style.display = 'none';
});

function instalarPWA() {
    if (!_deferredInstallPrompt) {
        PWA_WARN('instalarPWA() llamado sin prompt disponible');
        return;
    }
    PWA_LOG('📲 Mostrando prompt de instalación...');
    _deferredInstallPrompt.prompt();
    _deferredInstallPrompt.userChoice.then(choice => {
        PWA_LOG(`Usuario eligió: ${choice.outcome}`);
        _deferredInstallPrompt = null;
        const btn = document.getElementById('pwaInstallBtn');
        if (btn) btn.style.display = 'none';
    }).catch(err => {
        PWA_WARN(`Error en userChoice: ${err.message}`);
    });
}

// ──────────────────────────────────────────────────────────────────────────
// ★ SEO + manifest dinámico — se llama desde tienda.js tras cargar la tienda
// ──────────────────────────────────────────────────────────────────────────
window.actualizarMetasTienda = function(config) {
    // config = { nombre, descripcion, logo_url, slug, color, seo }
    try {
        const seo    = config.seo || {};
        const nombre = config.nombre || 'Mi Tienda';
        // ★ Sprint 7: SEO personalizado tiene prioridad sobre defaults
        const titulo = seo.titulo      || `${nombre} | Tienda Online`;
        const desc   = seo.descripcion || config.descripcion || `Tienda online de ${nombre}`;
        const img    = seo.ogImage     || config.logo_url    || '/assets/icons/pwa-512.svg';
        const url    = window.location.href;
        const color  = config.color || '#D63329';

        // Title
        document.title = titulo;

        // Meta description
        _setMeta('metaDesc', 'content', desc);

        // ★ Sprint 7: Keywords
        if (seo.keywords) _setMeta('metaKeywords', 'content', seo.keywords);

        // Open Graph
        _setMeta('ogTitle',    'content', seo.titulo || nombre);
        _setMeta('ogDesc',     'content', desc);
        _setMeta('ogImage',    'content', img);
        _setMeta('ogUrl',      'content', url);
        _setMeta('ogSiteName', 'content', nombre);

        // Twitter
        _setMeta('twTitle', 'content', seo.titulo || nombre);
        _setMeta('twDesc',  'content', desc);
        _setMeta('twImage', 'content', img);

        // Apple PWA
        _setMeta('appleTitle', 'content', nombre.slice(0, 14));
        const appleIcon = document.getElementById('appleTouchIcon');
        if (appleIcon && img) appleIcon.href = img;

        // theme-color
        _setMeta('themeColor', 'content', color);

        // Footer perfil
        const footerEl = document.getElementById('storeFooter');
        const footerLink = document.getElementById('footerPerfilLink');
        const footerNombre = document.getElementById('footerNombre');
        if (footerEl) footerEl.style.display = 'block';
        if (footerNombre) footerNombre.textContent = nombre;
        if (footerLink && slug) {
            footerLink.href = `/negocio/negocio_perfil.html?slug=${slug}`;
            footerLink.title = `Ver perfil público de ${nombre}`;
        }

        console.log(`[SEO] ✅ Metas actualizadas para "${nombre}"`);
    } catch(e) {
        console.warn(`[SEO] ⚠️ Error actualizando metas: ${e.message}`);
    }
};

function _setMeta(id, attr, value) {
    const el = document.getElementById(id);
    if (el && value) el.setAttribute(attr, value);
}
</script>

</body>
</html>