/* global React */ // useViewport — when width prop isn't passed (real-page mode) fall back to // the live viewport. Sections only break to mobile under 720px. function useResponsive(widthProp) { const [vw, setVw] = React.useState(() => widthProp || (typeof window !== 'undefined' ? window.innerWidth : 1440)); React.useEffect(() => { if (widthProp) return; const onR = () => setVw(window.innerWidth); window.addEventListener('resize', onR); return () => window.removeEventListener('resize', onR); }, [widthProp]); return { width: vw, isMobile: vw < 720 }; } // ===================================================================== // SERVICES — editorial grid, hover reveals, mono index numbers // ===================================================================== const Services = ({ width: w }) => { const { width, isMobile } = useResponsive(w); const vivienda = [ { n: '01', title: 'Iluminación inteligente', desc: 'Escenas que se adaptan al momento del día. Control por voz, app o un solo botón. Hasta -40% de consumo eléctrico.', descShort: 'Escenas por momento del día. Hasta -40% de consumo.', tags: ['DALI','Loxone','Casambi'] }, { n: '02', title: 'Climatización y persianas', desc: 'Calor, frío y luz natural sincronizados por estancia. Curvas reales, consumo medido, persiana que reacciona al sol.', descShort: 'Clima y persianas sincronizados, consumo medido.', tags: ['Aerotermia','HVAC','Somfy'] }, { n: '03', title: 'Seguridad y videovigilancia', desc: 'Cámaras IP, cerraduras inteligentes, alarma grado 2/3 y detección de movimiento con alerta al móvil.', descShort: 'Cámaras IP, alarma grado 2/3 y avisos al móvil.', tags: ['Hikvision','Ajax','CCTV'] }, { n: '04', title: 'Audio multiroom y red', desc: 'Sonido sincronizado por estancias y WiFi profesional sin zonas muertas en toda la casa.', descShort: 'Audio sincronizado y WiFi sin zonas muertas.', tags: ['Sonos','UniFi','Mesh'] }, ]; const negocio = [ { n: '05', title: 'Domótica para hostelería y retail', desc: 'Encendido por horarios, escenas por turno, control remoto del local. Loxone integrado a tu PMS o caja.', descShort: 'Horarios, escenas por turno, control remoto del local.', tags: ['Loxone','Horarios','Multi-local'] }, { n: '06', title: 'Cámaras frigoríficas y sondas IoT', desc: 'Monitorización de temperatura 24/7 con alertas automáticas para garantizar la seguridad alimentaria.', descShort: 'Temperatura 24/7 con alertas automáticas.', tags: ['Sondas IoT','Alertas','HACCP'] }, { n: '07', title: 'Control de accesos profesional', desc: 'Lectores biométricos, intercomunicador IP y gestión de horarios para empleados, clientes y proveedores.', descShort: 'Biometría, intercom IP y horarios por persona.', tags: ['2N','Akuvox','Biometría'] }, { n: '08', title: 'Mantenimiento y SLA', desc: 'Soporte remoto en menos de una hora, revisiones programadas y SLA contractual para clientes activos.', descShort: 'Soporte remoto < 1 h y SLA contractual.', tags: ['SLA','Remoto','In situ'] }, ]; const ia = [ { n: '09', title: 'Agente comercial Ambrosio', desc: 'Capta llamadas, agenda visitas, hace presupuestos, manda mails y WhatsApps. Tu primer punto de contacto, 24/7. Conectado a Comfortek In.', descShort: 'Atiende, presupuesta y agenda 24/7. Conectado a Comfortek In.', tags: ['Voz','WhatsApp','Email','Calendario'] }, { n: '10', title: 'Control conversacional de la instalación', desc: 'Habla con tu casa o negocio en lenguaje natural. LLM local o cloud sobre Home Assistant / Loxone. "Modo cena", "deja la oficina lista para mañana".', descShort: 'Habla con tu casa: "modo cena", "oficina lista mañana".', tags: ['Ollama','Claude','Voice','MCP'] }, { n: '11', title: 'Automatización predictiva', desc: 'La instalación aprende patrones de ocupación, clima y energía. Ajusta antes de que pidas, avisa antes de que falle. Mantenimiento que se adelanta.', descShort: 'Aprende patrones y se adelanta a fallos y consumo.', tags: ['Predictivo','Energía','Mantenimiento'] }, { n: '12', title: 'Agentes a medida', desc: '¿Necesitas que la IA haga algo específico de tu negocio — reservas, facturación, atención post-venta? Diseñamos el agente con tu stack y tu lógica.', descShort: 'Agente IA hecho con tu stack y tu lógica.', tags: ['Custom','MCP','Integración'] }, ]; const Track = ({ label, color, items: list }) => (
{label}
{list.map(it => { const visibleDesc = isMobile && it.descShort ? it.descShort : it.desc; const visibleTags = isMobile ? it.tags.slice(0, 3) : it.tags; return (
{it.n}

{it.title}

{visibleDesc}

{visibleTags.map(t => ( {t} ))}
); })}
); const tabs = [ { key: 'vivienda', label: 'Vivienda', mobileLabel: 'Vivienda', color: '#ff6a1a', items: vivienda, fullLabel: 'Vivienda' }, { key: 'negocio', label: 'Negocio', mobileLabel: 'Negocio', color: '#19c2d6', items: negocio, fullLabel: 'Negocio · Hostelería · Retail' }, { key: 'ia', label: 'IA', mobileLabel: 'IA', color: '#7c5cff', items: ia, fullLabel: 'Capa IA & Agentes · Comfortek In' }, ]; const [activeKey, setActiveKey] = React.useState('vivienda'); const active = tabs.find(t => t.key === activeKey) || tabs[0]; return (
Tres mundos,
una sola integración.} isMobile={isMobile} subtitle="+50 proyectos en la Costa Brava entre vivienda, negocio y la nueva capa de agentes IA. Diseñamos cada uno con su propia lógica — no hay receta única."> {isMobile ? (
{/* Tabs Vivienda | Negocio | IA */}
{tabs.map(t => { const isActive = t.key === activeKey; return ( ); })}
) : (
)}
); }; // ===================================================================== // WHY COMFORTEK // ===================================================================== const Why = ({ width: w }) => { const { width, isMobile } = useResponsive(w); const reasons = [ { k: 'Integración real', d: 'No instalamos productos sueltos. Diseñamos sistemas que hablan entre sí en una sola lógica.' }, { k: 'Diseño técnico', d: 'Plano eléctrico, esquema de red, listado de cargas. Documentado antes de tirar el primer cable.' }, { k: 'Hardware abierto', d: 'Loxone, KNX, Home Assistant. Estándares que sobreviven al fabricante de la app de moda.' }, { k: 'Soporte como servicio', d: 'No te dejamos con el manual. Mantenimiento remoto, SLA y revisiones programadas.' }, ]; return (
La diferencia entre "tener domótica"
y que la domótica funcione.} isMobile={isMobile}>
{reasons.map((r, i) => (
0{i+1}

{r.k}

{r.d}

))}
{!isMobile && }
); }; const WhyVisual = () => (
{/* simulated technical diagram */} {/* floor plan */} {/* rooms labels */} SALÓN COCINA DORM 1 BAÑO PASILLO DORM 2 {/* nodes */} {[ [130,140],[290,140],[290,270],[290,380],[160,330],[70,330],[140,400] ].map(([x,y],i) => ( ))} {/* connecting lines */} {/* central node */} MINISERVER {/* corner badge */}
PLANO LÓGICO · CASA TIPO
v2.4 · 142 PUNTOS ● ACTIVO
); // ===================================================================== // PROJECTS // ===================================================================== const Projects = ({ width: w }) => { const { width, isMobile } = useResponsive(w); const list = [ { idx: '01', name: 'Casa de alto standing', loc: 'Lloret de Mar', type: 'Vivienda · Loxone', stack: ['Loxone','Iluminación','Clima','Persianas'], hue: 18, img: 'img/proyecto-lloret-standing.jpg', desc: 'Sistema domótico Loxone completo. Control de iluminación, clima y persianas con programación personalizada en vivienda de lujo frente al mar.' }, { idx: '02', name: 'Restaurant Sant Elm', loc: 'Costa Brava', type: 'Hostelería · HACCP', stack: ['Sondas IoT','Alertas','Cámaras frigoríficas'], hue: 200, img: 'img/proyecto-sant-elm.jpg', desc: 'Control y monitorización de temperatura en cámaras frigoríficas con alertas automáticas para garantizar la seguridad alimentaria.' }, { idx: '03', name: 'Casa frente al mar', loc: 'Calella de Palafrugell', type: 'Vivienda · Clima', stack: ['Climatización','Escenas','Control remoto'], hue: 14, img: 'img/proyecto-calella.jpg', desc: 'Automatización del sistema de climatización con control remoto y escenas que se ajustan a las condiciones exteriores.' }, ]; return (
Proyectos reales,
resultados reales.} isMobile={isMobile}>
{list.map((p,i) => (
{/* photo or simulated background */} {p.img ? {p.name} : <>
}
{p.idx} / 12 {p.type.toUpperCase()}
{p.loc.toUpperCase()}

{p.name}

{p.desc}

{p.stack.map(s => ( {s} ))}
))}
); }; // ===================================================================== // BRANDS — marquee/grid // ===================================================================== const Brands = ({ width: w }) => { const { width, isMobile } = useResponsive(w); const brands = ['LOXONE','KNX','HOME ASSISTANT','HIKVISION','SONOS','SOMFY','DAIKIN','AJAX','SHELLY','GIRA','DALI','ZIGBEE']; return (
Trabajamos con lo
que de verdad aguanta.} isMobile={isMobile} subtitle="Sistemas estándar, abiertos y con soporte a largo plazo. Nunca tecnología cerrada que mañana no exista.">
{brands.map((b,i) => (
8 ? '0.04em' : '0.08em', color: 'var(--text-1)', }}>{b}
))}
); }; // ===================================================================== // PROCESS // ===================================================================== const Process = ({ width: w }) => { const { width, isMobile } = useResponsive(w); const steps = [ { n: '01', t: 'Escuchamos', d: 'Cada proyecto empieza escuchando tus necesidades. Visita técnica gratuita y sin compromiso, en tu casa o negocio.' }, { n: '02', t: 'Diseñamos', d: 'Solución 100% personalizada. Plano lógico, marcas y presupuesto cerrado en una sola propuesta clara.' }, { n: '03', t: 'Instalamos', d: 'Sin obras complicadas. Equipo propio, coordinación con tu obra y te enseñamos a disfrutarla desde el primer día.' }, ]; return (
De la idea a tu hogar inteligente
en 3 pasos.} isMobile={isMobile}>
{steps.map((s,i) => (
STEP {s.n}

{s.t}

{s.d}

))}
); }; // ===================================================================== // TESTIMONIALS // ===================================================================== const Testimonials = ({ width: w }) => { const { width, isMobile } = useResponsive(w); const quotes = [ { q: 'Todo perfecto, un gran profesional, aclarando siempre dudas y con tecnología a la última. Lo recomiendo.', a: 'Irene Ramírez', r: 'Cliente · Lloret de Mar' }, { q: 'Soluciones prácticas de domótica, buen servicio y confiable. Una gran empresa.', a: 'Alejandro Espín García', r: 'Cliente · Costa Brava' }, { q: 'Persona de confianza y gran profesional. Amable y muy recomendable.', a: 'Roberto Carriqui', r: 'Cliente · Vivienda particular' }, ]; return (
+50 familias ya viven
en casas inteligentes.} isMobile={isMobile}>
{quotes.map((q,i) => (

{q.q}

{q.a}
{q.r.toUpperCase()}
))}
); }; // ===================================================================== // CTA // ===================================================================== // WORDMARK BREAK — full-bleed editorial moment. The brand name as art. // ===================================================================== const WordmarkBreak = ({ width: w }) => { const { width, isMobile } = useResponsive(w); const fontSize = isMobile ? 92 : 280; return (
{/* warm + cool ambient blobs */}
{/* Eyebrow row */}
El nombre detrás de tus instalaciones
EST. 2024 · LLORET DE MAR
{/* The wordmark */}

