<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Planes Call Center PRO</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --ink: #182233;
            --muted: #6b7280;
            --bg: #f2f4f8;
            --surface: #ffffff;
            --border: #e2e5ec;
            --brand: #e85d24;
            --brand-dark: #c94a17;
            --brand-soft: #fff1e8;
            --success: #0f9d58;
            --success-soft: #e8f8ef;
            --dark-pill: #241a12;
            --radius: 16px;
            --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 20px -8px rgba(16, 24, 40, .10);
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            background: var(--bg);
            color: var(--ink);
            font-family: 'Inter', system-ui, sans-serif;
            font-size: 14px;
            -webkit-font-smoothing: antialiased;
        }

        h1,
        h2,
        h3,
        .num {
            font-family: 'Manrope', system-ui, sans-serif;
        }

        .wrap {
            max-width: 1180px;
            margin: 0 auto;
            padding: 20px 20px 60px;
        }

        .page-head {
            margin-bottom: 18px;
        }

        .page-head h1 {
            font-size: 20px;
            font-weight: 800;
            margin: 0;
            letter-spacing: -.01em;
        }

        .page-head .sub {
            color: var(--muted);
            font-size: 13px;
            margin-top: 2px;
        }

        /* ---- Contenedor central: usa todo el ancho del lienzo (.wrap) ---- */
        .content-area {
            width: 100%;
        }

        /* ---- Pestañas principales (región: Lima / Provincia) ---- */
        .region-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 16px;
        }

        .region-btn {
            border: 1.5px solid var(--border);
            background: var(--surface);
            color: var(--muted);
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 14px;
            padding: 9px 20px;
            border-radius: 999px;
            cursor: pointer;
            transition: .15s ease;
        }

        .region-btn:hover {
            border-color: #c9cede;
            color: var(--ink);
        }

        .region-btn.active {
            background: var(--brand);
            border-color: var(--brand);
            color: #fff;
            box-shadow: 0 6px 16px -8px rgba(232, 93, 36, .55);
        }

        /* ---- Pestañas secundarias (categoría dentro de la región) ---- */
        .tabs-block {
            border-bottom: 1px solid var(--border);
            margin-bottom: 20px;
            overflow-x: auto;
            white-space: nowrap;
            scrollbar-width: none;
        }

        .tabs-block::-webkit-scrollbar {
            display: none;
        }

        .tab-btn {
            display: inline-block;
            background: none;
            border: none;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            font-weight: 700;
            color: var(--muted);
            padding: 10px 4px;
            margin-right: 26px;
            cursor: pointer;
            border-bottom: 2.5px solid transparent;
            transition: .15s ease;
        }

        .tab-btn:hover {
            color: var(--ink);
        }

        .tab-btn.active {
            color: var(--brand);
            border-bottom-color: var(--brand);
        }

        /* ---- Plan cards ---- */
        .plans-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
            gap: 14px;
        }

        .plan-card {
            position: relative;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            background: var(--surface);
            border: 1.5px solid var(--border);
            border-radius: var(--radius);
            overflow: hidden;
            transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
            box-shadow: var(--shadow);
            outline: none;
        }

        .plan-card:hover {
            border-color: #c9cede;
            transform: translateY(-2px);
        }

        .plan-card:focus-visible {
            border-color: var(--brand);
            box-shadow: 0 0 0 3px var(--brand-soft);
        }

        .plan-card.active {
            border-color: var(--brand);
            box-shadow: 0 0 0 3px var(--brand-soft), 0 10px 24px -12px rgba(232, 93, 36, .45);
        }

        .ribbon {
            position: absolute;
            top: 0;
            left: 16px;
            background: var(--success);
            color: #fff;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .03em;
            padding: 4px 10px 5px;
            border-radius: 0 0 8px 8px;
            z-index: 2;
        }

        .check-mark {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--brand);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 2;
            box-shadow: 0 2px 6px -1px rgba(232, 93, 36, .5);
        }

        .plan-card.active .check-mark {
            display: flex;
        }

        .check-mark svg {
            width: 11px;
            height: 11px;
        }

        /* card sections, divided by a hairline like the reference design */
        .card-sec {
            padding: 16px 16px;
            text-align: center;
        }

        .card-sec+.card-sec {
            border-top: 1px solid var(--border);
        }

        .plan-card.active .card-sec.sec-top {
            background: var(--brand-soft);
        }

        .cat-label {
            font-size: 12px;
            color: var(--muted);
            font-weight: 500;
        }

        .speed-big {
            font-size: 26px;
            font-weight: 800;
            letter-spacing: -.01em;
            margin-top: 2px;
            line-height: 1.2;
        }

        .cat-sub {
            font-size: 11.5px;
            color: var(--muted);
            margin-top: 2px;
        }

        .sec-mid {
            flex: 1;
        }

        .logo-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-bottom: 10px;
        }

        .logo-text {
            font-family: 'Manrope', sans-serif;
            font-weight: 800;
            font-size: 18px;
            letter-spacing: -.01em;
        }

        .logo-text .a {
            color: var(--brand);
        }

        .logo-text .b {
            color: var(--ink);
        }

        .tier-pill {
            background: #ffce33;
            color: #4a3600;
            font-size: 10.5px;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 999px;
            white-space: nowrap;
        }

        .price-big {
            font-size: 21px;
            font-weight: 800;
            letter-spacing: -.01em;
        }

        .price-big .unit {
            font-size: 12.5px;
            font-weight: 600;
            color: var(--muted);
            margin-left: 3px;
        }

        .price-regular {
            font-size: 11.5px;
            color: var(--muted);
            margin-top: 4px;
        }

        .sec-bottom {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
        }

        .chip-dark {
            background: var(--dark-pill);
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            padding: 5px 14px;
            border-radius: 999px;
        }

        .mesh-note {
            font-size: 11px;
            color: var(--success);
            font-weight: 700;
            margin-top: 8px;
        }

        /* ---- Extras ---- */
        .extras-block {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 14px 16px;
            margin-top: 20px;
            box-shadow: var(--shadow);
        }

        .extras-block .title {
            font-weight: 700;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: .04em;
            color: var(--muted);
            margin-bottom: 10px;
        }

        .extra-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .extra-chip {
            display: flex;
            align-items: center;
            gap: 7px;
            border: 1.5px solid var(--border);
            border-radius: 10px;
            padding: 8px 12px;
            cursor: pointer;
            font-weight: 600;
            font-size: 13px;
            transition: .15s ease;
            user-select: none;
        }

        .extra-chip:hover {
            border-color: var(--brand);
        }

        .extra-chip.checked {
            border-color: var(--brand);
            background: var(--brand-soft);
        }

        .extra-chip input {
            accent-color: var(--brand);
            width: 15px;
            height: 15px;
        }

        .extra-chip .amt {
            color: var(--muted);
            font-weight: 500;
        }
    </style>
