Tul xxx Tul

Viewing: public.php

<?php
require_once __DIR__ . '/bootstrap.php';

function setting_value($key, $default = '')
{
    $pdo = db();
    if (!$pdo) {
        return $default;
    }

    $stmt = $pdo->prepare('SELECT setting_value FROM cms_settings WHERE setting_key = ? LIMIT 1');
    $stmt->execute([$key]);
    $value = $stmt->fetchColumn();
    return $value !== false ? $value : $default;
}

function public_column_exists(PDO $pdo, $table, $column)
{
    static $cache = [];
    $key = $table . '.' . $column;
    if (!array_key_exists($key, $cache)) {
        $stmt = $pdo->prepare('SELECT COUNT(*) FROM information_schema.COLUMNS WHERE TABLE_SCHEMA = DATABASE() AND TABLE_NAME = ? AND COLUMN_NAME = ?');
        $stmt->execute([$table, $column]);
        $cache[$key] = (int) $stmt->fetchColumn() > 0;
    }
    return $cache[$key];
}

function public_products_data()
{
    $pdo = db();
    if (!$pdo) {
        return fallback_products_data();
    }

    $tabs = $pdo->query('SELECT * FROM cms_product_tabs WHERE is_active = 1 ORDER BY sort_order, id')->fetchAll();
    if (!$tabs) {
        return fallback_products_data();
    }

    $productStmt = $pdo->prepare('SELECT * FROM cms_products WHERE tab_id = ? AND is_active = 1 ORDER BY sort_order, id');
    $itemTitleSelect = public_column_exists($pdo, 'cms_contents', 'title') ? "COALESCE(NULLIF(i.title, ''), p.title) AS title" : 'p.title AS title';
    $itemActionSelect = public_column_exists($pdo, 'cms_contents', 'action_url') ? 'i.action_url' : "'' AS action_url";
    $itemCoverSelect = public_column_exists($pdo, 'cms_contents', 'cover_image') ? 'i.cover_image' : "'' AS cover_image";
    $itemStmt = $pdo->prepare("SELECT i.id,i.order_id,i.client_id,i.product_id,i.item_type,i.company AS content_company,i.genre,i.media_url,i.sort_order,i.is_active,$itemTitleSelect,$itemActionSelect,$itemCoverSelect,o.title AS order_title,COALESCE(c.commercial_name, i.company) AS company,c.sector_industry AS activity,c.address,c.phone,COALESCE(i.cover_image, c.logo_url) AS image_url,c.notes AS client_notes,c.website AS client_website FROM cms_contents i LEFT JOIN cms_orders o ON o.id = i.order_id LEFT JOIN cms_clients c ON c.id = o.client_id JOIN cms_products p ON p.id = i.product_id WHERE i.product_id = ? AND i.is_active = 1 ORDER BY i.sort_order, i.id");

    foreach ($tabs as &$tab) {
        $productStmt->execute([$tab['id']]);
        $tab['products'] = $productStmt->fetchAll();

        foreach ($tab['products'] as &$product) {
            $itemStmt->execute([$product['id']]);
            $product['items'] = $itemStmt->fetchAll();
        }
    }

    return $tabs;
}

function fallback_products_data()
{
    return [
        [
            'slug' => 'audio',
            'title' => 'Audio',
            'products' => [
                fallback_product('Anuncio de Audio', 'Activa tu negocio y capta la atención al instante con un mensaje claro, directo y diseñado para que tus clientes escuchen, entiendan y actúen.', 'Inversión:', '$200.000', 'Cotizar anuncios', [
                    fallback_item('Menta Novedades', 'Menta Novedades', 'Retail alegre', 'Tienda de novedades', 'Calle 10 av 7ma, Cucuta', '3027426920', 'https://emprendo.com.co/eComercial/menta/PMentaNovedades.jpg', 'https://emprendo.com.co/eComercial/menta/SMentaNovedades.mp3'),
                    fallback_item('Tu Solucion', 'Modacell', 'Tecnologia urbana', 'Tienda de tecnologia', 'Calle 9 #4-39, Centro, Cucuta', '3108066519', 'https://emprendo.com.co/eComercial/modacell/ModaCell.png', 'https://emprendo.com.co/eComercial/modacell/TuSolución.mp3'),
                    fallback_item('Atrevete', 'Restaurante Tapitas', 'Gastronomico', 'Restaurante comida rapida', 'Av. 1 Este, Los Caobos, Cucuta', '323 2106055', 'https://emprendo.com.co/eComercial/tapitas/Tapitas.jpg', 'https://emprendo.com.co/eComercial/tapitas/SpotTapitasv2.mp3'),
                ]),
                fallback_product('Jingle Publicitario', 'Haz que tu negocio se quede en la mente de tus clientes con una pieza musical memorable y que te diferencia de todos los demás.', 'Inversión:', '$500.000', 'Cotizar jingle', [
                    fallback_item('Jingle Sr. Pastel', 'Sr. Pastel', 'Dulce pop', 'Comida y bebida', 'Av 12E #0, Quinta Oriental, Cucuta', '3181110000', 'https://emprendo.com.co/eComercial/srpastel/srpastel.png', 'https://emprendo.com.co/eComercial/srpastel/JINGLE%20Sr.%20Pastel.mp3'),
                    fallback_item('Jingle Belen', 'Sabores Belen', 'Tradicional', 'Cafeteria', 'Av. 10, Los Patios, Norte de Santander', '3222128111', 'https://emprendo.com.co/eComercial/belen/belen.jpg', 'https://emprendo.com.co/eComercial/belen/jinglebelen.mp3'),
                    fallback_item('Perritos a la Lata', 'Perritos a la Lata', 'Urbano divertido', 'Comida rapida', 'Norte de Santander', 'Disponible por WhatsApp', 'https://emprendo.com.co/eComercial/perritosalalata/perritosalalatah.png', 'https://emprendo.com.co/eComercial/perritosalalata/perritosalalata1.mp3'),
                ]),
                fallback_product('Canción de Marca', 'Convierte tu negocio en una marca inolvidable con una canción que conecta emocionalmente, cuenta tu historia y haz que te elijan.', 'Inversión:', '$1.000.000', 'Cotizar canción', [
                    fallback_item('Menta Menta', 'Menta Novedades', 'Pop comercial', 'Tienda de novedades', 'Calle 10 av 7ma, Cucuta', '3027426920', 'https://emprendo.com.co/eComercial/menta/PMentaNovedades.jpg', 'https://emprendo.com.co/eComercial/menta/MMentaMenta.mp3'),
                    fallback_item('ModaCell', 'Modacell', 'Electro latino', 'Tienda de tecnologia', 'Calle 9 #4-39, Centro, Cucuta', '3108066519', 'https://emprendo.com.co/eComercial/modacell/ModaCell.png', 'https://emprendo.com.co/eComercial/modacell/ModaCell.mp3'),
                    fallback_item('Vuelve a tu Esencia', 'Votum', 'Balada inspiracional', 'Ropa deportiva', 'Barrio Obrero, C.C. SAO Bento PB L-07', '+58 4147389894', 'https://emprendo.com.co/eComercial/votum/votum.png', 'https://emprendo.com.co/eComercial/votum/Vuelve%20a%20tu%20Esencia.mp3'),
                ]),
            ],
        ],
        [
            'slug' => 'video',
            'title' => 'Video',
            'products' => [
                fallback_product('Presencia (Reel Básico)', 'Activa tus redes y haz visible tu negocio con un video corto optimizado para aumentar tu presencia digital, dinámica y vigente.', 'Inversión:', '$300.000', 'Cotizar Presencia', []),
                fallback_product('Atracción (Reel Comercial)', 'Atrae clientes y despierta interés real con un video diseñado para captar atención, generar interacción y conectar con tus clientes.', 'Inversión:', '$600.000', 'Cotizar Atracción', []),
                fallback_product('Conversión (Reel PRO)', 'Convierte vistas en ventas con un video de alto impacto que posiciona tu marca, conecta y lleva a tus clientes a tomar acción de compra.', 'Inversión:', '$1.200.000', 'Cotizar Conversión', []),
            ],
        ],
        [
            'slug' => 'paquetes',
            'title' => 'Paquetes',
            'products' => [
                fallback_package('PLAN IMPULSO', 'Activa tus redes y haz visible tu negocio desde hoy. Empieza a destacar con contenido profesional que muestra tu negocio activo, dinámico y confiable.', '1 Anuncio de Audio, 3 Reels Presencia', '$1.100.000', '$790.000', '$310.000 (~28% OFF)', 'comenzar a tener presencia y que más personas te vean'),
                fallback_package('PLAN CRECIMIENTO', 'Atrae clientes, genera recordación y empieza a vender. Lleva tu contenido al siguiente nivel combinando video y audio estratégico para captar atención, conectar y hacer que tus clientes te escriban.', '1 Anuncio de Audio, 1 Jingle Publicitario, 4 Reels Atracción', '$3.100.000', '$2.490.000', '$610.000 (~20% OFF)', 'negocios que requieren resultados reales y aumentar sus ventas'),
                fallback_package_custom('PLAN POSICIONAMIENTO', 'Convierte tu negocio en una marca que crece, vende y se posiciona. Escala con una estrategia completa que combina contenido, publicidad y análisis para lograr resultados sostenibles.', 'SOCIAL MASTER (eMprendo) - Estrategia completa de crecimiento, Estrategia de contenido, Segmentación de clientes, Gestión de redes sociales, Campañas ADS, Optimización con KPIs, Producción continua de contenido (audio + video)', 'Personaliza tu plan con una estrategia absolutamente clara para escalar tu negocio', 'marcas que quieren crecer en serio y dominar su mercado'),
            ],
        ],
    ];
}

