/* global React */ // ===================================================================== // SHARED — real navigation chrome used by every page. // SiteNav links between actual .html files (no SPA, no design canvas). // SitePageHero is the default editorial header for interior pages. // ===================================================================== // ===================================================================== // AMBROSIO VOICE — endpoint público de callback (Ambrosio Voice service). // // Esta URL apunta al tunnel de Cloudflare Quick Tunnel del servicio // ambrosio-voice (Ubuntu 192.168.0.165 → puerto interno + cloudflared). // La URL CAMBIA cuando se reinicia el tunnel — actualizar aquí cuando // pase. Solución definitiva: Named Tunnel `ambrosio.comfortek.es`. // // Spec completa: AMBROSIO_WEB_CALLBACK_INTEGRATION.md // ===================================================================== const AMBROSIO_CALLBACK_URL = 'https://hamburg-nirvana-spring-immigration.trycloudflare.com/web/callback-request'; const NAV_ITEMS = [ { href: 'index.html', label: 'Home', key: 'home' }, { href: 'servicios.html', label: 'Servicios', key: 'servicios' }, { href: 'ia.html', label: 'IA', key: 'ia' }, { href: 'proyectos.html', label: 'Proyectos', key: 'proyectos' }, { href: 'tecnologias.html', label: 'Tecnologías', key: 'tecnologias' }, { href: 'proceso.html', label: 'Proceso', key: 'proceso' }, { href: 'nosotros.html', label: 'Nosotros', key: 'nosotros' }, { href: 'contacto.html', label: 'Contacto', key: 'contacto' }, ]; // SiteNav — used at the top of every page. Highlights the current page. // Sticks to the top with a translucent dark blur once the user scrolls. const SiteNav = ({ active = 'home', overlay = false }) => { const [scrolled, setScrolled] = React.useState(false); const [open, setOpen] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); const bg = overlay && !scrolled ? 'transparent' : 'rgba(7,7,10,0.78)'; const border = (overlay && !scrolled) ? 'transparent' : 'var(--line)'; return (

+34 610 246 360

{/* Mobile menu */} {open && (

{NAV_ITEMS.slice(1).map(it => ( {it.label} ))}

)}

); }; // ===================================================================== // SitePageHero — interior-page header. Editorial, restrained. // Used by every page except home (home has its own custom Hero). // ===================================================================== const SitePageHero = ({ eyebrow, title, italic, kicker, children }) => (

{/* warm + cool blobs */}

{/* dot grid */}

{eyebrow}

{title} {italic && (<>{' '}{italic})}

{kicker && (

{kicker}

)} {children &&

{children}

}

); // ===================================================================== // SitePagePlaceholder — clearly-marked section reserved for real content. // Better than fake content. Used wherever we can't make up details. // ===================================================================== const Placeholder = ({ label, kind = 'foto', height = 280, note }) => (

