// ============================================================
//  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 (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={strokeWidth}
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      style={style}
      aria-hidden="true"
      dangerouslySetInnerHTML={{ __html: inner }}
    />
  );
}

// ---- 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 (
    <span className={className} style={{ display: 'block' }}>
      {lines.map((line, li) => {
        const lineLength = line.length;
        const chars = line.split('');
        return (
          <span key={li} className={lineClassName(li)} style={{ display: 'block' }}>
            {chars.map((ch, ci) => {
              const delay = startDelay + (li * lineLength * 30) + (ci * 30);
              return (
                <span
                  key={ci}
                  style={{
                    display: 'inline-block',
                    whiteSpace: 'pre',
                    opacity: shown ? 1 : 0,
                    transform: shown ? 'translateX(0)' : 'translateX(-10px)',
                    transition: 'opacity 550ms cubic-bezier(0.25, 1, 0.5, 1), transform 550ms cubic-bezier(0.25, 1, 0.5, 1)',
                    transitionDelay: shown ? `${delay}ms` : '0ms',
                  }}
                >
                  {ch === ' ' ? '\u00A0' : ch}
                </span>
              );
            })}
          </span>
        );
      })}
    </span>
  );
}

// ---- 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 (
    <Tag
      className={className}
      style={{
        ...style,
        opacity: shown ? 1 : 0,
        transition: `opacity ${duration}ms cubic-bezier(0.25, 1, 0.5, 1)`,
      }}
    >
      {children}
    </Tag>
  );
}

// ---- 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 (
    <Tag ref={ref} className={`reveal ${seen ? 'in' : ''} ${className}`} style={{ transitionDelay: `${delay}ms`, ...style }}>
      {children}
    </Tag>
  );
}

// ---- 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 (
    <div className="absolute top-0 inset-x-0 h-screen z-0 pointer-events-none overflow-hidden" aria-hidden="true">
      <div ref={wrapRef} className="absolute inset-0 will-change-transform" style={{ transformOrigin: 'center center' }}>
        {/* always-visible warm frame (start/daytime): shows instantly and stays behind the video */}
        <img
          src="assets/hero-frame-start.png"
          alt=""
          className="absolute inset-0 w-full h-full object-cover mobile-bg-adapt"
          style={{ zIndex: 0 }}
          aria-hidden="true"
        />
        {/* sunset high-quality frame: cross-fades smoothly over the video when it ends to avoid any cut/flash */}
        <img
          src="assets/hero-frame-end.png"
          alt=""
          className="absolute inset-0 w-full h-full object-cover mobile-bg-adapt transition-opacity duration-[1200ms] ease-in-out"
          style={{ opacity: ended ? 1 : 0, zIndex: 2 }}
          aria-hidden="true"
        />
        <video
          ref={videoRef}
          className="absolute inset-0 w-full h-full object-cover mobile-bg-adapt transition-opacity duration-700"
          style={{ opacity: ready ? 1 : 0, zIndex: 1 }}
          src="assets/hero-transition.mp4"
          poster="assets/hero-frame-start.png"
          muted
          playsInline
          autoPlay
          preload="auto"
          aria-hidden="true"
        ></video>
      </div>
      {/* very subtle bottom veil for legibility only */}
      <div
        className="absolute inset-x-0 bottom-0 h-[45vh] z-10"
        style={{ background: 'linear-gradient(180deg, rgba(20,17,15,0) 0%, rgba(20,17,15,0.35) 100%)' }}
      ></div>
    </div>
  );
}

// ---- Buttons ----
function PrimaryCTA({ href, children, className = '', onClick }) {
  return (
    <a
      href={href}
      onClick={onClick}
      className={`focus-ring inline-flex items-center justify-center gap-2 rounded-lg bg-amber px-7 py-3.5 text-[15px] font-medium text-ink transition-colors duration-200 hover:bg-[#F0904F] ${className}`}
    >
      {children}
    </a>
  );
}
function GlassCTA({ href, children, className = '', target, rel, onClick }) {
  return (
    <a
      href={href}
      target={target}
      rel={rel}
      onClick={onClick}
      className={`liquid-glass focus-ring group inline-flex items-center justify-center gap-2 rounded-lg border border-white/20 px-7 py-3.5 text-[15px] font-medium text-cream transition-colors duration-200 hover:!bg-cream hover:text-ink ${className}`}
    >
      {children}
    </a>
  );
}

