// COBERTURA DE FIBRA ÓPTICA — landing + módulo de verificación (modal 3 pasos). // Consume la API pública de XP (CORS refleja nuestro origen). Si la API viene // vacía, cae a una copia local del CSV (cobertura-zonas.json). El lead se envía // a XP /lead; si falla, respaldo a nuestra propia /api/leads/landing. const { useState, useEffect, useRef, useMemo } = React; const XP = "https://xp.balderacomunicaciones.com/api/coverage/public"; const WA = "https://wa.me/18492209137"; const CLARO_RED = "#DA291C"; // Iconos SVG (sin emojis). currentColor para heredar el color del botón. const Ic = { bolt: (s = 15) => (), signal: (s = 18) => (), pin: (s = 16) => (), chat: (s = 16) => (), check: (s = 16) => (), checkCircle: (s = 18) => (), building: (s = 16) => (), nav: (s = 16) => (), calendar: (s = 15) => (), tag: (s = 17) => (), phone: (s = 17) => (), wa: (s = 18) => (), }; // ─── Capa de datos (API XP con fallback local) ────────────────────────────── let _zones = null; async function zones() { if (_zones) return _zones; try { _zones = await fetch(window.balUrl("/cobertura-zonas.json")).then((r) => r.json()); } catch { _zones = { provincias: [], ciudades: {}, sectores: {} }; } return _zones; } async function apiGet(path) { try { const r = await fetch(XP + path); if (!r.ok) return null; return await r.json(); } catch { return null; } } // ¿La API tiene data cargada? (se resuelve una vez) let _apiLive = null; async function apiLive() { if (_apiLive !== null) return _apiLive; const d = await apiGet("/provincias"); _apiLive = !!(d && d.items && d.items.length); return _apiLive; } async function getProvincias() { if (await apiLive()) return (await apiGet("/provincias")).items; return (await zones()).provincias; } async function getCiudades(prov) { if (await apiLive()) { const d = await apiGet("/ciudades?provincia=" + encodeURIComponent(prov)); return (d && d.items) || []; } return (await zones()).ciudades[prov] || []; } async function getSectores(prov, ciudad) { if (await apiLive()) { const d = await apiGet(`/sectores?provincia=${encodeURIComponent(prov)}&ciudad=${encodeURIComponent(ciudad)}`); return (d && d.items) || []; } return (await zones()).sectores[prov + "||" + ciudad] || []; } async function checkCoverage(prov, ciudad, sector) { if (await apiLive()) { const d = await apiGet(`/check?provincia=${encodeURIComponent(prov)}&ciudad=${encodeURIComponent(ciudad)}§or=${encodeURIComponent(sector)}`); if (d) return d; } const list = (await zones()).sectores[prov + "||" + ciudad] || []; const hit = list.find((s) => s.sector === sector); return hit ? { covered: true, zone: { provincia: prov, ciudad, sector, tipoCobertura: hit.tipoCobertura } } : { covered: false, zone: null }; } async function postLead(body) { // Proxy propio (servidor-a-servidor): reenvía a XP + guarda en nuestro CRM. // Es del mismo origen, así que no hay problema de CORS. try { const r = await fetch(window.balUrl("/api/cobertura/lead"), { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body), }); const d = await r.json().catch(() => ({})); if (r.ok && d.ok) return { ok: true, leadId: d.leadId }; return { ok: false, error: d.error || ("HTTP " + r.status) }; } catch (e) { return { ok: false, error: e.message }; } } // ─── Componentes pequeños ──────────────────────────────────────────────────── // Logo oficial de Claro (SVG en /assets). Imagen self-contained → CSP-safe. function ClaroMark({ size = 22 }) { return ( Claro ); } const Spinner = ({ light }) => ( ); // ─── Mapa de RD (silueta SVG self-contained — no la bloquea ningún filtro) ─── const DR_VIEW = "0 0 400 273"; const DR_BB = { minx: -72.00827, maxx: -68.31436, miny: 17.46775, maxy: 19.94108, W: 400, pad: 8 }; const DR_SX = (DR_BB.W - 2 * DR_BB.pad) / (DR_BB.maxx - DR_BB.minx); const drX = (lon) => DR_BB.pad + (lon - DR_BB.minx) * DR_SX; const drY = (lat) => DR_BB.pad + (DR_BB.maxy - lat) * DR_SX; const DR_PATH = "M114.9 8.0 L 102.9 14.0 L 89.1 17.1 L 76.9 16.8 L 61.8 10.9 L 52.9 10.5 L 46.7 12.4 L 42.6 13.7 L 41.0 17.5 L 33.9 21.6 L 32.6 28.0 L 36.5 31.1 L 33.8 33.2 L 33.7 33.8 L 34.3 33.9 L 33.8 34.3 L 34.4 34.6 L 34.2 34.9 L 34.2 35.3 L 35.3 36.3 L 35.9 36.8 L 35.3 40.0 L 37.3 46.7 L 38.8 50.5 L 41.3 52.6 L 41.4 61.4 L 40.1 68.4 L 37.2 67.9 L 31.2 71.4 L 33.6 75.4 L 35.9 77.0 L 39.1 78.8 L 43.3 81.4 L 47.6 83.6 L 46.4 84.9 L 45.8 87.4 L 45.6 88.7 L 45.9 89.8 L 46.2 90.6 L 45.6 91.8 L 44.8 93.8 L 43.1 93.7 L 41.9 93.7 L 40.3 94.5 L 40.5 96.7 L 39.8 98.0 L 38.0 99.1 L 37.6 100.3 L 35.0 100.9 L 33.3 103.1 L 31.5 104.2 L 31.5 104.7 L 30.5 105.8 L 29.9 106.4 L 29.1 106.0 L 26.6 105.4 L 25.3 105.9 L 24.3 107.2 L 23.1 108.1 L 22.6 108.5 L 21.4 110.3 L 21.5 111.9 L 23.4 111.3 L 23.4 109.6 L 25.1 110.4 L 25.8 108.9 L 27.3 109.2 L 28.2 109.4 L 29.4 110.6 L 30.6 110.2 L 32.9 115.4 L 34.1 115.9 L 35.0 116.6 L 37.2 118.6 L 37.8 126.2 L 32.6 135.9 L 30.8 138.2 L 28.9 138.5 L 28.7 140.9 L 24.6 143.9 L 21.3 144.4 L 16.9 143.7 L 11.5 142.2 L 8.8 145.6 L 12.5 147.0 L 21.4 157.4 L 18.8 162.2 L 29.3 169.0 L 40.2 174.2 L 34.1 186.1 L 33.0 186.9 L 32.4 188.8 L 31.7 189.6 L 31.5 192.1 L 33.2 192.6 L 33.3 193.2 L 33.7 194.0 L 34.1 194.5 L 35.1 194.3 L 35.0 195.3 L 35.4 195.6 L 35.4 196.8 L 35.1 198.0 L 35.4 199.5 L 35.8 200.5 L 36.4 201.6 L 35.8 202.9 L 35.4 204.4 L 34.1 206.1 L 39.8 212.0 L 41.5 220.8 L 38.4 233.1 L 56.1 237.4 L 69.2 251.6 L 81.4 232.6 L 105.3 203.6 L 104.6 182.6 L 115.3 185.5 L 136.5 176.3 L 153.7 169.5 L 155.6 183.8 L 163.9 191.5 L 201.6 186.3 L 235.2 163.6 L 257.1 170.9 L 268.8 169.5 L 297.7 164.9 L 316.9 170.4 L 321.8 175.6 L 323.3 169.3 L 336.1 174.1 L 343.2 187.4 L 344.1 195.8 L 357.5 197.5 L 366.7 198.6 L 360.5 191.4 L 359.9 181.1 L 362.0 171.8 L 375.7 175.0 L 383.2 163.2 L 391.3 150.1 L 387.4 141.2 L 367.9 127.4 L 341.2 106.3 L 332.5 103.8 L 323.3 101.8 L 318.2 105.9 L 309.9 103.0 L 303.5 101.2 L 299.3 101.5 L 291.2 101.1 L 282.6 98.6 L 278.0 94.2 L 269.1 95.6 L 256.9 96.2 L 255.6 90.7 L 258.0 83.8 L 270.2 85.5 L 279.4 86.6 L 289.2 87.0 L 298.8 86.6 L 304.3 79.9 L 302.1 73.6 L 296.5 73.5 L 297.0 67.1 L 291.5 70.1 L 283.3 73.5 L 274.0 70.9 L 260.4 72.0 L 252.7 74.6 L 242.5 74.6 L 233.6 67.0 L 230.8 58.6 L 228.0 48.8 L 227.2 38.1 L 213.5 34.3 L 205.8 39.5 L 190.0 38.5 L 177.1 27.3 L 168.9 23.4 L 158.4 25.3 L 146.8 22.5 L 133.5 13.4 L 128.7 10.3 L 117.5 10.3 L 114.9 8.0 Z M58.1 248.7 L 56.5 250.3 L 54.4 254.8 L 54.4 257.4 L 57.8 258.4 L 63.0 257.0 L 65.2 252.5 L 63.2 252.0 L 61.9 250.5 L 58.1 248.7 Z M46.3 262.5 L 45.7 263.1 L 45.1 263.9 L 45.4 264.9 L 46.4 265.1 L 46.9 264.6 L 46.6 263.7 L 46.3 262.5 Z"; // Carga Leaflet (JS + CSS) bajo demanda desde unpkg (permitido por la CSP). Una sola vez. let _leafletPromise = null; function loadLeaflet() { if (typeof window !== "undefined" && window.L) return Promise.resolve(window.L); if (_leafletPromise) return _leafletPromise; _leafletPromise = new Promise((resolve, reject) => { const css = document.createElement("link"); css.rel = "stylesheet"; css.href = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"; document.head.appendChild(css); const s = document.createElement("script"); s.src = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"; s.async = true; s.onload = () => resolve(window.L); s.onerror = reject; document.head.appendChild(s); }); return _leafletPromise; } const DR_CENTER = { lat: 18.735, lng: -70.162 }; // centro aprox. de RD (vista inicial) // Zonas con cobertura (centroides precomputados). Se cargan una sola vez. let _zonesPromise = null; function loadCoverageZones() { if (_zonesPromise) return _zonesPromise; _zonesPromise = fetch("/cobertura-geo.json").then((r) => (r.ok ? r.json() : [])).catch(() => []); return _zonesPromise; } // Mapa interactivo (Leaflet + tiles OSM), SIEMPRE visible. Sin GPS arranca con vista // de RD y un pin que el usuario puede tocar/arrastrar a su zona; al soltarlo o tocar // el mapa, re-geocodifica. Si Leaflet falla → silueta SVG de RD. function LocationMap({ coords, onPick }) { const elRef = useRef(null); const mapRef = useRef(null); const markerRef = useRef(null); const [failed, setFailed] = useState(false); useEffect(() => { let cancelled = false; loadLeaflet().then((L) => { if (cancelled || !elRef.current) return; if (!mapRef.current) { const start = coords || DR_CENTER; const map = L.map(elRef.current, { zoomControl: true, scrollWheelZoom: false, attributionControl: true }) .setView([start.lat, start.lng], coords ? 16 : 8); L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 19, attribution: "© OpenStreetMap", }).addTo(map); // Zonas con cobertura — círculos verdes translúcidos. loadCoverageZones().then((zones) => { if (cancelled || !mapRef.current || !Array.isArray(zones)) return; const layer = L.layerGroup(); zones.forEach((z) => { if (!Number.isFinite(z.lat) || !Number.isFinite(z.lng)) return; const radius = Math.min(6000, Math.max(1400, 1000 + Math.sqrt(z.n || 1) * 480)); L.circle([z.lat, z.lng], { radius, color: "#16a34a", weight: 1, opacity: 0.45, fillColor: "#22c55e", fillOpacity: 0.14, interactive: true, }).bindTooltip(`Cobertura disponible · ${z.ciudad}, ${z.provincia}`, { sticky: true, direction: "top" }).addTo(layer); }); layer.addTo(mapRef.current); }); const icon = L.divIcon({ className: "cob-pin", html: "", iconSize: [26, 26], iconAnchor: [13, 13] }); const marker = L.marker([start.lat, start.lng], { draggable: true, icon, keyboard: true, opacity: coords ? 1 : 0.85, title: "Arrástrame a tu ubicación" }).addTo(map); marker.on("dragend", () => { const p = marker.getLatLng(); marker.setOpacity(1); if (onPick) onPick(p.lat, p.lng); }); map.on("click", (e) => { marker.setLatLng(e.latlng); marker.setOpacity(1); if (onPick) onPick(e.latlng.lat, e.latlng.lng); }); mapRef.current = map; markerRef.current = marker; // invalidateSize: el contenedor recién es visible dentro del modal. setTimeout(() => map.invalidateSize(), 60); setTimeout(() => map.invalidateSize(), 320); } else if (coords) { mapRef.current.setView([coords.lat, coords.lng], 16); markerRef.current.setLatLng([coords.lat, coords.lng]); markerRef.current.setOpacity(1); } }).catch(() => setFailed(true)); return () => { cancelled = true; }; }, [coords && coords.lat, coords && coords.lng]); // Limpia el mapa al desmontar (evita fugas al cerrar el modal). useEffect(() => () => { if (mapRef.current) { mapRef.current.remove(); mapRef.current = null; } }, []); if (failed) return ; return
; } function RDMap({ coords }) { const inDR = coords && coords.lng >= DR_BB.minx - 0.3 && coords.lng <= DR_BB.maxx + 0.3 && coords.lat >= DR_BB.miny - 0.3 && coords.lat <= DR_BB.maxy + 0.3; const mx = inDR ? drX(coords.lng) : drX(-69.93); const my = inDR ? drY(coords.lat) : drY(18.48); return ( ); } // ─── Modal de verificación ─────────────────────────────────────────────────── function CoverageModal({ onClose, initialPlan = "" }) { // Demo: ?demo=gracias abre directo el paso 3 con datos de ejemplo (para revisar el diseño). const demo = typeof location !== "undefined" && /[?&]demo=gracias/.test(location.search); const [step, setStep] = useState(demo ? 3 : 1); const [planMbps, setPlanMbps] = useState(initialPlan || ""); // plan seleccionado ("" = sin plan) const [provincias, setProvincias] = useState([]); const [ciudades, setCiudades] = useState([]); const [sectores, setSectores] = useState([]); const [prov, setProv] = useState(demo ? "Santo Domingo" : ""); const [ciudad, setCiudad] = useState(demo ? "Santo Domingo Este" : ""); const [sector, setSector] = useState(demo ? "Alma Rosa" : ""); const [loading, setLoading] = useState(""); // "" | "prov" | "ciudad" | "sector" | "check" | "lead" | "geo" const [result, setResult] = useState(null); // {covered, zone} const [form, setForm] = useState({ nombre: "", cedula: "", telefono: "" }); const [err, setErr] = useState(""); const [showManual, setShowManual] = useState(false); // dirección detallada (no encuentra su zona) const [manualAddr, setManualAddr] = useState(""); const [geoCoords, setGeoCoords] = useState(null); // {lat,lng} del pin const [geoPlace, setGeoPlace] = useState(""); // nombre exacto del lugar useEffect(() => { const onKey = (e) => { if (e.key === "Escape") onClose(); }; document.addEventListener("keydown", onKey); // Bloqueo robusto del fondo (iOS/Android): fija el body y restaura el scroll al cerrar. const scrollY = window.scrollY || window.pageYOffset || 0; const body = document.body; const prev = { position: body.style.position, top: body.style.top, width: body.style.width, overflow: body.style.overflow }; body.style.position = "fixed"; body.style.top = `-${scrollY}px`; body.style.width = "100%"; body.style.overflow = "hidden"; return () => { document.removeEventListener("keydown", onKey); body.style.position = prev.position; body.style.top = prev.top; body.style.width = prev.width; body.style.overflow = prev.overflow; window.scrollTo(0, scrollY); }; }, [onClose]); useEffect(() => { setLoading("prov"); getProvincias().then((items) => { setProvincias(items || []); setLoading(""); }); }, []); async function onProv(v) { setProv(v); setCiudad(""); setSector(""); setCiudades([]); setSectores([]); setResult(null); if (!v) return; setLoading("ciudad"); setCiudades(await getCiudades(v)); setLoading(""); } async function onCiudad(v) { setCiudad(v); setSector(""); setSectores([]); setResult(null); if (!v) return; setLoading("sector"); setSectores(await getSectores(prov, v)); setLoading(""); } async function onSector(v) { setSector(v); setResult(null); if (!v) return; setLoading("check"); setResult(await checkCoverage(prov, ciudad, v)); setLoading(""); } // Resuelve provincia/ciudad/sector desde coords (GPS o pin arrastrado). async function resolveLocation(latitude, longitude) { setErr(""); setLoading("geo"); setGeoCoords({ lat: latitude, lng: longitude }); const norm = (s) => String(s || "").toLowerCase().normalize("NFD") .replace(new RegExp("[\\u0300-\\u036f]", "g"), "").replace(/\b(provincia|distrito nacional|de|del|la|el)\b/g, "").replace(/\s+/g, " ").trim(); try { const ctrl = new AbortController(); const to = setTimeout(() => ctrl.abort(), 8000); let guessProv = "", guessCity = "", guessSector = "", place = ""; // 1) Mapbox (más preciso) vía nuestro proxy. try { const g = await fetch(`/api/geo/reverse?lat=${latitude}&lng=${longitude}`, { signal: ctrl.signal }).then((x) => x.json()); if (g && g.ok) { guessProv = g.provincia || ""; guessCity = g.ciudad || ""; guessSector = g.sector || ""; place = g.place_name || ""; } } catch { /* sigue al respaldo */ } // 2) Respaldo BigDataCloud si Mapbox no devolvió nada (sin token o falló). if (!guessProv && !guessCity) { try { const r = await fetch(`https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${latitude}&longitude=${longitude}&localityLanguage=es`, { signal: ctrl.signal }).then((x) => x.json()); guessProv = r.principalSubdivision || ""; guessCity = r.city || r.locality || ""; if (!place) place = [r.locality, r.city, r.principalSubdivision, r.countryName].filter(Boolean).join(", "); } catch { /* sin geocoding; el usuario elige manual */ } } clearTimeout(to); // Garantiza que el campo "Ubicación detectada" siempre quede con algo útil. if (!place) place = [guessSector, guessCity, guessProv].filter(Boolean).join(", "); setGeoPlace(place); const list = provincias.length ? provincias : await getProvincias(); const match = list.find((p) => { const np = norm(p.provincia), ng = norm(guessProv); return np && ng && (np.includes(ng) || ng.includes(np)); }); if (match) { await onProv(match.provincia); if (guessCity) { const cs = await getCiudades(match.provincia); const cm = cs.find((c) => { const nc = norm(c), ng = norm(guessCity); return nc && ng && (nc.includes(ng) || ng.includes(nc)); }); if (cm) { setCiudad(cm); const ss = await getSectores(match.provincia, cm); setSectores(ss); // intenta acertar el sector también if (guessSector) { const sm = ss.find((s) => { const ns = norm(s.sector), ng = norm(guessSector); return ns && ng && (ns.includes(ng) || ng.includes(ns)); }); if (sm) { setSector(sm.sector); setResult(await checkCoverage(match.provincia, cm, sm.sector)); } } } } setErr("Te ubicamos — arrastra el pin para afinar y continúa abajo."); } else { setErr(place ? "Ubicación marcada — continúa abajo." : "Marca tu ubicación en el mapa o ajusta tu dirección arriba."); } } catch { setErr("Ubicación marcada — continúa abajo."); } finally { setLoading(""); } } function useMyLocation() { if (!navigator.geolocation) { setErr("Tu navegador no permite ubicación."); return; } setErr(""); setLoading("geo"); navigator.geolocation.getCurrentPosition( (pos) => resolveLocation(pos.coords.latitude, pos.coords.longitude), (geoErr) => { setLoading(""); setErr(geoErr && geoErr.code === 1 ? "Permiso de ubicación denegado. Escribe tu dirección arriba." : "No pudimos obtener tu ubicación. Escribe tu dirección arriba."); }, { timeout: 12000, enableHighAccuracy: true, maximumAge: 60000 } ); } // Busca la dirección escrita y la ubica en el mapa (búsqueda más detallada). async function searchManual() { const q = manualAddr.trim(); if (!q) return; setErr(""); setLoading("geo"); try { const g = await fetch(`/api/geo/reverse?q=${encodeURIComponent(q)}`).then((x) => x.json()); if (g && g.ok && Number.isFinite(g.lat) && Number.isFinite(g.lng)) { await resolveLocation(g.lat, g.lng); // mueve el pin + verifica cobertura } else { setErr("No encontramos esa dirección exacta. Mueve el pin en el mapa para marcarla."); setLoading(""); } } catch { setErr("No pudimos buscar. Mueve el pin en el mapa para marcar tu ubicación."); setLoading(""); } } function goToData() { setErr(""); setStep(2); } async function submitLead() { if (!form.nombre.trim()) { setErr("El nombre es obligatorio."); return; } if (!/^\d{10}$/.test(form.telefono)) { setErr("El teléfono debe tener 10 dígitos (ej. 8095550000)."); return; } setErr(""); setLoading("lead"); const planObj = COB_PLANS.find((p) => String(p.mbps) === String(planMbps)); const body = { nombre: form.nombre.trim(), telefono: form.telefono.trim(), cedula: form.cedula.trim() || undefined, provincia: prov, ciudad, sector, direccion: manualAddr.trim() || geoPlace || undefined, ubicacion: geoPlace || undefined, lat: geoCoords ? geoCoords.lat : undefined, lng: geoCoords ? geoCoords.lng : undefined, tipoCobertura: result?.zone?.tipoCobertura, covered: !!result?.covered, // Plan seleccionado → define la plantilla del gestor de leads. plan: planObj ? `Claro Hogar ${speedLabel(planObj)} Mbps` : undefined, plan_precio: planObj ? planObj.price / 2 : undefined, plan_mbps: planObj ? planObj.mbps : undefined, template: planObj ? "cobertura_solicitud" : "cobertura_sin_plan", }; // event_id compartido entre pixel (cliente) y Conversions API (servidor) → dedup. const eventId = (window.crypto && window.crypto.randomUUID) ? window.crypto.randomUUID() : "lead-" + Date.now() + "-" + Math.floor(Math.random() * 1e9); const cookie = (k) => { const m = document.cookie.match(new RegExp("(?:^|; )" + k + "=([^;]*)")); return m ? decodeURIComponent(m[1]) : undefined; }; body.event_id = eventId; body.fbp = cookie("_fbp"); body.fbc = cookie("_fbc"); const res = await postLead(body); setLoading(""); if (res.ok) { // Evento de conversión para Meta Pixel (lo que la campaña optimiza: fb_pixel_lead). try { if (window.fbq) window.fbq("track", "Lead", { content_name: "Cobertura fibra óptica", content_category: [prov, ciudad].filter(Boolean).join(" · ") || "RD", value: planObj ? planObj.price / 2 : 0, currency: "DOP", }, { eventID: eventId }); if (window.gtag) window.gtag("event", "generate_lead", { event_category: "cobertura" }); } catch (e) { /* tracking no debe romper el flujo */ } setStep(3); } else setErr(res.error || "No se pudo enviar. Intenta de nuevo."); } const covered = result?.covered; const tipo = result?.zone?.tipoCobertura; const tipoLabel = tipo === "total" ? "Cobertura total" : tipo === "parcial" ? "Cobertura parcial" : tipo === "calles_parciales" ? "Cobertura en calles seleccionadas" : ""; const selStyle = { width: "100%", padding: "13px 14px", borderRadius: 12, border: "1.5px solid var(--line)", background: "#fff", color: "var(--ink)", fontSize: 14.5, fontFamily: "inherit", appearance: "auto" }; const inputStyle = { ...selStyle }; return (
e.stopPropagation()} role="dialog" aria-modal="true" aria-label="Verificar cobertura de fibra">
); } // ─── Sección: planes simétricos de fibra (Internet Fijo + Bono de voz) ──────── // Oferta portabilidad: 50% de descuento en la renta por 12 meses. // mbps = bajada (también es la clave/valor del plan); up = subida. // Simétricos: subida = bajada. Se muestra "bajada/subida" para no confundir // con fibra normal (misma bajada, distinta subida). const COB_PLANS = [ { mbps: 1000, up: 1000, price: 5495, scope: "Distrito Nacional y Santiago" }, { mbps: 500, up: 500, price: 4495, scope: "Distrito Nacional y Santiago" }, { mbps: 400, up: 400, price: 3595, scope: "Distrito Nacional y Santiago" }, { mbps: 300, up: 300, price: 3095, scope: "Distrito Nacional y Santiago" }, { mbps: 200, up: 200, price: 2295, scope: "a nivel nacional" }, { mbps: 150, up: 150, price: 1995, scope: "a nivel nacional" }, ]; const fmtRD = (n) => n.toLocaleString("es-DO", { minimumFractionDigits: n % 1 ? 2 : 0, maximumFractionDigits: 2 }); const speedLabel = (p) => `${p.mbps}/${p.up || p.mbps}`; // ej. "1000/1000" function PlanesCobertura({ onVerify }) { const top = COB_PLANS[0].price; // el más caro → destacado // SEO: datos estructurados de las ofertas (precio con descuento). const ld = { "@context": "https://schema.org", "@type": "ItemList", itemListElement: COB_PLANS.map((p, i) => ({ "@type": "Offer", position: i + 1, name: `Internet Fijo ${speedLabel(p)} Mbps simétrico + Bono de voz`, priceCurrency: "DOP", price: (p.price / 2).toFixed(2), description: `${speedLabel(p)} Mbps (bajada/subida). 50% de descuento por portabilidad durante 12 meses. Disponible ${p.scope}.`, })), }; return (
Planes de fibra simétrica

Internet Fijo + Bono de voz

Subida y bajada iguales. 50% de descuento por portabilidad durante 12 meses.

{COB_PLANS.map((p) => { const featured = p.price === top; const promo = p.price / 2; return (
{featured && ★ Más rápido}
{speedLabel(p)}Mbps
{Ic.signal(13)} Subida y bajada iguales
Internet Fijo + Bono de voz
{Ic.pin(12)} Disponible {p.scope}
{Ic.phone(15)} Bono de voz 100 minutos
Regular RD${fmtRD(p.price)}
RD${fmtRD(promo)}/mes
primeros 12 meses con portabilidad · impuestos incluidos
🔥 50% OFF · 12 meses
); })}