function fallback_product($title, $description, $priceLabel, $priceValue, $ctaLabel, $items)
{
    return [
        'title' => $title,
        'description' => $description,
        'price_label' => $priceLabel,
        'price_value' => $priceValue,
        'cta_label' => $ctaLabel,
        'cta_url' => 'https://wa.me/573028424064?text=Hola%20eComercial%2C%20quiero%20cotizar.',
        'items' => $items,
    ];
}

function fallback_package($title, $description, $includes, $commercialValue, $specialPrice, $savings, $idealFor)
{
    return [
        'title' => $title,
        'description' => $description,
        'includes' => $includes,
        'commercial_value' => $commercialValue,
        'special_price' => $specialPrice,
        'savings' => $savings,
        'ideal_for' => $idealFor,
        'price_label' => 'Inversión Especial:',
        'price_value' => $specialPrice,
        'cta_label' => 'Cotizar ' . $title,
        'cta_url' => 'https://wa.me/573028424064?text=Hola%20eComercial%2C%20quiero%20cotizar.',
        'items' => [],
        'is_package' => true,
    ];
}

function fallback_package_custom($title, $description, $includes, $priceLabel, $idealFor)
{
    return [
        'title' => $title,
        'description' => $description,
        'includes' => $includes,
        'ideal_for' => $idealFor,
        'price_label' => $priceLabel,
        'price_value' => '',
        'cta_label' => 'Cotizar ' . $title,
        'cta_url' => 'https://wa.me/573028424064?text=Hola%20eComercial%2C%20quiero%20cotizar.',
        'items' => [],
        'is_package' => true,
        'is_custom' => true,
    ];
}

function fallback_item($title, $company, $genre, $activity, $address, $phone, $image, $media)
{
    return [
        'title' => $title,
        'company' => $company,
        'genre' => $genre,
        'activity' => $activity,
        'address' => $address,
        'phone' => $phone,
        'image_url' => $image,
        'media_url' => $media,
        'action_url' => '',
        'item_type' => 'audio',
    ];
}

function public_product_copy()
{
    return [
        'audio' => [
            [
                'title' => 'Anuncio de Audio',
                'description' => 'Activa tu negocio y capta la atención al instante con un mensaje claro, directo y diseñado para que tus clientes escuchen, entiendan y actúen.',
                'price_label' => 'Inversión:',
                'price_value' => '$200.000',
                'cta_label' => 'Quiero activar mi negocio',
                'cta_text' => 'Hola eComercial, quiero cotizar un Anuncio de Audio para activar mi negocio.',
            ],
            [
                'title' => 'Jingle Publicitario',
                'description' => 'Haz que tu negocio se quede en la mente de tus clientes con una pieza musical memorable y que te diferencia de todos los demás.',
                'price_label' => 'Inversión:',
                'price_value' => '$500.000',
                'cta_label' => 'Quiero que me recuerden',
                'cta_text' => 'Hola eComercial, quiero cotizar un Jingle Publicitario para que mi negocio sea mas recordado.',
            ],
            [
                'title' => 'Canción de Marca',
                'description' => 'Convierte tu negocio en una marca inolvidable con una canción que conecta emocionalmente, cuenta tu historia y haz que te elijan.',
                'price_label' => 'Inversión:',
                'price_value' => '$1.000.000',
                'cta_label' => 'Quiero una marca inolvidable',
                'cta_text' => 'Hola eComercial, quiero cotizar una Cancion de Marca para que mi negocio sea inolvidable.',
            ],
        ],
        'video' => [
            [
                'title' => 'Presencia (Reel Básico)',
                'description' => 'Activa tus redes y haz visible tu negocio con un video corto optimizado para aumentar tu presencia digital, dinámica y vigente.',
                'price_label' => 'Inversión:',
                'price_value' => '$300.000',
                'cta_label' => 'Quiero aparecer mas',
                'cta_text' => 'Hola eComercial, quiero cotizar Presencia (Reel Basico) para hacer visible mi negocio.',
            ],
            [
                'title' => 'Atracción (Reel Comercial)',
                'description' => 'Atrae clientes y despierta interés real con un video diseñado para captar atención, generar interacción y conectar con tus clientes.',
                'price_label' => 'Inversión:',
                'price_value' => '$600.000',
                'cta_label' => 'Quiero atraer clientes',
                'cta_text' => 'Hola eComercial, quiero cotizar Atraccion (Reel Comercial) para captar mas clientes.',
            ],
            [
                'title' => 'Conversión (Reel PRO)',
                'description' => 'Convierte vistas en ventas con un video de alto impacto que posiciona tu marca, conecta y lleva a tus clientes a tomar acción de compra.',
                'price_label' => 'Inversión:',
                'price_value' => '$1.200.000',
                'cta_label' => 'Quiero vender con video',
                'cta_text' => 'Hola eComercial, quiero cotizar Conversion (Reel PRO) para convertir vistas en ventas.',
            ],
        ],
        'paquetes' => [
            [
                'title' => 'PLAN IMPULSO',
                'eyebrow' => 'Activa tus redes y haz visible tu negocio desde hoy',
                'description' => 'Empieza a destacar con contenido profesional que muestra tu negocio activo, dinámico y confiable.',
                'includes' => ['1 Anuncio de Audio', '3 Reels Presencia (videos cortos optimizados para redes)'],
                'commercial_value' => '$1.100.000',
                'special_price' => '$790.000',
                'savings' => '$310.000 (~28% OFF)',
                'ideal_for' => 'Ideal si quieres comenzar a tener presencia y que más personas te vean.',
                'cta_label' => 'Quiero impulsar mi negocio',
                'cta_text' => 'Hola eComercial, quiero cotizar el PLAN IMPULSO para activar mis redes y hacer visible mi negocio.',
                'is_package' => true,
            ],
            [
                'title' => 'PLAN CRECIMIENTO',
                'eyebrow' => 'Atrae clientes, genera recordación y empieza a vender',
                'description' => 'Lleva tu contenido al siguiente nivel combinando video y audio estratégico para captar atención, conectar y hacer que tus clientes te escriban.',
                'includes' => ['1 Anuncio de Audio', '1 Jingle Publicitario', '4 Reels Atraccion (contenido diseñado para captar clientes)'],
                'commercial_value' => '$3.100.000',
                'special_price' => '$2.490.000',
                'savings' => '$610.000 (~20% OFF)',
                'ideal_for' => 'Ideal para negocios que requieren resultados reales y aumentar sus ventas.',
                'cta_label' => 'Quiero crecer y vender',
                'cta_text' => 'Hola eComercial, quiero cotizar el PLAN CRECIMIENTO para atraer clientes y vender mas.',
                'is_package' => true,
            ],
            [
                'title' => 'PLAN POSICIONAMIENTO',
                'eyebrow' => 'Convierte tu negocio en una marca que crece, vende y se posiciona',
                'description' => 'Escala con una estrategia completa que combina contenido, publicidad y análisis para lograr resultados sostenibles.',
                'includes' => ['SOCIAL MASTER (eMprendo) Estrategia completa de crecimiento', 'Estrategia de contenido', 'Segmentación de clientes', 'Gestión de redes sociales', 'Campañas ADS', 'Optimización con KPIs', 'Producción continua de contenido (audio + video)'],
                'custom_note' => 'Personaliza tu plan con una estrategia absolutamente clara para escalar tu negocio',
                'ideal_for' => 'Ideal para marcas que quieren crecer en serio y dominar su mercado.',
                'cta_label' => 'Quiero dominar mi mercado',
                'cta_text' => 'Hola eComercial, quiero cotizar el PLAN POSICIONAMIENTO para escalar mi negocio con una estrategia completa.',
                'is_package' => true,
                'is_custom' => true,
            ],
        ],
    ];
}