comf rtek .

{/* Caption strip below */}
{[ ['comfort', 'Bienestar térmico, lumínico y acústico medible — no presunto.'], ['tek', 'Tecnología Loxone · KNX · Home Assistant. Estándares abiertos, no jaulas.'], ['.', 'El punto final. La instalación cerrada, documentada, soportada.'], ].map(([k, v]) => (
{k}

{v}

))}
); }; // ===================================================================== // CTA // ===================================================================== const CTA = ({ width: w }) => { const { width, isMobile } = useResponsive(w); return (
{/* warm + cool ambient glow */}
{/* gradient hairline */}
{/* Left — copy + CTA */}
HABLEMOS · ATENCIÓN INMEDIATA

{isMobile ? ( <>Hablamos por WhatsApp. ) : ( <>Cuéntanos tu proyecto.
Ambrosio te atiende por WhatsApp. )}

Ambrosio puede atenderte por WhatsApp. Si prefieres llamada, deja tus datos y Comfortek preparará el contacto.

Hablar con Ambrosio por WhatsApp
{/* Right — Ambrosio assistant card */}
{/* meta strip */}
{[ ['Lloret de Mar','Girona · Costa Brava'], ['Visita técnica','Gratuita y sin compromiso'], ['Soporte 24/7','SLA con clientes activos'], ].map(([a,b]) => (
{a.toUpperCase()}
{b}
))}
); }; const AmbrosioCard = ({ isMobile }) => { const allMsgs = [ { from: 'ambrosio', text: 'Hola 👋 Soy Ambrosio. ¿Es para una vivienda o un negocio?' }, { from: 'client', text: 'Negocio. Un restaurante en Lloret, quiero control de clima y accesos.' }, { from: 'ambrosio', text: 'Perfecto. ¿Cuántos metros tiene el local aproximadamente?' }, { from: 'client', text: 'Unos 200m², planta baja.' }, { from: 'ambrosio', text: '¡Ideal para Loxone! ¿Te viene bien que Comfortek te llame esta semana para hacer una valoración sin compromiso?', tick: true }, ]; // Mobile: 3 mensajes (1 saludo + 1 cliente + 1 cierre con tick) para no comer pantalla const msgs = isMobile ? [allMsgs[0], allMsgs[1], allMsgs[4]] : allMsgs; return (
{/* WA header */}
A
Ambrosio · Comfortek
En línea
{/* Messages */}
HOY
{msgs.map((m, i) => (
{m.text}
{['10:14','10:15','10:15','10:16','10:16'][i]} {m.from === 'client' && ( )}
))}
{/* WA input bar */}
Escribe un mensaje…
); }; // ===================================================================== // FLOATING MOBILE CTA — Ambrosio call button // ===================================================================== const MobileFloatingCTA = ({ width = 1440 }) => { const isMobile = width < 600; if (!isMobile) return null; return (
); }; // ===================================================================== // FOOTER // ===================================================================== const Footer = ({ width: w }) => { const { width, isMobile } = useResponsive(w); return ( ); }; // ===================================================================== // SECTION wrapper // ===================================================================== const Section = ({ eyebrow, title, subtitle, children, isMobile }) => (
{eyebrow}

