// Shared chrome — Navbar, Footer, Reveal, Icons, Marquee const { useState, useEffect, useRef } = React; // Path helper: // 1. Detect base path so the same code works in: // - Vercel production at root (`https://baldera.com.do/...`) // - XAMPP local in subfolder (`http://localhost/Baldera%20web/project/...`) // 2. Strip `.html` only in production: Vercel `cleanUrls` rewrites silently, // but Apache in XAMPP has no rewrite so `planes` (without .html) 404s. // // Rule for BAL_BASE: // - URL with extension (e.g. `/Baldera%20web/project/index.html`) // → base is the parent directory of the file. // - Pretty URL without extension (e.g. `/equipos/iphone-15`, `/planes`) // → app is mounted at root, base is `/`. window.BAL_BASE = (() => { const path = location.pathname; const lastSegment = path.replace(/\/$/, "").split("/").pop() || ""; const hasExtension = /\.[a-z0-9]+$/i.test(lastSegment); if (hasExtension) return path.replace(/[^/]+$/, ""); // -> "/Baldera%20web/project/" return "/"; // pretty URL → root })(); window.BAL_IS_LOCAL = ( location.hostname === "localhost" || location.hostname === "127.0.0.1" || location.hostname.endsWith(".local") ); window.balUrl = (p) => { if (!p) return p; if (/^(https?:|mailto:|tel:|#|\/|\.\.\/)/i.test(p)) return p; let clean = p.replace(/^\.\//, ""); // In production, strip .html so the URL bar stays clean (Vercel handles it). // In localhost XAMPP, keep .html — Apache has no rewrite for extensionless URLs. if (!window.BAL_IS_LOCAL) { clean = clean.replace(/^index\.html(?=$|[?#])/i, ""); clean = clean.replace(/\.html(?=$|[?#])/i, ""); } return window.BAL_BASE + clean; }; window.BAL_NAV = [ { label: "Planes", href: "internet-hogar.html" }, { label: "Cobertura", href: "cobertura-fibra-optica.html" }, { label: "Equipos", href: "equipos.html" }, { label: "Servicios", href: "servicios.html" }, { label: "Tiendas", href: "tiendas.html" }, { label: "Nosotros", href: "nosotros.html" }, { label: "Blog", href: "blog.html" }, { label: "Contacto", href: "contacto.html" }]; window.Icon = { Arrow: (p) => , ArrowUp: (p) => , Search: (p) => , Bag: (p) => , Check: (p) => , Plus: (p) => , Pin: (p) => , Phone: (p) => , Wifi: (p) => , TV: (p) => , Building: (p) => , Menu: (p) => , X: (p) => , WA: (p) => }; window.useReveal = function () { useEffect(() => { const io = new IntersectionObserver((entries) => { entries.forEach((e) => {if (e.isIntersecting) {e.target.classList.add("in");io.unobserve(e.target);}}); }, { threshold: 0.12, rootMargin: "0px 0px -6% 0px" }); const observe = (root) => { const els = (root || document).querySelectorAll ? (root || document).querySelectorAll(".reveal") : []; els.forEach((el) => { if (!el.classList.contains("in")) io.observe(el); }); }; observe(document); // Watch for async-rendered content (e.g. cards added after fetch) const mo = new MutationObserver((muts) => { for (const m of muts) { for (const node of m.addedNodes) { if (node.nodeType !== 1) continue; if (node.classList && node.classList.contains("reveal")) io.observe(node); observe(node); } } }); mo.observe(document.body, { childList: true, subtree: true }); // Safety net: any element still hidden after 1.5s gets revealed // (covers edge cases where IO doesn't fire — e.g. zero-height parents) const safety = setTimeout(() => { document.querySelectorAll(".reveal:not(.in)").forEach((el) => el.classList.add("in")); }, 1500); return () => { io.disconnect(); mo.disconnect(); clearTimeout(safety); }; }, []); }; window.Navbar = function Navbar({ active }) { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const onS = () => setScrolled(window.scrollY > 8); window.addEventListener("scroll", onS, { passive: true }); return () => window.removeEventListener("scroll", onS); }, []); useEffect(() => { if (open) { const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; const onKey = (e) => { if (e.key === "Escape") setOpen(false); }; window.addEventListener("keydown", onKey); return () => { document.body.style.overflow = prev; window.removeEventListener("keydown", onKey); }; } }, [open]); return ( <> {open && ( <>
setOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 98, background: "rgba(20,12,30,0.32)", backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)", animation: "balNavFade 220ms ease both", }} />
{window.BAL_NAV.map((it, i) => { const a = (active || "").toLowerCase(); const slug = it.href.replace(/\.html$/, "").toLowerCase(); const isActive = a !== "" && (a === it.label.toLowerCase() || a === slug); return ( setOpen(false)} style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-0.02em", padding: "14px 18px", borderRadius: 14, color: isActive ? "var(--brand)" : "var(--ink)", background: isActive ? "rgba(237,15,68,0.06)" : "transparent", display: "flex", alignItems: "center", justifyContent: "space-between", transition: "background 140ms", animation: `balNavItem 360ms cubic-bezier(0.32,0.72,0,1) both`, animationDelay: `${60 + i * 35}ms`, }} > {it.label} {isActive ? ( ); })}
setOpen(false)} className="btn btn-brand" style={{ height: 52, fontSize: 15, fontWeight: 600, justifyContent: "center", borderRadius: 14, animation: "balNavItem 360ms cubic-bezier(0.32,0.72,0,1) both", animationDelay: `${60 + window.BAL_NAV.length * 35}ms`, }} > Solicitar
setOpen(false)} style={{ flex: 1, height: 46, borderRadius: 12, border: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "center", gap: 8, fontSize: 13, fontWeight: 600, color: "var(--ink-2)", background: "var(--paper-2)", }} > Llamar setOpen(false)} style={{ flex: 1, height: 46, borderRadius: 12, border: "1px solid rgba(37,211,102,0.28)", background: "rgba(37,211,102,0.08)", display: "flex", alignItems: "center", justifyContent: "center", gap: 8, fontSize: 13, fontWeight: 600, color: "#1faa54", }} > WhatsApp
)} ); }; window.Footer = function Footer() { const cols = [ { h: "Planes", l: [["Internet Hogar", "internet-hogar.html"], ["Triple Play", "planes.html"], ["Móvil", "planes.html"]] }, { h: "Equipos", l: [["iPhone", "equipos.html"], ["Samsung", "equipos.html"], ["Accesorios", "equipos.html"], ["Módems", "equipos.html"]] }, { h: "Servicios", l: [["Activación", "servicios.html"], ["Portabilidad", "servicios.html"], ["Internet Hogar", "servicios.html"]] }, { h: "Baldera", l: [["Sobre nosotros", "nosotros.html"], ["Tiendas", "tiendas.html"], ["Blog", "blog.html"], ["Contacto", "contacto.html"], ["Únete a nuestro equipo", "unete.html"]] }]; return ( ); }; window.Marquee = function Marquee({ items, speed = 38, color = "var(--ink)" }) { return (
{[...items, ...items].map((it, i) => {it} )}
); }; /** * Reusable LeadForm modal. Open with window.openLeadForm({ kind, id, name, slug, price, extra, sourceTag }) * On submit: * 1. POST to /admin/api/lead_submit.php with full context * 2. On success, opens WhatsApp with a structured message * 3. Closes modal */ window.LeadFormState = (() => { const listeners = new Set(); let current = null; return { open(payload) { current = payload; listeners.forEach(fn => fn(current)); }, close() { current = null; listeners.forEach(fn => fn(null)); }, subscribe(fn) { listeners.add(fn); return () => listeners.delete(fn); }, get current() { return current; }, }; })(); window.openLeadForm = (payload) => window.LeadFormState.open(payload); window.LeadFormModal = function LeadFormModal() { const [ctx, setCtx] = useState(window.LeadFormState.current); const [form, setForm] = useState({ name: "", phone: "", email: "", message: "" }); const [status, setStatus] = useState("idle"); // idle | sending | sent | error const [error, setError] = useState(null); const [site, setSite] = useState(window.SITE || {}); useEffect(() => { const u1 = window.LeadFormState.subscribe((p) => { setCtx(p); if (p) { setForm({ name: "", phone: "", email: "", message: p.defaultMessage || "" }); setStatus("idle"); setError(null); } }); const u2 = () => setSite(window.SITE || {}); window.addEventListener("baldera-site-ready", u2); const onKey = (e) => { if (e.key === "Escape") window.LeadFormState.close(); }; window.addEventListener("keydown", onKey); return () => { u1(); window.removeEventListener("baldera-site-ready", u2); window.removeEventListener("keydown", onKey); }; }, []); if (!ctx) return null; const close = () => window.LeadFormState.close(); const isPlan = ctx.kind === "plan"; const submit = async (e) => { e.preventDefault(); setError(null); if (!form.name.trim()) { setError("Pon tu nombre."); return; } if (!form.phone.trim() && !form.email.trim()) { setError("Necesitamos teléfono o email."); return; } setStatus("sending"); const itemLine = ctx.name + (ctx.extra && Object.keys(ctx.extra).length ? ' — ' + Object.values(ctx.extra).filter(Boolean).join(' · ') : ''); const priceLine = ctx.price > 0 ? `RD$${Math.round(ctx.price).toLocaleString()}` : 'a consultar'; const composed = `[${isPlan ? 'Plan' : 'Equipo'}] ${itemLine} (${priceLine})${form.message.trim() ? ' — ' + form.message.trim() : ''}`; try { const r = await fetch(window.balUrl("admin/api/lead_submit.php"), { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: form.name, phone: form.phone, email: form.email, message: composed, source: ctx.sourceTag || (isPlan ? 'plan-form' : 'equipo-form'), page: location.pathname + location.search, item_kind: ctx.kind, item_id: ctx.id || 0, item_name: ctx.name, item_slug: ctx.slug, item_price: ctx.price || 0, item_meta: ctx.extra || null, _hp: form._hp || "", }), }); const d = await r.json(); if (!r.ok || !d.ok) throw new Error(d.error || "fail"); // Open WhatsApp with formatted message const phone = (site.whatsapp || '+18492209239').replace(/[^\d+]/g, ''); const lines = [ `*Solicitud nueva — ${isPlan ? 'Plan' : 'Equipo'}*`, '', `*${ctx.name}*`, ]; if (ctx.extra && Object.keys(ctx.extra).length) { for (const [k, v] of Object.entries(ctx.extra)) { if (v) lines.push(`${k}: ${v}`); } } if (ctx.price > 0) lines.push(`Precio: RD$${Math.round(ctx.price).toLocaleString()}${isPlan ? '/mes' : ''}`); lines.push(''); lines.push(`Cliente: ${form.name}`); if (form.phone) lines.push(`Tel: ${form.phone}`); if (form.email) lines.push(`Email: ${form.email}`); if (form.message.trim()) { lines.push(''); lines.push(`Nota: ${form.message.trim()}`); } lines.push(''); lines.push(`Lead #${d.id}`); const url = `https://wa.me/${phone.replace('+','')}?text=${encodeURIComponent(lines.join('\n'))}`; setStatus("sent"); // Small delay so user sees confirmation before tab opens setTimeout(() => window.open(url, '_blank', 'noopener'), 400); } catch (err) { setStatus("error"); setError(err.message); } }; return ( <>
{ctx.extra && Object.keys(ctx.extra).length > 0 && (
{Object.entries(ctx.extra).map(([k, v]) => v ? ( {k} {v} ) : null )} {ctx.price > 0 && ( RD${Math.round(ctx.price).toLocaleString()} {isPlan ? "/mes" : ""} )}
)} {status === "sent" ? (

¡Solicitud recibida!

Te conectamos con un asesor por WhatsApp para terminar la gestión. Abriendo chat…

) : (
{/* honeypot — bots fill this; humans don't see it */} setForm({ ...form, _hp: e.target.value })} style={{ position: "absolute", left: "-9999px", width: 1, height: 1, opacity: 0 }} /> setForm({ ...form, name: v })} /> setForm({ ...form, phone: v })} placeholder="+1 809..." /> setForm({ ...form, email: v })} />