// ============================================================ // Qestylo — shared components // ============================================================ const { useState, useEffect, useRef, useCallback } = React; // ---- Lucide icon (renders SVG inline so it survives re-renders) ---- function pascal(name) { return name.split('-').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join(''); } function Icon({ name, size = 22, strokeWidth = 1.6, className = '', style = {} }) { const data = (window.lucide && window.lucide.icons && window.lucide.icons[pascal(name)]) || null; let inner = ''; if (data && Array.isArray(data[2])) { inner = data[2].map(([tag, attrs]) => { const a = Object.entries(attrs).map(([k, v]) => `${k}="${v}"`).join(' '); return `<${tag} ${a} />`; }).join(''); } return ( ); } // ---- AnimatedHeading: per-character entrance ---- function AnimatedHeading({ text, className = '', lineClassName = () => '', startDelay = 200 }) { const [shown, setShown] = useState(false); useEffect(() => { const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (reduce) { setShown(true); return; } const t = setTimeout(() => setShown(true), 20); return () => clearTimeout(t); }, []); const lines = text.split('\n'); return ( {lines.map((line, li) => { const lineLength = line.length; const chars = line.split(''); return ( {chars.map((ch, ci) => { const delay = startDelay + (li * lineLength * 30) + (ci * 30); return ( {ch === ' ' ? '\u00A0' : ch} ); })} ); })} ); } // ---- FadeIn ---- function FadeIn({ children, delay = 0, duration = 800, className = '', style = {}, as = 'div' }) { const [shown, setShown] = useState(false); useEffect(() => { const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (reduce) { setShown(true); return; } const t = setTimeout(() => setShown(true), delay); return () => clearTimeout(t); }, [delay]); const Tag = as; return ( {children} ); } // ---- Reveal on scroll (IntersectionObserver, once at 20%) ---- function Reveal({ children, className = '', delay = 0, as = 'div', style = {} }) { const ref = useRef(null); const [seen, setSeen] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (reduce) { setSeen(true); return; } const obs = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { setSeen(true); obs.unobserve(el); } }); }, { threshold: 0.2 }); obs.observe(el); return () => obs.disconnect(); }, []); const Tag = as; return ( {children} ); } // ---- Video transition to static sunset background (single play + smooth cross-fade) ---- function PingPongVideo() { const videoRef = useRef(null); const wrapRef = useRef(null); const [ready, setReady] = useState(false); const [ended, setEnded] = useState(false); useEffect(() => { const v = videoRef.current; if (!v) return; const onPlay = () => { setReady(true); }; const onEnded = () => { setEnded(true); }; // If video is already playing or ready if (v.readyState >= 3) { setReady(true); } v.addEventListener('playing', onPlay); v.addEventListener('canplay', onPlay); v.addEventListener('canplaythrough', onPlay); v.addEventListener('ended', onEnded); // Fallback: in case events don't fire but video is loaded const t = setTimeout(() => { if (v.readyState >= 2) { setReady(true); } }, 1500); return () => { v.removeEventListener('playing', onPlay); v.removeEventListener('canplay', onPlay); v.removeEventListener('canplaythrough', onPlay); v.removeEventListener('ended', onEnded); clearTimeout(t); }; }, []); // subtle scroll zoom 1 -> 1.08 over first viewport useEffect(() => { const onScroll = () => { const w = wrapRef.current; if (!w) return; const p = Math.min(1, Math.max(0, window.scrollY / window.innerHeight)); w.style.transform = `scale(${1 + p * 0.08})`; }; onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); return ( ); } // ---- Buttons ---- function PrimaryCTA({ href, children, className = '', onClick }) { return ( {children} ); } function GlassCTA({ href, children, className = '', target, rel, onClick }) { return ( {children} ); } // ---- WhatsApp Widget ---- function WhatsAppWidget() { const [isOpen, setIsOpen] = useState(false); return (
{/* Chat Card */} {isOpen && (
{/* Header */}
{/* WhatsApp Icon */}

Javier (Qestylo)

Asesor Técnico de Kömmerling · En línea
{/* Close Button */}
{/* Body */}
{/* Very subtle chat background pattern */}
{/* Message bubble */}

Contacta con nosotros sin compromiso

{/* timestamp */} Justo ahora
{/* CTA Button */} Abrir chat
)} {/* Floating Button */}
); } // ---- CookieBanner ---- function CookieBanner({ onOpenCookies }) { const [visible, setVisible] = useState(false); const [showConfig, setShowConfig] = useState(false); const [analytics, setAnalytics] = useState(true); const [marketing, setMarketing] = useState(false); useEffect(() => { const consent = localStorage.getItem('qestylo-cookie-consent'); if (!consent) { const timer = setTimeout(() => { setVisible(true); }, 1000); // 1s delay return () => clearTimeout(timer); } }, []); const handleAcceptAll = () => { localStorage.setItem('qestylo-cookie-consent', JSON.stringify({ necessary: true, analytics: true, marketing: true })); setVisible(false); }; const handleRejectAll = () => { localStorage.setItem('qestylo-cookie-consent', JSON.stringify({ necessary: true, analytics: false, marketing: false })); setVisible(false); }; const handleSaveSelection = () => { localStorage.setItem('qestylo-cookie-consent', JSON.stringify({ necessary: true, analytics, marketing })); setVisible(false); }; if (!visible) return null; return (

