// ============================================================
//  Qestylo — page sections
// ============================================================
const { useState, useEffect, useRef, useCallback } = React;

// scroll helper for #contacto CTAs
function goContacto(e) {
  e.preventDefault();
  const el = document.getElementById('contacto');
  if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 20, behavior: 'smooth' });
}

// ---------------- 2 · NAVBAR ----------------
function Navbar() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [
    ['Ventanas', '#solucion'],
    ['Puertas', '#puertas'],
    ['Persianas', '#persianas'],
    ['Ventajas', '#problema'],
    ['Cómo funciona', '#como'],
    ['Opiniones', '#opiniones'],
  ];
  return (
    <div className="fixed top-0 inset-x-0 z-50 px-6 md:px-12 lg:px-16 pt-6">
      <nav className="liquid-glass rounded-xl px-5 md:px-7 py-3.5 flex items-center justify-between">
        {/* left */}
        <a href="#top" className="focus-ring rounded flex items-center gap-3 leading-none">
          <img src="assets/logo.png" alt="Qestylo" className="h-9 md:h-10 w-auto object-contain" />
          <span className="hidden sm:inline text-[11px] font-light uppercase tracking-[0.18em] text-muted">
            Distribuidor Oficial Kömmerling
          </span>
        </a>
        {/* center */}
        <div className="hidden md:flex items-center gap-8">
          {links.map(([label, href]) => (
            <a
              key={label}
              href={href}
              className="focus-ring rounded text-sm font-light text-cream/90 transition-colors hover:text-amber"
            >
              {label}
            </a>
          ))}
        </div>
        {/* right */}
        <PrimaryCTA href="#contacto" onClick={goContacto} className="!px-5 !py-2.5 !text-sm">
          Pide presupuesto
        </PrimaryCTA>
      </nav>
    </div>
  );
}

// ---------------- 3 · HERO ----------------
const FLOATING = [
  { icon: 'volume-x', text: 'El ruido de la calle se queda fuera' },
  { icon: 'thermometer-sun', text: 'Tu casa templada todo el año' },
  { icon: 'award', text: 'Distribuidor oficial Kömmerling' },
  { icon: 'map-pin', text: 'Tienda física en Valladolid' },
];