function apply_public_product_copy($tabs)
{
    $copy = public_product_copy();

    foreach ($tabs as &$tab) {
        $slug = $tab['slug'] ?? '';
        if (!isset($copy[$slug])) {
            continue;
        }

        foreach ($tab['products'] as $index => &$product) {
            if (!isset($copy[$slug][$index])) {
                continue;
            }

            $replacement = $copy[$slug][$index];
            $isPackage = $replacement['is_package'] ?? false;

            // Extraemos los valores reales de la base de datos si existen y no están vacíos
            $dbTitle = !empty($product['title']) ? $product['title'] : null;
            $dbDesc = !empty($product['description']) ? $product['description'] : null;
            $dbPriceLabel = !empty($product['price_label']) ? $product['price_label'] : null;
            $dbPriceValue = !empty($product['price_value']) ? $product['price_value'] : null;
            $dbCtaLabel = !empty($product['cta_label']) ? $product['cta_label'] : null;
            $dbCtaUrl = !empty($product['cta_url']) ? $product['cta_url'] : null;

            // Combinamos de forma que los campos adicionales del copy (eyebrow, ideal_for, includes) se conserven
            $product = array_merge($replacement, $product);

            // Priorizamos los valores de base de datos no vacíos
            if ($dbTitle !== null) {
                $product['title'] = $dbTitle;
            }
            if ($dbDesc !== null) {
                $product['description'] = $dbDesc;
            }
            if ($dbPriceLabel !== null) {
                $product['price_label'] = $dbPriceLabel;
            }
            if ($dbCtaLabel !== null) {
                $product['cta_label'] = $dbCtaLabel;
            }
            if ($dbCtaUrl !== null) {
                $product['cta_url'] = $dbCtaUrl;
            } else {
                $product['cta_url'] = 'https://wa.me/573028424064?text=' . rawurlencode($replacement['cta_text'] ?? 'Hola eComercial, quiero cotizar.');
            }

            // --- LÓGICA DE PRECIOS Y DESCUENTOS ---
            if ($dbPriceValue !== null) {
                $product['price_value'] = $dbPriceValue;

                // Extraemos el número base del precio (removiendo cualquier caracter no numérico)
                $basePriceNum = (float) preg_replace('/[^\d]/', '', (string) $dbPriceValue);

                $discountType = $product['discount_type'] ?? 'none';
                $discountValue = (float) ($product['discount_value'] ?? 0);

                if ($discountType !== 'none' && $discountValue > 0) {
                    // Hay un descuento activo en la base de datos para este producto
                    if ($discountType === 'percent') {
                        $discountAmount = $basePriceNum * ($discountValue / 100);
                    } else { // amount ($)
                        $discountAmount = $discountValue;
                    }

                    $discountedPriceNum = max(0, $basePriceNum - $discountAmount);

                    $commercialValueStr = '$ ' . number_format($basePriceNum, 0, ',', '.');
                    $specialPriceStr = '$ ' . number_format($discountedPriceNum, 0, ',', '.');
                    $savingsStr = '$ ' . number_format($discountAmount, 0, ',', '.');
                    $percentStr = $basePriceNum > 0 ? round(($discountAmount / $basePriceNum) * 100) : 0;

                    if ($isPackage) {
                        $product['commercial_value'] = $commercialValueStr;
                        $product['special_price'] = $specialPriceStr;
                        $product['savings'] = $savingsStr . ' (~' . $percentStr . '% OFF)';
                        $product['price_value'] = $specialPriceStr;
                    } else {
                        // Para productos estándar, mostramos el precio descontado directamente
                        $product['price_value'] = $specialPriceStr;
                    }
                } else {
                    // No hay descuento activo en la base de datos para este producto
                    if ($isPackage) {
                        // Si el precio de la base de datos coincide con el valor comercial de la maqueta por defecto,
                        // mantenemos los valores de descuento y ahorro del copy original para fines comerciales.
                        // De lo contrario, calculamos los valores sin descuento basados en el nuevo precio base.
                        $commercialValueStr = '$ ' . number_format($basePriceNum, 0, ',', '.');
                        $defaultCommercialNum = (float) preg_replace('/[^\d]/', '', (string) ($replacement['commercial_value'] ?? ''));

                        if ($basePriceNum !== $defaultCommercialNum) {
                            $product['commercial_value'] = $commercialValueStr;
                            $product['special_price'] = $commercialValueStr;
                            unset($product['savings']); // Remueve la etiqueta de ahorro
                        } else {
                            // Mantenemos los valores de copy originales
                            $product['commercial_value'] = $replacement['commercial_value'] ?? $commercialValueStr;
                            $product['special_price'] = $replacement['special_price'] ?? $commercialValueStr;
                            $product['savings'] = $replacement['savings'] ?? '';
                        }
                        
                        $product['price_value'] = $product['special_price'];
                    } else {
                        // Producto estándar sin descuento
                        $product['price_value'] = $dbPriceValue;
                    }
                }
            } else {
                // Si la base de datos no tiene precio (nulo o vacío), usamos los del copy
                if ($isPackage) {
                    $product['commercial_value'] = $replacement['commercial_value'] ?? '';
                    $product['special_price'] = $replacement['special_price'] ?? '';
                    $product['savings'] = $replacement['savings'] ?? '';
                    $product['price_value'] = $product['special_price'];
                } else {
                    $product['price_value'] = $replacement['price_value'] ?? ($replacement['special_price'] ?? '');
                }
            }
        }
    }

    return $tabs;
}