// ---- WhatsApp Widget ----
function WhatsAppWidget() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="fixed bottom-6 right-6 z-[9999] flex flex-col items-end">
      {/* Chat Card */}
      {isOpen && (
        <div
          className="mb-4 w-[340px] rounded-2xl overflow-hidden shadow-2xl bg-white border border-surface/10 transition-all duration-300 origin-bottom-right transform scale-100"
          style={{ boxShadow: '0 12px 40px -10px rgba(0,0,0,0.3)' }}
        >
          {/* Header */}
          <div className="bg-[#25D366] text-white p-4 flex items-center justify-between">
            <div className="flex items-center gap-3">
              {/* WhatsApp Icon */}
              <div className="h-9 w-9 bg-white/20 rounded-full flex items-center justify-center">
                <svg className="w-5 h-5 fill-white" viewBox="0 0 24 24">
                  <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L0 24l6.335-1.662c1.746.953 3.71 1.455 5.703 1.457h.004c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
                </svg>
              </div>
              <div>
                <h4 className="font-semibold text-sm leading-none">Javier (Qestylo)</h4>
                <span className="text-[10px] text-white/80 font-light">Asesor Técnico de Kömmerling · En línea</span>
              </div>
            </div>
            {/* Close Button */}
            <button
              onClick={() => setIsOpen(false)}
              className="text-white/80 hover:text-white transition-colors"
            >
              <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>

          {/* Body */}
          <div className="bg-[#E5DDD5] p-5 space-y-4 relative">
            {/* Very subtle chat background pattern */}
            <div className="absolute inset-0 opacity-[0.06] bg-repeat pointer-events-none" style={{ backgroundImage: 'url("https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png")' }}></div>

            {/* Message bubble */}
            <div className="relative bg-white text-surface text-sm p-4 rounded-2xl rounded-tr-none shadow-sm max-w-[85%] ml-auto z-10">
              <p className="font-light leading-relaxed">Contacta con nosotros sin compromiso</p>
              {/* timestamp */}
              <span className="block text-[9px] text-surface/40 text-right mt-1.5 font-light">Justo ahora</span>
            </div>

            {/* CTA Button */}
            <a
              href="https://api.whatsapp.com/send?phone=34609213762&text=Hola%20Javier,%20me%20gustar%C3%ADa%20pedir%20presupuesto%20para%20una%20reforma%20o%20productos%20K%C3%B6mmerling."
              target="_blank"
              rel="noopener noreferrer"
              className="relative z-10 flex items-center justify-center gap-2 w-full bg-[#25D366] hover:bg-[#20ba59] text-white font-medium text-sm py-3 px-4 rounded-xl shadow-md transition-colors"
            >
              <span>Abrir chat</span>
              <svg className="w-4 h-4 fill-white rotate-90" viewBox="0 0 24 24">
                <path d="M2 21l21-9L2 3v7l15 2-15 2z" />
              </svg>
            </a>
          </div>
        </div>
      )}

      {/* Floating Button */}
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="focus-ring flex items-center justify-center h-14 w-14 rounded-full bg-[#25D366] hover:bg-[#20ba59] text-white shadow-lg transition-transform duration-200 hover:scale-105"
        style={{ boxShadow: '0 4px 18px rgba(37, 211, 102, 0.4)' }}
        aria-label="Contactar por WhatsApp"
      >
        {isOpen ? (
          <svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        ) : (
          <svg className="w-7 h-7 fill-white" viewBox="0 0 24 24">
            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L0 24l6.335-1.662c1.746.953 3.71 1.455 5.703 1.457h.004c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
          </svg>
        )}
      </button>
    </div>
  );
}