[{kind.toUpperCase()} REAL PENDIENTE] {label} {note && {note}}

); // ===================================================================== // PageShell — wraps page content with Nav + Footer + MobileFloatingCTA // ===================================================================== // ===================================================================== // CallbackModal — lead capture (DEMO MODE). // // ⚠️ ESTE FORMULARIO ESTÁ EN MODO DEMO / MOCK — NO envía nada todavía. // No hay backend conectado. No hay Twilio. Ambrosio NO recibe la // solicitud todavía. La UI valida campos y muestra confirmación, // pero el lead se descarta al cerrar el modal. // // TODO PRODUCCIÓN: // Conectar este formulario con POST /api/leads/callback para guardar // el lead y avisar a Ambrosio. Hasta entonces, mantener copy en modo // demo y NO prometer una llamada real. // // Open from anywhere with: window.openCallbackModal() // (or dispatch the 'comfortek:callback' CustomEvent on window) // ===================================================================== const CallbackModal = () => { const [open, setOpen] = React.useState(false); // status: idle | submitting | success_live | success_pending const [status, setStatus] = React.useState('idle'); const [form, setForm] = React.useState({ name: '', phone: '', kind: 'vivienda', message: '' }); const [errors, setErrors] = React.useState({}); const [serverMsg, setServerMsg] = React.useState(null); // mensaje 4xx/429 mostrado bajo el form const [successMsg, setSuccessMsg] = React.useState(null); // mensaje del server al 200 const dialogRef = React.useRef(null); const firstFieldRef = React.useRef(null); // Wire up global open API React.useEffect(() => { const handler = () => setOpen(true); window.openCallbackModal = handler; window.addEventListener('comfortek:callback', handler); return () => window.removeEventListener('comfortek:callback', handler); }, []); // Esc to close, focus first field on open, lock body scroll React.useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === 'Escape') close(); }; document.addEventListener('keydown', onKey); document.body.style.overflow = 'hidden'; setTimeout(() => firstFieldRef.current?.focus(), 60); return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; }; }, [open]); const close = () => { setOpen(false); // Reset state after the close animation finishes setTimeout(() => { setStatus('idle'); setErrors({}); setServerMsg(null); setSuccessMsg(null); setForm({ name: '', phone: '', kind: 'vivienda', message: '' }); }, 250); }; const validate = () => { const e = {}; if (!form.name.trim()) e.name = 'Nombre obligatorio'; const digits = form.phone.replace(/\D/g, ''); if (!form.phone.trim()) e.phone = 'Teléfono obligatorio'; else if (digits.length < 9) e.phone = 'Mínimo 9 dígitos'; setErrors(e); return Object.keys(e).length === 0; }; // Normaliza teléfono a E.164 español (+34...) antes de enviarlo al backend. // Ambrosio Voice llama desde +1 EE.UU., el server requiere prefijo país. // El usuario puede escribir "612345678" o "612 345 678" o "+34 612..." y // siempre llega como +34XXXXXXXXX al endpoint. const normalizePhoneES = (raw) => { let p = (raw || '').replace(/[^\d+]/g, ''); if (!p) return ''; if (p.startsWith('+')) return p; // ya tiene país if (p.startsWith('0034')) return '+' + p.slice(2); // 0034XXXXXXXXX → +34 if (p.startsWith('34') && p.length === 11) return '+' + p; // 34XXXXXXXXX → +34 if (p.length === 9) return '+34' + p; // 9 dígitos → asumir España if (p.length >= 9) return '+34' + p; // fallback España (server validará) return p; }; const submit = async (ev) => { ev.preventDefault(); if (!validate()) return; setServerMsg(null); setStatus('submitting'); // ── BACKEND HOOK — Ambrosio Voice ──────────────────────────────── // Endpoint: AMBROSIO_CALLBACK_URL (cabecera del archivo). // Spec: AMBROSIO_WEB_CALLBACK_INTEGRATION.md // // Comportamiento: // 200 → success_live (mensaje del server) // 400/429 → mostrar data.message bajo el form (NO ir a éxito) // red/CORS/5xx → success_pending (degradación elegante; no // prometemos llamada, dirigimos a tel/WhatsApp) // // El frontend NO embeber credenciales. Endpoint público con // CORS restringido a comfortek.es y rate limit por IP. // ──────────────────────────────────────────────────────────────── const sourcePage = (typeof location !== 'undefined' && location.pathname) ? location.pathname.split('/').pop().replace('.html', '') || 'home' : 'unknown'; const payload = { name: form.name.trim(), phone: normalizePhoneES(form.phone), // +34 forzado si falta project_type: form.kind === 'vivienda' ? 'Vivienda' : 'Negocio', message: form.message.trim() || undefined, source: 'web · ' + sourcePage + ' · callback-modal', }; try { const res = await fetch(AMBROSIO_CALLBACK_URL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload), }); let data = {}; try { data = await res.json(); } catch (_) { /* ignora json parse */ } if (res.ok) { setSuccessMsg(data.message || 'Solicitud recibida. Comfortek te contactará lo antes posible.'); setStatus('success_live'); return; } // 400 / 429 → mostrar mensaje del server bajo el form if (res.status === 400 || res.status === 422 || res.status === 429) { setServerMsg(data.message || 'No se ha podido enviar. Revisa los datos y vuelve a intentarlo.'); setStatus('idle'); return; } // 5xx u otros → degradación elegante throw new Error('server-error-' + res.status); } catch (err) { // Red caída, CORS, tunnel reiniciado, 5xx, etc. setStatus('success_pending'); } }; if (!open) return null; const overlay = { position: 'fixed', inset: 0, zIndex: 200, background: 'rgba(4,4,8,0.72)', backdropFilter: 'blur(12px) saturate(140%)', WebkitBackdropFilter: 'blur(12px) saturate(140%)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20, animation: 'cbk-fade .22s ease', }; return (

{ if (e.target === e.currentTarget) close(); }}>