// PLANES — alimentado por /admin/api/plans.php // Progressive disclosure: solo la familia destacada arranca expandida. // Cada sección se puede colapsar; barra de filtros para evitar fatiga visual. const { useState, useEffect, useMemo, useRef, useCallback } = React; // Internet hogar va primero y destacado — es el plan más buscado del distribuidor. const FAMILY_META = { internet_hogar: { title: "Internet hogar", sub: "Fibra óptica + Wi-Fi 6 en cada esquina. Instalación gratis.", unit: "speed", featured: true, badge: "★ DESTACADO", icon: "🌐" }, triple_play: { title: "Triple play", sub: "Internet, TV y voz. Una sola factura.", unit: "speed", icon: "📺" }, movil_postpago: { title: "Móvil postpago", sub: "Datos 5G, llamadas y roaming. Sin sorpresas en la factura.", unit: "datos", icon: "📱" }, movil_prepago: { title: "Móvil prepago", sub: "Recarga lo que necesitas, cuando lo necesitas.", unit: "datos", icon: "💳" }, movil_control: { title: "Móvil control", sub: "Lo mejor de prepago + postpago. Tope mensual.", unit: "datos", icon: "🎛️" }, internet_movil: { title: "Internet móvil", sub: "Conexión donde estés, con módem portátil.", unit: "datos", icon: "📡" }, duo: { title: "Duo", sub: "Internet hogar + línea móvil en un combo.", unit: "speed", icon: "🔗" }, otros: { title: "Otros", sub: "Servicios complementarios.", unit: "", icon: "✨" }, }; // Detect "cobre" plans (deprecated copper tech) — name or features function isCobrePlan(p) { if (!p) return false; const blob = `${p.name || ""} ${p.short_label || ""} ${(p.features || []).join(" ")}`.toLowerCase(); return /\bcobre\b/i.test(blob); } function formatBigUnit(p) { if (p.family.startsWith("internet") || p.family === "triple_play" || p.family === "duo") { if (p.speed_down_mbps) return { n: String(p.speed_down_mbps), u: "Mbps" }; } if (p.family.startsWith("movil")) { if (p.data_unlimited) return { n: "∞", u: "datos" }; if (p.data_gb) return { n: String(p.data_gb).replace(/\.0$/, ""), u: "GB" }; if (p.minutes_unlimited) return { n: "∞", u: "minutos" }; } if (p.short_label) return { n: p.short_label, u: "" }; return { n: String(Math.round(p.price)), u: "RD$" }; } function buildFeatureList(p) { if (p.features && p.features.length) return p.features.slice(0, 6); const out = []; if (p.speed_down_mbps) out.push(`${p.speed_down_mbps} Mbps${p.symmetric ? ' simétrico' : ''}`); if (p.data_unlimited) out.push("Datos ilimitados 5G"); else if (p.data_gb) out.push(`${p.data_gb} GB de datos`); if (p.minutes_unlimited) out.push("Minutos ilimitados"); else if (p.minutes) out.push(`${p.minutes} minutos`); if (p.social_unlimited) out.push("Redes sociales ilimitadas"); if (p.roaming_usa) out.push("Roaming USA / Canadá"); if (p.tv_channels) out.push(`TV ${p.tv_channels}+ canales${p.tv_premium ? ' (premium)' : ''}`); if (p.install_free) out.push("Instalación gratis"); if (p.modem_included) out.push("Módem Wi-Fi incluido"); if (p.wifi_standard) out.push(p.wifi_standard); return out.slice(0, 6); } function PlanHero({ totalCount }) { return (
Planes

El plan correcto{" "} existe.{" "} Y lo activamos hoy.

Internet, TV o móvil. Filtra por categoría y abre solo lo que te interese.