function render_products_section()
{
    $tabs = apply_public_product_copy(public_products_data());
    $title = setting_value('products_title', 'Elige contenido que convierte visitas en ventas');
    $intro = setting_value('products_intro', 'Escucha ejemplos reales, compara formatos y escribe por WhatsApp para recibir una recomendacion clara segun tu negocio.');

    ob_start();
    ?>
    <style>
        .products-section {
            padding: 34px 0 38px;
        }
        .products-section h2 {
            margin-bottom: 6px;
        }
        .products-intro {
            color: #344853;
            font-size: 1.05rem;
            line-height: 1.45;
            margin: 0 auto 18px;
            max-width: 760px;
        }
        .product-tabs {
            margin-bottom: 20px;
        }
        .avatar-trigger {
            width: 42px;
            height: 42px;
            border: 0;
            padding: 0;
            border-radius: 50%;
            background: transparent;
            display: inline-flex;
        }
        .avatar-trigger:hover,
        .avatar-trigger:focus {
            background: transparent;
            box-shadow: none;
            outline: none;
        }
        .client-modal-card {
            margin: 0;
            border: 0;
            box-shadow: none;
        }
        .client-modal-card:hover {
            transform: none;
        }
        #publicVideoPreviewModal .modal-content {
            border: 0;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 24px 70px rgba(18,56,78,.24);
        }
        #publicVideoPreviewModal .modal-body {
            display: flex;
            justify-content: center;
            padding: 12px;
            background: #fff;
        }
        .public-video {
            width: 100%;
            max-height: 72vh;
            background: transparent;
            border-radius: 8px;
            display: block;
        }
        #publicVideoPreviewModal .modal-dialog {
            max-width: min(1120px, calc(100% - 32px));
        }
        #publicVideoPreviewModal.is-vertical .modal-dialog {
            max-width: min(430px, calc(100% - 32px));
        }
        #publicVideoPreviewModal.is-vertical .public-video {
            width: auto;
            height: min(76vh, calc((100vw - 64px) * 16 / 9));
            max-width: 100%;
            max-height: 76vh;
            object-fit: cover;
        }
        .public-audio-player {
            position: fixed;
            left: 50%;
            bottom: 22px;
            transform: translateX(-50%) translateY(130%);
            z-index: 1040;
            width: min(560px, calc(100% - 28px));
            background: rgba(248,249,250,.95);
            border: 1px solid rgba(220,234,241,0.6);
            border-radius: 8px;
            box-shadow: 0 18px 44px rgba(18,56,78,.15);
            padding: 12px 14px;
            opacity: 0;
            pointer-events: none;
            transition: transform .22s ease, opacity .22s ease;
            backdrop-filter: blur(8px);
        }
        .public-audio-player.is-visible {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
            pointer-events: auto;
        }
        .public-audio-restore {
            position: fixed;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%) translateY(120%);
            z-index: 1039;
            border: 1px solid #dceaf1;
            border-bottom: 0;
            border-radius: 8px 8px 0 0;
            background: rgba(255,255,255,.96);
            color: #1a96d3;
            box-shadow: 0 -8px 24px rgba(18,56,78,.12);
            padding: 7px 14px;
            font-size: .82rem;
            font-weight: 800;
            opacity: 0;
            pointer-events: none;
            transition: transform .2s ease, opacity .2s ease;
        }
        .public-audio-restore.is-visible {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
            pointer-events: auto;
        }
        .public-player-brand {
            width: 42px;
            height: 42px;
            border-radius: 8px;
            background: #eef7fc;
            border: 1px solid #dceaf1;
            object-fit: contain;
            padding: 5px;
        }
        .public-player-title {
            font-weight: 800;
            color: #12384e;
            line-height: 1.1;
        }
        .public-player-subtitle,
        .public-player-time {
            color: #61717a;
            font-size: .8rem;
        }
        .public-player-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 1px solid #dceaf1;
            background: #fff;
            color: #1a96d3;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
        }
        .public-player-btn:hover {
            border-color: #1a96d3;
            background: #eef7fc;
            transform: translateY(-1px);
        }
        .public-player-btn.primary {
            background: #1a96d3;
            color: #fff;
            border-color: #1a96d3;
        }
        .public-player-progress {
            accent-color: #1a96d3;
            width: 100%;
            height: 4px;
        }
        .public-player-time {
            min-width: 42px;
            text-align: center;
        }
        .product-card {
            position: relative;
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow: hidden;
            border: 1px solid #d6ebf7;
            box-shadow: 0 14px 34px rgba(18,56,78,.09);
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
            padding: 20px;
        }
        .product-card:hover {
            transform: translateY(-4px);
            border-color: rgba(26,150,211,.45);
            box-shadow: 0 20px 46px rgba(18,56,78,.14);
        }
        .product-card::before {
            content: none;
        }
        .product-card h3 {
            color: #fff;
            background: #1a96d3;
            padding: 14px 18px;
            border-bottom: 0;
            margin: -20px -20px 16px -20px;
            text-align: center;
            font-size: 1.22rem;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        .product-card h3 i {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            color: #fff;
            background: rgba(255,255,255,.18);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
        }
        .product-card > p {
            color: #344853;
            min-height: 0;
            line-height: 1.38;
            text-align: center;
            font-size: 1rem;
            margin-bottom: 14px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .product-card .product-carousel .carousel-inner {
            max-height: 272px;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 8px 4px;
            scroll-snap-type: y proximity;
            scrollbar-width: none;
            -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
        }
        .product-card .product-carousel .carousel-inner::-webkit-scrollbar {
            display: none;
        }
        .product-card .playlist {
            gap: 10px;
            margin-top: 0;
        }
        .playlist-item {
            grid-template-columns: 42px 1fr 42px;
            gap: 12px;
            padding: 10px 12px;
            border-color: #dceaf1;
            background: #fff;
            box-shadow: 0 8px 18px rgba(18,56,78,.045);
            scroll-snap-align: center;
        }
        .playlist-avatar,
        .avatar-trigger {
            width: 42px;
            height: 42px;
        }
        .playlist-title {
            font-size: .98rem;
            line-height: 1.08;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .playlist-meta {
            font-size: .83rem;
            line-height: 1.15;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .playlist-play {
            width: 36px;
            height: 36px;
            border: 1px solid #dceaf1;
            background: #fff;
            color: #1a96d3;
            box-shadow: 0 8px 20px rgba(26,150,211,.12);
            transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
        }
        .playlist-play:hover {
            border-color: #1a96d3;
            background: #eef7fc;
            color: #157bb0;
            transform: translateY(-1px);
        }
        .playlist-play.is-playing,
        .playlist-play:active {
            background: #1a96d3;
            border-color: #1a96d3;
            color: #fff;
        }
        .product-card.package-impulso h3 {
            background: #2dbdb0;
            color: #fff;
        }
        .product-card.package-crecimiento h3 {
            background: #ffbd16;
            color: #12384e;
        }
        .product-card.package-posicionamiento h3 {
            background: #ff676d;
            color: #fff;
        }
        .product-card.package-impulso h3 i,
        .product-card.package-posicionamiento h3 i {
            color: #fff;
            background: rgba(255,255,255,.18);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
        }
        .product-card.package-crecimiento h3 i {
            color: #12384e;
            background: rgba(255,255,255,.4);
            box-shadow: inset 0 0 0 1px rgba(18,56,78,.12);
        }
        .package-eyebrow {
            color: #1a96d3;
            font-size: 1.08rem;
            font-weight: 800;
            line-height: 1.25;
            margin: 0 0 8px;
        }
        .value-stack {
            text-align: center;
            padding: 16px 14px;
            background: #ffffff;
            border: 1px solid #e3edf3;
            border-radius: 8px;
            margin-bottom: 16px;
        }
        .value-label {
            display: block;
            color: #61717a;
            font-size: .82rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .04em;
        }
        .investment-label {
            color: #20a653;
            margin-top: 8px;
        }
        .product-savings {
            background: #20a653;
            color: #fff;
            padding: 7px 14px;
            border-radius: 999px;
            font-size: .95rem;
            font-weight: 800;
            display: inline-block;
            margin-top: 10px;
        }
        .product-commercial-value {
            text-decoration: line-through;
            color: #d63145;
            font-size: 1.36rem;
            font-weight: 800;
            display: block;
            text-align: center;
            margin-bottom: 4px;
        }
        .product-special-price {
            color: #20a653;
            font-size: clamp(1.8rem, 2.6vw, 2.25rem);
            font-weight: 800;
            display: block;
            text-align: center;
            line-height: 1.05;
        }
        .package-details {
            background: #f7fafc;
            padding: 16px;
            border-radius: 8px;
            margin: 16px 0;
            border: 1px solid #e3edf3;
        }
        .package-details ul {
            list-style: none;
            padding: 0;
            margin: 12px 0 0;
        }
        .package-details ul li {
            padding: 6px 0;
            color: #12384e;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .package-details ul li i {
            color: #20a653;
            font-size: 0.9rem;
        }
        .product-price {
            background: #f3fbf6;
            border: 1px solid #cfeedd;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: baseline;
            gap: 5px;
            padding: 9px 12px;
            text-align: center;
            width: 100%;
        }
        .product-price span {
            color: #1b7f40;
            font-weight: 800;
        }
        .product-price strong,
        .product-price {
            color: #20a653;
        }
        .btn-whatsapp {
            box-shadow: 0 12px 24px rgba(37,211,102,.22);
            justify-content: center;
            line-height: 1.2;
            padding: 10px 16px;
            text-align: center;
        }
        .product-plan .btn-whatsapp {
            width: min(100%, 330px);
        }
        .product-plan .btn-whatsapp i {
            flex-shrink: 0;
        }
        .product-plan {
            align-items: center;
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-top: auto;
            padding-top: 22px;
            width: 100%;
        }
        .package-ideal {
            background: #fff8e8;
            border-left: 4px solid #ff9e1b;
            padding: 10px 14px;
            margin-top: 12px;
            border-radius: 4px;
            font-size: 0.9rem;
            color: #6f4b09;
            font-weight: 650;
        }
        .custom-package-note {
            color: #12384e;
            background: #eef7fc;
            border: 1px solid #d6ebf7;
            border-radius: 8px;
            padding: 12px 14px;
            margin: 14px 0 0;
            font-weight: 800;
        }
        .rotating-products-verb {
            color: #1a96d3;
            display: inline-block;
            min-width: 3.5em;
            transition: opacity .22s ease, transform .22s ease;
        }
        .rotating-products-verb.is-changing {
            opacity: 0;
            transform: translateY(6px);
        }
        @media (max-width: 576px) {
            .product-card h3 {
                font-size: 1.12rem;
                padding-right: 14px;
            }
            .product-special-price {
                font-size: 1.72rem;
            }
        }
        
        /* Botones de navegación lateral entre categorías */
        .product-navigation-buttons {
            position: relative;
            margin-bottom: 24px;
        }
        .product-nav-btn {
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            z-index: 100;
            background: rgba(26, 150, 211, 0.95);
            color: #fff;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 12px;
            padding: 16px 12px;
            font-size: 1.1rem;
            font-weight: 700;
            display: none; /* Oculto por defecto */
            flex-direction: column;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 8px 24px rgba(26, 150, 211, 0.3);
            backdrop-filter: blur(8px);
            min-width: 60px;
            opacity: 0;
            pointer-events: none;
        }
        /* Mostrar solo cuando la sección productos está visible */
        .products-section-visible .product-nav-btn {
            display: flex;
            animation: fadeInNav 0.4s ease forwards;
        }
        @keyframes fadeInNav {
            from {
                opacity: 0;
                transform: translateY(-50%) translateX(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(-50%) translateX(0);
                pointer-events: auto;
            }
        }
        .products-section-visible .product-nav-next {
            animation: fadeInNavRight 0.4s ease forwards;
        }
        @keyframes fadeInNavRight {
            from {
                opacity: 0;
                transform: translateY(-50%) translateX(20px);
            }
            to {
                opacity: 1;
                transform: translateY(-50%) translateX(0);
                pointer-events: auto;
            }
        }
        .product-nav-btn:hover {
            background: rgba(21, 123, 176, 0.98);
            transform: translateY(-50%) scale(1.05);
            box-shadow: 0 12px 32px rgba(26, 150, 211, 0.4);
            border-color: rgba(255, 255, 255, 0.5);
        }
        .product-nav-btn:active {
            transform: translateY(-50%) scale(0.98);
        }
        .product-nav-prev {
            left: 20px;
        }
        .product-nav-next {
            right: 20px;
        }
        .product-nav-label {
            font-size: 0.75rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            writing-mode: vertical-rl;
            text-orientation: mixed;
            white-space: nowrap;
        }
        .product-nav-btn i {
            font-size: 1.3rem;
        }
        
        /* Elementos persuasivos debajo de las cards */
        .persuasive-cta-box {
            margin-top: 48px;
            background: linear-gradient(135deg, #1a96d3 0%, #157bb0 100%);
            border-radius: 16px;
            padding: 40px 32px;
            text-align: center;
            box-shadow: 0 16px 48px rgba(26, 150, 211, 0.25);
            position: relative;
            overflow: hidden;
        }
        .persuasive-cta-box::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            animation: pulse 8s ease-in-out infinite;
        }
        @keyframes pulse {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(10%, 10%) scale(1.1); }
        }
        .persuasive-cta-content {
            position: relative;
            z-index: 1;
        }
        .persuasive-cta-box h3 {
            color: #fff;
            font-size: clamp(1.5rem, 3vw, 2rem);
            font-weight: 800;
            margin-bottom: 16px;
            line-height: 1.2;
        }
        .persuasive-cta-box p {
            color: rgba(255, 255, 255, 0.95);
            font-size: 1.1rem;
            line-height: 1.5;
            margin-bottom: 24px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        .btn-persuasive {
            background: #fff;
            color: #1a96d3;
            border: 2px solid #fff;
            border-radius: 999px;
            padding: 14px 32px;
            font-size: 1.1rem;
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.3s ease;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        }
        .btn-persuasive:hover {
            background: #f0f9ff;
            color: #157bb0;
            transform: translateY(-2px);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
        }
        .btn-persuasive:active {
            transform: translateY(0);
        }
        .persuasive-tip {
            margin-top: 20px;
            padding: 12px 20px;
            background: rgba(255, 165, 0, 0.95);
            color: #fff;
            border-radius: 8px;
            font-size: 0.95rem;
            font-weight: 700;
            display: inline-block;
            box-shadow: 0 4px 12px rgba(255, 165, 0, 0.3);
        }
        .persuasive-tip i {
            color: #fff;
        }
        
        /* Variantes de color para diferentes categorías */
        .persuasive-cta-packages {
            background: linear-gradient(135deg, #20a653 0%, #188a44 100%);
            box-shadow: 0 16px 48px rgba(32, 166, 83, 0.25);
        }
        .persuasive-cta-audio {
            background: linear-gradient(135deg, #ff676d 0%, #d63145 100%);
            box-shadow: 0 16px 48px rgba(255, 103, 109, 0.25);
        }
        
        /* Responsive para móviles */
        @media (max-width: 992px) {
            .product-nav-btn {
                padding: 12px 10px;
                min-width: 50px;
                font-size: 1rem;
            }
            .product-nav-label {
                font-size: 0.7rem;
            }
            .product-nav-prev {
                left: 10px;
            }
            .product-nav-next {
                right: 10px;
            }
        }
        @media (max-width: 768px) {
            .products-section-visible .product-nav-btn,
            .product-nav-btn {
                display: none !important;
                visibility: hidden !important;
                opacity: 0 !important;
                pointer-events: none !important;
            }
            .persuasive-cta-box {
                padding: 32px 24px;
                margin-top: 32px;
            }
            .persuasive-cta-box h3 {
                font-size: 1.4rem;
            }
            .persuasive-cta-box p {
                font-size: 1rem;
            }
            .btn-persuasive {
                padding: 12px 24px;
                font-size: 1rem;
                width: 100%;
            }
        }
    </style>
    <section id="productos" class="products-section" aria-labelledby="productos-title">
        <div class="container">
            <div class="text-center">
                <h2 id="productos-title"><?= e($title) ?></h2>
                <p class="products-intro"><?= e($intro) ?></p>
            </div>

            <ul class="nav nav-tabs product-tabs" id="productTabs" role="tablist">
                <?php foreach ($tabs as $index => $tab): ?>
                    <?php $slug = e($tab['slug']); ?>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link <?= $index === 0 ? 'active' : '' ?>" id="<?= $slug ?>-tab" data-bs-toggle="tab" data-bs-target="#<?= $slug ?>-products" type="button" role="tab" aria-controls="<?= $slug ?>-products" aria-selected="<?= $index === 0 ? 'true' : 'false' ?>"><?= e($tab['title']) ?></button>
                    </li>
                <?php endforeach; ?>
            </ul>

            <div class="tab-content" id="productTabsContent">
                <?php foreach ($tabs as $index => $tab): ?>
                    <?php 
                    $slug = e($tab['slug']); 
                    $prevTab = $index > 0 ? $tabs[$index - 1] : $tabs[count($tabs) - 1];
                    $nextTab = $index < count($tabs) - 1 ? $tabs[$index + 1] : $tabs[0];
                    ?>
                    <div class="tab-pane fade <?= $index === 0 ? 'show active' : '' ?>" id="<?= $slug ?>-products" role="tabpanel" aria-labelledby="<?= $slug ?>-tab" tabindex="0">
                        <!-- Botones de navegación lateral -->
                        <div class="product-navigation-buttons">
                            <button class="product-nav-btn product-nav-prev" type="button" title="Ver <?= e($prevTab['title']) ?>" data-target-tab="<?= e($prevTab['slug']) ?>-tab">
                                <i class="fa-solid fa-chevron-left"></i>
                                <span class="product-nav-label"><?= e($prevTab['title']) ?></span>
                            </button>
                            <button class="product-nav-btn product-nav-next" type="button" title="Ver <?= e($nextTab['title']) ?>" data-target-tab="<?= e($nextTab['slug']) ?>-tab">
                                <span class="product-nav-label"><?= e($nextTab['title']) ?></span>
                                <i class="fa-solid fa-chevron-right"></i>
                            </button>
                        </div>
                        
                        <div class="row g-4">
                            <?php foreach ($tab['products'] as $productIndex => $product): ?>
                                <div class="col-md-4">
                                    <?= render_product_card($product, $tab['slug'], $productIndex) ?>
                                </div>
                            <?php endforeach; ?>
                        </div>
                        
                        <!-- Elemento persuasivo para siguiente categoría -->
                        <?php if ($slug === 'audio'): ?>
                            <div class="persuasive-cta-box">
                                <div class="persuasive-cta-content">
                                    <h3>¿Sabías que el 80% de las marcas logran más ventas con video?</h3>
                                    <p>Has escuchado el potencial del audio. Ahora mira cómo cobra vida en formatos verticales para Instagram y TikTok.</p>
                                    <button class="btn btn-persuasive js-nav-to-tab" type="button" data-target-tab="video-tab">
                                        Ver demos de Video <i class="fa-solid fa-arrow-right ms-2"></i>
                                    </button>
                                    <div class="persuasive-tip">
                                        <i class="fa-solid fa-lightbulb me-2"></i>
                                        <strong>Tip:</strong> Los videos verticales retienen 3x más la atención
                                    </div>
                                </div>
                            </div>
                        <?php elseif ($slug === 'video'): ?>
                            <div class="persuasive-cta-box persuasive-cta-packages">
                                <div class="persuasive-cta-content">
                                    <h3>¿Listo para escalar tu negocio con una estrategia completa?</h3>
                                    <p>Has visto el poder del video. Ahora descubre cómo combinar audio + video + estrategia para resultados sostenibles.</p>
                                    <button class="btn btn-persuasive js-nav-to-tab" type="button" data-target-tab="paquetes-tab">
                                        Ver Paquetes Estratégicos <i class="fa-solid fa-arrow-right ms-2"></i>
                                    </button>
                                    <div class="persuasive-tip">
                                        <i class="fa-solid fa-lightbulb me-2"></i>
                                        <strong>Tip:</strong> Los paquetes incluyen hasta 28% de descuento
                                    </div>
                                </div>
                            </div>
                        <?php elseif ($slug === 'paquetes'): ?>
                            <div class="persuasive-cta-box persuasive-cta-audio">
                                <div class="persuasive-cta-content">
                                    <h3>¿Quieres empezar con algo más específico?</h3>
                                    <p>Los paquetes son ideales para escalar, pero si prefieres comenzar con un producto individual, explora nuestros audios.</p>
                                    <button class="btn btn-persuasive js-nav-to-tab" type="button" data-target-tab="audio-tab">
                                        Ver productos de Audio <i class="fa-solid fa-arrow-right ms-2"></i>
                                    </button>
                                    <div class="persuasive-tip">
                                        <i class="fa-solid fa-lightbulb me-2"></i>
                                        <strong>Tip:</strong> Puedes empezar con un anuncio desde $200.000
                                    </div>
                                </div>
                            </div>
                        <?php endif; ?>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>
    <?= render_client_preview_modal() ?>
    <?= render_public_media_player() ?>
    <script>
        // Rotación de palabras en el título de productos
        (function() {
            const verbs = ['Observa', 'Escucha', 'Conecta'];
            let currentIndex = 0;
            const verbElement = document.getElementById('rotatingProductsVerb');
            
            if (!verbElement) return;
            
            function rotateVerb() {
                verbElement.classList.add('is-changing');
                
                setTimeout(function() {
                    currentIndex = (currentIndex + 1) % verbs.length;
                    verbElement.textContent = verbs[currentIndex];
                    verbElement.classList.remove('is-changing');
                }, 220);
            }
            
            setInterval(rotateVerb, 3000);
        })();
        
        // Mostrar botones de navegación solo en sección productos (cuando las cards son visibles)
        (function() {
            const productTabsContent = document.getElementById('productTabsContent');
            if (!productTabsContent) return;
            
            const observer = new IntersectionObserver(function(entries) {
                entries.forEach(function(entry) {
                    if (entry.isIntersecting) {
                        document.body.classList.add('products-section-visible');
                    } else {
                        document.body.classList.remove('products-section-visible');
                    }
                });
            }, {
                threshold: [0, 0.1, 0.2, 0.3], // Múltiples umbrales para mejor detección
                rootMargin: '-350px 0px -100px 0px' // Offset arriba y abajo para mantener visible más tiempo
            });
            
            observer.observe(productTabsContent);
        })();
        
        // Navegación de botones laterales y persuasivos
        (function() {
            const navButtons = document.querySelectorAll('.product-nav-btn, .js-nav-to-tab');
            
            navButtons.forEach(function(button) {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    const targetTabId = this.getAttribute('data-target-tab');
                    const targetTab = document.getElementById(targetTabId);
                    
                    if (targetTab) {
                        // Usar Bootstrap Tab API correctamente
                        const tab = new bootstrap.Tab(targetTab);
                        tab.show();
                        
                        // Scroll suave a la sección productos
                        const productosSection = document.getElementById('productos');
                        if (productosSection) {
                            setTimeout(function() {
                                productosSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
                            }, 100);
                        }
                    }
                });
            });
        })();
    </script>
    <?php
    return ob_get_clean();
}

function render_public_media_player()
{
    ob_start();
    ?>
    <div class="modal fade" id="publicVideoPreviewModal" tabindex="-1" aria-labelledby="publicVideoPreviewModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title fs-5" id="publicVideoPreviewModalLabel">Vista previa de video</h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                </div>
                <div class="modal-body">
                    <video class="public-video" controls playsinline></video>
                </div>
            </div>
        </div>
    </div>
    <div class="public-audio-player" id="publicAudioPlayer" aria-live="polite">
        <div class="d-flex align-items-center gap-3">
            <img class="public-player-brand" src="assets/img/eComercial.png" alt="eComercial">
            <div class="flex-grow-1 min-w-0">
                <div class="d-flex align-items-center justify-content-between gap-2">
                    <div class="min-w-0">
                        <div class="public-player-title text-truncate" id="publicAudioTitle">Audio</div>
                        <div class="public-player-subtitle">eComercial</div>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <button class="public-player-btn primary" type="button" id="publicAudioToggle" aria-label="Pausar"><i class="fa-solid fa-pause"></i></button>
                        <button class="public-player-btn" type="button" id="publicAudioClose" aria-label="Cerrar reproductor"><i class="fa-solid fa-xmark"></i></button>
                    </div>
                </div>
                <div class="d-flex align-items-center gap-2 mt-2">
                    <span class="public-player-time" id="publicAudioCurrent">0:00</span>
                    <input class="public-player-progress" id="publicAudioProgress" type="range" min="0" max="100" value="0" step="0.1" aria-label="Progreso">
                    <span class="public-player-time" id="publicAudioDuration">0:00</span>
                </div>
            </div>
        </div>
    </div>
    <button class="public-audio-restore" id="publicAudioRestore" type="button" aria-label="Mostrar reproductor">
        <i class="fa-solid fa-music"></i> Reproductor
    </button>
    <?php
    return ob_get_clean();
}

function render_client_preview_modal()
{
    ob_start();
    ?>
    <div class="modal fade" id="clientPreviewModal" tabindex="-1" aria-labelledby="clientPreviewModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title fs-5" id="clientPreviewModalLabel">Cliente</h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                </div>
                <div class="modal-body">
                    <div class="card client-modal-card">
                        <img id="clientPreviewImage" src="" class="card-img-top" alt="">
                        <div class="card-body">
                            <h5 class="card-title" id="clientPreviewName"></h5>
                            <h6 class="card-subtitle mb-2 text-muted" id="clientPreviewActivity"></h6>
                            <p class="card-text" id="clientPreviewNotes"></p>
                            <p id="clientPreviewAddressWrap"><strong>Dirección:</strong> <span id="clientPreviewAddress"></span></p>
                            <p id="clientPreviewPhoneWrap"><strong>Teléfono:</strong> <span id="clientPreviewPhone"></span></p>
                            <a id="clientPreviewWebsite" class="btn btn-primary" href="#" target="_blank">Ver cliente</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var modal = document.getElementById('clientPreviewModal');
            if (!modal) return;

            modal.addEventListener('show.bs.modal', function (event) {
                var trigger = event.relatedTarget;
                if (!trigger) return;

                var setText = function (id, value) {
                    var node = document.getElementById(id);
                    if (node) node.textContent = value || '';
                };
                var setVisible = function (id, visible) {
                    var node = document.getElementById(id);
                    if (node) node.style.display = visible ? '' : 'none';
                };

                var image = document.getElementById('clientPreviewImage');
                var website = document.getElementById('clientPreviewWebsite');
                var name = trigger.dataset.clientName || '';
                var activity = trigger.dataset.clientActivity || '';
                var notes = trigger.dataset.clientNotes || '';
                var address = trigger.dataset.clientAddress || '';
                var phone = trigger.dataset.clientPhone || '';
                var imageUrl = trigger.dataset.clientImage || '';
                var websiteUrl = trigger.dataset.clientWebsite || '';

                if (image) {
                    image.src = imageUrl;
                    image.alt = name;
                }
                setText('clientPreviewModalLabel', name || 'Cliente');
                setText('clientPreviewName', name);
                setText('clientPreviewActivity', activity);
                setText('clientPreviewNotes', notes);
                setText('clientPreviewAddress', address);
                setText('clientPreviewPhone', phone);
                setVisible('clientPreviewAddressWrap', !!address);
                setVisible('clientPreviewPhoneWrap', !!phone);

                if (website) {
                    website.style.display = websiteUrl ? '' : 'none';
                    website.href = websiteUrl || '#';
                }
            });
        });
    </script>
    <?php
    return ob_get_clean();
}

function render_product_icon($title)
{
    $title_lower = strtolower($title);
    
    if (strpos($title_lower, 'anuncio') !== false) {
        return '<i class="fa-solid fa-microphone"></i>';
    } elseif (strpos($title_lower, 'jingle') !== false) {
        return '<i class="fa-solid fa-music"></i>';
    } elseif (strpos($title_lower, 'canción') !== false || strpos($title_lower, 'cancion') !== false) {
        return '<i class="fa-solid fa-guitar"></i>';
    } elseif (strpos($title_lower, 'presencia') !== false || strpos($title_lower, 'reel') !== false && strpos($title_lower, 'básico') !== false || strpos($title_lower, 'basico') !== false) {
        return '<i class="fa-solid fa-video"></i>';
    } elseif (strpos($title_lower, 'atracción') !== false || strpos($title_lower, 'atraccion') !== false || strpos($title_lower, 'reel') !== false && strpos($title_lower, 'comercial') !== false) {
        return '<i class="fa-solid fa-film"></i>';
    } elseif (strpos($title_lower, 'conversión') !== false || strpos($title_lower, 'conversion') !== false || strpos($title_lower, 'reel') !== false && strpos($title_lower, 'pro') !== false) {
        return '<i class="fa-solid fa-clapperboard"></i>';
    } elseif (strpos($title_lower, 'video') !== false) {
        return '<i class="fa-solid fa-video"></i>';
    } elseif (strpos($title_lower, 'reels') !== false || strpos($title_lower, 'shorts') !== false) {
        return '<i class="fa-solid fa-film"></i>';
    } elseif (strpos($title_lower, 'marca') !== false && strpos($title_lower, 'video') !== false) {
        return '<i class="fa-solid fa-clapperboard"></i>';
    } elseif (strpos($title_lower, 'plan') !== false || strpos($title_lower, 'paquete') !== false) {
        return '<i class="fa-solid fa-box"></i>';
    }
    
    return '';
}

function render_product_card($product, $tabSlug, $productIndex)
{
    $carouselId = preg_replace('/[^a-z0-9_-]/i', '', $tabSlug . 'Product' . $productIndex . 'Carousel');
    $items = $product['items'] ?? [];
    $chunks = array_chunk($items, 3);
    $isPackage = $product['is_package'] ?? false;
    $isCustom = $product['is_custom'] ?? false;
    
    // Determine package class for color scheme
    $packageClass = '';
    if ($isPackage) {
        $title_lower = strtolower($product['title']);
        if (strpos($title_lower, 'impulso') !== false) {
            $packageClass = ' package-impulso';
        } elseif (strpos($title_lower, 'crecimiento') !== false) {
            $packageClass = ' package-crecimiento';
        } elseif (strpos($title_lower, 'posicionamiento') !== false) {
            $packageClass = ' package-posicionamiento';
        }
    }
    $fallbackIcons = [
        'audio' => ['<i class="fa-solid fa-microphone"></i>', '<i class="fa-solid fa-music"></i>', '<i class="fa-solid fa-guitar"></i>'],
        'video' => ['<i class="fa-solid fa-video"></i>', '<i class="fa-solid fa-film"></i>', '<i class="fa-solid fa-clapperboard"></i>'],
        'paquetes' => ['<i class="fa-solid fa-rocket"></i>', '<i class="fa-solid fa-arrow-trend-up"></i>', '<i class="fa-solid fa-chart-line"></i>'],
    ];
    $productIcon = $tabSlug === 'paquetes'
        ? ($fallbackIcons[$tabSlug][$productIndex] ?? render_product_icon($product['title']))
        : (render_product_icon($product['title']) ?: ($fallbackIcons[$tabSlug][$productIndex] ?? ''));

    ob_start();
    ?>
    <article class="product-card<?= $packageClass ?>">
        <h3><?= $productIcon ?> <?= e($product['title']) ?></h3>
        <?php if ($isPackage && !empty($product['eyebrow'])): ?>
            <p class="package-eyebrow"><?= e($product['eyebrow']) ?></p>
        <?php endif; ?>
        <p><?= e($product['description']) ?></p>

        <?php if ($isPackage): ?>
            <div class="package-details">
                <?php if (!$isCustom && isset($product['commercial_value'])): ?>
                    <div class="value-stack">
                        <span class="value-label">Valor comercial</span>
                        <span class="product-commercial-value"><?= e($product['commercial_value']) ?></span>
                        <span class="value-label investment-label">Inversion especial</span>
                        <span class="product-special-price"><?= e($product['special_price']) ?></span>
                        <?php if (isset($product['savings'])): ?>
                            <span class="product-savings">Ahorras <?= e($product['savings']) ?></span>
                        <?php endif; ?>
                    </div>
                <?php endif; ?>
                
                <?php if (!empty($product['includes'])): ?>
                    <p style="margin-bottom: 8px; font-weight: 700; color: #12384e;">Incluye:</p>
                    <ul>
                        <?php 
                        $includes_array = is_array($product['includes']) ? $product['includes'] : explode(',', $product['includes']);
                        foreach ($includes_array as $include): 
                        ?>
                            <li><i class="fa-solid fa-check-circle"></i> <?= e(trim($include)) ?></li>
                        <?php endforeach; ?>
                    </ul>
                <?php endif; ?>

                <?php if (!empty($product['custom_note'])): ?>
                    <div class="custom-package-note"><i class="fa-solid fa-chart-line"></i> <?= e($product['custom_note']) ?></div>
                <?php endif; ?>
                
                <?php if (isset($product['ideal_for'])): ?>
                    <div class="package-ideal">
                        <strong><i class="fa-solid fa-star"></i> Ideal para:</strong> <?= e($product['ideal_for']) ?>
                    </div>
                <?php endif; ?>
            </div>
        <?php endif; ?>

        <?php if ($items): ?>
            <div id="<?= e($carouselId) ?>" class="carousel slide product-carousel" data-bs-interval="false">
                <div class="carousel-inner">
                    <?php foreach ($chunks as $chunkIndex => $chunk): ?>
                        <div class="carousel-item <?= $chunkIndex === 0 ? 'active' : '' ?>">
                            <div class="playlist">
                                <?php foreach ($chunk as $item): ?>
                                    <?= render_playlist_item($item, $product) ?>
                                <?php endforeach; ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        <?php endif; ?>

        <div class="product-plan">
            <?php if ($isPackage && !$isCustom && isset($product['special_price'])): ?>
                <a class="btn-whatsapp" href="<?= e($product['cta_url']) ?>" target="_blank"><i class="fa-brands fa-whatsapp"></i> <?= e($product['cta_label']) ?></a>
            <?php elseif ($isCustom): ?>
                <div class="product-price"><span style="font-size: 1rem; color: #12384e;"><?= e($product['price_label']) ?></span></div>
                <a class="btn-whatsapp" href="<?= e($product['cta_url']) ?>" target="_blank"><i class="fa-brands fa-whatsapp"></i> <?= e($product['cta_label']) ?></a>
            <?php else: ?>
                <div class="product-price"><span><?= e($product['price_label']) ?></span><strong><?= e($product['price_value']) ?></strong></div>
                <?php if (!empty($product['cta_url'])): ?>
                    <a class="btn-whatsapp" href="<?= e($product['cta_url']) ?>" target="_blank"><i class="fa-brands fa-whatsapp"></i> <?= e($product['cta_label']) ?></a>
                <?php endif; ?>
            <?php endif; ?>
        </div>
    </article>
    <?php
    return ob_get_clean();
}

function render_playlist_item($item, $product)
{
    $type = $item['item_type'] ?? 'audio';
    $media = $item['media_url'] ?? '';
    $action = ($item['action_url'] ?? '') ?: ($product['cta_url'] ?? '#');

    ob_start();
    ?>
    <div class="playlist-item">
        <button class="avatar-trigger" type="button" data-bs-toggle="modal" data-bs-target="#clientPreviewModal" data-client-name="<?= e($item['company']) ?>" data-client-activity="<?= e($item['activity']) ?>" data-client-notes="<?= e($item['client_notes'] ?? '') ?>" data-client-address="<?= e($item['address']) ?>" data-client-phone="<?= e($item['phone']) ?>" data-client-image="<?= e($item['image_url']) ?>" data-client-website="<?= e($item['client_website'] ?? '') ?>" aria-label="Ver cliente <?= e($item['company']) ?>">
            <img class="playlist-avatar" src="<?= e($item['image_url']) ?>" alt="<?= e($item['company']) ?>">
        </button>
        <div>
            <p class="playlist-title"><?= e($item['title']) ?></p>
            <p class="playlist-meta"><?= e($item['company']) ?> · <?= e($item['genre']) ?></p>
        </div>
        <?php if ($type === 'audio' && $media): ?>
            <button class="playlist-play" onclick="playSound('<?= e($media) ?>')" data-client-image="<?= e($item['image_url']) ?>" data-audio-title="<?= e($item['title']) ?>" aria-label="Reproducir <?= e($item['title']) ?>"><i class="fa-solid fa-play"></i></button>
        <?php elseif ($type === 'video' && $media): ?>
            <button class="playlist-play js-public-video-preview" type="button" data-bs-toggle="modal" data-bs-target="#publicVideoPreviewModal" data-src="<?= e($media) ?>" data-title="<?= e($item['title']) ?>" aria-label="Ver video <?= e($item['title']) ?>"><i class="fa-solid fa-play"></i></button>
        <?php else: ?>
            <a class="playlist-play" href="<?= e($action) ?>" target="_blank" aria-label="Cotizar <?= e($item['title']) ?>"><i class="fa-brands fa-whatsapp"></i></a>
        <?php endif; ?>
    </div>
    <?php
    return ob_get_clean();
}
User / IP	: 216.73.216.217
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64