{title}

{subtitle && (

{subtitle}

)}
{children}
); // ===================================================================== // AILAYER — IA + agentes como pilar narrativo, con Ambrosio como rostro // ===================================================================== const AILayer = () => { const { isMobile } = useResponsive(); const allCapabilities = [ { label: 'Recibir y hacer llamadas', desc: 'voz natural, 24/7' }, { label: 'Preparar presupuestos', desc: 'desde la conversación' }, { label: 'Enviar y recibir email', desc: 'seguimiento automático' }, { label: 'WhatsApp bidireccional', desc: 'el canal del cliente' }, { label: 'Base de datos viva', desc: 'Comfortek In · ficha por cliente' }, ]; // En mobile mostramos 4 (las 5 saturan visualmente) const capabilities = isMobile ? allCapabilities.slice(0, 4) : allCapabilities; const pillars = [ { tag: 'CONTROL CONVERSACIONAL', name: 'Habla con la casa.', role: 'voz, texto, gestos', desc: 'LLM local o cloud integrado en Home Assistant y Loxone. "Modo cena en el salón", "deja la oficina lista para mañana", "cuánto consumió ayer la aerotermia". Sin frases mágicas memorizadas.', descShort: '"Modo cena", "oficina lista mañana". LLM sobre HA y Loxone.', kpi: ['ollama · claude · gpt', 'mcp + home assistant', 'privado u online'], accent: '#ff7a3d', }, { tag: 'AUTOMATIZACIÓN PREDICTIVA', name: 'Aprende sola.', role: 'patrones reales', desc: 'La instalación observa ocupación, clima, energía y rutinas. Ajusta climatización antes de que llegues, baja persianas cuando va a calentar, avisa si la fotovoltaica rinde menos de lo esperado.', descShort: 'Ajusta clima y persianas antes de que pidas. Avisa de fallos.', kpi: ['clima · ocupación · energía', 'mantenimiento predictivo', 'sin nube obligada'], accent: '#7c5cff', }, { tag: 'PRÓXIMOS AGENTES', name: 'Más en camino.', role: 'mantenimiento, obra, energía', desc: 'Ambrosio es el primero. Después llegan agentes para mantenimiento (avisa antes de que falle), para obra (coordina con instaladores) y para energía (optimiza fotovoltaica + aerotermia en tiempo real).', descShort: 'Llegan agentes de mantenimiento, obra y energía.', kpi: ['agente mantenimiento · q3', 'agente energía · q4', 'agente obra · 2026'], accent: '#19c2d6', }, ]; return ( La domótica conecta tu instalación.
La IA la hace más fácil de usar.} subtitle={isMobile ? 'Ambrosio es el agente IA de Comfortek. Atiende, presupuesta y gestiona — con el respaldo técnico de Comfortek detrás.' : 'Comfortek tiene un agente de IA propio. Se llama Ambrosio. Atiende a tus clientes, les prepara presupuestos, gestiona sus instalaciones, manda mails y WhatsApps — y ayuda a gestionar muchas de las solicitudes habituales de un cliente, siempre con el respaldo técnico de Comfortek. Una nueva forma de dar soporte en el mundo de la integración.'}> {/* ============================================================ */} {/* AMBROSIO HERO BLOCK — portrait + capabilities */} {/* ============================================================ */}
{/* Portrait pane — editorial, mostly photo */}
Ambrosio · agente de IA de Comfortek {/* Subtle vignette into the right side so it bleeds into the dark pane */}
{/* Top metadata strip */}
● EN LÍNEA · ATENDIENDO
AMBROSIO · v1.0
{/* Bottom name plate */}
Ambrosio
Agente IA de Comfortek · asistencia comercial y soporte
{/* Capabilities pane */}
CAPACIDADES REALES · NO PROMESAS