// ---- 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 (
    <div 
      className="fixed bottom-6 left-6 right-6 md:left-auto md:right-6 md:max-w-md z-[90] bg-[#1c1816]/95 border border-white/10 rounded-2xl p-5 shadow-2xl text-cream animate-modal-box flex flex-col gap-4"
      style={{
        boxShadow: '0 0 25px 1px rgba(233, 122, 56, 0.1), 0 20px 40px -12px rgba(0,0,0,0.5)'
      }}
    >
      <div className="flex items-start gap-3">
        <span className="text-amber mt-0.5"><Icon name="cookie" size={22} /></span>
        <div className="space-y-1">
          <h4 className="font-serif text-base font-normal tracking-wide">Control de cookies</h4>
          <p className="text-xs font-light text-muted leading-relaxed">
            Utilizamos cookies para personalizar el contenido, analizar el tráfico y mejorar tu experiencia. Puedes configurar tus preferencias o aceptar todas. 
            Consulta nuestra <button onClick={onOpenCookies} className="text-amber underline hover:text-[#F0904F] transition-colors focus:outline-none">Política de Cookies</button>.
          </p>
        </div>
      </div>

      {showConfig && (
        <div className="border-t border-white/5 pt-3 space-y-3">
          <div className="flex justify-between items-center text-xs">
            <span className="font-semibold text-muted">Cookies Técnicas</span>
            <span className="text-[10px] bg-white/10 text-white/60 px-2 py-0.5 rounded uppercase font-bold tracking-wider">Siempre activas</span>
          </div>
          <div className="flex justify-between items-center text-xs">
            <span className="font-semibold text-muted">Cookies de Análisis</span>
            <button 
              onClick={() => setAnalytics(!analytics)}
              className={`w-9 h-5 rounded-full p-0.5 transition-colors focus:outline-none ${analytics ? 'bg-amber' : 'bg-white/10'}`}
            >
              <div className={`w-4 h-4 bg-ink rounded-full transition-transform ${analytics ? 'translate-x-4' : 'translate-x-0'}`} />
            </button>
          </div>
          <div className="flex justify-between items-center text-xs">
            <span className="font-semibold text-muted">Cookies de Marketing</span>
            <button 
              onClick={() => setMarketing(!marketing)}
              className={`w-9 h-5 rounded-full p-0.5 transition-colors focus:outline-none ${marketing ? 'bg-amber' : 'bg-white/10'}`}
            >
              <div className={`w-4 h-4 bg-ink rounded-full transition-transform ${marketing ? 'translate-x-4' : 'translate-x-0'}`} />
            </button>
          </div>
        </div>
      )}

      <div className="flex flex-wrap gap-2 justify-end border-t border-white/5 pt-3">
        {showConfig ? (
          <>
            <button 
              onClick={() => setShowConfig(false)}
              className="text-xs font-medium text-muted hover:text-cream px-3 py-2 rounded-lg border border-white/10 hover:bg-white/5 transition-colors focus:outline-none"
            >
              Atrás
            </button>
            <button 
              onClick={handleSaveSelection}
              className="text-xs font-semibold bg-amber hover:bg-[#F0904F] text-ink px-4 py-2 rounded-lg transition-colors focus:outline-none"
            >
              Guardar selección
            </button>
          </>
        ) : (
          <>
            <button 
              onClick={() => setShowConfig(true)}
              className="text-xs font-medium text-muted hover:text-cream px-3 py-2 rounded-lg border border-white/10 hover:bg-white/5 transition-colors focus:outline-none"
            >
              Configurar
            </button>
            <button 
              onClick={handleRejectAll}
              className="text-xs font-medium text-muted hover:text-cream px-3 py-2 rounded-lg border border-white/10 hover:bg-white/5 transition-colors focus:outline-none"
            >
              Rechazar
            </button>
            <button 
              onClick={handleAcceptAll}
              className="text-xs font-semibold bg-amber hover:bg-[#F0904F] text-ink px-4 py-2 rounded-lg transition-colors focus:outline-none"
            >
              Aceptar todas
            </button>
          </>
        )}
      </div>
    </div>
  );
}