{totalCount > 0 && (

{totalCount} planes activos · Selecciona una categoría para ver detalles

)}
); } function PlanCard({ p }) { const [hover, setHover] = useState(false); const big = formatBigUnit(p); const feats = buildFeatureList(p); const isPop = p.is_popular; const family = (FAMILY_META[p.family] || {}).title || p.family; const cardBg = isPop ? "linear-gradient(160deg, #1a1024 0%, #2a1538 50%, #1a1024 100%)" : "#fff"; return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ background: cardBg, color: isPop ? "var(--paper)" : "var(--ink)", border: isPop ? "1px solid transparent" : "1px solid var(--line)", borderRadius: 22, padding: "36px 32px 28px", display: "flex", flexDirection: "column", gap: 22, position: "relative", minHeight: 520, transition: "transform 320ms cubic-bezier(0.16,1,0.3,1), box-shadow 320ms cubic-bezier(0.16,1,0.3,1), border-color 200ms", transform: hover ? "translateY(-6px)" : "translateY(0)", boxShadow: isPop ? (hover ? "0 30px 70px -20px rgba(237,15,68,0.35), 0 6px 20px -8px rgba(20,17,15,0.45), inset 0 1px 0 rgba(255,255,255,0.08)" : "0 18px 48px -16px rgba(237,15,68,0.22), 0 4px 12px -6px rgba(20,17,15,0.40), inset 0 1px 0 rgba(255,255,255,0.08)") : (hover ? "0 22px 50px -16px rgba(20,17,15,0.18), 0 4px 12px -4px rgba(20,17,15,0.08)" : "0 1px 1px rgba(20,17,15,0.04), 0 4px 12px -2px rgba(20,17,15,0.06)"), overflow: "hidden", }}> {isPop && ( <>
); } // ============================================================ // SECTION — header con toggle de colapso (oculta por sección). // • Cerrada → fila compacta (un sólo renglón, sin banda oscura). // • Abierta → muestra 3 planes; "Ver X más" revela el resto. // ============================================================ const VISIBLE_PLAN_CAP = 3; function PlanSection({ family, plans, alt, open, onToggle, filterMatchCount }) { const [showAll, setShowAll] = useState(false); // Reset showAll when section closes — avoids stale state on reopen. useEffect(() => { if (!open) setShowAll(false); }, [open]); if (!plans.length) return null; const meta = FAMILY_META[family] || { title: family, sub: "" }; const isFeatured = !!meta.featured; const headerId = `plan-section-${family}`; const panelId = `plan-panel-${family}`; const totalShown = plans.length; const totalFiltered = filterMatchCount != null ? filterMatchCount : totalShown; const visiblePlans = (showAll || plans.length <= VISIBLE_PLAN_CAP) ? plans : plans.slice(0, VISIBLE_PLAN_CAP); const hiddenCount = plans.length - visiblePlans.length; // ─── Compact closed view (shared by featured + standard) ──────────────── // Slim row keeps the page scannable: title + count + "Ver planes" button. if (!open) { return (

{meta.title}

{isFeatured && ( ★ Destacado )} {totalFiltered === totalShown ? `${totalShown} ${totalShown === 1 ? "plan" : "planes"}` : `${totalFiltered}/${totalShown} planes`}
{meta.sub && (

{meta.sub}

)}
); } // ─── Open featured view ───────────────────────────────────────────────── if (isFeatured) { return (
); } // ─── Open standard view ───────────────────────────────────────────────── return (
{meta.title}} title={meta.sub} count={totalFiltered} countTotal={totalShown} />
{visiblePlans.map((p) => )}
{hiddenCount > 0 && ( setShowAll(true)} /> )}
); } // "Ver X planes más" — reveals the rest of the plans inside an open section. function ShowMoreButton({ hiddenCount, onClick, dark }) { return (
); } // Reusable section header with collapse chevron + plan count function SectionHeaderBar({ id, panelId, open, onToggle, eyebrow, eyebrowStyle, title, count, countTotal, dark }) { return (
{eyebrow}

{title}