Control de cookies

Utilizamos cookies para personalizar el contenido, analizar el tráfico y mejorar tu experiencia. Puedes configurar tus preferencias o aceptar todas. Consulta nuestra .

{showConfig && (
Cookies Técnicas Siempre activas
Cookies de Análisis
Cookies de Marketing
)}
{showConfig ? ( <> ) : ( <> )}
); } // ---- LegalModal ---- function LegalModal({ activeTab, onClose }) { if (!activeTab) return null; // Handle ESC key to close useEffect(() => { const handleKeyDown = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', handleKeyDown); return () => window.removeEventListener('keydown', handleKeyDown); }, [onClose]); const tabs = [ { id: 'legal', label: 'Aviso Legal' }, { id: 'privacidad', label: 'Privacidad' }, { id: 'cookies', label: 'Política de Cookies' }, ]; return ReactDOM.createPortal(
e.stopPropagation()} style={{ boxShadow: '0 0 35px 2px rgba(233, 122, 56, 0.1), 0 25px 50px -12px rgba(0, 0, 0, 0.5)' }} > {/* Header with Title & Tabs */}
Textos Legales

Información y Políticas

{/* Tab Navigator */}
{tabs.map((tab) => ( ))}
{/* Content Box (scrollable) */}
{activeTab === 'legal' && (

1. Datos de Identificación y Propiedad

En cumplimiento del deber de información recogido en el artículo 10 de la Ley 34/2002, de 11 de julio, de Servicios de la Sociedad de la Información y del Comercio Electrónico (LSSI-CE), a continuación se reflejan los siguientes datos del titular del sitio web:

  • Denominación comercial: Qestylo
  • Dirección física: Calle Puente Colgante 16, 47007 Valladolid, España
  • Teléfono de contacto: 983 266 408
  • Email de contacto: qestylo@qestylo.com
  • Actividad principal: Distribuidor Oficial autorizado de ventanas, persianas, contraventanas y puertas de PVC de la marca Kömmerling en Valladolid y provincia.

2. Condiciones de Uso del Portal

El acceso y/o uso de este portal atribuye la condición de USUARIO, que acepta de forma expresa, desde dicho acceso y/o uso, las Condiciones Generales de Uso aquí reflejadas. El sitio web proporciona acceso a información sobre sistemas de carpintería y cerramientos (en adelante, "los contenidos") pertenecientes a Qestylo. El usuario asume la responsabilidad del uso del portal.

3. Propiedad Intelectual e Industrial

Qestylo es titular de todos los derechos de propiedad intelectual e industrial de su página web, así como de los elementos contenidos en la misma (a título enunciativo: imágenes, sonido, audio, vídeo, software o textos, marcas o logotipos, combinaciones de colores, estructura y diseño, selección de materiales usados, etc.). Todos los derechos reservados.

Queda expresamente prohibida la reproducción, distribución y comunicación pública, incluida su modalidad de puesta a disposición, de la totalidad o parte de los contenidos de esta página web, con fines comerciales, en cualquier soporte y por cualquier medio técnico, sin la autorización expresa de Qestylo.

4. Exclusión de Garantías y Responsabilidad

Qestylo no se hace responsable, en ningún caso, de los daños y perjuicios de cualquier naturaleza que pudieran ocasionar, a título enunciativo: errores u omisiones en los contenidos, falta de disponibilidad del portal o la transmisión de virus o programas maliciosos o lesivos en los contenidos, a pesar de haber adoptado todas las medidas tecnológicas necesarias para evitarlo.

)} {activeTab === 'privacidad' && (

1. Tratamiento de Datos y RGPD

De conformidad con lo dispuesto en el Reglamento (UE) 2016/679 del Parlamento Europeo y del Consejo, de 27 de abril de 2016 (RGPD), relativo a la protección de las personas físicas en lo que respecta al tratamiento de datos personales, le informamos de que los datos suministrados a través de nuestros formularios o medios de contacto serán incorporados a ficheros titularidad de Qestylo.

2. Finalidad de la Recogida de Datos

Los datos solicitados son necesarios para la correcta gestión de su consulta y/o presupuesto de carpintería. Específicamente:

  • Formulario de contacto / correo: Responder a solicitudes de información, visitas técnicas de medición y elaboración de ofertas comerciales de ventanas y cerramientos.
  • Teléfono / WhatsApp: Contactar con el usuario para afinar las especificaciones de sus ventanas Kömmerling y coordinar los montajes.

No realizamos envíos de publicidad masiva de terceros ni elaboramos perfiles automatizados con sus datos de contacto.

3. Conservación y Seguridad

Los datos personales se conservarán mientras dure la relación precontractual o contractual, y posteriormente durante el plazo de prescripción de las responsabilidades legales asociadas a las obras y garantías correspondientes. Implementamos medidas de seguridad técnicas y organizativas para evitar la pérdida, alteración o acceso no autorizado a su información.

4. Derechos del Usuario

El usuario podrá ejercer en todo momento sus derechos de acceso, rectificación, supresión, limitación del tratamiento, portabilidad y oposición enviando un correo electrónico a qestylo@qestylo.com, adjuntando una fotocopia de su DNI o documento equivalente e indicando en el asunto "Protección de Datos".

)} {activeTab === 'cookies' && (

1. Definición y Función de las Cookies

Una cookie es un fichero que se descarga en su dispositivo al acceder a determinadas páginas web. Las cookies permiten a una página web, entre otras cosas, almacenar y recuperar información sobre los hábitos de navegación de un usuario o de su equipo y, dependiendo de la información que contengan y de la forma en que utilice su equipo, pueden utilizarse para reconocer al usuario.

2. Tipos de Cookies Utilizadas en este Sitio

Este sitio web utiliza cookies propias y de terceros para optimizar la navegación del usuario e identificar el rendimiento de las visitas:

A. Cookies Técnicas e Instrumentales (Propias)

Son esenciales para la navegación y el correcto funcionamiento de la página web. Se utilizan para recordar si el usuario ha aceptado o rechazado la política de cookies y evitar que aparezca de nuevo el banner.

B. Cookies Analíticas y de Medición (De Terceros)

Nos permiten cuantificar el número de usuarios y realizar la medición y análisis estadístico de la utilización que hacen los usuarios de la web con el fin de introducir mejoras de velocidad o diseño. Empleamos servicios como Google Analytics para estas estadísticas de tráfico de forma totalmente agregada y anónima.

3. Gestión y Desactivación de Cookies

Usted puede revocar el consentimiento previamente otorgado en nuestro panel de control de cookies en cualquier momento. Asimismo, puede permitir, bloquear o eliminar las cookies instaladas en su equipo mediante la configuración de las opciones del navegador instalado en su ordenador:

  • Google Chrome: Herramientas → Configuración → Privacidad y seguridad → Cookies y otros datos de sitios.
  • Mozilla Firefox: Herramientas → Opciones → Privacidad y Seguridad → Historial → Usar una configuración personalizada para el historial.
  • Microsoft Edge: Configuración → Cookies y permisos del sitio → Administrar y eliminar cookies.
  • Safari: Preferencias → Privacidad → Cookies y datos de sitios web.

Tenga en cuenta que la desactivación de algunas cookies esenciales puede dificultar el funcionamiento de algunos servicios del sitio web.

)}
{/* Footer of modal */}
, document.body ); } Object.assign(window, { Icon, AnimatedHeading, FadeIn, Reveal, PingPongVideo, PrimaryCTA, GlassCTA, WhatsAppWidget, CookieBanner, LegalModal, });