Trabaja como un comercial.
Sin descansos. Sin olvidos.

{isMobile ? <>Conectado a Comfortek In: ficha viva de cada instalación. Resuelve dudas de noche y cierra visitas el lunes. : <>Ambrosio vive conectado a Comfortek In — la base de datos donde está la instalación de cada cliente. Y al estar dentro de nuestro mundo, puede ayudar en muchas tareas clave del día a día: desde resolver una duda a las 3 de la mañana hasta cerrar una visita técnica el lunes. }

    {capabilities.map((c, i) => (
  • {String(i+1).padStart(2,'0')}
    {c.label}
    {c.desc}
    • ))}

Capacidades en despliegue progresivo según instalación y servicio contratado.

Hablar con Ambrosio por WhatsApp ● 24/7 · ES + CA + EN
{/* ============================================================ */} {/* PILLARS — capa IA completa */} {/* ============================================================ */}
Y NO ACABA AHÍ —
{pillars.map((p) => (
{p.tag}

{p.name}

{p.role}

{isMobile && p.descShort ? p.descShort : p.desc}

{p.kpi.map((k) => (
{k.toUpperCase()}
))}
))}
{/* Manifesto strip */}
● COMFORTEK · IA NATIVA

{isMobile ? <>Diseñamos la capa IA junto al cableado. LLM local o cloud, MCP para conectar todo. : <>No vendemos "asistentes inteligentes" pegados con cinta. Diseñamos la capa IA junto al cableado — con LLM local cuando hace falta privacidad, cloud cuando hace falta potencia, y MCP para conectar todo lo que tengas. }

); }; Object.assign(window, { Services, Why, Projects, Brands, Process, Testimonials, CTA, Footer, Section, MobileFloatingCTA, AILayer });