</head>

<body>
    <div class="wrap">

        <div class="content-area">

            <!-- Pestañas principales: región -->
            <div class="region-tabs" id="regionTabs" role="tablist" aria-label="Región"></div>

            <!-- Pestañas secundarias: categoría dentro de la región -->
            <div class="tabs-block" id="tabsRow" role="tablist" aria-label="Categoría de plan"></div>

            <div class="plans-grid" id="planesContainer" role="radiogroup" aria-label="Planes disponibles"></div>

            <div class="extras-block">
                <div class="title">Extras</div>
                <div class="extra-row" id="extrasRow"></div>
            </div>

        </div>
    </div>

    <script>
        // ---------------------------------------------------------------
        // Datos agrupados por REGIÓN y, dentro de cada región, por
        // CATEGORÍA (pestaña secundaria). Cada región define "meses":
        // el número de meses que dura el precio promocional mostrado en
        // la tarjeta (ej. Lima = 12 meses, Provincia = 2 meses).
        //
        // Cada plan tiene "precios" por velocidad (Mbps -> soles) y,
        // opcionalmente, "regular" (precio sin promo, para mostrar ahorro).
        // "tipo": "MONO" (solo internet) o "DUO" (internet + tv).
        // "logoA"/"logoB": partes del wordmark del producto (ej. "win"/"tv.").
        // "tier": etiqueta amarilla junto al logo (Premium, Max, Full, etc.)
        // "canales"/"dispositivos": para las píldoras oscuras inferiores.
        // "incluyeMeshDesde850": true si el plan trae 1 mesh incluido a
        //   850 Mbps. A 1000 Mbps TODOS los planes incluyen 2 mesh.
        // "masVendido": si se define, es la velocidad (Mbps) en la que debe
        //   aparecer el ribbon "Más vendido" para este plan. Si no se define,
        //   no se muestra el ribbon en ninguna tarjeta de este plan.
        //
        // Si una región tiene una sola categoría, la pestaña secundaria
        // se oculta automáticamente (ej. Provincia).
        // ---------------------------------------------------------------
        const regiones = [
            {

                id: "lima",
                nombre: "Lima",
                meses: 12,
                categorias: [{
                        id: "internet",
                        nombre: "Solo Internet Fibra Óptica",
                        // Ejemplo: esta sub-categoría usa su propio periodo
                        // (x1 mes) en vez de heredar el de la región (x12).
                        // Si borras esta línea, vuelve a usar region.meses.
                        planes: [{
                            nombre: "Solo Internet",
                            tipo: "MONO",
                            eyebrow: "Internet Fibra Óptica",
                            incluyeMeshDesde850: false,
                            masVendido: 850,

                            precios: {
                                450: 89,
                                500: 99,
                               
                            },
                            // El texto "x N meses" solo aparece si el plan
                            // tiene "regular" (precio de referencia). Si no
                            // lo tiene, siempre se muestra "/mes".
                     
                        }]
                    },
                    {
                        id: "wintv",
                        nombre: "WinTV Premium",
                        planes: [{
                            nombre: "Internet + WinTV Premium",
                            tipo: "DUO",
                            eyebrow: "Internet Fibra Óptica + TV",
                            logoA: "win",
                            logoB: "tv.",
                            tier: "Premium",
                            canales: 90,
                            dispositivos: 4,
                            incluyeMeshDesde850: false,
                            masVendido: 850,
                            precios: {
                                500: 99.9,
                                750: 109.9,
                                850: 119.9,
                                1000: 139.9
                            },
                            regular: {
                                500: 148,
                                750: 158,
                                850: 168,
                                1000: 188
                            }
                        }]
                    },
              
              
                ]
            },
           
           
             {
                id: "ofertemes",
                nombre: "Lima Promo 50% desc ",
                meses: 12,
                categorias: [{
                        id: "internet",
                        nombre: "Solo Internet Fibra Óptica",
                        // Ejemplo: esta sub-categoría usa su propio periodo
                        // (x1 mes) en vez de heredar el de la región (x12).
                        // Si borras esta línea, vuelve a usar region.meses.
                        meses: 1,
                        planes: [{
                            nombre: "Solo Internet",
                            tipo: "MONO",
                            eyebrow: "Internet Fibra Óptica",
                            incluyeMeshDesde850: false,
                            masVendido: 850,

                            precios: {
                              
                                750: 54.50,
                                850: 59.50,
                                1000: 69.50
                            },
                            // El texto "x N meses" solo aparece si el plan
                            // tiene "regular" (precio de referencia). Si no
                            // lo tiene, siempre se muestra "/mes".
                            regular: {
                               
                                750: 109,
                                850: 119,
                                1000: 129
                            }
                        }]
                    },

                    {
                        id: "l1max",
                        nombre: "L1 Max Premium",
                        meses: 1,

                        planes: [{
                            nombre: "Internet + WinTV L1MAX Premium",
                            tipo: "DUO",
                            eyebrow: "Internet Fibra Óptica + TV",
                            logoA: "L1",
                            logoB: " Max",
                            tier: "Premium",
                            canales: 92,
                            dispositivos: 4,
                            grabacion:5,
                            incluyeMeshDesde850: true,
                            precios: {
                                750:59.95,
                                850: 64.95,
                                1000: 75.95
                            },
                            regular: {
                                750: 119.90,
                                850: 129.90,
                                1000: 149.90
                            }
                        }]
                    },
                    {
                        id: "dgo",
                        nombre: "DGO Hogar / DGO Full",
                        meses: 1,

                        planes: [{
                                nombre: "Internet + DGO Hogar",
                                tipo: "DUO",
                                eyebrow: "Internet Fibra Óptica + TV",
                                logoA: "DGO",
                                logoB: "",
                                tier: "Hogar",
                                canales: 65,
                                dispositivos: 2,
                                incluyeMeshDesde850: false,
                                precios: {
                                    850: 69.95,
                                    1000: 79.95
                                },
                                regular: {
                                    850: 139.90,
                                    1000: 159.90
                                }
                            },
                            {
                                nombre: "Internet + DGO Full",
                                tipo: "DUO",
                                eyebrow: "Internet Fibra Óptica + TV",
                                logoA: "DGO",
                                logoB: "",
                                tier: "Full",
                                canales: 85,
                                dispositivos: 4,
                                incluyeMeshDesde850: false,
                                precios: {
                                    1000: 89.95
                                },
                                regular: {
                                    1000: 179.90
                                }
                            }
                        ]
                    }
                ]
            },
           
           
           
            {
                id: "provincia",
                nombre: "Provincia",
                meses: 2,
                categorias: [{
                        id: "provincia-internet",
                        nombre: "Solo Internet Fibra Óptica",
                        planes: [{
                            nombre: "Solo Internet",
                            tipo: "MONO",
                            eyebrow: "Internet Fibra Óptica-Provincia",
                            incluyeMeshDesde850: false,
                            masVendido: 550,

                            precios: {
                                350: 69,
                                550: 89,
                                750: 99,
                                1000: 129
                            }
                        }]
                    },
                    {
                        id: "provincia-wintv",
                        nombre: "WinTV Premium",
                        planes: [{
                            nombre: "Internet + WinTV Premium",
                            tipo: "DUO",
                            eyebrow: "Internet Fibra Óptica + TV",
                            logoA: "win",
                            logoB: "tv.",
                            tier: "Premium",
                            canales: 90,
                            dispositivos: 4,
                            incluyeMeshDesde850: false,
                            masVendido: 550,
                            precios: {
                                550: 69.9
                            },
                            regular: {
                                550: 89.90
                            }
                        }]
                    }
                ]
            }
        ];

        const extrasDisponibles = [{
                id: "fonowin",
                nombre: "FonoWin",
                valor: 10
            },
            {
                id: "winbox",
                nombre: "Winbox",
                valor: 15
            },
            {
                id: "mesh",
                nombre: "Mesh",
                valor: 9.90
            }
        ];

        let regionActivaId = regiones[0].id;
        let categoriaActivaId = regiones[0].categorias[0].id;
        let seleccion = null; // { planNombre, velocidad }

        function meshIncluido(plan, vel) {
            if (vel === 1000) return 2;
            if (vel === 850 && plan.incluyeMeshDesde850) return 1;
            return 0;
        }

        function getRegionActiva() {
            return regiones.find(r => r.id === regionActivaId);
        }

        function getCategoriaActiva() {
            const region = getRegionActiva();
            return region.categorias.find(c => c.id === categoriaActivaId) || region.categorias[0];
        }

        // Devuelve la lista de tarjetas (plan + velocidad) a mostrar
        // para la categoría activa, ordenadas por velocidad ascendente.
        function getTarjetas(categoria) {
            const tarjetas = [];
            categoria.planes.forEach(plan => {
                Object.keys(plan.precios).forEach(v => {
                    tarjetas.push({
                        plan,
                        velocidad: parseInt(v, 10)
                    });
                });
            });
            tarjetas.sort((a, b) => a.velocidad - b.velocidad);
            return tarjetas;
        }

        function renderRegionTabs() {
            const row = document.getElementById("regionTabs");
            row.innerHTML = "";
            regiones.forEach(region => {
                const btn = document.createElement("button");
                btn.className = "region-btn" + (region.id === regionActivaId ? " active" : "");
                btn.textContent = region.nombre;
                btn.setAttribute("role", "tab");
                btn.setAttribute("aria-selected", region.id === regionActivaId ? "true" : "false");
                btn.addEventListener("click", () => selectRegion(region.id));
                row.appendChild(btn);
            });
        }

        function selectRegion(id) {
            if (id === regionActivaId) return;
            regionActivaId = id;
            categoriaActivaId = getRegionActiva().categorias[0].id;
            renderRegionTabs();
            renderCategoriaTabs();
            renderPlanes();
        }

        function renderCategoriaTabs() {
            const row = document.getElementById("tabsRow");
            const region = getRegionActiva();

            // Si la región solo tiene una categoría, no hace falta la
            // pestaña secundaria (ej. Provincia).
            if (region.categorias.length <= 1) {
                row.style.display = "none";
                row.innerHTML = "";
                return;
            }

            row.style.display = "";
            row.innerHTML = "";
            region.categorias.forEach(cat => {
                const btn = document.createElement("button");
                btn.className = "tab-btn" + (cat.id === categoriaActivaId ? " active" : "");
                btn.textContent = cat.nombre;
                btn.setAttribute("role", "tab");
                btn.setAttribute("aria-selected", cat.id === categoriaActivaId ? "true" : "false");
                btn.addEventListener("click", () => selectCategoria(cat.id));
                row.appendChild(btn);
            });
        }

        function selectCategoria(id) {
            categoriaActivaId = id;
            renderCategoriaTabs();
            renderPlanes();
        }

        function renderPlanes() {
            const cont = document.getElementById("planesContainer");
            cont.innerHTML = "";
            const region = getRegionActiva();
            const categoria = getCategoriaActiva();
            const tarjetas = getTarjetas(categoria);

            tarjetas.forEach(({
                plan,
                velocidad
            }) => {
                const isActive = !!seleccion && seleccion.planNombre === plan.nombre && seleccion.velocidad === velocidad;
                const mesh = meshIncluido(plan, velocidad);
                const precioRegular = plan.regular && plan.regular[velocidad];
                const esMasVendido = plan.masVendido === velocidad;
                // Jerarquía de "meses" (duración del precio promo):
                // el plan puede sobreescribir a la categoría, y la
                // categoría puede sobreescribir a la región.
                const meses = plan.meses ?? categoria.meses ?? region.meses;

                const card = document.createElement("div");
                card.className = "plan-card" + (isActive ? " active" : "");
                card.tabIndex = 0;
                card.setAttribute("role", "radio");
                card.setAttribute("aria-checked", isActive ? "true" : "false");

                card.innerHTML = `
                    ${esMasVendido ? '<span class="ribbon">Más vendido</span>' : ''}
                    <span class="check-mark"><svg viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="#fff" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
                    <div class="card-sec sec-top">
                        <div class="cat-label">${plan.eyebrow}</div>
                        <div class="speed-big">${velocidad} Mbps</div>
                        <div class="cat-sub">Velocidad simétrica</div>
                    </div>
                    <div class="card-sec sec-mid">
                        ${plan.tipo === "DUO" ? `
                            <div class="logo-row">
                                <span class="logo-text"><span class="a">${plan.logoA}</span><span class="b">${plan.logoB}</span></span>
                                <span class="tier-pill">${plan.tier}</span>
                            </div>` : ''}
                        <div class="price-big">S/ ${plan.precios[velocidad]}<span class="unit">${precioRegular ? ` x ${meses} meses` : ' /mes'}</span></div>
                        ${precioRegular ? `<div class="price-regular">Precio regular: S/ ${precioRegular}</div>` : ''}
                        ${mesh > 0 ? `<div class="mesh-note">✓ ${mesh} Mesh incluido${mesh > 1 ? 's' : ''}</div>` : ''}
                    </div>
                    ${plan.tipo === "DUO" ? `
                        <div class="card-sec sec-bottom">
                            <span class="chip-dark">+${plan.canales} Canales</span>
                            <span class="chip-dark">${plan.dispositivos} dispo. simultaneo</span>
                        </div>` : ''}
                `;

                card.addEventListener("click", () => selectPlan(plan.nombre, velocidad));
                card.addEventListener("keydown", e => {
                    if (e.key === "Enter" || e.key === " ") {
                        e.preventDefault();
                        selectPlan(plan.nombre, velocidad);
                    }
                });

                cont.appendChild(card);
            });
        }

        function selectPlan(nombre, velocidad) {
            if (seleccion && seleccion.planNombre === nombre && seleccion.velocidad === velocidad) {
                // click de nuevo sobre la misma tarjeta -> deseleccionar
                seleccion = null;
            } else {
                seleccion = {
                    planNombre: nombre,
                    velocidad
                };
            }
            renderPlanes();
        }

        function renderExtras() {
            const row = document.getElementById("extrasRow");
            row.innerHTML = "";
            extrasDisponibles.forEach(ex => {
                const label = document.createElement("label");
                label.className = "extra-chip";
                label.innerHTML = `
                    <input type="checkbox" class="extra" value="${ex.valor}" id="ex-${ex.id}">
                    <span>${ex.nombre}</span>
                    <span class="amt">+S/ ${ex.valor}</span>
                `;
                const input = label.querySelector("input");
                input.addEventListener("change", () => {
                    label.classList.toggle("checked", input.checked);
                });
                row.appendChild(label);
            });
        }

        // Inicializar
        renderRegionTabs();
        renderCategoriaTabs();
        renderPlanes();
        renderExtras();
    </script>

</body>

</html>