function Hero() {
  const heroRef = useRef(null);
  // hero fade on scroll
  useEffect(() => {
    const onScroll = () => {
      const el = heroRef.current;
      if (!el) return;
      const p = Math.min(1, window.scrollY / (window.innerHeight * 0.9));
      el.style.opacity = String(1 - p * 0.85);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <header id="top" className="relative z-10 min-h-screen flex flex-col px-6 md:px-12 lg:px-16" data-screen-label="Hero">
      <div ref={heroRef} className="flex-1 flex flex-col justify-end pb-10 lg:pb-16 pt-32">
        <div className="grid lg:grid-cols-2 items-end gap-10 lg:gap-8">
          {/* left */}
          <div className="max-w-2xl">
            <h1 className="font-serif font-light leading-none tracking-[-0.02em] text-4xl md:text-5xl lg:text-6xl xl:text-7xl">
              <AnimatedHeading
                text={'Menos ruido.\nMenos factura.\nMás hogar.'}
                lineClassName={(li) => (li === 2 ? 'text-amber' : 'text-cream')}
              />
            </h1>
            <FadeIn delay={800} duration={1000}>
              <p className="mt-7 max-w-md text-[15px] md:text-base font-light leading-relaxed text-muted">
                Distribuidor oficial Kömmerling en Valladolid. Aislamiento térmico y acústico
                alemán, instalación profesional y presupuesto a tu medida — sin compromiso.
              </p>
            </FadeIn>
            <FadeIn delay={1200} duration={1000}>
              <div className="mt-8 flex flex-col sm:flex-row gap-3">
                <PrimaryCTA href="#contacto" onClick={goContacto}>
                  Pide presupuesto sin compromiso
                  <Icon name="arrow-right" size={18} />
                </PrimaryCTA>
                <GlassCTA href="https://www.qestylo.com/" target="_blank" rel="noopener noreferrer">
                  <span className="flex items-center gap-1.5">
                    Conoce
                    <img
                      src="assets/logo.png"
                      alt="Qestylo"
                      className="h-[18px] w-auto object-contain transition-all duration-200 group-hover:brightness-0"
                    />
                  </span>
                  <Icon name="arrow-up-right" size={18} />
                </GlassCTA>
              </div>
            </FadeIn>
          </div>

          {/* right: card-tag */}
          <div className="flex lg:justify-end">
            <FadeIn delay={1400} duration={1000}>
              <div className="liquid-glass rounded-xl px-7 py-6">
                <p className="font-light text-lg md:text-xl lg:text-2xl text-cream leading-snug">
                  Aislar <span className="text-amber">·</span> Ahorrar <span className="text-amber">·</span> Descansar
                </p>
              </div>
            </FadeIn>
          </div>
        </div>

        {/* floating cards */}
        <div className="mt-10 grid grid-cols-2 lg:grid-cols-4 gap-3">
          {FLOATING.map((c, i) => (
            <FadeIn key={i} delay={1600 + i * 150} duration={900}>
              <div className="liquid-glass rounded-2xl px-5 py-4 flex items-start gap-3 h-full">
                <span className="text-amber shrink-0 mt-0.5"><Icon name={c.icon} size={20} /></span>
                <span className="text-[13px] md:text-sm font-light leading-snug text-cream">{c.text}</span>
              </div>
            </FadeIn>
          ))}
        </div>
      </div>
    </header>
  );
}

// section eyebrow
function Eyebrow({ children, dark }) {
  return (
    <div className="flex items-center gap-3 mb-6">
      <span className="h-px w-8 bg-amber"></span>
      <span className={`text-[11px] font-medium uppercase tracking-[0.2em] ${dark ? 'text-surface/70' : 'text-muted'}`}>{children}</span>
    </div>
  );
}

// ---------------- 4 · PROBLEMA ----------------
const PAINS = [
  { icon: 'ear', title: 'Oyes la calle dentro de casa', text: 'Tráfico, vecinos y obras se cuelan por marcos viejos que ya no sellan.' },
  { icon: 'flame', title: 'Pagas de más en calefacción y aire', text: 'El calor y el frío se escapan por el perfil: tu factura de luz y gas paga la fuga.' },
  { icon: 'droplets', title: 'Condensación y moho', text: 'Humedad en los cristales, aire colándose por las juntas y moho en las paredes.' },
  { icon: 'shield-alert', title: 'Falta de seguridad ante robos', text: 'Cierres antiguos y vidrios frágiles que un intruso puede forzar con facilidad.' },
  { icon: 'wind', title: 'Polvo y alérgenos en casa', text: 'La falta de hermeticidad deja pasar hollín, polvo y polen de la calle.' },
  { icon: 'wrench', title: 'Mantenimiento y atascos', text: 'Marcos que se hinchan por el clima y necesitan lijado o pintura constante.' },
];

function Problema() {
  return (
    <section id="problema" className="relative z-10 bg-ink px-6 md:px-12 lg:px-16 py-20 md:py-32 lg:py-40" data-screen-label="Problema">
      <div className="max-w-6xl mx-auto">
        <Reveal>
          <Eyebrow>El problema</Eyebrow>
          <h2 className="font-serif font-light leading-[1.05] tracking-[-0.02em] text-3xl md:text-4xl lg:text-5xl max-w-2xl text-cream">
            Tus ventanas viejas te cuestan cada día
          </h2>
        </Reveal>
        <Reveal className="mt-14">
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-surface/60 rounded-2xl overflow-hidden">
            {PAINS.map((p, i) => (
              <div key={i} className="bg-ink p-8 lg:p-10">
                <div className="reveal-child" style={{ transitionDelay: `${i * 120}ms` }}>
                  <span className="text-amber inline-flex"><Icon name={p.icon} size={28} /></span>
                  <h3 className="mt-6 font-serif text-xl lg:text-2xl font-normal text-cream leading-snug">{p.title}</h3>
                  <p className="mt-3 text-sm font-light leading-relaxed text-muted">{p.text}</p>
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---------------- 5 · SOLUCIÓN ----------------
const KEY_FACTORS = [
  {
    id: 1,
    title: 'Cajón de persiana RolaPlus',
    subtitle: 'El cajón estanco de Kömmerling',
    text: 'Un mal cajón arruina el aislamiento de cualquier ventana. Las ventanas de PVC con sistemas Kömmerling se instalan con RolaPlus, un cajón de persiana de altas prestaciones que mantiene y refuerza la hermeticidad y el aislamiento termoacústico del conjunto sin filtraciones.',
    pos: { x: 50, y: 15 },
    icon: 'archive'
  },
  {
    id: 2,
    title: 'Estanqueidad al agua',
    subtitle: 'Protección absoluta contra lluvias',
    text: 'Los ensayos de las ventanas con sistemas Kömmerling consiguen los mejores valores de estanqueidad al agua (Clase E900 y superiores) gracias a su optimizada geometría interna y diseño de pendientes que canaliza y expulsa la humedad.',
    pos: { x: 25, y: 88 },
    icon: 'droplets'
  },
  {
    id: 3,
    title: 'Permeabilidad al aire',
    subtitle: 'Sin corrientes de aire frío',
    text: 'Impedir la entrada de aire y viento es clave para el confort. Las ventanas Kömmerling logran la Clase 4 (máxima clasificación) gracias a su geometría interna única, la calidad superior de sus juntas de estanqueidad soldadas y su alta hermeticidad.',
    pos: { x: 42, y: 64 },
    icon: 'wind'
  },
  {
    id: 4,
    title: 'Resistencia y durabilidad',
    subtitle: 'Refuerzo interior de acero zincado',
    text: 'Todos los sistemas Kömmerling llevan en su interior un refuerzo de acero zincado de gran espesor y alta inercia que confiere resistencia al impacto y mantiene las prestaciones intactas durante toda la vida útil, sin deformaciones por viento.',
    pos: { x: 62, y: 55 },
    icon: 'shield'
  },
  {
    id: 5,
    title: 'Aislamiento acústico',
    subtitle: 'Tu casa en absoluto silencio',
    text: 'Las ondas sonoras se transmiten por el aire, por lo que la estanqueidad al aire de Kömmerling es vital. Combinado con un vidrio laminado con propiedades acústicas y una instalación profesional sin huecos, se apaga por completo el ruido de la calle.',
    pos: { x: 80, y: 40 },
    icon: 'volume-x'
  },
  {
    id: 6,
    title: 'La materia prima',
    subtitle: 'Fórmula exclusiva y patentada',
    text: 'El término PVC engloba compuestos muy distintos. La fórmula greenline de Kömmerling, exclusiva y de fabricación propia, destaca por su gran durabilidad frente al clima extremo, alta resistencia al impacto y por no amarillear con el sol.',
    pos: { x: 22, y: 42 },
    icon: 'award'
  },
  {
    id: 7,
    title: 'Aislamiento térmico',
    subtitle: 'Ahorro de hasta el 70% en facturas',
    text: 'El PVC es un aislante natural sin puentes térmicos. Los perfiles Kömmerling se combinan con vidrios bajo emisivos de altas prestaciones para frenar el frío de Valladolid en invierno y el calor en verano, minimizando el uso de calefacción.',
    pos: { x: 48, y: 35 },
    icon: 'thermometer-sun'
  }
];

const SYSTEMS = [
  {
    category: 'abatibles',
    name: 'AluNext MD',
    badge: 'Híbrido Premium',
    depth: '76 mm',
    chambers: 'Junta Central',
    desc: 'El primer sistema híbrido de Kömmerling. Combina la resistencia estructural y estética vanguardista del aluminio exterior con el aislamiento térmico inigualable del PVC interior. Apto para Passivhaus.',
    image: 'assets/sistema-alunext-md.jpg',
    uf: '1,00 W/m²K',
    uw: 'desde 0,80 W/m²K',
    acoustic: 'hasta 45 dB',
    air: 'Clase 4 (Máxima)',
    water: 'Clase 9A',
    wind: 'Clase C5 (Máxima)',
    glass: '24 a 50 mm',
    highlights: [
      'Corazón de PVC 100% reciclado',
      'Esquinas soldadas (mayor estabilidad mecánica)',
      'Estética de aluminio premium en cualquier color RAL'
    ]
  },
  {
    category: 'abatibles',
    name: 'AluNext AD',
    badge: 'Híbrido Estilizado',
    depth: '76 mm',
    chambers: 'Doble Junta',
    desc: 'Sistema híbrido de doble junta. Une el diseño contemporáneo en aluminio exterior con la eficiencia térmica y acústica de la tecnología multicámara de PVC en la parte interior.',
    image: 'assets/sistema-alunext-ad.jpg',
    uf: '1,20 W/m²K',
    uw: 'desde 0,90 W/m²K',
    acoustic: 'hasta 44 dB',
    air: 'Clase 4 (Máxima)',
    water: 'Clase 9A',
    wind: 'Clase C5 (Máxima)',
    glass: '24 a 50 mm',
    highlights: [
      'Corazón de PVC de 5 cámaras de alto aislamiento',
      'Exterior de aluminio de líneas rectas y minimalistas',
      'Combinación idónea de ligereza y robustez'
    ]
  },
  {
    category: 'abatibles',
    name: 'KÖMMERLING Xtrem 76MD',
    badge: 'Casas Pasivas',
    depth: '76 mm',
    chambers: '6 Cámaras / Junta Central',
    desc: 'El buque insignia del aislamiento. Con junta central de estanqueidad y 6 cámaras, ofrece una transmitancia térmica excepcional (Uf = 1,0 W/m²K), ideal para climas fríos y construcciones de consumo casi nulo.',
    image: 'assets/sistema-xtrem-76md.jpg',
    uf: '1,00 W/m²K',
    uw: 'desde 0,73 W/m²K',
    acoustic: 'hasta 47 dB',
    air: 'Clase 4 (Máxima)',
    water: 'Clase E900',
    wind: 'Clase C5 (Máxima)',
    glass: 'hasta 48 mm',
    highlights: [
      'Certificado para estándar Passivhaus',
      'Sistema de triple junta con junta central rígida',
      'Máximo aislamiento térmico y acústico en climas extremos'
    ]
  },
  {
    category: 'abatibles',
    name: 'KÖMMERLING Xtrem 76AD',
    badge: 'Máximo Equilibrio',
    depth: '76 mm',
    chambers: '5 Cámaras / Doble Junta',
    desc: 'Equilibrio perfecto entre estética moderna y altas prestaciones. Cuenta con doble junta y un excelente nivel de aislamiento térmico y acústico a una relación calidad-precio excepcional.',
    image: 'assets/sistema-xtrem-76ad.jpg',
    uf: '1,10 W/m²K',
    uw: 'desde 0,76 W/m²K',
    acoustic: 'hasta 47 dB',
    air: 'Clase 4 (Máxima)',
    water: 'Clase 9A',
    wind: 'Clase C5 (Máxima)',
    glass: 'hasta 48 mm',
    highlights: [
      'Excelente relación coste / prestaciones aislantes',
      'Doble junta de estanqueidad soldada en las esquinas',
      'Óptima rigidez con refuerzos de acero de gran inercia'
    ]
  },
  {
    category: 'abatibles',
    name: 'KÖMMERLING Xtrem 70AD',
    badge: 'Clásico Confiable',
    depth: '70 mm',
    chambers: '5 Cámaras / Doble Junta',
    desc: 'El sistema clásico y de gran fiabilidad. Perfil optimizado de 70 mm con 5 cámaras de aire. La solución ideal para reformas en las que se busca dar un salto de eficiencia respetando presupuestos ajustados.',
    image: 'assets/sistema-xtrem-70ad.jpg',
    uf: '1,30 W/m²K',
    uw: 'desde 0,90 W/m²K',
    acoustic: 'hasta 45 dB',
    air: 'Clase 4 (Máxima)',
    water: 'Clase 9A',
    wind: 'Clase C5 (Máxima)',
    glass: 'hasta 40 mm',
    highlights: [
      'Ideal para reformas residenciales estándar',
      'Espesor de perfil reducido de 70 mm muy adaptable',
      'Gran resistencia al impacto y durabilidad greenline®'
    ]
  },
  {
    category: 'abatibles',
    name: '76MD Zero',
    badge: 'Hoja Oculta Minimalista',
    depth: '76 mm',
    chambers: 'Junta Central',
    desc: 'Estética purista con hoja oculta desde el exterior. El marco reducido maximiza la superficie de vidrio, logrando un diseño muy limpio que inunda de luz natural las estancias de tu hogar.',
    image: 'assets/sistema-76md-zero.jpg',
    uf: '1,00 W/m²K',
    uw: 'desde 0,74 W/m²K',
    acoustic: 'hasta 46 dB',
    air: 'Clase 4 (Máxima)',
    water: 'Clase E900',
    wind: 'Clase C5 (Máxima)',
    glass: 'hasta 48 mm',
    highlights: [
      'Hoja oculta que maximiza la entrada de luz natural',
      'Estética purista con marco de sección vista mínima',
      'Triple junta con junta central de altas prestaciones'
    ]
  },
  {
    category: 'abatibles',
    name: 'AluClip Zero',
    badge: 'Línea Vanguardista',
    depth: '76 mm',
    chambers: 'Hoja Oculta + Alu',
    desc: 'Combina el diseño enrasado de la hoja oculta con un clip exterior de aluminio lacado. La solución perfecta para integraciones arquitectónicas modernas que exigen el aspecto del aluminio sin renunciar al aislamiento del PVC.',
    image: 'assets/sistema-aluclip-zero.jpg',
    uf: '1,10 W/m²K',
    uw: 'desde 0,78 W/m²K',
    acoustic: 'hasta 46 dB',
    air: 'Clase 4 (Máxima)',
    water: 'Clase 9A',
    wind: 'Clase C5 (Máxima)',
    glass: 'hasta 48 mm',
    highlights: [
      'Estética de aluminio enrasado exterior',
      'Aislamiento y hermeticidad de PVC en el interior',
      'Ideal para proyectos arquitectónicos modernos y vanguardistas'
    ]
  },
  {
    category: 'correderas',
    name: 'PremiSlide 76',
    badge: 'Corredera Hermética',
    depth: '76 mm',
    chambers: 'Desplazamiento Paralelo',
    desc: 'Una revolución en sistemas deslizantes. Mediante un innovador mecanismo, la hoja se separa y se desplaza de forma paralela, comprimiéndose firmemente al cerrar. Consigue la hermeticidad de una ventana abatible en una corredera.',
    image: 'assets/sistema-premislide-76.jpg',
    uf: '1,40 W/m²K',
    uw: 'desde 1,00 W/m²K',
    acoustic: 'hasta 43 dB',
    air: 'Clase 4 (Máxima)',
    water: 'Clase 9A',
    wind: 'Clase C5 (Máxima)',
    glass: 'hasta 50 mm',
    highlights: [
      'Cierre hermético por junta de compresión perimetral',
      'Suave desplazamiento paralelo sin invadir espacio',
      'Óptimo para grandes luces y alta exigencia térmica'
    ]
  },
  {
    category: 'correderas',
    name: 'PremiLine',
    badge: 'Corredera Clásica',
    depth: 'Variable',
    chambers: 'Deslizamiento Suave',
    desc: 'El sistema de corredera tradicional por excelencia. Ofrece un deslizamiento silencioso y sumamente suave gracias a sus raíles de acero inoxidable. Ideal para salidas a terrazas donde prima optimizar el espacio interior.',
    image: 'assets/sistema-premiline.jpg',
    uf: '1,60 W/m²K',
    uw: 'desde 1,20 W/m²K',
    acoustic: 'hasta 40 dB',
    air: 'Clase 3',
    water: 'Clase 7A',
    wind: 'Clase C3',
    glass: 'hasta 28 mm',
    highlights: [
      'Deslizamiento sumamente silencioso sobre raíles de acero inox',
      'Optimización máxima del espacio útil interior de la estancia',
      'Hojas de sección esbelta y diseño clásico atemporal'
    ]
  }
];

const APERTURES = [
  {
    name: 'Oscilobatiente',
    badge: 'El Estándar Recomendado',
    desc: 'Apertura sumamente práctica. Permite abrir de forma lateral completa (para limpiar o ventilar rápido) o inclinar la parte superior hacia el interior para una ventilación constante y segura sin corrientes directas.',
    svgType: 'oscilo'
  },
  {
    name: 'Abatible Eje Vertical',
    badge: 'Apertura Tradicional',
    desc: 'La ventana se abre girando sobre las bisagras laterales. Ofrece una apertura del 100% del hueco, ideal para ventilar de inmediato la vivienda y facilitar un mantenimiento sencillo desde el interior.',
    svgType: 'vertical'
  },
  {
    name: 'Abatible Eje Horizontal',
    badge: 'Ideal para Zonas Altas',
    desc: 'La hoja se inclina hacia el interior desde la parte superior mediante compases de seguridad. Es muy adecuada para baños, sótanos o claraboyas donde se busca ventilación evitando intrusiones.',
    svgType: 'horizontal'
  },
  {
    name: 'Pivotante o Giratoria',
    badge: 'Estilo Arquitectónico',
    desc: 'La hoja gira sobre un eje central central (horizontal o vertical). Muy utilizada en arquitectura moderna para ventanas de gran tamaño, permitiendo regular la entrada de aire y limpiar ambas caras fácilmente.',
    svgType: 'pivot'
  },
  {
    name: 'Corredera Slide (Hermética)',
    badge: 'Hermeticidad y Espacio',
    desc: 'La hoja se desplaza horizontalmente de forma paralela y, al cerrarse, se presiona contra las juntas perimetrales. Aúna el ahorro de espacio de una corredera con el aislamiento térmico de una practicable.',
    svgType: 'slide'
  },
  {
    name: 'Corredera Tradicional',
    badge: 'Sencillez y Confort',
    desc: 'Hojas paralelas deslizándose sobre raíles. No consume espacio hacia el interior de la habitación, por lo que es la solución predilecta en pasillos, cocinas o accesos a terrazas de dimensiones reducidas.',
    svgType: 'traditional'
  }
];

function SystemDetailModal({ system, onClose, onQuote }) {
  if (!system) return null;

  // Prevent scroll on body when open and close on ESC
  useEffect(() => {
    document.body.style.overflow = 'hidden';
    const handleKeyDown = (e) => {
      if (e.key === 'Escape') onClose();
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => {
      document.body.style.overflow = '';
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [onClose]);

  return ReactDOM.createPortal(
    <div 
      className="fixed inset-0 z-[100] overflow-y-auto bg-ink/85 backdrop-blur-md flex items-center justify-center p-4 md:p-8 animate-modal-backdrop"
      onClick={onClose}
    >
      {/* Modal Box */}
      <div 
        className="relative w-full max-w-3xl bg-[#1c1816] text-cream rounded-3xl border border-amber/25 overflow-hidden shadow-2xl flex flex-col md:flex-row transform transition-all duration-300 my-auto cursor-default animate-modal-box"
        onClick={(e) => e.stopPropagation()}
        style={{
          boxShadow: '0 0 35px 2px rgba(233, 122, 56, 0.15), 0 0 70px 5px rgba(233, 122, 56, 0.08), 0 25px 50px -12px rgba(0, 0, 0, 0.5)'
        }}
      >
        {/* Close button */}
        <button 
          onClick={onClose}
          className="absolute top-4 right-4 z-50 flex h-10 w-10 items-center justify-center rounded-full bg-ink/40 text-cream/70 hover:text-white hover:bg-ink/70 transition-colors border border-white/5"
          aria-label="Cerrar"
        >
          <Icon name="x" size={20} />
        </button>

        {/* Left Column: Image & Badges */}
        <div className="md:w-5/12 bg-ink/30 relative flex flex-col justify-end p-6 min-h-[160px] md:min-h-full border-b md:border-b-0 md:border-r border-white/5">
          <div className="absolute inset-0 z-0">
            <img 
              src={system.image} 
              alt={system.name} 
              className="w-full h-full object-cover opacity-80" 
            />
            {/* Dark gradient overlay */}
            <div className="absolute inset-0 bg-gradient-to-t from-ink via-ink/40 to-transparent" />
          </div>

          {/* Label Content */}
          <div className="relative z-10 space-y-2">
            <span className="inline-flex text-[9px] font-semibold tracking-widest uppercase bg-amber text-ink px-2.5 py-1 rounded-full">
              {system.badge}
            </span>
            <h3 className="font-serif text-2xl font-light text-cream leading-tight">
              {system.name}
            </h3>
            <p className="text-[10px] text-muted font-light uppercase tracking-wider">
              Sistema {system.category} Kömmerling
            </p>
          </div>
        </div>

        {/* Right Column: Tech Specs & Specs Grid */}
        <div className="md:w-7/12 p-6 md:p-7 flex flex-col justify-between">
          <div className="space-y-4">
            <div>
              <h4 className="text-[10px] font-semibold uppercase tracking-widest text-amber mb-1">Descripción General</h4>
              <p className="text-xs md:text-sm font-light leading-relaxed text-cream/90">
                {system.desc}
              </p>
            </div>

            {/* Technical Specifications list */}
            <div>
              <h4 className="text-[10px] font-semibold uppercase tracking-widest text-amber mb-2">Ficha Técnica</h4>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-2 text-xs">
                <div className="flex justify-between items-center border-b border-white/5 pb-1">
                  <span className="text-muted font-light">Transmitancia Perfil (Uf)</span>
                  <span className="font-semibold text-cream">{system.uf}</span>
                </div>
                <div className="flex justify-between items-center border-b border-white/5 pb-1">
                  <span className="text-muted font-light">Transmitancia Ventana (Uw)</span>
                  <span className="font-semibold text-cream">{system.uw}</span>
                </div>
                <div className="flex justify-between items-center border-b border-white/5 pb-1">
                  <span className="text-muted font-light">Aislamiento Acústico</span>
                  <span className="font-semibold text-cream">{system.acoustic}</span>
                </div>
                <div className="flex justify-between items-center border-b border-white/5 pb-1">
                  <span className="text-muted font-light">Permeabilidad Aire</span>
                  <span className="font-semibold text-cream">{system.air}</span>
                </div>
                <div className="flex justify-between items-center border-b border-white/5 pb-1">
                  <span className="text-muted font-light">Estanqueidad Agua</span>
                  <span className="font-semibold text-cream">{system.water}</span>
                </div>
                <div className="flex justify-between items-center border-b border-white/5 pb-1">
                  <span className="text-muted font-light">Resistencia Viento</span>
                  <span className="font-semibold text-cream">{system.wind}</span>
                </div>
                <div className="flex justify-between items-center border-b border-white/5 pb-1 sm:col-span-2">
                  <span className="text-muted font-light">Espesor de Vidrio Admitido</span>
                  <span className="font-semibold text-cream">{system.glass}</span>
                </div>
              </div>
            </div>

            {/* Highlights List */}
            {system.highlights && system.highlights.length > 0 && (
              <div>
                <h4 className="text-[10px] font-semibold uppercase tracking-widest text-amber mb-1.5">Puntos Destacados</h4>
                <ul className="space-y-1">
                  {system.highlights.map((hl, i) => (
                    <li key={i} className="flex items-start gap-2 text-[11px] font-light text-muted">
                      <span className="text-amber shrink-0 mt-0.5"><Icon name="check" size={12} /></span>
                      <span>{hl}</span>
                    </li>
                  ))}
                </ul>
              </div>
            )}
          </div>

          {/* Action Button */}
          <div className="mt-6 pt-4 border-t border-white/5 flex flex-col sm:flex-row gap-3 items-stretch sm:items-center">
            <button 
              onClick={() => onQuote(system.name)}
              className="focus-ring flex items-center justify-center gap-2 rounded-xl bg-amber text-ink font-semibold py-2.5 px-4 text-xs transition-colors duration-200 hover:bg-[#F0904F]"
            >
              Pedir presupuesto para {system.name}
              <Icon name="arrow-right" size={14} />
            </button>
            <button 
              onClick={onClose}
              className="focus-ring flex items-center justify-center gap-2 rounded-xl border border-white/10 hover:bg-white/5 py-2.5 px-4 text-xs font-medium text-cream transition-colors duration-200"
            >
              Cerrar detalles
            </button>
          </div>
        </div>
      </div>
    </div>,
    document.body
  );
}

function Solucion({ onSelectSystemForQuote }) {
  const [activeTab, setActiveTab] = useState('claves');
  const [selectedHotspot, setSelectedHotspot] = useState(7); // default Aislamiento térmico
  const [systemFilter, setSystemFilter] = useState('abatibles');
  const [selectedSystem, setSelectedSystem] = useState(null);

  const tabs = [
    { id: 'claves', label: '7 Claves de Aislamiento', icon: 'key' },
    { id: 'sistemas', label: 'Sistemas Kömmerling', icon: 'layout-grid' },
    { id: 'aperturas', label: 'Formas de Apertura', icon: 'door-open' },
    { id: 'greenline', label: 'Compromiso Greenline®', icon: 'leaf' }
  ];

  const activeHotspotData = KEY_FACTORS.find(f => f.id === selectedHotspot) || KEY_FACTORS[6];
  const filteredSystems = SYSTEMS.filter(s => s.category === systemFilter);

  // Helper to render simplified technical window animations
  const renderApertureSVG = (type) => {
    const baseClass = "w-full h-32 text-amber/30 border border-surface/5 bg-ink/10 rounded-lg p-4 flex items-center justify-center transition-all duration-300 group-hover:bg-amber/5 group-hover:border-amber/20";
    if (type === 'oscilo') {
      return (
        <div className={baseClass}>
          <svg className="w-16 h-16 text-amber" viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5">
            <rect x="14" y="10" width="36" height="44" rx="2" strokeDasharray="2 2" opacity="0.4" />
            <g className="win-pane-oscilo">
              <rect x="16" y="12" width="32" height="40" rx="1" fill="currentColor" fillOpacity="0.05" stroke="currentColor" strokeWidth="1.5" />
              <circle cx="20" cy="32" r="1.5" fill="currentColor" />
              <path d="M16 12 L32 22 L48 12" stroke="currentColor" strokeWidth="1" strokeDasharray="3 3" opacity="0.5" />
            </g>
          </svg>
        </div>
      );
    }
    if (type === 'vertical') {
      return (
        <div className={baseClass}>
          <svg className="w-16 h-16 text-amber" viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5">
            <rect x="14" y="10" width="36" height="44" rx="2" strokeDasharray="2 2" opacity="0.4" />
            <g className="win-pane-vertical">
              <rect x="16" y="12" width="32" height="40" rx="1" fill="currentColor" fillOpacity="0.05" stroke="currentColor" strokeWidth="1.5" />
              <circle cx="44" cy="32" r="1.5" fill="currentColor" />
            </g>
          </svg>
        </div>
      );
    }
    if (type === 'horizontal') {
      return (
        <div className={baseClass}>
          <svg className="w-16 h-16 text-amber" viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5">
            <rect x="14" y="10" width="36" height="44" rx="2" strokeDasharray="2 2" opacity="0.4" />
            <g className="win-pane-horizontal">
              <rect x="16" y="12" width="32" height="40" rx="1" fill="currentColor" fillOpacity="0.05" stroke="currentColor" strokeWidth="1.5" />
              <circle cx="32" cy="16" r="1.5" fill="currentColor" />
            </g>
          </svg>
        </div>
      );
    }
    if (type === 'pivot') {
      return (
        <div className={baseClass}>
          <svg className="w-16 h-16 text-amber" viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5">
            <rect x="14" y="10" width="36" height="44" rx="2" strokeDasharray="2 2" opacity="0.4" />
            <g className="win-pane-pivot">
              <rect x="16" y="12" width="32" height="40" rx="1" fill="currentColor" fillOpacity="0.05" stroke="currentColor" strokeWidth="1.5" />
              <line x1="32" y1="12" x2="32" y2="52" strokeDasharray="2 2" />
              <circle cx="32" cy="32" r="2" fill="currentColor" />
            </g>
          </svg>
        </div>
      );
    }
    if (type === 'slide') {
      return (
        <div className={baseClass}>
          <svg className="w-16 h-16 text-amber" viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5">
            <rect x="12" y="12" width="40" height="40" rx="2" strokeDasharray="2 2" opacity="0.4" />
            <rect x="32" y="14" width="18" height="36" fill="currentColor" fillOpacity="0.05" stroke="currentColor" strokeWidth="1" />
            <g className="win-pane-slide-active">
              <rect x="14" y="14" width="18" height="36" fill="currentColor" fillOpacity="0.1" stroke="currentColor" strokeWidth="1.5" />
              <circle cx="28" cy="32" r="1.5" fill="currentColor" />
            </g>
            <line x1="32" y1="12" x2="32" y2="52" />
          </svg>
        </div>
      );
    }
    // traditional
    return (
      <div className={baseClass}>
        <svg className="w-16 h-16 text-amber" viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5">
          <rect x="12" y="12" width="40" height="40" rx="2" strokeDasharray="2 2" opacity="0.4" />
          <g className="win-pane-slide-double-left">
            <rect x="14" y="14" width="18" height="36" fill="currentColor" fillOpacity="0.05" stroke="currentColor" strokeWidth="1.5" />
            <circle cx="28" cy="32" r="1" fill="currentColor" />
          </g>
          <g className="win-pane-slide-double-right">
            <rect x="32" y="14" width="18" height="36" fill="currentColor" fillOpacity="0.05" stroke="currentColor" strokeWidth="1.5" />
            <circle cx="36" cy="32" r="1" fill="currentColor" />
          </g>
          <line x1="32" y1="12" x2="32" y2="52" />
        </svg>
      </div>
    );
  };

  return (
    <section id="solucion" className="relative z-10 bg-sand text-surface px-6 md:px-12 lg:px-16 py-20 md:py-28 lg:py-32" data-screen-label="Solución">
      <div className="max-w-6xl mx-auto">
        {/* Header Block */}
        <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center mb-16 lg:mb-20">
          <Reveal>
            <Eyebrow dark>La solución</Eyebrow>
            <h2 className="font-serif font-light leading-[1.05] tracking-[-0.02em] text-3xl md:text-4xl lg:text-5xl max-w-xl w-fit text-center">
              Ventanas Kömmerling
              <span className="block mt-2">Qestylo</span>
            </h2>
            <p className="mt-5 max-w-md text-[15px] font-light leading-relaxed text-surface/70">
              Tecnología alemana de perfil y el oficio de un instalador oficial en Valladolid.
              El producto manda, pero el resultado final lo define quien lo coloca en tu hogar.
            </p>
          </Reveal>
          <Reveal delay={120} className="hidden lg:block">
            <div className="rounded-2xl overflow-hidden max-h-[300px] lg:max-h-none" style={{ boxShadow: '0 30px 60px -25px rgba(42,37,33,0.3)' }}>
              <img src="assets/detalle-perfil.png" alt="Detalle macro del perfil de una ventana Kömmerling de altas prestaciones" className="w-full h-full object-cover aspect-video lg:aspect-square" loading="lazy" />
            </div>
          </Reveal>
        </div>

        {/* Tab Navigator */}
        <Reveal delay={180}>
          <div className="flex overflow-x-auto pb-3 mb-10 border-b border-surface/10 scrollbar-thin">
            <div className="flex space-x-1 w-full min-w-max">
              {tabs.map((tab) => (
                <button
                  key={tab.id}
                  onClick={() => setActiveTab(tab.id)}
                  className={`focus-ring flex items-center gap-2 px-5 py-3 rounded-lg text-sm font-medium transition-all duration-200 ${activeTab === tab.id
                    ? 'bg-surface text-cream shadow-md shadow-surface/10'
                    : 'text-surface/60 hover:text-surface hover:bg-surface/5'
                    }`}
                >
                  <Icon name={tab.icon} size={16} />
                  {tab.label}
                </button>
              ))}
            </div>
          </div>
        </Reveal>

        {/* Tab Panels */}
        <div className="min-h-[460px]">
          {/* TAB 1: 7 CLAVES DE AISLAMIENTO */}
          {activeTab === 'claves' && (
            <div className="grid lg:grid-cols-12 gap-10 items-center">
              {/* Left Column: Interactive SVG Profile Diagram */}
              <div className="lg:col-span-6 flex justify-center py-6 lg:py-0">
                <div className="relative w-full max-w-[340px] aspect-[4/5] bg-white/40 border border-surface/10 rounded-2xl p-6 flex items-center justify-center shadow-inner">
                  {/* Styled schematic profile path */}
                  <svg className="w-full h-full text-surface/80" viewBox="0 0 200 240" fill="none" xmlns="http://www.w3.org/2000/svg">
                    {/* Cajon persiana outline */}
                    <rect x="35" y="10" width="130" height="40" rx="3" stroke="currentColor" strokeWidth="1.5" strokeDasharray="3 3" fill="currentColor" fillOpacity="0.02" />
                    <line x1="50" y1="20" x2="150" y2="20" stroke="currentColor" strokeWidth="1" />
                    <circle cx="95" cy="30" r="10" stroke="currentColor" strokeWidth="1" />

                    {/* Window outer frame profile (left and bottom) */}
                    <path d="M25 50 L25 210 L175 210 L175 200 L65 200 L65 50 Z" stroke="currentColor" strokeWidth="1.8" fill="currentColor" fillOpacity="0.05" />
                    {/* Chambers dividers in frame */}
                    <line x1="45" y1="200" x2="45" y2="210" stroke="currentColor" strokeWidth="1" />
                    <line x1="25" y1="120" x2="65" y2="120" stroke="currentColor" strokeWidth="1" />
                    <line x1="25" y1="160" x2="65" y2="160" stroke="currentColor" strokeWidth="1" />
                    <line x1="110" y1="200" x2="110" y2="210" stroke="currentColor" strokeWidth="1" />

                    {/* Sash profile (hoja) inside frame */}
                    <path d="M55 70 L55 180 L145 180 L145 70 Z" stroke="currentColor" strokeWidth="1.8" fill="currentColor" fillOpacity="0.03" />
                    {/* Chambers dividers in sash */}
                    <line x1="85" y1="70" x2="85" y2="180" stroke="currentColor" strokeWidth="1" />
                    <line x1="115" y1="70" x2="115" y2="180" stroke="currentColor" strokeWidth="1" />
                    <line x1="55" y1="125" x2="145" y2="125" stroke="currentColor" strokeWidth="1" />

                    {/* Steel reinforcement inside sash */}
                    <rect x="92" y="95" width="16" height="50" stroke="currentColor" strokeWidth="2.5" fill="currentColor" fillOpacity="0.15" />

                    {/* Glass Unit (Double Glazing) extending from sash */}
                    <rect x="135" y="85" width="30" height="70" rx="1" stroke="currentColor" strokeWidth="1.5" fill="currentColor" fillOpacity="0.1" />
                    <line x1="143" y1="85" x2="143" y2="155" stroke="currentColor" strokeWidth="1" />
                    <line x1="157" y1="85" x2="157" y2="155" stroke="currentColor" strokeWidth="1" />

                    {/* Gaskets (juntas de goma) */}
                    <circle cx="55" cy="125" r="3" fill="#E97A38" />
                    <circle cx="65" cy="180" r="3" fill="#E97A38" />
                    <circle cx="145" cy="125" r="3" fill="#E97A38" />

                    {/* Hotspot buttons */}
                    {KEY_FACTORS.map((f) => (
                      <g
                        key={f.id}
                        className="cursor-pointer group/hotspot"
                        onClick={() => setSelectedHotspot(f.id)}
                      >
                        <circle
                          cx={f.pos.x * 2}
                          cy={f.pos.y * 2.4}
                          r={selectedHotspot === f.id ? "11" : "8"}
                          className={`transition-all duration-300 fill-amber ${selectedHotspot === f.id
                            ? 'stroke-surface stroke-2'
                            : 'stroke-white stroke-[1.5] hover:r-10 opacity-90'
                            }`}
                        />

                        <text
                          x={f.pos.x * 2}
                          y={f.pos.y * 2.4 + 4}
                          textAnchor="middle"
                          className="text-[10px] font-semibold fill-ink pointer-events-none select-none"
                        >
                          {f.id}
                        </text>
                      </g>
                    ))}
                  </svg>
                </div>
              </div>

              {/* Right Column: Hotspot Details */}
              <div className="lg:col-span-6 space-y-6">
                <div className="flex items-center gap-3">
                  <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-surface text-cream">
                    <Icon name={activeHotspotData.icon} size={22} className="text-amber" />
                  </div>
                  <div>
                    <span className="text-xs uppercase tracking-wider text-amber font-semibold">Clave {activeHotspotData.id} de 7</span>
                    <h3 className="font-serif text-2xl font-normal text-surface leading-tight">{activeHotspotData.title}</h3>
                  </div>
                </div>

                <div className="p-6 rounded-2xl bg-white/50 border border-surface/10 space-y-4">
                  <p className="text-xs uppercase tracking-widest text-surface/50 font-medium">{activeHotspotData.subtitle}</p>
                  <p className="text-sm md:text-[15px] font-light leading-relaxed text-surface/80">{activeHotspotData.text}</p>
                </div>

                <div className="flex flex-wrap gap-4 items-center">
                  <button
                    onClick={(e) => {
                      e.preventDefault();
                      const c = document.getElementById('contacto');
                      if (c) window.scrollTo({ top: c.getBoundingClientRect().top + window.scrollY - 20, behavior: 'smooth' });
                    }}
                    className="focus-ring inline-flex items-center justify-center gap-2 rounded-lg bg-surface text-cream px-6 py-3 text-sm font-medium transition-colors hover:bg-surface/90"
                  >
                    Pedir presupuesto con este sistema
                    <Icon name="arrow-right" size={16} />
                  </button>
                  <p className="text-xs text-surface/60 font-light max-w-xs leading-snug">
                    * Qestylo ofrece la cobertura total de la Red Oficial Kömmerling en Valladolid.
                  </p>
                </div>
              </div>
            </div>
          )}

          {/* TAB 2: SISTEMAS KÖMMERLING */}
          {activeTab === 'sistemas' && (
            <div className="space-y-8">
              {/* Category Filter */}
              <div className="flex justify-center border-b border-surface/10 pb-4">
                <div className="inline-flex rounded-lg bg-surface/5 p-1">
                  <button
                    onClick={() => setSystemFilter('abatibles')}
                    className={`focus-ring px-5 py-2 text-xs font-semibold rounded-md transition-all ${systemFilter === 'abatibles'
                      ? 'bg-surface text-cream shadow-sm'
                      : 'text-surface/60 hover:text-surface'
                      }`}
                  >
                    Sistemas Abatibles
                  </button>
                  <button
                    onClick={() => setSystemFilter('correderas')}
                    className={`focus-ring px-5 py-2 text-xs font-semibold rounded-md transition-all ${systemFilter === 'correderas'
                      ? 'bg-surface text-cream shadow-sm'
                      : 'text-surface/60 hover:text-surface'
                      }`}
                  >
                    Sistemas Correderas
                  </button>
                </div>
              </div>

              {/* Grid Layout */}
              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                {filteredSystems.map((sys, idx) => (
                  <div
                    key={idx}
                    onClick={() => setSelectedSystem(sys)}
                    className="flex flex-col justify-between p-6 rounded-2xl bg-white/60 border border-surface/10 hover:border-amber/30 transition-all duration-300 group hover:translate-y-[-4px] cursor-pointer"
                    style={{ boxShadow: '0 12px 30px -15px rgba(42,37,33,0.15)' }}
                  >
                    <div>
                      {sys.image && (
                        <div className="h-44 w-full rounded-xl overflow-hidden mb-4 border border-surface/5 bg-ink/5">
                          <img src={sys.image} alt={sys.name} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy" />
                        </div>
                      )}
                      <div className="flex justify-between items-start gap-2 mb-4">
                        <h4 className="font-serif text-lg font-normal text-surface leading-tight">{sys.name}</h4>
                        <span className="shrink-0 text-[10px] font-semibold bg-amber/10 text-amber px-2.5 py-1 rounded-full uppercase tracking-wider">
                          {sys.badge}
                        </span>
                      </div>
                      <p className="text-sm font-light leading-relaxed text-surface/75 mb-4">{sys.desc}</p>
                      
                      <div className="mb-6 flex items-center gap-1.5 text-xs font-semibold text-amber transition-colors group-hover:text-[#F0904F]">
                        <span>Ficha técnica</span>
                        <Icon name="maximize-2" size={12} className="transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
                      </div>
                    </div>

                    <div className="flex justify-between items-center pt-4 border-t border-surface/5 text-[11px] font-semibold text-surface/60">
                      <div className="flex items-center gap-1.5">
                        <Icon name="ruler" size={13} className="text-amber" />
                        Profundidad: {sys.depth}
                      </div>
                      <div className="flex items-center gap-1.5">
                        <Icon name="layers" size={13} className="text-amber" />
                        {sys.chambers}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* TAB 3: FORMAS DE APERTURA */}
          {activeTab === 'aperturas' && (
            <div className="space-y-4">
              <div className="text-center max-w-xl mx-auto mb-8">
                <p className="text-sm font-light text-surface/70 leading-relaxed">
                  Dependiendo del espacio de tu estancia y de tus necesidades de ventilación,
                  Qestylo fabricará las ventanas con el tipo de apertura Kömmerling idóneo.
                </p>
              </div>

              <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
                {APERTURES.map((ap, idx) => (
                  <div
                    key={idx}
                    className="group flex flex-col p-5 rounded-2xl bg-white/50 border border-surface/5 hover:border-surface/15 hover:bg-white/70 transition-all duration-300 shadow-sm"
                  >
                    {renderApertureSVG(ap.svgType)}
                    <div className="mt-4">
                      <div className="flex items-baseline justify-between mb-1.5">
                        <h4 className="font-serif text-base font-normal text-surface">{ap.name}</h4>
                        <span className="text-[9px] font-medium text-amber uppercase tracking-wider">{ap.badge}</span>
                      </div>
                      <p className="text-xs font-light leading-relaxed text-surface/75">{ap.desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* TAB 4: COMPROMISO GREENLINE® */}
          {activeTab === 'greenline' && (
            <div className="grid lg:grid-cols-12 gap-8 items-center">
              {/* text and description */}
              <div className="lg:col-span-7 space-y-6">
                <div className="space-y-2">
                  <div className="flex items-center gap-2 text-amber text-xs font-semibold uppercase tracking-wider">
                    <Icon name="leaf" size={16} />
                    Sello Greenline® de Kömmerling
                  </div>
                  <h3 className="font-serif text-3xl font-light text-surface leading-tight">
                    Respeto por el medio ambiente en cada perfil
                  </h3>
                </div>

                <p className="text-sm md:text-[15px] font-light leading-relaxed text-surface/80">
                  Los perfiles de PVC Kömmerling están diseñados con el sello patentado Greenline®,
                  que garantiza un balance ecológico ejemplar durante todo el ciclo de vida de la ventana.
                  Este compromiso descansa sobre tres pilares fundamentales que protegen tu salud y tu planeta:
                </p>

                <div className="space-y-4">
                  <div className="flex gap-3">
                    <div className="shrink-0 mt-0.5 text-amber"><Icon name="shield-check" size={20} /></div>
                    <div>
                      <h4 className="text-sm font-semibold text-surface">Formulación libre de metales pesados</h4>
                      <p className="text-xs font-light text-surface/75 leading-relaxed mt-1">
                        Estabilizadores a base de calcio y zinc respetuosos con el entorno, descartando
                        por completo el plomo o cadmio tradicionales de la carpintería antigua.
                      </p>
                    </div>
                  </div>

                  <div className="flex gap-3">
                    <div className="shrink-0 mt-0.5 text-amber"><Icon name="recycle" size={20} /></div>
                    <div>
                      <h4 className="text-sm font-semibold text-surface">Material 100% reciclable</h4>
                      <p className="text-xs font-light text-surface/75 leading-relaxed mt-1">
                        Todos los componentes plásticos de los perfiles Kömmerling pueden fundirse y reintroducirse
                        en nuevos ciclos de extrusión sin menoscabo de sus propiedades de aislamiento y rigidez.
                      </p>
                    </div>
                  </div>

                  <div className="flex gap-3">
                    <div className="shrink-0 mt-0.5 text-amber"><Icon name="globe" size={20} /></div>
                    <div>
                      <h4 className="text-sm font-semibold text-surface">Reducción de huella de carbono y energía</h4>
                      <p className="text-xs font-light text-surface/75 leading-relaxed mt-1">
                        El aislamiento térmico extremo de la ventana reduce la necesidad de consumo en climatización
                        de la vivienda en hasta un 70%, ahorrando emisiones de CO2 a la atmósfera.
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              {/* Graphic Card representing Sello Greenline */}
              <div className="lg:col-span-5 flex justify-center">
                <div
                  className="w-full max-w-[280px] rounded-2xl bg-surface text-cream p-8 flex flex-col justify-between relative overflow-hidden"
                  style={{
                    boxShadow: '0 20px 40px -15px rgba(20,17,15,0.4)',
                    minHeight: '320px'
                  }}
                >
                  <div className="absolute top-0 right-0 w-36 h-36 bg-amber/15 rounded-full blur-2xl pointer-events-none"></div>

                  <div className="flex justify-between items-start">
                    <span className="text-[10px] font-semibold uppercase tracking-widest text-muted">Certificación Ecológica</span>
                    <span className="text-amber"><Icon name="award" size={26} /></span>
                  </div>

                  <div className="space-y-2 relative z-10">
                    <div className="text-4xl font-extrabold text-amber leading-none">greenline®</div>
                    <div className="text-sm font-medium text-cream/90 uppercase tracking-widest">KÖMMERLING</div>
                    <p className="text-[11px] font-light leading-relaxed text-muted pt-2">
                      Fórmula patentada que garantiza la durabilidad óptima del perfil ante climas severos,
                      manteniendo la rigidez y color inalterados durante décadas.
                    </p>
                  </div>

                  <div className="border-t border-white/10 pt-4 flex items-center justify-between text-[10px] text-muted/80">
                    <span>100% Eco-Friendly</span>
                    <span>Qestylo Valladolid</span>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>

      {selectedSystem && (
        <SystemDetailModal 
          system={selectedSystem} 
          onClose={() => setSelectedSystem(null)} 
          onQuote={(sysName) => {
            setSelectedSystem(null);
            if (onSelectSystemForQuote) {
              onSelectSystemForQuote(sysName);
            }
            // smooth scroll to contact
            const c = document.getElementById('contacto');
            if (c) window.scrollTo({ top: c.getBoundingClientRect().top + window.scrollY - 20, behavior: 'smooth' });
          }}
        />
      )}
    </section>
  );
}

// ---------------- Puertas component ----------------
const DOOR_KEY_FACTORS = [
  {
    id: 1,
    title: 'Perfiles de máxima calidad',
    subtitle: 'Aislamiento termoacústico estructural',
    text: 'Los marcos, hojas y postes de las puertas Kömmerling cuentan con una elaborada geometría interna y múltiples cámaras de aire de gran espesor para retener el calor y silenciar ruidos molestos.',
    pos: { x: 26, y: 70 },
    icon: 'archive'
  },
  {
    id: 2,
    title: 'Herrajes de seguridad activa',
    subtitle: 'Resistencia contra intrusiones',
    text: 'Cerraduras multipunto avanzadas y bulones de seguridad antipalanca garantizan un bloqueo seguro frente a intrusiones, manteniendo la puerta completamente hermética al viento.',
    pos: { x: 74, y: 110 },
    icon: 'lock'
  },
  {
    id: 3,
    title: 'Diseños personalizables',
    subtitle: 'Estética adaptada a tu estilo',
    text: 'Crea tu puerta a medida eligiendo dimensiones, colores foliados, paneles decorativos macizos opacos o paneles acristalados de seguridad con acabados contemporáneos.',
    pos: { x: 50, y: 90 },
    icon: 'settings'
  },
  {
    id: 4,
    title: 'Refuerzo de acero zincado',
    subtitle: 'Estabilidad estructural inalterable',
    text: 'Un esqueleto de acero galvanizado de alta inercia recorre todo el interior del perfil. Evita deformaciones causadas por cambios de temperatura y garantiza un ajuste perfecto de por vida.',
    pos: { x: 30, y: 155 },
    icon: 'shield'
  },
  {
    id: 5,
    title: 'Eficiencia y drenaje inferior',
    subtitle: 'Adiós a las filtraciones de lluvia',
    text: 'Umbrales de aluminio con rotura de puente térmico y juntas de estanqueidad. Su pendiente interior está diseñada para una rápida evacuación del agua acumulada por temporales.',
    pos: { x: 50, y: 205 },
    icon: 'droplets'
  }
];

const DOOR_SYSTEMS = [
  {
    category: 'correderas',
    name: 'PremiSlide 76',
    badge: 'Estanqueidad Deslizante',
    depth: '76 mm',
    chambers: 'Junta de Compresión',
    desc: 'Sistema de corredera paralela hermética. La hoja se desplaza de forma lateral suave y se sella de forma frontal al cerrar, logrando el aislamiento de un sistema abatible.',
    image: 'assets/sistema-premislide-76-puerta.jpg',
    uf: '1,40 W/m²K',
    uw: 'desde 1,00 W/m²K',
    acoustic: 'hasta 43 dB',
    air: 'Clase 4 (Máxima)',
    water: 'Clase 9A',
    wind: 'Clase C5 (Máxima)',
    glass: 'hasta 50 mm',
    highlights: [
      'Cierre hermético por junta de compresión perimetral',
      'Deslizamiento paralelo suave que ahorra espacio',
      'Excelente resistencia al viento y lluvias castellanas'
    ]
  },
  {
    category: 'correderas',
    name: 'PremiDoor 76',
    badge: 'Corredera Elevadora',
    depth: '76 mm',
    chambers: 'Elevación e Inercia',
    desc: 'El sistema definitivo para grandes luces. Permite fabricar hojas acristaladas monumentales de hasta 6.5 metros de ancho que deslizan suavemente con el mínimo esfuerzo.',
    image: 'assets/sistema-premiline-puerta.jpg',
    uf: '1,30 W/m²K',
    uw: 'desde 0,80 W/m²K',
    acoustic: 'hasta 44 dB',
    air: 'Clase 4 (Máxima)',
    water: 'Clase 9A',
    wind: 'Clase C5 (Máxima)',
    glass: 'hasta 50 mm',
    highlights: [
      'Hojas monumentales de hasta 6.5 metros de ancho',
      'Deslizamiento por elevación sumamente suave',
      'Paso libre sin barreras (umbral embutido accesible)'
    ]
  },
  {
    category: 'correderas',
    name: 'PremiLine',
    badge: 'Línea Clásica',
    depth: 'Variable',
    chambers: 'Raíles Acero Inox',
    desc: 'Corredera tradicional y ligera. Deslizamiento fluido y silencioso con marcos estrechos. La mejor opción para optimizar el espacio útil en accesos estándar a balcones.',
    image: 'assets/sistema-premidoor-76.jpg',
    uf: '1,60 W/m²K',
    uw: 'desde 1,20 W/m²K',
    acoustic: 'hasta 40 dB',
    air: 'Clase 3',
    water: 'Clase 7A',
    wind: 'Clase C3',
    glass: 'hasta 28 mm',
    highlights: [
      'Rodamientos de acero inoxidable de alta suavidad',
      'Perfilería esbelta que maximiza la entrada de luz',
      'Excelente opción económica para balcones estándar'
    ]
  },
  {
    category: 'balconeras',
    name: 'KÖMMERLING Xtrem 76',
    badge: 'Aislamiento Balcón',
    depth: '76 mm',
    chambers: 'Doble / Junta Central',
    desc: 'Puerta balconera practicable y oscilobatiente. Aúna el perfil reforzado con una junta de estanqueidad óptima para aislar eficazmente del frío y viento del invierno castellano.',
    image: 'assets/sistema-xtrem-76-balconera.jpg',
    uf: '1,10 W/m²K',
    uw: 'desde 0,76 W/m²K',
    acoustic: 'hasta 47 dB',
    air: 'Clase 4 (Máxima)',
    water: 'Clase 9A',
    wind: 'Clase C5 (Máxima)',
    glass: 'hasta 48 mm',
    highlights: [
      'Idóneo para accesos frecuentes a balcones o terrazas',
      'Bisagras y cierres multipunto de gran resistencia',
      'Máximo aislamiento acústico y térmico'
    ]
  },
  {
    category: 'calle',
    name: 'KÖMMERLING Xtrem 76 Calle',
    badge: 'Acceso Entrada Principal',
    depth: '76 mm',
    chambers: 'Refuerzo de Alta Inercia',
    desc: 'Diseñada específicamente para portales y puertas principales. Admite cerraduras multipunto de seguridad, bisagras reforzadas y paneles macizos blindados decorativos.',
    image: 'assets/sistema-xtrem-76-calle.jpg',
    uf: '1,20 W/m²K',
    uw: 'desde 0,90 W/m²K',
    acoustic: 'hasta 45 dB',
    air: 'Clase 4 (Máxima)',
    water: 'Clase 9A',
    wind: 'Clase C5 (Máxima)',
    glass: 'hasta 48 mm',
    highlights: [
      'Refuerzos de acero de gran espesor soldados en esquinas',
      'Cerraduras multipunto avanzadas de alta seguridad',
      'Compatible con paneles ciegos blindados o vidrios de seguridad'
    ]
  },
  {
    category: 'especiales',
    name: 'KÖMMERLING Xtrem 76 Especiales',
    badge: 'Diseño a Medida',
    depth: 'Variable',
    chambers: 'Estructuras Complejas',
    desc: 'Puertas pivotantes de gran formato o diseños con formas complejas y arcos. Fabricamos a medida adaptándonos al hueco de tu fachada.',
    image: 'assets/sistema-xtrem-76-especiales.jpg',
    uf: '1,20 W/m²K',
    uw: 'desde 0,90 W/m²K',
    acoustic: 'hasta 45 dB',
    air: 'Clase 4',
    water: 'Clase 9A',
    wind: 'Clase C5',
    glass: 'hasta 48 mm',
    highlights: [
      'Flexibilidad absoluta para formas arqueadas o trapezoidales',
      'Estructuras pivotantes de gran formato contemporáneas',
      'Ideal para rehabilitaciones singulares o de valor histórico'
    ]
  }
];

const DOOR_APERTURES = [
  {
    name: 'Corredera Slide',
    badge: 'Corredera Hermética',
    desc: 'La hoja se desliza de forma paralela y ejerce presión frontal sobre las juntas perimetrales en la posición de cierre. Excelente aislamiento.',
    svgType: 'slide'
  },
  {
    name: 'Corredera Tradicional',
    badge: 'Ahorro de Espacio',
    desc: 'Hojas paralelas deslizantes que no invaden espacio de la estancia. Práctica y funcional para pasos estrechos y zonas de comedor.',
    svgType: 'traditional'
  },
  {
    name: 'Corredera Elevadora',
    badge: 'Formato Monumental',
    desc: 'Al girar la manilla, la hoja se eleva ligeramente sobre sus rodamientos deslizándose sin esfuerzo. Al cerrar, desciende sellando el hueco.',
    svgType: 'elevadora'
  },
  {
    name: 'Osciloparalela',
    badge: 'Doble Apertura',
    desc: 'Se desplaza horizontalmente para abrir y se inclina en la parte superior para ventilar sin necesidad de abrir la puerta por completo.',
    svgType: 'oscilo'
  },
  {
    name: 'Plegable en Acordeón',
    badge: 'Paso Libre Total',
    desc: 'Las hojas se pliegan unas sobre otras hacia un lateral. Permite conectar el salón con la terraza liberando todo el espacio de tránsito.',
    svgType: 'plegable'
  },
  {
    name: 'Calle Practicable',
    badge: 'Entrada y Seguridad',
    desc: 'Apertura lateral tradicional hacia el interior o exterior con bisagras de alta resistencia y herraje perimetral multipunto anti-intrusión.',
    svgType: 'vertical'
  }
];

function Puertas({ onSelectSystemForQuote }) {
  const [activeTab, setActiveTab] = useState('claves');
  const [selectedHotspot, setSelectedHotspot] = useState(1);
  const [systemFilter, setSystemFilter] = useState('correderas');
  const [selectedSystem, setSelectedSystem] = useState(null);

  const tabs = [
    { id: 'claves', label: '5 Claves de Seguridad', icon: 'key' },
    { id: 'sistemas', label: 'Sistemas de Puertas', icon: 'layout-grid' },
    { id: 'aperturas', label: 'Formas de Apertura', icon: 'door-open' }
  ];

  const activeHotspotData = DOOR_KEY_FACTORS.find(f => f.id === selectedHotspot) || DOOR_KEY_FACTORS[0];
  const filteredSystems = DOOR_SYSTEMS.filter(s => s.category === systemFilter);

  // Helper to render door opening types with 3D/2D animations
  const renderDoorApertureSVG = (type) => {
    const baseClass = "w-full h-24 text-amber/30 border border-white/5 bg-ink/30 rounded-lg p-4 flex items-center justify-center transition-all duration-300 group-hover:bg-amber/5 group-hover:border-white/10";
    if (type === 'slide') {
      return (
        <div className={baseClass}>
          <svg className="w-12 h-12 text-amber" viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5">
            <rect x="16" y="8" width="32" height="48" rx="2" strokeDasharray="2 2" opacity="0.3" />
            <rect x="32" y="10" width="14" height="44" fill="currentColor" fillOpacity="0.05" stroke="currentColor" />
            <g className="door-pane-slide">
              <rect x="18" y="10" width="14" height="44" fill="currentColor" fillOpacity="0.1" stroke="currentColor" />
              <line x1="28" y1="32" x2="26" y2="32" strokeWidth="2" />
            </g>
            <line x1="32" y1="8" x2="32" y2="56" />
          </svg>
        </div>
      );
    }
    if (type === 'traditional') {
      return (
        <div className={baseClass}>
          <svg className="w-12 h-12 text-amber" viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5">
            <rect x="16" y="8" width="32" height="48" rx="2" strokeDasharray="2 2" opacity="0.3" />
            <g className="door-pane-slide-left">
              <rect x="18" y="10" width="14" height="44" fill="currentColor" fillOpacity="0.05" stroke="currentColor" />
              <line x1="28" y1="32" x2="26" y2="32" strokeWidth="2" />
            </g>
            <g className="door-pane-slide-right">
              <rect x="32" y="10" width="14" height="44" fill="currentColor" fillOpacity="0.05" stroke="currentColor" />
              <line x1="36" y1="32" x2="38" y2="32" strokeWidth="2" />
            </g>
            <line x1="32" y1="8" x2="32" y2="56" />
          </svg>
        </div>
      );
    }
    if (type === 'elevadora') {
      return (
        <div className={baseClass}>
          <svg className="w-12 h-12 text-amber" viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5">
            <rect x="16" y="8" width="32" height="48" rx="2" strokeDasharray="2 2" opacity="0.3" />
            <rect x="32" y="10" width="14" height="44" fill="currentColor" fillOpacity="0.05" stroke="currentColor" />
            <g className="door-pane-lift-slide">
              <rect x="18" y="10" width="14" height="44" fill="currentColor" fillOpacity="0.1" stroke="currentColor" />
              <line x1="28" y1="32" x2="26" y2="32" strokeWidth="2" />
              <circle cx="21" cy="51" r="1.2" fill="currentColor" />
              <circle cx="29" cy="51" r="1.2" fill="currentColor" />
            </g>
            <line x1="32" y1="8" x2="32" y2="56" />
          </svg>
        </div>
      );
    }
    if (type === 'oscilo') {
      return (
        <div className={baseClass}>
          <svg className="w-12 h-12 text-amber" viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5">
            <rect x="16" y="8" width="32" height="48" rx="2" strokeDasharray="2 2" opacity="0.3" />
            <g className="door-pane-oscilo">
              <rect x="18" y="10" width="28" height="44" fill="currentColor" fillOpacity="0.05" stroke="currentColor" />
              <circle cx="42" cy="32" r="1.5" fill="currentColor" />
              <path d="M18 10 L32 20 L46 10" stroke="currentColor" strokeWidth="1" strokeDasharray="2 2" opacity="0.5" />
            </g>
          </svg>
        </div>
      );
    }
    if (type === 'plegable') {
      return (
        <div className={baseClass}>
          <svg className="w-12 h-12 text-amber" viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5">
            <rect x="16" y="8" width="32" height="48" rx="2" strokeDasharray="2 2" opacity="0.3" />
            <g className="door-fold-1">
              <rect x="18" y="10" width="9" height="44" fill="currentColor" fillOpacity="0.05" stroke="currentColor" />
            </g>
            <g className="door-fold-2">
              <rect x="27" y="10" width="9" height="44" fill="currentColor" fillOpacity="0.05" stroke="currentColor" />
            </g>
            <g className="door-fold-3">
              <rect x="36" y="10" width="10" height="44" fill="currentColor" fillOpacity="0.05" stroke="currentColor" />
              <circle cx="43" cy="32" r="1" fill="currentColor" />
            </g>
          </svg>
        </div>
      );
    }
    // standard / vertical street door
    return (
      <div className={baseClass}>
        <svg className="w-12 h-12 text-amber" viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5">
          <rect x="16" y="8" width="32" height="48" rx="2" strokeDasharray="2 2" opacity="0.3" />
          <g className="door-pane-vertical">
            <rect x="18" y="10" width="28" height="44" fill="currentColor" fillOpacity="0.05" stroke="currentColor" />
            <line x1="42" y1="32" x2="42" y2="28" strokeWidth="2" />
          </g>
        </svg>
      </div>
    );
  };

  return (
    <section id="puertas" className="relative z-10 bg-ink text-cream px-6 md:px-12 lg:px-16 py-20 md:py-28 lg:py-32" data-screen-label="Puertas">
      <div className="max-w-6xl mx-auto">
        {/* Header Block */}
        <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center mb-16 lg:mb-20">
          <Reveal>
            <Eyebrow>Puertas</Eyebrow>
            <h2 className="font-serif font-light leading-[1.05] tracking-[-0.02em] text-3xl md:text-4xl lg:text-5xl max-w-xl">
              Puertas de PVC Kömmerling: Seguridad y Elegancia
            </h2>
            <p className="mt-5 max-w-md text-[15px] font-light leading-relaxed text-muted">
              Desde las más sofisticadas correderas elevadoras para terraza hasta puertas de calle que
              proporcionan aislamiento térmico y gran seguridad. Personaliza dimensiones, paneles y tiradores.
            </p>
          </Reveal>
          <Reveal delay={120} className="hidden lg:block">
            <div className="rounded-2xl overflow-hidden max-h-[300px] lg:max-h-none border border-surface" style={{ boxShadow: '0 30px 60px -25px rgba(0,0,0,0.5)' }}>
              <img src="assets/detalle-puerta.jpg" alt="Detalle del perfil y bisagra de una puerta Kömmerling" className="w-full h-full object-cover aspect-video lg:aspect-square" loading="lazy" />
            </div>
          </Reveal>
        </div>

        {/* Tab Navigator */}
        <Reveal delay={180}>
          <div className="flex overflow-x-auto pb-3 mb-10 border-b border-white/10 scrollbar-thin">
            <div className="flex space-x-1 w-full min-w-max">
              {tabs.map((tab) => (
                <button
                  key={tab.id}
                  onClick={() => setActiveTab(tab.id)}
                  className={`focus-ring flex items-center gap-2 px-5 py-3 rounded-lg text-sm font-medium transition-all duration-200 ${activeTab === tab.id
                    ? 'bg-amber text-ink shadow-md'
                    : 'text-muted hover:text-cream hover:bg-white/5'
                    }`}
                >
                  <Icon name={tab.icon} size={16} />
                  {tab.label}
                </button>
              ))}
            </div>
          </div>
        </Reveal>

        {/* Tab Panels */}
        <div className="min-h-[460px]">
          {/* TAB 1: 5 CLAVES DE PUERTAS */}
          {activeTab === 'claves' && (
            <div className="grid lg:grid-cols-12 gap-10 items-center">
              {/* Left Column: Interactive Door Profile Diagram */}
              <div className="lg:col-span-6 flex justify-center py-6 lg:py-0">
                <div className="relative w-full max-w-[340px] aspect-[4/5] bg-surface/50 border border-white/10 rounded-2xl p-6 flex items-center justify-center shadow-inner">
                  <svg className="w-full h-full text-cream/80" viewBox="0 0 200 240" fill="none" xmlns="http://www.w3.org/2000/svg">
                    {/* Modern Entrance Door Schematic */}
                    <rect x="40" y="15" width="120" height="210" rx="3" stroke="currentColor" strokeWidth="1.5" fill="currentColor" fillOpacity="0.02" />
                    {/* Glass upper panels */}
                    <rect x="55" y="30" width="40" height="60" stroke="currentColor" strokeWidth="1" />
                    <rect x="105" y="30" width="40" height="60" stroke="currentColor" strokeWidth="1" />
                    {/* Lower decor panel */}
                    <rect x="55" y="105" width="90" height="100" stroke="currentColor" strokeWidth="1" strokeDasharray="3 3" />

                    {/* Handles and locks */}
                    <line x1="152" y1="110" x2="152" y2="135" stroke="currentColor" strokeWidth="3" />
                    <circle cx="152" cy="142" r="1.5" fill="currentColor" />

                    {/* Hotspot buttons */}
                    {DOOR_KEY_FACTORS.map((f) => (
                      <g
                        key={f.id}
                        className="cursor-pointer group/hotspot"
                        onClick={() => setSelectedHotspot(f.id)}
                      >
                        <circle
                          cx={f.pos.x * 2}
                          cy={f.pos.y * 1.1}
                          r={selectedHotspot === f.id ? "11" : "8"}
                          className={`transition-all duration-300 fill-amber ${selectedHotspot === f.id
                            ? 'stroke-ink stroke-2'
                            : 'stroke-white stroke-[1.5] hover:r-10 opacity-90'
                            }`}
                        />

                        <text
                          x={f.pos.x * 2}
                          y={f.pos.y * 1.1 + 4}
                          textAnchor="middle"
                          className="text-[10px] font-semibold fill-ink pointer-events-none select-none"
                        >
                          {f.id}
                        </text>
                      </g>
                    ))}
                  </svg>
                </div>
              </div>

              {/* Right Column: Hotspot Details */}
              <div className="lg:col-span-6 space-y-6">
                <div className="flex items-center gap-3">
                  <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-surface text-cream border border-white/10">
                    <Icon name={activeHotspotData.icon} size={22} className="text-amber" />
                  </div>
                  <div>
                    <span className="text-xs uppercase tracking-wider text-amber font-semibold">Clave {activeHotspotData.id} de 5</span>
                    <h3 className="font-serif text-2xl font-normal text-cream leading-tight">{activeHotspotData.title}</h3>
                  </div>
                </div>

                <div className="p-6 rounded-2xl bg-surface/50 border border-white/10 space-y-4">
                  <p className="text-xs uppercase tracking-widest text-muted font-medium">{activeHotspotData.subtitle}</p>
                  <p className="text-sm md:text-[15px] font-light leading-relaxed text-muted">{activeHotspotData.text}</p>
                </div>

                <div className="flex flex-wrap gap-4 items-center">
                  <button
                    onClick={goContacto}
                    className="focus-ring inline-flex items-center justify-center gap-2 rounded-lg bg-amber text-ink px-6 py-3 text-sm font-medium transition-colors hover:bg-amber/90"
                  >
                    Presupuesto para mi entrada
                    <Icon name="arrow-right" size={16} />
                  </button>
                  <p className="text-xs text-muted/70 font-light max-w-xs leading-snug">
                    * Fabricación local con herraje de seguridad homologado y la garantía de Qestylo.
                  </p>
                </div>
              </div>
            </div>
          )}

          {/* TAB 2: SISTEMAS DE PUERTAS */}
          {activeTab === 'sistemas' && (
            <div className="space-y-8">
              {/* Category Filter */}
              <div className="flex justify-center border-b border-white/10 pb-4">
                <div className="inline-flex rounded-lg bg-white/5 p-1">
                  {['correderas', 'balconeras', 'calle', 'especiales'].map((cat) => (
                    <button
                      key={cat}
                      onClick={() => setSystemFilter(cat)}
                      className={`focus-ring px-4 py-2 text-xs font-semibold rounded-md transition-all uppercase tracking-wider ${systemFilter === cat
                        ? 'bg-amber text-ink shadow-sm'
                        : 'text-muted hover:text-cream'
                        }`}
                    >
                      {cat}
                    </button>
                  ))}
                </div>
              </div>

              {/* Grid Layout */}
              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                {filteredSystems.map((sys, idx) => (
                  <div
                    key={idx}
                    onClick={() => setSelectedSystem(sys)}
                    className="flex flex-col justify-between p-6 rounded-2xl bg-surface/40 border border-white/10 hover:border-amber/30 transition-all duration-300 group hover:translate-y-[-4px] cursor-pointer"
                  >
                    <div>
                      {sys.image && (
                        <div className="h-44 w-full rounded-xl overflow-hidden mb-4 border border-white/5 bg-ink/5">
                          <img src={sys.image} alt={sys.name} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy" />
                        </div>
                      )}
                      <div className="flex justify-between items-start gap-2 mb-4">
                        <h4 className="font-serif text-lg font-normal text-cream leading-tight">{sys.name}</h4>
                        <span className="shrink-0 text-[10px] font-semibold bg-amber/10 text-amber px-2.5 py-1 rounded-full uppercase tracking-wider">
                          {sys.badge}
                        </span>
                      </div>
                      <p className="text-sm font-light leading-relaxed text-muted mb-4">{sys.desc}</p>

                      <div className="mb-6 flex items-center gap-1.5 text-xs font-semibold text-amber transition-colors group-hover:text-[#F0904F]">
                        <span>Ficha técnica</span>
                        <Icon name="maximize-2" size={12} className="transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
                      </div>
                    </div>

                    <div className="flex justify-between items-center pt-4 border-t border-white/5 text-[11px] font-semibold text-muted">
                      <div className="flex items-center gap-1.5">
                        <Icon name="ruler" size={13} className="text-amber" />
                        Profundidad: {sys.depth}
                      </div>
                      <div className="flex items-center gap-1.5">
                        <Icon name="layers" size={13} className="text-amber" />
                        {sys.chambers}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* TAB 3: APERTURAS */}
          {activeTab === 'aperturas' && (
            <div className="space-y-4">
              <div className="text-center max-w-xl mx-auto mb-8">
                <p className="text-sm font-light text-muted leading-relaxed">
                  Ofrecemos múltiples mecanismos de apertura para dar respuesta a tu arquitectura:
                  desde hojas correderas elevadoras hasta puertas plegables o practicables de gran resistencia.
                </p>
              </div>

              <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
                {DOOR_APERTURES.map((ap, idx) => (
                  <div
                    key={idx}
                    className="group flex flex-col p-5 rounded-2xl bg-surface/50 border border-white/5 hover:border-white/15 hover:bg-surface/70 transition-all duration-300 shadow-sm"
                  >
                    {renderDoorApertureSVG(ap.svgType)}
                    <div className="mt-4">
                      <div className="flex items-baseline justify-between mb-1.5">
                        <h4 className="font-serif text-base font-normal text-cream">{ap.name}</h4>
                        <span className="text-[9px] font-medium text-amber uppercase tracking-wider">{ap.badge}</span>
                      </div>
                      <p className="text-xs font-light leading-relaxed text-muted">{ap.desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>

      {selectedSystem && (
        <SystemDetailModal 
          system={selectedSystem} 
          onClose={() => setSelectedSystem(null)} 
          onQuote={(sysName) => {
            setSelectedSystem(null);
            if (onSelectSystemForQuote) {
              onSelectSystemForQuote(sysName);
            }
            // smooth scroll to contact
            const c = document.getElementById('contacto');
            if (c) window.scrollTo({ top: c.getBoundingClientRect().top + window.scrollY - 20, behavior: 'smooth' });
          }}
        />
      )}
    </section>
  );
}

// ---------------- Persianas component ----------------
const PERSIANA_KEY_FACTORS = [
  {
    id: 1,
    title: 'Cajón de PVC RolaPlus',
    subtitle: 'Hermeticidad y resistencia estructural',
    text: 'Extruido con el mismo PVC de altas prestaciones de Kömmerling. Su diseño multicámara ofrece una excelente rigidez y resistencia al impacto, garantizando que el cajón no se deforme con los años.',
    pos: { x: 22, y: 12 },
    icon: 'archive'
  },
  {
    id: 2,
    title: 'Aislamiento de Neopor interior',
    subtitle: 'Cero puentes térmicos y acústicos',
    text: 'Un bloque de poliestireno preformado de alta densidad (Neopor) recubre el interior del cajón. Evita que el frío de Valladolid se filtre y mitiga de forma drástica el ruido exterior.',
    pos: { x: 40, y: 16 },
    icon: 'thermometer-sun'
  },
  {
    id: 3,
    title: 'Eje y rodamientos de alta calidad',
    subtitle: 'Desplazamiento suave y duradero',
    text: 'Un eje metálico de alta resistencia sobre soportes de suave rodamiento facilita la subida y bajada de la persiana sin esfuerzos, reduciendo el desgaste y preparado para motores Könect.',
    pos: { x: 50, y: 23 },
    icon: 'settings'
  },
  {
    id: 4,
    title: 'Juntas de estanqueidad perimetral',
    subtitle: 'Adiós a las corrientes de aire',
    text: 'Juntas de goma coextruidas y cepillos de guiado bloquean el paso del viento y las corrientes de aire, al mismo tiempo que evitan el traqueteo de las lamas en días de tormenta.',
    pos: { x: 22, y: 42 },
    icon: 'wind'
  },
  {
    id: 5,
    title: 'Lamas aislantes (aluminio/PVC)',
    subtitle: 'Control solar y privacidad total',
    text: 'Las lamas del paño (de aluminio perfilado con inyección de poliuretano de alta densidad o de PVC multicámara) frenan la radiación solar directa y aíslan el cristal del clima exterior.',
    pos: { x: 34, y: 65 },
    icon: 'layers'
  }
];

const PERSIANA_SYSTEMS = [
  {
    name: 'Sistema RolaPlus',
    badge: 'Cajón de Altas Prestaciones',
    desc: 'El único cajón de persiana recomendado por Kömmerling. Gracias a su perfilería multicámara y sus exclusivas juntas de estanqueidad perimetral soldadas, mantiene los niveles de aislamiento térmico y acústico de tu ventana sin pérdidas.',
    bulletTitle: 'Aislamiento Térmico y Acústico',
    bulletText: 'Evita puentes térmicos y filtraciones de aire. Idóneo para reformas pasivas.',
    icon: 'archive',
    image: 'assets/sistema-rolaplus.jpg',
    thermal: 'Usb = 0,78 W/m²K',
    acoustic: 'hasta 40 dB',
    air: 'Clase 4 (Máxima)',
    water: 'Total (100% estanco)',
    insulation: 'Neopor de alta densidad integrado',
    highlights: [
      'Eliminación total del puente térmico superior de la ventana',
      'Juntas de estanqueidad soldadas en las esquinas del cajón',
      'Atenuación del ruido exterior en hasta 40 dB'
    ]
  },
  {
    name: 'Persianas VariNova',
    badge: 'Versatilidad y Mosquitera',
    desc: 'Un cajón de persiana de última generación y diseño compacto que se integra perfectamente con cualquier tipo de ventana. Admite la instalación opcional de mosquitera enrollable en el interior del propio cajón.',
    bulletTitle: 'Mosquitera Integrada Opcional',
    bulletText: 'Protección eficiente y limpia contra insectos sin invadir espacio exterior.',
    icon: 'settings',
    image: 'assets/sistema-varinova.jpg',
    thermal: 'Usb = 0,85 W/m²K',
    acoustic: 'hasta 38 dB',
    air: 'Clase 4 (Máxima)',
    water: 'Total (100% estanco)',
    insulation: 'Poliuretano / Neopor de alta densidad',
    highlights: [
      'Cajón compacto con mosquitera enrollable oculta opcional',
      'Acceso de registro interior sencillo para mantenimiento',
      'Perfilería exterior enrasable con el marco de la ventana'
    ]
  },
  {
    name: 'Könect (Protección solar domotizada)',
    badge: 'Motorización Inteligente',
    desc: 'Soluciones de automatización integradas. Automatiza la subida y bajada de persianas RolaPlus y VariNova mediante sensores solares, mandos a distancia o tu asistente de hogar inteligente, mejorando la eficiencia energética.',
    bulletTitle: 'Eficiencia Solar Inteligente',
    bulletText: 'Las persianas se cierran automáticamente cuando el sol incide con fuerza para evitar sobrecalentamiento.',
    icon: 'cpu',
    image: 'assets/sistema-konect.png',
    thermal: 'Mejora un 20% la eficiencia de la ventana',
    acoustic: 'Cierre hermético programado',
    air: 'Sin accionamiento por cinta (menor fuga)',
    water: 'Estanqueidad máxima',
    insulation: 'Integrable en cajones RolaPlus / VariNova',
    highlights: [
      'Motores silenciosos vía radio o cable',
      'Cierre y apertura automatizados según radiación solar',
      'Control por voz con Google Home, Alexa o Apple HomeKit'
    ]
  }
];

const CONTRAVENTANA_SYSTEMS = [
  {
    category: 'exterior',
    name: 'Contraventanas Exteriores (Sistema Líder)',
    badge: 'Oscurecimiento y Estilo',
    desc: 'La barrera exterior por excelencia. Fabricadas en PVC de alta resistencia con lamas fijas o móviles regulables. Aportan una excelente atenuación del ruido, oscurecimiento y un toque de personalidad rústica o tradicional a las fachadas.',
    details: 'Permite regular las lamas para controlar la entrada de luz y ventilación, protegiendo los cristales de tormentas.',
    icon: 'shield-alert',
    image: 'assets/detalle-persiana.jpg',
    thermal: 'Cámara de aire intermedia aislante',
    acoustic: 'Protección acústica de la fachada',
    air: 'Resistencia al viento Clase 6 (Máxima)',
    water: 'Protección directa de los cristales',
    insulation: 'Lamas de PVC greenline® reforzadas',
    highlights: [
      'Lamas fijas u orientables para regular luz y aire',
      'Herrajes de seguridad con alta resistencia a tormentas',
      'Aspecto tradicional rústico sin costes de mantenimiento'
    ]
  },
  {
    category: 'interior',
    name: 'Sistema Frailero (Contraventana Interior)',
    badge: 'Tradicional y Rústico',
    desc: 'Se instala de forma interna adosado a la hoja de la ventana. Es un clásico que se adapta al espacio de tu hogar y mejora sensiblemente las prestaciones térmicas del cerramiento al crear un colchón de aire cerrado.',
    details: 'Proporciona oscurecimiento absoluto en dormitorios sin necesidad de instalar cajón de persiana exterior.',
    icon: 'key-round',
    image: 'assets/detalle-perfil.png',
    thermal: 'Cámara de aire estanca interior',
    acoustic: 'Aislamiento de dormitorios superior',
    air: 'Hermético al paso de luz',
    water: 'Protección interior contra luz solar',
    insulation: 'Panel de PVC macizo machihembrado',
    highlights: [
      'Oscurecimiento total en dormitorios sin persiana exterior',
      'Especialmente recomendado para cascos históricos protegidos',
      'Añade un aislamiento térmico y acústico adicional'
    ]
  }
];

function PersianaDetailModal({ system, onClose, onQuote }) {
  if (!system) return null;

  // Prevent scroll on body when open and close on ESC
  useEffect(() => {
    document.body.style.overflow = 'hidden';
    const handleKeyDown = (e) => {
      if (e.key === 'Escape') onClose();
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => {
      document.body.style.overflow = '';
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [onClose]);

  return ReactDOM.createPortal(
    <div 
      className="fixed inset-0 z-[100] overflow-y-auto bg-ink/85 backdrop-blur-md flex items-center justify-center p-4 md:p-8 animate-modal-backdrop"
      onClick={onClose}
    >
      {/* Modal Box */}
      <div 
        className="relative w-full max-w-3xl bg-[#1c1816] text-cream rounded-3xl border border-amber/25 overflow-hidden shadow-2xl flex flex-col md:flex-row transform transition-all duration-300 my-auto cursor-default animate-modal-box"
        onClick={(e) => e.stopPropagation()}
        style={{
          boxShadow: '0 0 35px 2px rgba(233, 122, 56, 0.15), 0 0 70px 5px rgba(233, 122, 56, 0.08), 0 25px 50px -12px rgba(0, 0, 0, 0.5)'
        }}
      >
        {/* Close button */}
        <button 
          onClick={onClose}
          className="absolute top-4 right-4 z-50 flex h-10 w-10 items-center justify-center rounded-full bg-ink/40 text-cream/70 hover:text-white hover:bg-ink/70 transition-colors border border-white/5"
          aria-label="Cerrar"
        >
          <Icon name="x" size={20} />
        </button>

        {/* Left Column: Image & Badges */}
        <div className="md:w-5/12 bg-ink/30 relative flex flex-col justify-end p-6 min-h-[160px] md:min-h-full border-b md:border-b-0 md:border-r border-white/5">
          <div className="absolute inset-0 z-0">
            {system.image ? (
              <img 
                src={system.image} 
                alt={system.name} 
                className="w-full h-full object-cover opacity-80" 
              />
            ) : (
              <div className="w-full h-full bg-surface/50 flex items-center justify-center text-amber/20">
                <Icon name="shield-alert" size={80} />
              </div>
            )}
            {/* Dark gradient overlay */}
            <div className="absolute inset-0 bg-gradient-to-t from-ink via-ink/40 to-transparent" />
          </div>

          {/* Label Content */}
          <div className="relative z-10 space-y-2">
            <span className="inline-flex text-[9px] font-semibold tracking-widest uppercase bg-amber text-ink px-2.5 py-1 rounded-full">
              {system.badge || 'Protección Solar'}
            </span>
            <h3 className="font-serif text-2xl font-light text-cream leading-tight">
              {system.name}
            </h3>
            <p className="text-[10px] text-muted font-light uppercase tracking-wider">
              {system.category === 'interior' ? 'Contraventana Interior Kömmerling' : system.category === 'exterior' ? 'Contraventana Exterior Kömmerling' : 'Persiana Kömmerling'}
            </p>
          </div>
        </div>

        {/* Right Column: Tech Specs & Specs Grid */}
        <div className="md:w-7/12 p-6 md:p-7 flex flex-col justify-between">
          <div className="space-y-4">
            <div>
              <h4 className="text-[10px] font-semibold uppercase tracking-widest text-amber mb-1">Descripción General</h4>
              <p className="text-xs md:text-sm font-light leading-relaxed text-cream/90">
                {system.desc}
              </p>
            </div>

            {/* Technical Specifications list */}
            <div>
              <h4 className="text-[10px] font-semibold uppercase tracking-widest text-amber mb-2">Ficha Técnica</h4>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-2 text-xs">
                <div className="flex justify-between items-center border-b border-white/5 pb-1">
                  <span className="text-muted font-light">Aislamiento Térmico</span>
                  <span className="font-semibold text-cream">{system.thermal}</span>
                </div>
                <div className="flex justify-between items-center border-b border-white/5 pb-1">
                  <span className="text-muted font-light">Aislamiento Acústico</span>
                  <span className="font-semibold text-cream">{system.acoustic}</span>
                </div>
                <div className="flex justify-between items-center border-b border-white/5 pb-1">
                  <span className="text-muted font-light">Permeabilidad Aire</span>
                  <span className="font-semibold text-cream">{system.air}</span>
                </div>
                <div className="flex justify-between items-center border-b border-white/5 pb-1">
                  <span className="text-muted font-light">Estanqueidad Agua</span>
                  <span className="font-semibold text-cream">{system.water}</span>
                </div>
                <div className="flex justify-between items-center border-b border-white/5 pb-1 sm:col-span-2">
                  <span className="text-muted font-light">Material / Lamas</span>
                  <span className="font-semibold text-cream">{system.insulation}</span>
                </div>
              </div>
            </div>

            {/* Highlights List */}
            {system.highlights && system.highlights.length > 0 && (
              <div>
                <h4 className="text-[10px] font-semibold uppercase tracking-widest text-amber mb-1.5">Puntos Destacados</h4>
                <ul className="space-y-1">
                  {system.highlights.map((hl, i) => (
                    <li key={i} className="flex items-start gap-2 text-[11px] font-light text-muted">
                      <span className="text-amber shrink-0 mt-0.5"><Icon name="check" size={12} /></span>
                      <span>{hl}</span>
                    </li>
                  ))}
                </ul>
              </div>
            )}
          </div>

          {/* Action Button */}
          <div className="mt-6 pt-4 border-t border-white/5 flex flex-col sm:flex-row gap-3 items-stretch sm:items-center">
            <button 
              onClick={() => onQuote(system.name)}
              className="focus-ring flex items-center justify-center gap-2 rounded-xl bg-amber text-ink font-semibold py-2.5 px-4 text-xs transition-colors duration-200 hover:bg-[#F0904F]"
            >
              Pedir presupuesto para {system.name}
              <Icon name="arrow-right" size={14} />
            </button>
            <button 
              onClick={onClose}
              className="focus-ring flex items-center justify-center gap-2 rounded-xl border border-white/10 hover:bg-white/5 py-2.5 px-4 text-xs font-medium text-cream transition-colors duration-200"
            >
              Cerrar detalles
            </button>
          </div>
        </div>
      </div>
    </div>,
    document.body
  );
}

function Persianas({ onSelectSystemForQuote }) {
  const [activeTab, setActiveTab] = useState('claves');
  const [selectedHotspot, setSelectedHotspot] = useState(1);
  const [contraFilter, setContraFilter] = useState('exterior');
  const [selectedSystem, setSelectedSystem] = useState(null);

  const tabs = [
    { id: 'claves', label: '5 Claves del Cajón RolaPlus', icon: 'key' },
    { id: 'modelos', label: 'Modelos de Persianas', icon: 'image' },
    { id: 'funcionamiento', label: 'Funcionamiento y Apertura', icon: 'archive' },
    { id: 'contraventanas', label: 'Contraventanas', icon: 'shield-alert' }
  ];

  const activeHotspotData = PERSIANA_KEY_FACTORS.find(f => f.id === selectedHotspot) || PERSIANA_KEY_FACTORS[0];

  // Helper to render systems with dynamic SVG animations
  const renderPersianaSystemSVG = (name) => {
    const baseClass = "w-full h-24 text-amber/30 border border-surface/10 bg-white/40 rounded-lg p-3 flex items-center justify-center transition-all duration-300 group-hover:bg-amber/5 group-hover:border-amber/20 mb-4";
    if (name.includes('RolaPlus')) {
      return (
        <div className={baseClass}>
          <svg className="w-12 h-12 text-amber" viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5">
            {/* Box */}
            <rect x="18" y="10" width="28" height="20" rx="1.5" />
            <circle cx="32" cy="20" r="3" fill="currentColor" />
            {/* Guide rails */}
            <line x1="22" y1="30" x2="22" y2="54" strokeDasharray="2 2" opacity="0.5" />
            <line x1="42" y1="30" x2="42" y2="54" strokeDasharray="2 2" opacity="0.5" />
            {/* Slats rolling up on hover */}
            <g className="shutter-slats-roll">
              <line x1="24" y1="34" x2="40" y2="34" strokeWidth="3" strokeLinecap="round" />
              <line x1="24" y1="40" x2="40" y2="40" strokeWidth="3" strokeLinecap="round" />
              <line x1="24" y1="46" x2="40" y2="46" strokeWidth="3" strokeLinecap="round" />
              <line x1="24" y1="52" x2="40" y2="52" strokeWidth="3" strokeLinecap="round" />
            </g>
          </svg>
        </div>
      );
    }
    if (name.includes('VariNova')) {
      return (
        <div className={baseClass}>
          <svg className="w-12 h-12 text-amber" viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5">
            {/* Box */}
            <rect x="18" y="10" width="28" height="20" rx="1.5" />
            <circle cx="32" cy="20" r="3" fill="currentColor" />
            {/* Mosquitera (mesh) pulling down */}
            <g className="mosquitera-pull-down" opacity="0.7">
              <rect x="25" y="30" width="14" height="20" fill="currentColor" fillOpacity="0.15" strokeWidth="1" strokeDasharray="1 1" />
              <line x1="23" y1="50" x2="37" y2="50" strokeWidth="1.5" />
            </g>
            {/* Slats rolling up */}
            <g className="shutter-slats-roll-varinova">
              <line x1="24" y1="34" x2="40" y2="34" strokeWidth="3" strokeLinecap="round" />
              <line x1="24" y1="40" x2="40" y2="40" strokeWidth="3" strokeLinecap="round" />
              <line x1="24" y1="46" x2="40" y2="46" strokeWidth="3" strokeLinecap="round" />
            </g>
          </svg>
        </div>
      );
    }
    // Könect (Motorized + Smart pulse)
    return (
      <div className={baseClass}>
        <svg className="w-12 h-12 text-amber" viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5">
          <rect x="18" y="10" width="28" height="20" rx="1.5" />
          {/* wifi pulse */}
          <path d="M28 6 A6 6 0 0 1 36 6" className="wifi-pulse" strokeWidth="1.2" />
          <path d="M26 3 A10 10 0 0 1 38 3" className="wifi-pulse" strokeWidth="1" opacity="0.6" />
          <circle cx="32" cy="20" r="3" fill="currentColor" />
          {/* Automatic slats roll */}
          <g className="shutter-slats-motorized">
            <line x1="24" y1="34" x2="40" y2="34" strokeWidth="3" strokeLinecap="round" />
            <line x1="24" y1="40" x2="40" y2="40" strokeWidth="3" strokeLinecap="round" />
            <line x1="24" y1="46" x2="40" y2="46" strokeWidth="3" strokeLinecap="round" />
            <line x1="24" y1="52" x2="40" y2="52" strokeWidth="3" strokeLinecap="round" />
          </g>
        </svg>
      </div>
    );
  };

  return (
    <section id="persianas" className="relative z-10 bg-sand text-surface px-6 md:px-12 lg:px-16 py-20 md:py-28 lg:py-32" data-screen-label="Persianas">
      <div className="max-w-6xl mx-auto">
        {/* Header Block */}
        <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center mb-16 lg:mb-20">
          <Reveal>
            <Eyebrow dark>Persianas y Contraventanas</Eyebrow>
            <h2 className="font-serif font-light leading-[1.05] tracking-[-0.02em] text-3xl md:text-4xl lg:text-5xl max-w-xl">
              Persianas y Contraventanas Kömmerling
            </h2>
            <p className="mt-5 max-w-md text-[15px] font-light leading-relaxed text-surface/70">
              Protege tu vivienda de la radiación solar y el clima adverso, atenuando el ruido y mejorando
              el aislamiento total. Cajones de persiana estancos y contraventanas tradicionales.
            </p>
          </Reveal>
          <Reveal delay={120} className="hidden lg:block">
            <div className="rounded-2xl overflow-hidden max-h-[300px] lg:max-h-none shadow-lg" style={{ boxShadow: '0 30px 60px -25px rgba(42,37,33,0.3)' }}>
              <img src="assets/detalle-persiana.jpg" alt="Detalle del cajón de persiana RolaPlus de Kömmerling" className="w-full h-full object-cover aspect-video lg:aspect-square" loading="lazy" />
            </div>
          </Reveal>
        </div>

        {/* Tab Navigator */}
        <Reveal delay={180}>
          <div className="flex overflow-x-auto pb-3 mb-10 border-b border-surface/10 scrollbar-thin">
            <div className="flex space-x-1 w-full min-w-max">
              {tabs.map((tab) => (
                <button
                  key={tab.id}
                  onClick={() => setActiveTab(tab.id)}
                  className={`focus-ring flex items-center gap-2 px-5 py-3 rounded-lg text-sm font-medium transition-all duration-200 ${activeTab === tab.id
                    ? 'bg-surface text-cream shadow-md shadow-surface/10'
                    : 'text-surface/60 hover:text-surface hover:bg-surface/5'
                    }`}
                >
                  <Icon name={tab.icon} size={16} />
                  {tab.label}
                </button>
              ))}
            </div>
          </div>
        </Reveal>

        {/* Tab Panels */}
        <div className="min-h-[460px]">
          {/* TAB 1: 5 CLAVES DE PERSIANAS */}
          {activeTab === 'claves' && (
            <div className="grid lg:grid-cols-12 gap-10 items-center">
              {/* Left Column: Interactive Roller Shutter Profile Diagram */}
              <div className="lg:col-span-6 flex justify-center py-6 lg:py-0">
                <div className="relative w-full max-w-[340px] aspect-[4/5] bg-white/40 border border-surface/10 rounded-2xl p-6 flex items-center justify-center shadow-inner">
                  <svg className="w-full h-full text-surface/80" viewBox="0 0 200 240" fill="none" xmlns="http://www.w3.org/2000/svg">
                    {/* Shutter box (cajón de persiana) outline */}
                    <rect x="40" y="15" width="120" height="85" rx="4" stroke="currentColor" strokeWidth="1.8" fill="currentColor" fillOpacity="0.02" />

                    {/* Internal insulation block (Neopor) */}
                    <path d="M 43 18 L 157 18 L 157 45 C 130 45, 125 60, 125 80 L 125 97 L 43 97 Z" fill="currentColor" fillOpacity="0.12" stroke="currentColor" strokeWidth="1" strokeDasharray="2 2" />

                    {/* Roller axle (Eje metálico) */}
                    <circle cx="100" cy="55" r="14" stroke="currentColor" strokeWidth="1.5" />
                    <circle cx="100" cy="55" r="5" fill="currentColor" />

                    {/* Rolled up slats (Lamas enrolladas) */}
                    <circle cx="100" cy="55" r="28" stroke="currentColor" strokeWidth="1" strokeDasharray="3 3" />
                    <circle cx="100" cy="55" r="38" stroke="currentColor" strokeWidth="1" strokeDasharray="4 4" />

                    {/* Slats descending (Lamas bajando) */}
                    <line x1="68" y1="110" x2="68" y2="125" stroke="currentColor" strokeWidth="4" strokeLinecap="round" />
                    <line x1="68" y1="130" x2="68" y2="145" stroke="currentColor" strokeWidth="4" strokeLinecap="round" />
                    <line x1="68" y1="150" x2="68" y2="165" stroke="currentColor" strokeWidth="4" strokeLinecap="round" />
                    <line x1="68" y1="170" x2="68" y2="185" stroke="currentColor" strokeWidth="4" strokeLinecap="round" />
                    <line x1="68" y1="190" x2="68" y2="205" stroke="currentColor" strokeWidth="4" strokeLinecap="round" />
                    <line x1="68" y1="210" x2="68" y2="225" stroke="currentColor" strokeWidth="4" strokeLinecap="round" />

                    {/* Guide track / Carril guía */}
                    <line x1="63" y1="100" x2="63" y2="230" stroke="currentColor" strokeWidth="1.2" />
                    <line x1="73" y1="100" x2="73" y2="230" stroke="currentColor" strokeWidth="1.2" strokeDasharray="2 2" />

                    {/* Window Frame below the box */}
                    <rect x="76" y="100" width="80" height="130" rx="2" stroke="currentColor" strokeWidth="1.5" fill="currentColor" fillOpacity="0.02" />
                    <line x1="76" y1="165" x2="156" y2="165" stroke="currentColor" strokeWidth="1.2" />

                    {/* Hotspot buttons */}
                    {PERSIANA_KEY_FACTORS.map((f) => (
                      <g
                        key={f.id}
                        className="cursor-pointer group/hotspot"
                        onClick={() => setSelectedHotspot(f.id)}
                      >
                        <circle
                          cx={f.pos.x * 2}
                          cy={f.pos.y * 2.4}
                          r={selectedHotspot === f.id ? "11" : "8"}
                          className={`transition-all duration-300 fill-amber ${selectedHotspot === f.id
                            ? 'stroke-surface stroke-2'
                            : 'stroke-white stroke-[1.5] hover:r-10 opacity-90'
                            }`}
                        />

                        <text
                          x={f.pos.x * 2}
                          y={f.pos.y * 2.4 + 4}
                          textAnchor="middle"
                          className="text-[10px] font-semibold fill-ink pointer-events-none select-none"
                        >
                          {f.id}
                        </text>
                      </g>
                    ))}
                  </svg>
                </div>
              </div>

              {/* Right Column: Hotspot Details */}
              <div className="lg:col-span-6 space-y-6">
                <div className="flex items-center gap-3">
                  <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-surface text-cream border border-surface/10">
                    <Icon name={activeHotspotData.icon} size={22} className="text-amber" />
                  </div>
                  <div>
                    <span className="text-xs uppercase tracking-wider text-amber font-semibold">Clave {activeHotspotData.id} de 5</span>
                    <h3 className="font-serif text-2xl font-normal text-surface leading-tight">{activeHotspotData.title}</h3>
                  </div>
                </div>

                <div className="p-6 rounded-2xl bg-white/50 border border-surface/10 space-y-4">
                  <p className="text-xs uppercase tracking-widest text-surface/50 font-medium">{activeHotspotData.subtitle}</p>
                  <p className="text-sm md:text-[15px] font-light leading-relaxed text-surface/80">{activeHotspotData.text}</p>
                </div>

                <div className="flex flex-wrap gap-4 items-center">
                  <button
                    onClick={(e) => {
                      e.preventDefault();
                      const c = document.getElementById('contacto');
                      if (c) window.scrollTo({ top: c.getBoundingClientRect().top + window.scrollY - 20, behavior: 'smooth' });
                    }}
                    className="focus-ring inline-flex items-center justify-center gap-2 rounded-lg bg-surface text-cream px-6 py-3 text-sm font-medium transition-colors hover:bg-surface/90"
                  >
                    Presupuesto para mis persianas
                    <Icon name="arrow-right" size={16} />
                  </button>
                  <p className="text-xs text-surface/60 font-light max-w-xs leading-snug">
                    * Sistema RolaPlus oficial Kömmerling, instalado con las máximas garantías de estanqueidad.
                  </p>
                </div>
              </div>
            </div>
          )}

          {/* TAB 2: MODELOS DE PERSIANAS */}
          {activeTab === 'modelos' && (
            <div className="grid lg:grid-cols-3 gap-6">
              {PERSIANA_SYSTEMS.map((sys, idx) => (
                <div
                  key={idx}
                  onClick={() => setSelectedSystem(sys)}
                  className="flex flex-col justify-between p-6 rounded-2xl bg-white/60 border border-surface/10 hover:border-amber/30 transition-all duration-300 group hover:translate-y-[-4px] cursor-pointer"
                  style={{ boxShadow: '0 12px 30px -15px rgba(42,37,33,0.1)' }}
                >
                  <div>
                    {sys.image && (
                      <div className="h-44 w-full rounded-xl overflow-hidden mb-4 border border-surface/5 bg-ink/5">
                        <img src={sys.image} alt={sys.name} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy" />
                      </div>
                    )}
                    <div className="space-y-4">
                      <div className="flex justify-between items-start gap-2">
                        <h4 className="font-serif text-lg font-normal text-surface leading-tight">{sys.name}</h4>
                        <span className="shrink-0 text-[10px] font-semibold bg-amber/10 text-amber px-2.5 py-1 rounded-full uppercase tracking-wider">
                          {sys.badge}
                        </span>
                      </div>
                      <p className="text-sm font-light leading-relaxed text-surface/75 mb-2">{sys.desc}</p>
                      
                      <div className="flex items-center gap-1.5 text-xs font-semibold text-amber transition-colors group-hover:text-[#F0904F]">
                        <span>Ficha técnica</span>
                        <Icon name="maximize-2" size={12} className="transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
                      </div>
                    </div>
                  </div>

                  <div className="mt-6 pt-4 border-t border-surface/5 flex gap-2.5 items-start">
                    <span className="text-amber shrink-0 mt-0.5"><Icon name={sys.icon} size={15} /></span>
                    <div>
                      <h5 className="text-[11px] font-semibold text-surface">{sys.bulletTitle}</h5>
                      <p className="text-[11px] font-light text-surface/60 mt-0.5 leading-snug">{sys.bulletText}</p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}

          {/* TAB 3: FUNCIONAMIENTO Y APERTURA */}
          {activeTab === 'funcionamiento' && (
            <div className="grid lg:grid-cols-3 gap-6">
              {PERSIANA_SYSTEMS.map((sys, idx) => (
                <div
                  key={idx}
                  className="flex flex-col justify-between p-6 rounded-2xl bg-white/60 border border-surface/10 hover:border-amber/30 transition-all duration-300 group hover:translate-y-[-4px]"
                  style={{ boxShadow: '0 12px 30px -15px rgba(42,37,33,0.1)' }}
                >
                  <div>
                    {renderPersianaSystemSVG(sys.name)}
                    <div className="space-y-4">
                      <div className="flex justify-between items-start gap-2">
                        <h4 className="font-serif text-lg font-normal text-surface leading-tight">{sys.name}</h4>
                        <span className="shrink-0 text-[10px] font-semibold bg-amber/10 text-amber px-2.5 py-1 rounded-full uppercase tracking-wider">
                          {sys.badge}
                        </span>
                      </div>
                      <p className="text-sm font-light leading-relaxed text-surface/75">{sys.desc}</p>
                    </div>
                  </div>

                  <div className="mt-6 pt-4 border-t border-surface/5 flex gap-2.5 items-start">
                    <span className="text-amber shrink-0 mt-0.5"><Icon name={sys.icon} size={15} /></span>
                    <div>
                      <h5 className="text-[11px] font-semibold text-surface">{sys.bulletTitle}</h5>
                      <p className="text-[11px] font-light text-surface/60 mt-0.5 leading-snug">{sys.bulletText}</p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}

          {/* TAB 3: CONTRAVENTANAS */}
          {activeTab === 'contraventanas' && (
            <div className="space-y-8">
              {/* Filter */}
              <div className="flex justify-center border-b border-surface/10 pb-4">
                <div className="inline-flex rounded-lg bg-surface/5 p-1">
                  <button
                    onClick={() => setContraFilter('exterior')}
                    className={`focus-ring px-5 py-2 text-xs font-semibold rounded-md transition-all ${contraFilter === 'exterior'
                      ? 'bg-surface text-cream shadow-sm'
                      : 'text-surface/60 hover:text-surface'
                      }`}
                  >
                    Contraventana Exterior
                  </button>
                  <button
                    onClick={() => setContraFilter('interior')}
                    className={`focus-ring px-5 py-2 text-xs font-semibold rounded-md transition-all ${contraFilter === 'interior'
                      ? 'bg-surface text-cream shadow-sm'
                      : 'text-surface/60 hover:text-surface'
                      }`}
                  >
                    Contraventana Interior (Frailero)
                  </button>
                </div>
              </div>

              {/* Grid content */}
              <div className="max-w-4xl mx-auto">
                {CONTRAVENTANA_SYSTEMS.filter(s => s.category === contraFilter).map((sys, idx) => (
                  <div
                    key={idx}
                    onClick={() => setSelectedSystem(sys)}
                    className="grid md:grid-cols-2 gap-10 items-center p-8 rounded-2xl bg-white/60 border border-surface/10 cursor-pointer group hover:translate-y-[-2px] transition-all duration-300"
                    style={{ boxShadow: '0 20px 40px -25px rgba(42,37,33,0.1)' }}
                  >
                    <div className="space-y-4">
                      <div className="flex items-center gap-3 text-amber">
                        <Icon name={sys.icon} size={22} />
                        <h4 className="font-serif text-xl font-normal text-surface leading-tight">{sys.name}</h4>
                      </div>
                      <p className="text-sm font-light leading-relaxed text-surface/85">{sys.desc}</p>
                      <div className="text-xs font-light text-surface/60 leading-relaxed italic bg-surface/5 p-3 rounded-lg border-l-2 border-amber">
                        {sys.details}
                      </div>
                      
                      <div className="flex items-center gap-1.5 text-xs font-semibold text-amber transition-colors group-hover:text-[#F0904F]">
                        <span>Ficha técnica</span>
                        <Icon name="maximize-2" size={12} className="transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
                      </div>
                    </div>
                    {/* SVG detail illustration */}
                    <div className="hover-container h-48 bg-ink/5 rounded-xl border border-surface/5 flex items-center justify-center p-4">
                      {contraFilter === 'exterior' ? (
                        <svg className="w-24 h-24 text-amber/40" viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5">
                          {/* Frame */}
                          <rect x="12" y="8" width="40" height="48" rx="2" strokeDasharray="2 2" opacity="0.3" />

                          {/* Left shutter leaf */}
                          <g className="contra-leaf-left">
                            <rect x="14" y="10" width="18" height="44" fill="currentColor" fillOpacity="0.08" stroke="currentColor" />
                            <line x1="18" y1="16" x2="28" y2="16" strokeDasharray="1 1" />
                            <line x1="18" y1="24" x2="28" y2="24" strokeDasharray="1 1" />
                            <line x1="18" y1="32" x2="28" y2="32" strokeDasharray="1 1" />
                            <line x1="18" y1="40" x2="28" y2="40" strokeDasharray="1 1" />
                          </g>

                          {/* Right shutter leaf */}
                          <g className="contra-leaf-right">
                            <rect x="32" y="10" width="18" height="44" fill="currentColor" fillOpacity="0.08" stroke="currentColor" />
                            <line x1="36" y1="16" x2="46" y2="16" strokeDasharray="1 1" />
                            <line x1="36" y1="24" x2="46" y2="24" strokeDasharray="1 1" />
                            <line x1="36" y1="32" x2="46" y2="32" strokeDasharray="1 1" />
                            <line x1="36" y1="40" x2="46" y2="40" strokeDasharray="1 1" />
                          </g>
                        </svg>
                      ) : (
                        <svg className="w-24 h-24 text-amber/40" viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5">
                          {/* Frame */}
                          <rect x="12" y="8" width="40" height="48" rx="2" strokeDasharray="2 2" opacity="0.3" />

                          {/* Left inner leaf */}
                          <g className="frailero-leaf-left">
                            <rect x="14" y="10" width="18" height="44" fill="currentColor" fillOpacity="0.12" stroke="currentColor" />
                            <rect x="18" y="14" width="10" height="36" fill="currentColor" fillOpacity="0.1" stroke="currentColor" strokeWidth="1" />
                          </g>

                          {/* Right inner leaf */}
                          <g className="frailero-leaf-right">
                            <rect x="32" y="10" width="18" height="44" fill="currentColor" fillOpacity="0.12" stroke="currentColor" />
                            <rect x="36" y="14" width="10" height="36" fill="currentColor" fillOpacity="0.1" stroke="currentColor" strokeWidth="1" />
                          </g>
                        </svg>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>

      {selectedSystem && (
        <PersianaDetailModal 
          system={selectedSystem} 
          onClose={() => setSelectedSystem(null)} 
          onQuote={(sysName) => {
            setSelectedSystem(null);
            if (onSelectSystemForQuote) {
              onSelectSystemForQuote(sysName);
            }
            // smooth scroll to contact
            const c = document.getElementById('contacto');
            if (c) window.scrollTo({ top: c.getBoundingClientRect().top + window.scrollY - 20, behavior: 'smooth' });
          }}
        />
      )}
    </section>
  );
}

// ---------------- 6 · CÓMO FUNCIONA ----------------
const STEPS = [
  {
    n: '01',
    icon: 'message-square',
    title: 'Asesoramiento Técnico',
    text: 'Analizamos las necesidades acústicas y térmicas de tu zona en Valladolid (orientación solar, ruido de tráfico, etc.) para aconsejarte los sistemas óptimos.'
  },
  {
    n: '02',
    icon: 'ruler',
    title: 'Medición Digital',
    text: 'Visitamos tu hogar sin compromiso para realizar una toma de medidas láser exacta y estudiar el premarco o estado de las cajas de persiana antiguas.'
  },
  {
    n: '03',
    icon: 'file-text',
    title: 'Presupuesto Cerrado',
    text: 'Elaboramos una propuesta técnica por escrito, con desglose transparente de perfiles Kömmerling, vidrios y herrajes. Precio final garantizado sin sorpresas.'
  },
  {
    n: '04',
    icon: 'hammer',
    title: 'Instalación Oficial Red CAES',
    text: 'Nuestro equipo de instaladores oficiales realiza el montaje rápido y limpio. Aplicamos espumas elásticas de poliuretano y sellado estanco termoacústico.'
  },
  {
    n: '05',
    icon: 'recycle',
    title: 'Gestión de Residuos',
    text: 'Desmontamos las ventanas antiguas y las transportamos a plantas autorizadas para el reciclaje de aluminio, madera y PVC, cuidando de la economía circular.'
  },
  {
    n: '06',
    icon: 'shield-check',
    title: 'Garantía Post-Venta Oficial',
    text: 'Activamos la cobertura de la marca Kömmerling (Red Oficial CAES) de Qestylo. Mantenemos asistencia directa para cualquier ajuste técnico posterior.'
  }
];

function ComoFunciona() {
  return (
    <section id="como" className="relative z-10 bg-ink px-6 md:px-12 lg:px-16 py-20 md:py-28 lg:py-32" data-screen-label="Cómo funciona">
      <div className="max-w-6xl mx-auto">
        <Reveal>
          <Eyebrow>Cómo funciona</Eyebrow>
          <h2 className="font-serif font-light leading-[1.05] tracking-[-0.02em] text-3xl md:text-4xl lg:text-5xl max-w-2xl text-cream">
            Tu camino hacia un hogar mejor aislado
          </h2>
          <p className="mt-4 max-w-md text-sm font-light text-muted leading-relaxed">
            De tu primera consulta al servicio post-venta. Nos encargamos de todo el proceso de forma profesional y llave en mano.
          </p>
        </Reveal>

        <div className="mt-16 grid sm:grid-cols-2 lg:grid-cols-3 gap-8 relative">
          {STEPS.map((s, i) => (
            <Reveal key={i} delay={i * 100} className="relative p-6 rounded-2xl bg-surface/30 border border-white/5 space-y-4">
              <div className="flex justify-between items-center">
                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-amber/10 text-amber">
                  <Icon name={s.icon} size={20} />
                </div>
                <span className="text-4xl font-extrabold text-white/5 leading-none tabular-nums select-none">{s.n}</span>
              </div>
              <h3 className="font-serif text-lg font-normal text-cream leading-snug">{s.title}</h3>
              <p className="text-xs font-light leading-relaxed text-muted">{s.text}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------- 7 · CREDENCIALES ----------------
const SEALS = [
  { label: 'Distribuidor Oficial Kömmerling', icon: 'star', primary: true },
  { label: '+25 años en reformas', icon: 'calendar' },
  { label: 'Tienda física en Valladolid', icon: 'store' },
  { label: 'Instaladores homologados', icon: 'user-check' },
  { label: 'Garantía oficial Kömmerling', icon: 'shield-check', primary: true },
  { label: 'Presupuesto a medida gratuito', icon: 'file-text' },
  { label: 'Financiación a tu medida', icon: 'credit-card' },
  { label: 'Ahorro energético garantizado', icon: 'leaf' },
];

function LiveCounterCard() {
  const [count, setCount] = useState(324);
  const [hasAnimated, setHasAnimated] = useState(false);
  const cardRef = useRef(null);

  // Animate count-up when in view
  useEffect(() => {
    const el = cardRef.current;
    if (!el) return;

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting && !hasAnimated) {
            setHasAnimated(true);
            let start = 295;
            const end = 324;
            const duration = 1800; // 1.8 seconds
            const stepTime = Math.abs(Math.floor(duration / (end - start)));
            
            const timer = setInterval(() => {
              start += 1;
              setCount(start);
              if (start >= end) {
                clearInterval(timer);
              }
            }, stepTime);
          }
        });
      },
      { threshold: 0.1 }
    );

    observer.observe(el);
    return () => observer.disconnect();
  }, [hasAnimated]);

  // Live ticker increment: add 1 reform every 3 minutes
  useEffect(() => {
    if (!hasAnimated) return;

    const interval = setInterval(() => {
      setCount((prev) => prev + 1);
    }, 180000);

    return () => clearInterval(interval);
  }, [hasAnimated]);

  // Format number with dots (e.g. 324)
  const formatNumber = (num) => {
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
  };

  return (
    <div
      ref={cardRef}
      className="liquid-glass rounded-3xl p-7 flex flex-col justify-between h-full border border-white/10 relative overflow-hidden"
      style={{ boxShadow: '0 20px 50px -15px rgba(233,122,56,0.15)' }}
    >
      {/* Background glow */}
      <div className="absolute -right-16 -top-16 w-40 h-40 bg-amber/10 rounded-full blur-3xl pointer-events-none"></div>

      <div>
        {/* Live indicator header */}
        <div className="flex items-center justify-between mb-6">
          <span className="text-[10px] font-semibold uppercase tracking-widest text-muted">Estadísticas en vivo</span>
          <div className="flex items-center gap-1.5 bg-emerald-500/10 text-emerald-400 rounded-full px-2.5 py-1 text-[10px] font-semibold border border-emerald-500/20">
            <span className="relative flex h-2 w-2">
              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
              <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
            </span>
            CONEXIÓN ACTIVA
          </div>
        </div>

        {/* Counter Number */}
        <div className="mb-4">
          <div className="text-5xl md:text-6xl font-serif font-light text-cream tracking-tight tabular-nums">
            {formatNumber(count)}
          </div>
          <p className="text-[13px] font-medium text-amber uppercase tracking-wider mt-2">
            Reformas realizadas en Valladolid
          </p>
        </div>

        <p className="text-sm font-light leading-relaxed text-muted mb-6">
          Nuestra fábrica local no para. Cada reforma representa aislamiento acústico de primer nivel, ahorro en calefacción y una familia satisfecha en la provincia.
        </p>
      </div>

      {/* Sparkline Graph */}
      <div className="w-full pt-4 border-t border-white/5">
        <div className="flex justify-between items-end mb-2">
          <span className="text-[10px] text-muted font-light uppercase tracking-wider">Crecimiento de obras</span>
          <span className="text-xs text-emerald-400 font-semibold flex items-center gap-0.5">
            +14% este mes
            <Icon name="trending-up" size={14} />
          </span>
        </div>
        
        {/* SVG Sparkline Graph */}
        <div className="h-16 w-full">
          <svg className="w-full h-full text-amber" viewBox="0 0 100 30" preserveAspectRatio="none">
            <defs>
              <linearGradient id="sparkline-gradient" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="#E97A38" stopOpacity="0.4" />
                <stop offset="100%" stopColor="#E97A38" stopOpacity="0.0" />
              </linearGradient>
            </defs>
            {/* Filled area */}
            <path
              d="M 0 30 L 0 24 Q 15 20, 25 18 T 50 15 T 75 10 T 100 2 L 100 30 Z"
              fill="url(#sparkline-gradient)"
            />
            {/* Line */}
            <path
              d="M 0 24 Q 15 20, 25 18 T 50 15 T 75 10 T 100 2"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
            />
            {/* Endpoint dot */}
            <circle cx="100" cy="2" r="2" fill="currentColor" />
          </svg>
        </div>
      </div>
    </div>
  );
}

function Credenciales() {
  return (
    <section className="relative z-10 bg-ink px-6 md:px-12 lg:px-16 pb-20 md:pb-32" data-screen-label="Credenciales">
      <div className="max-w-6xl mx-auto border-t border-surface/40 pt-20 md:pt-28">
        <div className="grid lg:grid-cols-12 gap-10 items-start">
          {/* Left Column: Title, Seals & Note */}
          <div className="lg:col-span-7 space-y-8">
            <Reveal>
              <Eyebrow>Confianza</Eyebrow>
              <h2 className="font-serif font-light leading-[1.05] tracking-[-0.02em] text-3xl md:text-4xl lg:text-5xl text-cream">
                Por qué confiar la obra a Qestylo
              </h2>
            </Reveal>

            <Reveal delay={120}>
              <div className="flex flex-wrap gap-3">
                {SEALS.map((s, i) => (
                  <div
                    key={i}
                    className={`flex items-center gap-2.5 rounded-xl px-5 py-3.5 text-sm font-light ${s.primary ? 'bg-surface text-cream border border-amber' : 'bg-surface/60 text-cream/90 border border-transparent'
                      }`}
                  >
                    <span className={s.primary ? 'text-amber' : 'text-muted'}>
                      <Icon name={s.icon} size={18} />
                    </span>
                    {s.label}
                  </div>
                ))}
              </div>
            </Reveal>

            <Reveal delay={200}>
              <div className="liquid-glass rounded-2xl px-7 py-6 flex items-start gap-4">
                <span className="text-amber shrink-0 mt-0.5"><Icon name="badge-check" size={22} /></span>
                <p className="text-sm md:text-[15px] font-light leading-relaxed text-cream">
                  La instalación a través de la Red Oficial Kömmerling cuenta con la cobertura adicional de la marca y la garantía directa de Qestylo.
                </p>
              </div>
            </Reveal>
          </div>

          {/* Right Column: Live Counter Card */}
          <div className="lg:col-span-5 h-full">
            <Reveal delay={250}>
              <LiveCounterCard />
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------------- 8 · OPINIONES ----------------
const ALL_REVIEWS = [
  {
    name: 'Marta V',
    avatar: 'https://lh3.googleusercontent.com/a-/ALV-UjXk3px_0TdDJJjAkwKjBZZimW1jPraF-Nrfyx8lYIMXH_YfD3Ad=w45-h45-p-rp-mo-br100',
    info: '2 reseñas',
    date: 'Hace un año',
    quote: 'Javier es un gran profesional rodeado de grandes profesionales. Hicimos una reforma integral de nuestra casa y podemos recomendar esta empresa porque con nosotros fue todo muy bien. Fueron serios y cumplidores.',
    reply: 'Muchas Gracias de parte de todo nuestro equipo sois encantadores ❤️'
  },
  {
    name: 'Mario De Frutos',
    avatar: 'https://lh3.googleusercontent.com/a-/ALV-UjVvWIFXCSBKpF9sZz_SnLfYQ32s65E0ZnH9IszQdag9gyml7zc=w45-h45-p-rp-mo-ba12-br100',
    info: 'Local Guide · 17 reseñas',
    date: 'Hace 11 meses',
    quote: 'Nosotros estamos muy contentos con todo el proceso. No tuvimos ningún problema y la comunicación fue siempre súper fluida.',
    reply: 'Mario sois encantadores muchísimas gracias por vuestra palabras nos llenan de felicidad . Gracias'
  },
  {
    name: 'Ana García',
    avatar: 'https://lh3.googleusercontent.com/a-/ALV-UjXOwggxJ784E4pMG13QzlrBSKb02xCo63EQ6wkfJwe54DnBIbo=w45-h45-p-rp-mo-br100',
    info: '3 reseñas · 12 fotos',
    date: 'Hace un año',
    quote: 'Estoy IN LOVE con mi nuevo espacio en casa es súper práctico a la hora de comer y disfrutar de mi salón-cocina ❤️🙌🙌',
    reply: 'Ana disfrutarlo mucho os lo merecéis 😘😘. Nos vemos pronto y muchas Gracias …'
  },
  {
    name: 'Estela Cavia',
    avatar: 'https://lh3.googleusercontent.com/a/ACg8ocKAojFt6Dk2PRS73eer0ycGGbweTYaTWyrAqgScHCfnelwPIKqa=w45-h45-p-rp-mo-ba12-br100',
    info: 'Local Guide · 11 reseñas',
    date: 'Hace un año',
    quote: 'Excelente experiencia de reforma. Grandes profesionales, muy recomendados por su calidad, rapidez y trato cercano.',
    reply: 'Muchísimas gracias por tus reseñas'
  },
  {
    name: 'Laura Merideño',
    avatar: 'https://lh3.googleusercontent.com/a/ACg8ocIFzN357u7oMsM5ognCxaJ5GrLU-VMjsQDUPgGblsqfsKnprg=w45-h45-p-rp-mo-br100',
    info: '4 reseñas',
    date: 'Hace un año',
    quote: 'Recomendable 100%. Trabajo rápido, limpio y un equipo de profesionales inmejorable en Valladolid.',
    reply: 'Muchas Gracias ☺️'
  },
  {
    name: 'Silvia Dittami',
    avatar: 'https://lh3.googleusercontent.com/a-/ALV-UjWnmyqttLDQKBYutJ65YnmjhHujPM7wlggpJ8Dd8gcgFqB34RZp=w45-h45-p-rp-mo-br100',
    info: '10 reseñas',
    date: 'Hace un año',
    quote: 'Un gran equipo de trabajo en Valladolid. Seriedad, puntualidad y unos acabados de ventanas de primera clase.',
    reply: 'Muchas Gracias'
  },
  {
    name: 'Daniel One',
    avatar: 'https://lh3.googleusercontent.com/a/ACg8ocKOdyQjXyCg8YgfusYpI2sWSt3Dx1KKPP87iYLyYMPY2rQnfg=w45-h45-p-rp-mo-br100',
    info: '6 reseñas · 7 fotos',
    date: 'Hace un año',
    quote: 'Muy profesionales en todo el proceso de medición, asesoramiento e instalación de nuestras ventanas Kömmerling.',
    reply: 'Muchas Gracias'
  },
  {
    name: 'María Jesús Redondo',
    avatar: 'https://lh3.googleusercontent.com/a/ACg8ocJjOI2Vj-fhhlPHr3zDLCNemWZ4hpgpYCoLyJBqyTTL2wJzyA=w45-h45-p-rp-mo-br100',
    info: '7 reseñas',
    date: 'Hace un año',
    quote: 'Encantados con la reforma. La casa está mucho mejor aislada y el ruido exterior ha desaparecido por completo.',
    reply: 'Muchas Gracias disfrutarlo mucho .'
  },
  {
    name: 'Ambar Sanz',
    avatar: 'https://lh3.googleusercontent.com/a-/ALV-UjV-CIW4AmGCBGYd9t9TIyd4FFzUhRSCFTEHEKS_zMk75k7YimrN=w45-h45-p-rp-mo-ba12-br100',
    info: 'Local Guide · 9 reseñas',
    date: 'Hace 2 años',
    quote: 'Una atención fantástica. Se nota la diferencia de calidad del perfil y la profesionalidad del instalador.',
    reply: '¡Muchísimas gracias por confiar en nosotros!'
  },
  {
    name: 'Cristina Pascual',
    avatar: 'https://lh3.googleusercontent.com/a-/ALV-UjVBSkiVUY5HfWgbwaFhCpsWOL1Mqfg2A7n3cvxy8HJjxQ-zvCNi=w45-h45-p-rp-mo-ba12-br100',
    info: 'Local Guide · 77 reseñas',
    date: 'Hace 2 años',
    quote: 'Grandes profesionales en Valladolid. Excelente asesoramiento, rápidos, limpios y muy detallistas con el remate.',
    reply: 'Muchas Gracias Cristina x tu reseña'
  },
  {
    name: 'Julio Poncela',
    avatar: 'https://ui-avatars.com/api/?name=Julio+Poncela&background=1877F2&color=fff',
    info: 'Recomendación en Facebook',
    date: '22 de julio de 2022',
    quote: 'Excelencia en reformas, estilo, servicio y calidad',
    platform: 'facebook'
  },
  {
    name: 'Jacqueline Fernandez Casado',
    avatar: 'https://ui-avatars.com/api/?name=Jacqueline+Fernandez+Casado&background=1877F2&color=fff',
    info: 'Recomendación en Facebook',
    date: '23 de abril de 2018',
    quote: 'Solo he visto las fotos de la página, pero es increíble como transforman ruinas en unas estancias maravillosas.Mucho exito',
    platform: 'facebook'
  },
  {
    name: 'Roberto San José',
    avatar: 'https://ui-avatars.com/api/?name=Roberto+San+Jose&background=34A853&color=fff',
    info: 'Local Guide · 15 reseñas',
    date: 'Hace 4 meses',
    quote: 'Cambiamos las ventanas de toda la casa por el sistema Xtrem de Kömmerling y es la mejor inversión que hemos hecho. El aislamiento acústico es espectacular, ya no escuchamos el tráfico de la avenida. El equipo de instalación fue muy profesional, rápido y dejaron todo impecable.',
    platform: 'google',
    reply: 'Muchas gracias Roberto por confiar en nosotros, nos alegra saber que disfrutáis del silencio en vuestro hogar. ¡Un saludo!'
  },
  {
    name: 'Elena M. Alonso',
    avatar: 'https://ui-avatars.com/api/?name=Elena+M.+Alonso&background=EA4335&color=fff',
    info: '3 reseñas',
    date: 'Hace 6 meses',
    quote: 'Muy contentos con el trabajo de Qestylo. Pedimos presupuesto y al día siguiente vino Javier a medir. En menos de tres semanas ya estaban instaladas las nuevas ventanas oscilobatientes. Limpios, rápidos y con unos remates perfectos.',
    platform: 'google',
    reply: 'Gracias Elena por tus amables palabras, fue un placer trabajar en tu reforma.'
  },
  {
    name: 'Carlos Tejedor',
    avatar: 'https://ui-avatars.com/api/?name=Carlos+Tejedor&background=1877F2&color=fff',
    info: 'Recomendación en Facebook',
    date: '14 de octubre de 2023',
    quote: 'Excelente atención en la tienda física de Valladolid. Nos explicaron genial las diferencias entre perfiles y nos decidimos por el sistema AluNext. Las ventanas han quedado de revista y la casa se calienta mucho más rápido. 100% recomendados.',
    platform: 'facebook'
  },
  {
    name: 'Begoña Herrero',
    avatar: 'https://ui-avatars.com/api/?name=Begona+Herrero&background=1877F2&color=fff',
    info: 'Recomendación en Facebook',
    date: '5 de enero de 2024',
    quote: 'Una reforma integral de diez. Se encargaron de todo con su servicio llave en mano y no tuvimos que preocuparnos de nada. Las ventanas Kömmerling son una maravilla y la atención del equipo insuperable. Cumplieron plazos al pie de la letra.',
    platform: 'facebook'
  },
  {
    name: 'sofia_decorhome',
    avatar: 'https://ui-avatars.com/api/?name=Sofia+Decorhome&background=E1306C&color=fff',
    info: 'Comentario en Instagram',
    date: 'Hace 3 semanas',
    quote: 'Encantada con la instalación de las hojas ocultas 76MD Zero. El perfil es super fino y la cantidad de luz que entra ahora en el salón es increíble. Un acierto total confiar el diseño de mis ventanas a Qestylo.',
    platform: 'instagram'
  },
  {
    name: 'david_vll',
    avatar: 'https://ui-avatars.com/api/?name=David+VLL&background=E1306C&color=fff',
    info: 'Comentario en Instagram',
    date: 'Hace 2 meses',
    quote: 'Gran trabajo del equipo de montaje de Qestylo Valladolid. Cero ruidos, cero corrientes de aire en invierno y las facturas de gas lo han notado un montón. Recomendables por su cercanía y profesionalidad.',
    platform: 'instagram'
  }
];

function Opiniones() {
  const [activeIndex, setActiveIndex] = useState(0);
  const [windowWidth, setWindowWidth] = useState(typeof window !== 'undefined' ? window.innerWidth : 1024);

  const trackRef = useRef(null);
  const isDraggingRef = useRef(false);
  const startXRef = useRef(0);
  const dragXRef = useRef(0);

  useEffect(() => {
    const handleResize = () => setWindowWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const N = ALL_REVIEWS.length;
  const isMobile = windowWidth < 768;
  const W = isMobile ? Math.min(windowWidth - 64, 320) : 360;
  const gap = isMobile ? 12 : 24;
  const offsetX = - (activeIndex * (W + gap) + W / 2);

  const handleStart = (clientX) => {
    isDraggingRef.current = true;
    startXRef.current = clientX;
    dragXRef.current = 0;
    if (trackRef.current) {
      trackRef.current.style.transition = 'none';
    }
  };

  const handleMove = (clientX) => {
    if (!isDraggingRef.current) return;
    const dx = clientX - startXRef.current;
    dragXRef.current = dx;
    if (trackRef.current) {
      trackRef.current.style.transform = `translateX(${offsetX + dx}px)`;
    }
  };

  const handleEnd = () => {
    if (!isDraggingRef.current) return;
    isDraggingRef.current = false;

    const threshold = (W + gap) * 0.2;
    let nextIndex = activeIndex;
    const dx = dragXRef.current;
    if (dx < -threshold) {
      nextIndex = Math.min(activeIndex + 1, N - 1);
    } else if (dx > threshold) {
      nextIndex = Math.max(activeIndex - 1, 0);
    }

    if (trackRef.current) {
      trackRef.current.style.transition = 'transform 0.6s cubic-bezier(0.16, 1, 0.3, 1)';
      const nextOffsetX = - (nextIndex * (W + gap) + W / 2);
      trackRef.current.style.transform = `translateX(${nextOffsetX}px)`;
    }

    setActiveIndex(nextIndex);
  };

  const trackStyle = {
    display: 'flex',
    gap: `${gap}px`,
    position: 'absolute',
    left: '50%',
    transform: `translateX(${offsetX}px)`,
    transformStyle: isMobile ? 'flat' : 'preserve-3d',
    transition: 'transform 0.6s cubic-bezier(0.16, 1, 0.3, 1)',
  };

  return (
    <section id="opiniones" className="relative z-10 bg-sand text-surface px-6 md:px-12 lg:px-16 py-20 md:py-28 lg:py-32 overflow-hidden" data-screen-label="Opiniones">
      <div className="max-w-6xl mx-auto">
        <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-8">
          <Reveal>
            <Eyebrow dark>Opiniones</Eyebrow>
            <h2 className="font-serif font-light leading-[1.05] tracking-[-0.02em] text-3xl md:text-4xl lg:text-5xl max-w-xl">
              Nuestros clientes opinan en Google, Facebook e Instagram
            </h2>
          </Reveal>
          <Reveal delay={100} className="shrink-0">
            <div className="flex items-center gap-3 bg-white/50 border border-surface/10 rounded-xl px-4 py-2.5 shadow-sm">
              <svg className="w-5 h-5 shrink-0" viewBox="0 0 24 24">
                <path fill="#EA4335" d="M12.24 10.285V14.4h6.887c-.648 2.41-2.519 4.2-5.136 4.2a6.22 6.22 0 0 1-6.236-6.2c0-3.4 2.8-6.2 6.236-6.2 1.6 0 3.03.6 4.14 1.61l3.05-3.05C19.34 3.1 16.03 1.8 12.24 1.8 6.59 1.8 2 6.4 2 12s4.59 10.2 10.24 10.2c5.9 0 9.8-4.1 9.8-10 0-.6-.05-1.3-.16-1.915H12.24z" />
              </svg>
              <div>
                <div className="flex items-center gap-1.5 leading-none mb-1">
                  <span className="text-sm font-bold text-surface">4.9</span>
                  <div className="flex gap-0.5 text-amber">
                    {[...Array(5)].map((_, i) => (
                      <svg key={i} className="w-3.5 h-3.5 fill-amber text-amber" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" /></svg>
                    ))}
                  </div>
                </div>
                <span className="text-[10px] text-surface/60 font-light block leading-none">Excelente en Google Maps</span>
              </div>
            </div>
          </Reveal>
        </div>

        <Reveal delay={150} className="mb-2 text-center md:text-left">
          <p className="text-xs font-light text-surface/50 flex items-center justify-center md:justify-start gap-1.5">
            <svg className="w-4 h-4 animate-pulse text-amber" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
            </svg>
            Arrastra para deslizar o usa las flechas para ver las valoraciones
          </p>
        </Reveal>

        {/* CAROUSEL VIEWPORT */}
        <div
          className="relative w-full h-[440px] flex items-center justify-center overflow-visible select-none touch-pan-y"
          style={{
            perspective: isMobile ? 'none' : '1200px',
            transformStyle: isMobile ? 'flat' : 'preserve-3d',
          }}
          onMouseDown={(e) => handleStart(e.clientX)}
          onMouseMove={(e) => handleMove(e.clientX)}
          onMouseUp={handleEnd}
          onMouseLeave={handleEnd}
          onTouchStart={(e) => handleStart(e.touches[0].clientX)}
          onTouchMove={(e) => handleMove(e.touches[0].clientX)}
          onTouchEnd={handleEnd}
        >
          {/* Left/Right fading gradient mask */}
          <div className="hidden md:block absolute inset-y-0 left-0 w-32 bg-gradient-to-r from-sand to-transparent z-20 pointer-events-none"></div>
          <div className="hidden md:block absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-sand to-transparent z-20 pointer-events-none"></div>

          {/* Slider Container */}
          <div
            style={{
              transformStyle: isMobile ? 'flat' : 'preserve-3d',
              width: '100%',
              height: '100%',
              display: 'flex',
              alignItems: 'center',
              overflow: 'visible'
            }}
          >
            <div ref={trackRef} style={trackStyle}>
              {ALL_REVIEWS.map((r, i) => {
                const isActive = i === activeIndex;
                const distFromActive = i - activeIndex;
                const isNeighbor = Math.abs(distFromActive) === 1;
                const isVisible = isActive || isNeighbor;

                // Folding triptych screen transformation logic
                let transform = '';
                if (isMobile) {
                  if (isActive) {
                    transform = 'scale(1) translate3d(0, 0, 0)';
                  } else if (distFromActive === -1) {
                    transform = 'scale(0.9) translate3d(8px, 0, 0)';
                  } else if (distFromActive === 1) {
                    transform = 'scale(0.9) translate3d(-8px, 0, 0)';
                  } else {
                    transform = 'scale(0.8) translate3d(0, 0, 0)';
                  }
                } else {
                  if (isActive) {
                    transform = 'scale(1.05) rotateY(0deg) translate3d(0, 0, 0)';
                  } else if (distFromActive === -1) {
                    transform = 'scale(0.9) rotateY(24deg) translate3d(12px, 0, -50px)';
                  } else if (distFromActive === 1) {
                    transform = 'scale(0.9) rotateY(-24deg) translate3d(-12px, 0, -50px)';
                  } else {
                    transform = 'scale(0.9) translate3d(0, 0, -50px)';
                  }
                }

                return (
                  <div
                    key={i}
                    style={{
                      width: `${W}px`,
                      height: '350px',
                      flexShrink: 0,
                      opacity: isVisible ? (isActive ? 1 : 0.4) : 0,
                      pointerEvents: isActive ? 'auto' : 'none',
                      transition: 'opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1)',
                      transformStyle: isMobile ? 'flat' : 'preserve-3d',
                    }}
                  >
                    <div
                      className={`w-full h-full rounded-2xl bg-white border p-6 flex flex-col justify-between shadow-md transition-all duration-500 ${isActive
                          ? 'border-amber shadow-amber/5'
                          : 'border-surface/10'
                        }`}
                      style={{
                        backfaceVisibility: 'hidden',
                        transform: transform,
                        transformStyle: isMobile ? 'flat' : 'preserve-3d',
                        transition: 'transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1)',
                      }}
                    >
                      {/* CARD CONTENT */}
                      <div className="w-full h-full flex flex-col justify-between">
                        <div>
                          {/* Header */}
                          <div className="flex items-center justify-between gap-3 mb-2.5">
                            <div className="flex items-center gap-2">
                              <img src={r.avatar} alt={r.name} className="w-8 h-8 rounded-full border border-surface/10 object-cover" referrerpolicy="no-referrer" />
                              <div>
                                <div className="text-[13px] font-semibold text-surface leading-tight line-clamp-1">{r.name}</div>
                                <div className="text-[9px] font-light text-surface/50 leading-none mt-0.5">{r.info}</div>
                              </div>
                            </div>
                            <span className="text-[9px] text-surface/40 font-light shrink-0">{r.date}</span>
                          </div>

                          {/* Stars or Platform Recommendation Badge */}
                          {r.platform === 'facebook' ? (
                            <div className="flex items-center gap-1 bg-[#1877F2]/10 text-[#1877F2] rounded px-2.5 py-1 text-[9px] font-semibold w-fit mb-2">
                              <svg className="w-3 h-3 fill-current" viewBox="0 0 24 24">
                                <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                              </svg>
                              Recomienda Qe Stylo
                            </div>
                          ) : r.platform === 'instagram' ? (
                            <div className="flex items-center gap-1 bg-[#E1306C]/10 text-[#E1306C] rounded px-2.5 py-1 text-[9px] font-semibold w-fit mb-2">
                              <svg className="w-3.5 h-3.5 fill-current" viewBox="0 0 24 24">
                                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.051.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/>
                              </svg>
                              Mención en Instagram
                            </div>
                          ) : (
                            <div className="flex gap-0.5 mb-2">
                              {[...Array(5)].map((_, idx) => (
                                <svg key={idx} className="w-3.5 h-3.5 fill-amber text-amber" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" /></svg>
                              ))}
                            </div>
                          )}

                          {/* Quote */}
                          <blockquote className="font-serif text-[13px] font-light leading-relaxed text-surface/90 line-clamp-5">
                            “{r.quote}”
                          </blockquote>
                        </div>

                        {/* Reply or verified badge */}
                        {r.reply ? (
                          <div className="mt-2 pt-2 border-t border-surface/10">
                            <div className="bg-surface/5 rounded-xl p-2.5 border border-surface/5">
                              <div className="flex items-center gap-1.5 mb-0.5 leading-none">
                                <span className="text-[9px] font-bold text-surface leading-none">Qestylo</span>
                                <span className="text-[8px] bg-amber/15 text-amber px-1 py-0.5 rounded uppercase font-semibold leading-none">Propietario</span>
                              </div>
                              <p className="text-[10px] font-light text-surface/80 leading-snug italic line-clamp-3">
                                "{r.reply}"
                              </p>
                            </div>
                          </div>
                        ) : (
                          <div className="flex items-center gap-1.5 text-[9px] text-surface/40 mt-auto pt-2 border-t border-surface/5">
                            {r.platform === 'facebook' ? (
                              <React.Fragment>
                                <svg className="w-3.5 h-3.5 text-[#1877F2] fill-[#1877F2]/10" viewBox="0 0 24 24" fill="currentColor">
                                  <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                                </svg>
                                <span>Recomendación en Facebook</span>
                              </React.Fragment>
                            ) : r.platform === 'instagram' ? (
                              <React.Fragment>
                                <svg className="w-3.5 h-3.5 text-[#E1306C] fill-[#E1306C]/10" viewBox="0 0 24 24" fill="currentColor">
                                  <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.051.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/>
                                </svg>
                                <span>Comentario en Instagram</span>
                              </React.Fragment>
                            ) : (
                              <React.Fragment>
                                <svg className="w-3.5 h-3.5 text-emerald-500 fill-emerald-500/20" viewBox="0 0 20 20" fill="currentColor">
                                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                                </svg>
                                <span>Reseña verificada de Google</span>
                              </React.Fragment>
                            )}
                          </div>
                        )}
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Navigation Arrows */}
          <button
            onClick={(e) => { e.stopPropagation(); setActiveIndex(prev => Math.max(prev - 1, 0)); }}
            className={`hidden md:flex absolute left-4 lg:left-12 z-40 items-center justify-center w-11 h-11 rounded-full bg-white/80 border border-surface/10 hover:bg-white text-surface hover:text-amber shadow-md hover:scale-105 transition-all focus:outline-none ${activeIndex === 0 ? 'opacity-40 pointer-events-none' : 'opacity-100 pointer-events-auto'}`}
            style={{ transform: 'translate3d(0, 0, 100px)' }}
            aria-label="Reseña anterior"
          >
            <Icon name="chevron-left" size={20} />
          </button>

          <button
            onClick={(e) => { e.stopPropagation(); setActiveIndex(prev => Math.min(prev + 1, N - 1)); }}
            className={`hidden md:flex absolute right-4 lg:right-12 z-40 items-center justify-center w-11 h-11 rounded-full bg-white/80 border border-surface/10 hover:bg-white text-surface hover:text-amber shadow-md hover:scale-105 transition-all focus:outline-none ${activeIndex === N - 1 ? 'opacity-40 pointer-events-none' : 'opacity-100 pointer-events-auto'}`}
            style={{ transform: 'translate3d(0, 0, 100px)' }}
            aria-label="Siguiente reseña"
          >
            <Icon name="chevron-right" size={20} />
          </button>
        </div>

        {/* Pagination & Mobile Inline Arrows */}
        <div className="flex justify-center items-center gap-4 mt-6">
          <button
            onClick={() => setActiveIndex(prev => Math.max(prev - 1, 0))}
            disabled={activeIndex === 0}
            className="md:hidden flex items-center justify-center w-9 h-9 rounded-full bg-white border border-surface/10 text-surface disabled:opacity-40"
            aria-label="Reseña anterior"
          >
            <Icon name="chevron-left" size={16} />
          </button>

          <div className="flex gap-2">
            {ALL_REVIEWS.map((_, i) => {
              const isDotActive = i === activeIndex;
              return (
                <button
                  key={i}
                  onClick={() => setActiveIndex(i)}
                  className={`h-2 rounded-full transition-all duration-300 ${isDotActive ? 'w-6 bg-amber' : 'w-2 bg-surface/20 hover:bg-surface/40'
                    }`}
                  aria-label={`Ir a reseña ${i + 1}`}
                />
              );
            })}
          </div>

          <button
            onClick={() => setActiveIndex(prev => Math.min(prev + 1, N - 1))}
            disabled={activeIndex === N - 1}
            className="md:hidden flex items-center justify-center w-9 h-9 rounded-full bg-white border border-surface/10 text-surface disabled:opacity-40"
            aria-label="Siguiente reseña"
          >
            <Icon name="chevron-right" size={16} />
          </button>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  goContacto, Navbar, Hero, Problema, Solucion, Puertas, Persianas, ComoFunciona, Credenciales, Opiniones, Eyebrow,
});