// ---- 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(
    <div 
      className="fixed inset-0 z-[100] overflow-hidden bg-ink/90 backdrop-blur-md flex items-center justify-center p-4 md:p-8 animate-modal-backdrop"
      onClick={onClose}
    >
      <div 
        className="relative w-full max-w-4xl bg-[#1c1816] text-cream rounded-3xl border border-white/10 overflow-hidden shadow-2xl flex flex-col max-h-[85vh] transform transition-all duration-300 animate-modal-box"
        onClick={(e) => 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 */}
        <div className="p-6 md:p-8 border-b border-white/5 flex flex-col md:flex-row md:items-center justify-between gap-4">
          <div>
            <span className="text-[10px] font-semibold uppercase tracking-widest text-amber">Textos Legales</span>
            <h3 className="font-serif text-2xl font-light tracking-wide text-cream mt-0.5">Información y Políticas</h3>
          </div>
          <button 
            onClick={onClose}
            className="absolute top-6 right-6 z-50 flex h-10 w-10 items-center justify-center rounded-full bg-white/5 text-cream/70 hover:text-white hover:bg-white/10 transition-colors border border-white/5"
            aria-label="Cerrar"
          >
            <Icon name="x" size={20} />
          </button>
        </div>

        {/* Tab Navigator */}
        <div className="px-6 md:px-8 flex gap-6 md:gap-8 border-b border-white/10 overflow-x-auto overflow-y-hidden no-scrollbar">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              onClick={() => {
                const el = document.getElementById('legal-content-scroll');
                if (el) el.scrollTop = 0;
                if (window.onLegalTabChange) {
                  window.onLegalTabChange(tab.id);
                }
              }}
              className={`py-3 px-1 text-xs font-semibold uppercase tracking-wider border-b-2 transition-all focus:outline-none ${
                activeTab === tab.id 
                  ? 'border-amber text-amber' 
                  : 'border-transparent text-muted hover:text-cream'
              }`}
            >
              {tab.label}
            </button>
          ))}
        </div>

        {/* Content Box (scrollable) */}
        <div 
          id="legal-content-scroll"
          className="p-6 md:p-8 overflow-y-auto space-y-6 text-sm font-light text-muted leading-relaxed"
        >
          {activeTab === 'legal' && (
            <div className="space-y-4">
              <h4 className="font-serif text-lg font-normal text-cream">1. Datos de Identificación y Propiedad</h4>
              <p>
                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:
              </p>
              <ul className="list-disc pl-5 space-y-1">
                <li><strong>Denominación comercial:</strong> Qestylo</li>
                <li><strong>Dirección física:</strong> Calle Puente Colgante 16, 47007 Valladolid, España</li>
                <li><strong>Teléfono de contacto:</strong> 983 266 408</li>
                <li><strong>Email de contacto:</strong> qestylo@qestylo.com</li>
                <li><strong>Actividad principal:</strong> Distribuidor Oficial autorizado de ventanas, persianas, contraventanas y puertas de PVC de la marca Kömmerling en Valladolid y provincia.</li>
              </ul>

              <h4 className="font-serif text-lg font-normal text-cream pt-4">2. Condiciones de Uso del Portal</h4>
              <p>
                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.
              </p>

              <h4 className="font-serif text-lg font-normal text-cream pt-4">3. Propiedad Intelectual e Industrial</h4>
              <p>
                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.
              </p>
              <p>
                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.
              </p>

              <h4 className="font-serif text-lg font-normal text-cream pt-4">4. Exclusión de Garantías y Responsabilidad</h4>
              <p>
                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.
              </p>
            </div>
          )}

          {activeTab === 'privacidad' && (
            <div className="space-y-4">
              <h4 className="font-serif text-lg font-normal text-cream">1. Tratamiento de Datos y RGPD</h4>
              <p>
                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.
              </p>

              <h4 className="font-serif text-lg font-normal text-cream pt-4">2. Finalidad de la Recogida de Datos</h4>
              <p>
                Los datos solicitados son necesarios para la correcta gestión de su consulta y/o presupuesto de carpintería. Específicamente:
              </p>
              <ul className="list-disc pl-5 space-y-1">
                <li><strong>Formulario de contacto / correo:</strong> Responder a solicitudes de información, visitas técnicas de medición y elaboración de ofertas comerciales de ventanas y cerramientos.</li>
                <li><strong>Teléfono / WhatsApp:</strong> Contactar con el usuario para afinar las especificaciones de sus ventanas Kömmerling y coordinar los montajes.</li>
              </ul>
              <p>
                No realizamos envíos de publicidad masiva de terceros ni elaboramos perfiles automatizados con sus datos de contacto.
              </p>

              <h4 className="font-serif text-lg font-normal text-cream pt-4">3. Conservación y Seguridad</h4>
              <p>
                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.
              </p>

              <h4 className="font-serif text-lg font-normal text-cream pt-4">4. Derechos del Usuario</h4>
              <p>
                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 <strong>qestylo@qestylo.com</strong>, adjuntando una fotocopia de su DNI o documento equivalente e indicando en el asunto "Protección de Datos".
              </p>
            </div>
          )}

          {activeTab === 'cookies' && (
            <div className="space-y-4">
              <h4 className="font-serif text-lg font-normal text-cream">1. Definición y Función de las Cookies</h4>
              <p>
                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.
              </p>

              <h4 className="font-serif text-lg font-normal text-cream pt-4">2. Tipos de Cookies Utilizadas en este Sitio</h4>
              <p>
                Este sitio web utiliza cookies propias y de terceros para optimizar la navegación del usuario e identificar el rendimiento de las visitas:
              </p>
              <div className="space-y-3">
                <div className="p-4 rounded-xl bg-white/5 border border-white/5">
                  <h5 className="font-semibold text-cream text-xs uppercase tracking-wider mb-1">A. Cookies Técnicas e Instrumentales (Propias)</h5>
                  <p className="text-xs">
                    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.
                  </p>
                </div>
                <div className="p-4 rounded-xl bg-white/5 border border-white/5">
                  <h5 className="font-semibold text-cream text-xs uppercase tracking-wider mb-1">B. Cookies Analíticas y de Medición (De Terceros)</h5>
                  <p className="text-xs">
                    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.
                  </p>
                </div>
              </div>

              <h4 className="font-serif text-lg font-normal text-cream pt-4">3. Gestión y Desactivación de Cookies</h4>
              <p>
                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:
              </p>
              <ul className="list-disc pl-5 space-y-1 text-xs">
                <li><strong>Google Chrome:</strong> Herramientas → Configuración → Privacidad y seguridad → Cookies y otros datos de sitios.</li>
                <li><strong>Mozilla Firefox:</strong> Herramientas → Opciones → Privacidad y Seguridad → Historial → Usar una configuración personalizada para el historial.</li>
                <li><strong>Microsoft Edge:</strong> Configuración → Cookies y permisos del sitio → Administrar y eliminar cookies.</li>
                <li><strong>Safari:</strong> Preferencias → Privacidad → Cookies y datos de sitios web.</li>
              </ul>
              <p>
                Tenga en cuenta que la desactivación de algunas cookies esenciales puede dificultar el funcionamiento de algunos servicios del sitio web.
              </p>
            </div>
          )}
        </div>

        {/* Footer of modal */}
        <div className="p-6 border-t border-white/5 flex justify-end">
          <button 
            onClick={onClose}
            className="focus-ring bg-white/5 hover:bg-white/10 text-cream font-medium text-xs px-5 py-2.5 rounded-xl transition-colors"
          >
            Entendido
          </button>
        </div>
      </div>
    </div>,
    document.body
  );
}

Object.assign(window, {
  Icon, AnimatedHeading, FadeIn, Reveal, PingPongVideo, PrimaryCTA, GlassCTA, WhatsAppWidget, CookieBanner, LegalModal,
});