{/* count chip */} {countTotal > 0 && (

{count === countTotal ? ( <>{countTotal} {countTotal === 1 ? "plan disponible" : "planes disponibles"} ) : ( <>{count} de {countTotal} {countTotal === 1 ? "plan" : "planes"} coinciden con tus filtros )}

)}
); } // =========================================================== // SPEED TEST — Cloudflare endpoints, designed in the Ookla style // =========================================================== function SpeedTestSection({ plans }) { const [phase, setPhase] = useState("idle"); const [ping, setPing] = useState(null); const [download, setDownload] = useState(0); const [finalDown, setFinalDown] = useState(null); const [upload, setUpload] = useState(0); const [finalUp, setFinalUp] = useState(null); const [error, setError] = useState(null); const abortRef = useRef(null); function mbpsToAngle(mbps) { if (!mbps || mbps <= 0) return 0; const max = 1000; const ratio = Math.log10(Math.min(mbps, max) + 1) / Math.log10(max + 1); return Math.min(ratio, 1) * 270; } function speedLabel(mbps) { if (mbps === null || mbps === undefined) return "—"; if (mbps < 10) return mbps.toFixed(2); if (mbps < 100) return mbps.toFixed(1); return mbps.toFixed(0); } function speedVerdict(mbps) { if (mbps == null) return { label: "—", color: "#6b5c5c" }; if (mbps < 10) return { label: "Muy lenta", color: "#d44545" }; if (mbps < 25) return { label: "Baja", color: "#e08a2a" }; if (mbps < 100) return { label: "Aceptable", color: "#c9a82a" }; if (mbps < 300) return { label: "Buena", color: "#7fbf3a" }; if (mbps < 700) return { label: "Muy buena", color: "#34c759" }; return { label: "Excelente", color: "#00d68f" }; } function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function runTest() { setError(null); setPing(null); setDownload(0); setUpload(0); setFinalDown(null); setFinalUp(null); setPhase("warmup"); const warmStart = performance.now(); try { await Promise.all([ fetch("https://speed.cloudflare.com/__down?bytes=10000", { cache: "no-store" }).then(r => r.text()), fetch("https://speed.cloudflare.com/__down?bytes=10000", { cache: "no-store" }).then(r => r.text()), ]); } catch (e) { setError("Sin conexión. Verifica tu red."); setPhase("error"); return; } const warmElapsed = performance.now() - warmStart; if (warmElapsed < 1500) await sleep(1500 - warmElapsed); setPhase("ping"); try { const samples = []; for (let i = 0; i < 10; i++) { const t0 = performance.now(); await fetch("https://speed.cloudflare.com/__down?bytes=0", { cache: "no-store" }); samples.push(performance.now() - t0); setPing(Math.round(samples[Math.floor(samples.length / 2)])); } samples.sort((a, b) => a - b); const trimmed = samples.slice(2, -2); const avg = trimmed.reduce((a, b) => a + b, 0) / trimmed.length; setPing(Math.round(avg)); } catch (e) { setError("No pudimos medir la latencia."); setPhase("error"); return; } // ──────── DOWNLOAD ──────── setPhase("download"); try { const NUM_STREAMS = 4; const BYTES_STREAM = 100_000_000; const DURATION_MS = 10_000; const ctrl = new AbortController(); abortRef.current = ctrl; const tStart = performance.now(); let totalBytes = 0; let speedSamples = []; const updateInterval = setInterval(() => { const elapsed = (performance.now() - tStart) / 1000; if (elapsed < 0.5) return; const instMbps = (totalBytes * 8) / elapsed / 1_000_000; speedSamples.push(instMbps); if (speedSamples.length > 8) speedSamples.shift(); const sorted = [...speedSamples].sort((a, b) => a - b); const med = sorted[Math.floor(sorted.length / 2)]; setDownload(med); }, 150); const abortTimer = setTimeout(() => ctrl.abort(), DURATION_MS); const streams = Array.from({ length: NUM_STREAMS }, async () => { try { const res = await fetch(`https://speed.cloudflare.com/__down?bytes=${BYTES_STREAM}`, { signal: ctrl.signal, cache: "no-store", }); if (!res.body) return; const reader = res.body.getReader(); while (true) { const { done, value } = await reader.read(); if (done) break; totalBytes += value.length; } } catch (e) { /* aborted */ } }); await Promise.all(streams); clearInterval(updateInterval); clearTimeout(abortTimer); const elapsedTotal = (performance.now() - tStart) / 1000; const overall = (totalBytes * 8) / elapsedTotal / 1_000_000; const sorted = [...speedSamples].sort((a, b) => a - b); const med = speedSamples.length > 2 ? sorted[Math.floor(sorted.length / 2)] : overall; const finalMbps = med * 0.7 + overall * 0.3; setDownload(finalMbps); setFinalDown(finalMbps); } catch (e) { if (e.name !== "AbortError") { setError("Error al medir la descarga."); setPhase("error"); return; } } await sleep(500); // ──────── UPLOAD — Cloudflare __up con fallback al backend propio ──────── setPhase("upload"); setUpload(0); try { const CHUNK_BYTES = 2_000_000; // 2 MB por chunk const NUM_STREAMS = 3; const DURATION_MS = 8_000; // Endpoints: Cloudflare primero (más confiable), backend propio como fallback local // Cloudflare expone /__up que acepta arbitrary POST y devuelve 200/204 const endpoints = [ "https://speed.cloudflare.com/__up", ]; // Si estamos en dev local con PHP, agregamos el endpoint propio como respaldo const localPhp = location.hostname === "localhost" || location.hostname === "127.0.0.1"; if (localPhp) endpoints.push(window.balUrl("admin/api/speed_up.php")); // Generar payload una vez (sin compresión: bytes aleatorios reales) const data = new Uint8Array(CHUNK_BYTES); crypto.getRandomValues(data.subarray(0, Math.min(65536, CHUNK_BYTES))); // rellena al menos 64KB de aleatoriedad real // El resto puede quedar en 0; total entropy es suficiente para no comprimir significativamente // Probe: ¿qué endpoint responde 2xx? Usamos el primero que funcione let uploadUrl = null; for (const url of endpoints) { try { const probe = await fetch(url, { method: "POST", body: data.subarray(0, 1024), cache: "no-store", headers: { "Content-Type": "application/octet-stream" }, }); if (probe.ok || probe.status === 204) { uploadUrl = url; break; } } catch (e) { /* try next */ } } if (!uploadUrl) { // No hay endpoint disponible — mostramos "—" en lugar de 0 para no engañar setFinalUp(null); setPhase("done"); return; } const tStart = performance.now(); let totalUploaded = 0; let running = true; let speedSamples = []; const updateInterval = setInterval(() => { const elapsed = (performance.now() - tStart) / 1000; if (elapsed < 0.3) return; const instMbps = (totalUploaded * 8) / elapsed / 1_000_000; speedSamples.push(instMbps); if (speedSamples.length > 6) speedSamples.shift(); const sorted = [...speedSamples].sort((a, b) => a - b); const med = sorted[Math.floor(sorted.length / 2)]; setUpload(med); }, 200); const stopTimer = setTimeout(() => { running = false; }, DURATION_MS); const streams = Array.from({ length: NUM_STREAMS }, async () => { while (running) { try { const res = await fetch(uploadUrl, { method: "POST", body: data, cache: "no-store", headers: { "Content-Type": "application/octet-stream" }, }); if (!res.ok && res.status !== 204) break; totalUploaded += CHUNK_BYTES; } catch (e) { break; } } }); await Promise.all(streams); clearInterval(updateInterval); clearTimeout(stopTimer); const elapsedTotal = (performance.now() - tStart) / 1000; if (totalUploaded === 0 || elapsedTotal === 0) { setFinalUp(null); } else { const overall = (totalUploaded * 8) / elapsedTotal / 1_000_000; const sorted = [...speedSamples].sort((a, b) => a - b); const med = speedSamples.length > 2 ? sorted[Math.floor(sorted.length / 2)] : overall; const finalMbps = med * 0.7 + overall * 0.3; setUpload(finalMbps); setFinalUp(finalMbps); } } catch (e) { setFinalUp(null); } setPhase("done"); } const topPlan = useMemo(() => { if (!plans || plans.length === 0) return null; const internet = plans.filter(p => p.family === "internet_hogar" && p.speed_down_mbps); if (internet.length === 0) return null; return internet.reduce((a, b) => (a.speed_down_mbps > b.speed_down_mbps ? a : b)); }, [plans]); const isRunning = ["warmup", "ping", "download", "upload"].includes(phase); const verdictDown = speedVerdict(finalDown); const currentMbps = phase === "upload" ? upload : download; const angle = mbpsToAngle(currentMbps); return (
); } function ProgressDot({ label, active, done }) { const color = done ? "var(--brand-coral)" : active ? "var(--brand)" : "rgba(255,255,255,0.25)"; return ( {label} ); } function ResultCard({ icon, label, value, unit, tone }) { const isPrimary = tone === "primary"; return (
{icon} {label}
{value}{unit}
); } // ============================================================ // FILTER BAR — chips de familias + búsqueda + orden // ============================================================ function PlanFilterBar({ families, active, onChange, counts, filters, setFilters, priceMax, openCount = 0, totalSections = 0, onExpandAll, onCollapseAll }) { const trackRef = useRef(null); const onKeyDown = (e, idx, allKeys) => { if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return; e.preventDefault(); const dir = e.key === "ArrowLeft" ? -1 : 1; const next = (idx + dir + allKeys.length) % allKeys.length; const nextKey = allKeys[next]; onChange(nextKey); trackRef.current?.querySelector(`[data-tab-key="${nextKey}"]`)?.focus(); }; const allKeys = families; const hasActiveFilter = !!filters.q || filters.priceMax < priceMax || filters.sort !== "popular"; return (
{/* Family chips */}
{families.map((f, i) => { const meta = FAMILY_META[f] || { title: f }; return ( onChange(f)} onKeyDown={(e) => onKeyDown(e, i, allKeys)} dataKey={f} label={meta.title} icon={meta.icon} count={counts[f] || 0} featured={meta.featured} /> ); })}
{/* Filters row — search + sort + price + reset */}
{/* Search */}
setFilters((s) => ({ ...s, q: e.target.value }))} /> {filters.q && ( )}
{/* Sort */} {/* Expand / collapse all */} {totalSections > 1 && ( openCount === totalSections ? ( ) : ( ) )} {/* Reset */} {hasActiveFilter && ( )}
); } function Chip({ isActive, onClick, onKeyDown, dataKey, label, icon, count, featured }) { return ( ); } function FilterStyles() { return ( ); } // ============================================================ // APP // ============================================================ function App() { const [items, setItems] = useState([]); const [status, setStatus] = useState("loading"); const [filters, setFilters] = useState({ q: "", priceMax: 99999, sort: "popular" }); const [expanded, setExpanded] = useState({}); // family -> bool (override defaults) const [activeFamily, setActiveFamily] = useState(null); // tab nav: which is the focus // Filtro del catálogo (estilo equipos): familia + orden + precio const [selFamilies, setSelFamilies] = useState(() => new Set()); const [catSort, setCatSort] = useState("recomendado"); const [catMin, setCatMin] = useState(""); const [catMax, setCatMax] = useState(""); const [showCatFilters, setShowCatFilters] = useState(false); useEffect(() => { let cancelled = false; fetch(window.balUrl("admin/api/plans.php?limit=200")) .then((r) => r.ok ? r.json() : Promise.reject("HTTP " + r.status)) .then((d) => { if (cancelled) return; setItems(d.items || []); setStatus(d.items && d.items.length ? "ok" : "empty"); }) .catch(() => { if (!cancelled) setStatus("error"); }); return () => { cancelled = true; }; }, []); // Filtra cobre + aplica búsqueda y rango de precio const cleanItems = useMemo(() => { return (items || []).filter((p) => !isCobrePlan(p)); }, [items]); // 3 planes principales = los 3 mejores FIJOS del hogar (internet_hogar). // No mezcla móvil. Prioriza los marcados is_popular en el admin; completa // por precio y los muestra ordenados de entrada a premium. const topPlans = useMemo(() => { const fixed = cleanItems.filter((p) => p.family === "internet_hogar"); const pinned = fixed.filter((p) => p.is_popular); const rest = fixed.filter((p) => !p.is_popular).sort((a, b) => (a.price || 0) - (b.price || 0)); return [...pinned, ...rest].slice(0, 3).sort((a, b) => (a.price || 0) - (b.price || 0)); }, [cleanItems]); // Catálogo plano filtrado (sidebar familia + orden + precio) const catalogFiltered = useMemo(() => { let out = cleanItems.filter((p) => !selFamilies.size || selFamilies.has(p.family)); const mn = parseFloat(catMin), mx = parseFloat(catMax); if (!isNaN(mn)) out = out.filter((p) => (p.price || 0) >= mn); if (!isNaN(mx)) out = out.filter((p) => (p.price || 0) <= mx); switch (catSort) { case "precio-asc": out = out.slice().sort((a, b) => (a.price || 0) - (b.price || 0)); break; case "precio-desc": out = out.slice().sort((a, b) => (b.price || 0) - (a.price || 0)); break; case "velocidad": out = out.slice().sort((a, b) => (b.speed_down_mbps || 0) - (a.speed_down_mbps || 0)); break; default: out = out.slice().sort((a, b) => (!!b.is_popular - !!a.is_popular) || (a.price || 0) - (b.price || 0)); } return out; }, [cleanItems, selFamilies, catMin, catMax, catSort]); const catHasActive = selFamilies.size || catMin || catMax || catSort !== "recomendado"; const toggleFamily = (f) => setSelFamilies((prev) => { const n = new Set(prev); n.has(f) ? n.delete(f) : n.add(f); return n; }); const resetCat = () => { setSelFamilies(new Set()); setCatMin(""); setCatMax(""); setCatSort("recomendado"); }; const grouped = useMemo(() => { const g = {}; for (const p of cleanItems) (g[p.family] = g[p.family] || []).push(p); return g; }, [cleanItems]); const orderedFamilies = useMemo( () => Object.keys(FAMILY_META).filter((f) => grouped[f] && grouped[f].length), [grouped] ); // Precio máximo global para el slider const globalPriceMax = useMemo(() => { if (!cleanItems.length) return 99999; return Math.max(...cleanItems.map((p) => Math.round(p.price || 0))) + 100; }, [cleanItems]); // Init priceMax once data loads useEffect(() => { if (cleanItems.length && filters.priceMax === 99999) { setFilters((s) => ({ ...s, priceMax: globalPriceMax })); } }, [cleanItems.length, globalPriceMax]); // Apply filters per family const filteredByFamily = useMemo(() => { const out = {}; const q = filters.q.trim().toLowerCase(); const max = filters.priceMax; for (const f of orderedFamilies) { let list = grouped[f].slice(); if (q) { list = list.filter((p) => { const blob = `${p.name || ""} ${p.short_label || ""} ${(p.features || []).join(" ")} ${p.promo_label || ""}`.toLowerCase(); return blob.includes(q); }); } if (max < globalPriceMax) { list = list.filter((p) => Math.round(p.price || 0) <= max); } // Sort switch (filters.sort) { case "price-asc": list.sort((a, b) => (a.price || 0) - (b.price || 0)); break; case "price-desc": list.sort((a, b) => (b.price || 0) - (a.price || 0)); break; case "speed-desc": list.sort((a, b) => (b.speed_down_mbps || 0) - (a.speed_down_mbps || 0)); break; default: // popular first, then price asc list.sort((a, b) => { if (!!b.is_popular - !!a.is_popular !== 0) return !!b.is_popular - !!a.is_popular; return (a.price || 0) - (b.price || 0); }); } out[f] = list; } return out; }, [orderedFamilies, grouped, filters, globalPriceMax]); // Counts (after filtering) per family const counts = useMemo(() => { const c = {}; for (const f of orderedFamilies) c[f] = filteredByFamily[f].length; return c; }, [orderedFamilies, filteredByFamily]); // Total count (all families, after filtering) const totalFiltered = useMemo( () => Object.values(counts).reduce((s, n) => s + n, 0), [counts] ); // Total count before any filtering (for hero) const totalRaw = cleanItems.length; // Active family — focus marker for chip nav. ALL sections start CLOSED. // User must click chip o "Ver planes" para abrir. Hash deeplink abre solo esa. useEffect(() => { if (orderedFamilies.length === 0 || activeFamily) return; const hash = (location.hash || "").replace(/^#/, ""); const fromHash = orderedFamilies.includes(hash) ? hash : null; // activeFamily marca el chip seleccionado en teclado, no expande nada solo. setActiveFamily(fromHash || orderedFamilies[0]); if (fromHash) { setExpanded((e) => ({ ...e, [fromHash]: true })); // Scroll to deeplinked section after expand requestAnimationFrame(() => { const target = document.getElementById(fromHash); if (target) { const offset = 80 + 60; const top = target.getBoundingClientRect().top + window.scrollY - offset; window.scrollTo({ top, behavior: "smooth" }); } }); } }, [orderedFamilies, activeFamily]); const filterBarRef = useRef(null); const handleFamilyChange = (next) => { setActiveFamily(next); // Expand the chosen, collapse the others (focused view) const newExpanded = {}; newExpanded[next] = true; setExpanded(newExpanded); history.replaceState(null, "", `#${next}`); requestAnimationFrame(() => { // Scroll to that family's section after expansion const target = document.getElementById(next); if (target) { const offset = 80 + 60; // header + filter bar const top = target.getBoundingClientRect().top + window.scrollY - offset; window.scrollTo({ top, behavior: "smooth" }); } }); }; const toggleSection = (family) => { setExpanded((e) => ({ ...e, [family]: !e[family] })); }; const expandAll = () => { const next = {}; for (const f of orderedFamilies) next[f] = true; setExpanded(next); }; const collapseAll = () => { setExpanded({}); }; const openCount = orderedFamilies.filter((f) => expanded[f]).length; // Empty after filter? show a friendly message const emptyAfterFilter = status === "ok" && totalFiltered === 0 && totalRaw > 0; return ( {status === "ok" && topPlans.length > 0 && (
Los más elegidos

Internet fijo principal

Nuestros 3 planes de fibra al hogar más elegidos. ¿Buscas móvil u otra velocidad? Mira el catálogo completo abajo.

{topPlans.map((p) => )}
)} {status === "loading" && (
{[...Array(3)].map((_, i) => (
))}
)} {status === "empty" && (

Catálogo de planes vacío

Crea planes desde el admin · /admin/plans.php

)} {status === "error" && (

Error de carga

No pudimos cargar los planes. Verifica tu conexión.

)} {status === "ok" && (
)} {/* Speed test moved after plans — opt-in, less noise above the fold. */} {status === "ok" && } ); } window.PAGES = Object.assign({}, window.PAGES, { planes: App }); if (!window.__BAL_ROOT) window.__BAL_ROOT = ReactDOM.createRoot(document.getElementById("root")); window.__BAL_ROOT.render(React.createElement((window.PAGES && window.PAGES[window.PAGE]) || App));