/**
 * Sección pedagógica SEO — "La pintura reflectante cool roof, explicada con claridad."
 * Insertada tras la FAQ en la página CovaTherm para cubrir la cola larga:
 * "cómo funciona pintura reflectante cool roof", "precio pintura cool roof por m²",
 * "acrílica vs poliuretano", "obra cool roof", "durabilidad", "comparativa".
 */

const comparisonRows: Array<{
  label: string;
  covatherm: string;
  membrane: string;
  refonte: string;
  highlight?: boolean;
}> = [
  { label: 'Coste por m²',                          covatherm: '20 a 25 €',        membrane: '80 a 100 €',     refonte: '~150 €' },
  { label: 'Duración de la obra',                   covatherm: '3 a 5 días',       membrane: '2 a 4 semanas',  refonte: '3 a 6 semanas' },
  { label: 'Ganancia térmica interior',             covatherm: 'Hasta 8-10 °C',    membrane: 'Similar',        refonte: 'Variable según el aislamiento', highlight: true },
  { label: 'Vida útil',                             covatherm: '8 a 20 años',      membrane: '15 a 20 años',   refonte: '20 a 30 años' },
  { label: 'Interrupción de la actividad',          covatherm: 'No',               membrane: 'Sí',             refonte: 'Sí' },
  { label: 'Efecto sobre la impermeabilización existente', covatherm: 'Protegida y prolongada', membrane: 'Sustituida', refonte: 'Sustituida' },
  { label: 'ROI medio',                             covatherm: '14 meses',         membrane: '3 a 5 años',     refonte: '8 a 12 años',     highlight: true },
];

const Bullet = ({ children }: { children: React.ReactNode }) => (
  <li className="pl-5 relative text-foreground/75 leading-relaxed">
    <span className="absolute left-0 top-[0.6em] w-1.5 h-1.5 rounded-full bg-primary/70" />
    {children}
  </li>
);

const H3 = ({ children }: { children: React.ReactNode }) => (
  <h3
    className="font-satoshi text-xl lg:text-2xl font-black text-foreground !leading-[1.15] mb-4"
    style={{ letterSpacing: '-0.02em' }}
  >
    {children}
  </h3>
);

const CoolRoofGuideES = () => (
  <section className="py-16 lg:py-24 bg-white">
    <div className="container mx-auto px-4 lg:px-8 max-w-3xl">
        <div className="mb-10 lg:mb-14">
          <p className="text-[10px] uppercase tracking-[0.25em] font-semibold text-primary/65 font-body mb-3">
            Guía
          </p>
          <h2
            className="font-satoshi text-3xl sm:text-4xl lg:text-5xl font-black text-foreground !leading-[1.05]"
            style={{ letterSpacing: '-0.03em' }}
          >
            La pintura reflectante cool roof,
            <br />
            <span className="text-foreground/45">explicada con claridad.</span>
          </h2>
          <p className="text-foreground/75 text-base lg:text-lg font-body leading-relaxed mt-6">
            Pintura reflectante cool roof, pintura blanca reflectante, pintura antitérmica: <strong className="text-foreground">tres nombres para lo mismo</strong>, un recubrimiento que devuelve la radiación solar en lugar de absorberla. Utilizada desde hace <strong className="text-foreground">más de veinte años en Estados Unidos</strong>, la pintura reflectante cool roof se impone como la alternativa más rentable a las obras de aislamiento pesadas. A condición de elegir la tecnología adecuada y el instalador adecuado.
          </p>
        </div>

      <div className="space-y-12 lg:space-y-16 text-[15px] lg:text-base font-body">
        {/* ─── Cómo funciona ─── */}
          <article>
            <H3>¿Cómo funciona una pintura reflectante cool roof?</H3>
            <p className="text-foreground/75 leading-relaxed mb-4">
              Una cubierta oscura absorbe hasta un <strong>90 % de la radiación solar</strong> y luego restituye ese calor al interior del edificio. Una pintura reflectante cool roof invierte el mecanismo gracias a dos propiedades combinadas.
            </p>
            <ul className="space-y-2 mb-4">
              <Bullet>
                <strong>Reflectancia solar</strong>: capacidad del recubrimiento para devolver la radiación en lugar de absorberla. Una buena pintura reflectante cool roof supera <strong>0,85</strong>.
              </Bullet>
              <Bullet>
                <strong>Emisividad térmica</strong>: capacidad para disipar en el infrarrojo el calor acumulado. Las mejores formulaciones alcanzan <strong>0,90</strong>.
              </Bullet>
            </ul>
            <p className="text-foreground/75 leading-relaxed">
              La combinación de ambas da el <strong>SRI</strong> (Solar Reflectance Index), indicador normalizado ASTM 1980 que es referencia en la industria. Cuanto más elevado, mayor es el rendimiento de la pintura. CovaTherm 20 presenta un SRI de <strong>119 en estado nuevo</strong> y <strong>118 tras envejecimiento acelerado</strong>, lo que lo sitúa entre los mejores del mercado.
            </p>
          </article>

        {/* ─── Acrílica vs Poliuretano ─── */}
          <article>
            <H3>¿Qué tecnología elegir: acrílica o poliuretano?</H3>
            <p className="text-foreground/75 leading-relaxed mb-4">
              No todas las pinturas reflectantes cool roof son iguales. La tecnología de la resina marca toda la diferencia en la vida útil real del recubrimiento.
            </p>
            <ul className="space-y-3 mb-4">
              <Bullet>
                <strong>Resina acrílica</strong>: el 90 % de la oferta del mercado. En torno a 10 a 12 €/m². Se degrada rápido bajo el efecto de los UV y el tizado, con una vida útil de <strong>2 a 5 años</strong>.
              </Bullet>
              <Bullet>
                <strong>Resina de poliuretano</strong> (CovaTherm): 20 a 25 €/m² aplicada, dura <strong>8 a 10 años</strong> con una simple capa de mantenimiento. Con Top Coat anti-UV (CovaTherm 20): <strong>20 años</strong> sin retoques intermedios.
              </Bullet>
            </ul>
            <p className="text-foreground/75 leading-relaxed">
              A lo largo de la vida útil de un edificio, <strong className="text-foreground">la pintura reflectante cool roof más barata en la compra es sistemáticamente la que sale más cara</strong>.
            </p>
          </article>

        {/* ─── Precio ─── */}
          <article>
            <H3>Precio de una pintura reflectante cool roof por m²</H3>
            <p className="text-foreground/75 leading-relaxed mb-4">
              El precio de una pintura reflectante cool roof profesional aplicada se sitúa de media entre <strong>10 y 25 €</strong> por metro cuadrado, todo incluido: diagnóstico, preparación del soporte, suministro y aplicación. La diferencia de precio se explica principalmente por la tecnología utilizada.
            </p>
            <ul className="space-y-2 mb-4">
              <Bullet><strong>10 a 12 €/m²</strong>: pintura reflectante cool roof de resina acrílica, vida útil de 2 a 5 años.</Bullet>
              <Bullet><strong>20 a 25 €/m²</strong>: pintura reflectante cool roof de resina de poliuretano de alto rendimiento como CovaTherm, vida útil de 8 a 20 años según el acabado.</Bullet>
            </ul>
            <p className="text-foreground/75 leading-relaxed mb-4">
              Tres factores adicionales hacen variar la cifra final: la superficie a tratar (descuento progresivo a partir de 2 000 m²), el estado del soporte y la ubicación geográfica de la obra.
            </p>
            <p className="text-foreground/75 leading-relaxed">
              A modo de comparación, una membrana de impermeabilización nueva cuesta entre <strong>80 y 100 €</strong>/m², y una sustitución completa de aislamiento + impermeabilización ronda los <strong>150 €</strong>/m². La pintura reflectante cool roof reduce, por tanto, el presupuesto entre 3 y 7 veces, con un <strong>ROI medio de 14 meses</strong>.{' '}
              <a href="/es" className="text-primary font-semibold hover:underline">
                Estime el ahorro de una pintura reflectante cool roof
              </a>
              .
            </p>
          </article>

        {/* ─── Obra ─── */}
          <article>
            <H3>¿Cómo se desarrolla una obra de pintura reflectante cool roof?</H3>
            <p className="text-foreground/75 leading-relaxed mb-4">
              El rendimiento de una pintura reflectante cool roof <strong className="text-foreground">depende directamente de la calidad de la aplicación</strong>. Una obra con CovaTherm se desarrolla en cinco etapas controladas, ejecutadas por un instalador formado.
            </p>
            <ol className="space-y-3 mb-4 list-none counter-reset-[step]">
              {[
                { t: 'Diagnóstico técnico', d: 'Un técnico evalúa el estado del soporte, mide la humedad, identifica las zonas a reparar y verifica la compatibilidad del material. Un soporte mal diagnosticado acaba provocando un recubrimiento que se ampolla.' },
                { t: 'Limpieza a alta presión', d: 'Eliminación de musgos, polvo y residuos con limpiador de alta presión, sin decapado. En esta etapa se juega la adherencia a largo plazo.' },
                { t: 'Aplicación de la imprimación', d: 'Una capa de agarre prepara el soporte para recibir el recubrimiento cool roof.' },
                { t: 'Aplicación del base coat', d: 'La capa reflectante se aplica en dos pasadas cruzadas, por pulverización desde el suelo. Cero carga en la cubierta, cero vibraciones, cero riesgo para la impermeabilización existente.' },
                { t: 'Aplicación del top coat', d: 'Únicamente en la versión de larga duración, este acabado anti-UV y antisuciedad protege la reflectividad durante 20 años.' },
              ].map((s, i) => (
                <li key={i} className="flex gap-4">
                  <span className="shrink-0 w-7 h-7 rounded-full bg-primary/10 text-primary text-sm font-bold flex items-center justify-center mt-0.5">
                    {i + 1}
                  </span>
                  <div className="flex-1">
                    <p className="font-semibold text-foreground mb-1">{s.t}</p>
                    <p className="text-foreground/75 leading-relaxed">{s.d}</p>
                  </div>
                </li>
              ))}
            </ol>
            <p className="text-foreground/75 leading-relaxed">
              La aplicación se realiza con tiempo seco, entre 10 y 35 °C. Una obra tipo de <strong>1 000 m²</strong> se completa en <strong>3 a 5 días</strong>, sin interrupción de la actividad del edificio. Los instaladores trabajan con equipos de protección y están formados para trabajar con seguridad en cubierta.
            </p>
          </article>

        {/* ─── Durabilidad ─── */}
          <article>
            <H3>Durabilidad de una pintura reflectante cool roof</H3>
            <p className="text-foreground/75 leading-relaxed mb-4">
              La durabilidad de una pintura reflectante cool roof se mide por tres criterios:
            </p>
            <ul className="space-y-2 mb-4">
              <Bullet>Su resistencia a los UV</Bullet>
              <Bullet>Su comportamiento frente a la suciedad</Bullet>
              <Bullet>Su capacidad para no producir tizado</Bullet>
            </ul>
            <p className="text-foreground/75 leading-relaxed mb-4">
              Una pintura clásica puede perder hasta un <strong>40 % de su reflectividad en 5 años</strong>, lo que anula gran parte del beneficio térmico inicial.
            </p>
            <p className="text-foreground/75 leading-relaxed">
              CovaTherm 20, gracias a su Top Coat anti-UV exclusivo, mantiene un <strong>SRI de 118</strong> tras <strong>4 000 horas de envejecimiento acelerado</strong> en cámara QUV, equivalente a 20 años de exposición solar. El recubrimiento se ensucia tres veces menos rápido que las soluciones estándar y no produce tizado. Es uno de los mejores niveles de durabilidad del mercado en este tipo de producto.
            </p>
          </article>

        {/* ─── Comparativa ─── */}
          <article>
            <H3>¿Pintura reflectante cool roof u otras soluciones térmicas?</H3>
            <p className="text-foreground/75 leading-relaxed mb-6">
              La elección entre pintura reflectante cool roof, membrana nueva y renovación completa depende del edificio, del presupuesto y del estado actual de la cubierta. Estos son los criterios que cuentan, y por qué la pintura reflectante cool roof se impone como una alternativa a la sustitución de la impermeabilización.
            </p>

            {/* Desktop table */}
            <div className="hidden md:block overflow-hidden rounded-2xl border border-border">
              <table className="w-full text-sm">
                <thead>
                  <tr className="bg-foreground text-white">
                    <th className="text-left px-4 py-3 font-semibold">Criterio</th>
                    <th className="text-left px-4 py-3 font-semibold">Pintura reflectante cool roof CovaTherm</th>
                    <th className="text-left px-4 py-3 font-semibold text-white/75">Membrana blanca nueva</th>
                    <th className="text-left px-4 py-3 font-semibold text-white/75">Sustitución aisl. + impermeabilización</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-border">
                  {comparisonRows.map((r, i) => (
                    <tr key={i} className={i % 2 === 0 ? 'bg-muted/40' : 'bg-white'}>
                      <td className="px-4 py-3 font-medium text-foreground/80">{r.label}</td>
                      <td className={`px-4 py-3 ${r.highlight ? 'font-semibold text-primary' : 'text-foreground/80'}`}>
                        {r.covatherm}
                      </td>
                      <td className="px-4 py-3 text-foreground/65">{r.membrane}</td>
                      <td className="px-4 py-3 text-foreground/65">{r.refonte}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            {/* Mobile cards */}
            <div className="md:hidden space-y-4">
              {[
                { name: 'Pintura reflectante cool roof CovaTherm', key: 'covatherm' as const, highlight: true },
                { name: 'Membrana blanca nueva',                   key: 'membrane' as const,  highlight: false },
                { name: 'Sustitución aisl. + impermeabilización',  key: 'refonte' as const,   highlight: false },
              ].map((col, ci) => (
                <div
                  key={ci}
                  className={`rounded-2xl p-5 ${col.highlight ? 'bg-foreground text-white' : 'bg-muted/40 border border-border'}`}
                >
                  <p className={`text-[11px] uppercase tracking-[0.15em] font-bold mb-3 ${col.highlight ? 'text-teal-vivid' : 'text-foreground/55'}`}>
                    {col.name}
                  </p>
                  <dl className="space-y-2 text-sm">
                    {comparisonRows.map((r, i) => (
                      <div key={i} className="flex justify-between gap-4">
                        <dt className={col.highlight ? 'text-white/65' : 'text-foreground/65'}>{r.label}</dt>
                        <dd className={`text-right font-medium ${col.highlight ? 'text-white' : 'text-foreground/85'}`}>{r[col.key]}</dd>
                      </div>
                    ))}
                  </dl>
                </div>
              ))}
            </div>

            <p className="text-foreground/75 leading-relaxed mt-6">
              La pintura reflectante cool roof es la solución que se amortiza más rápidamente, sin desmontaje ni interrupción de la actividad. Se impone como la referencia para los edificios industriales, farmacéuticos, agroalimentarios, aeronáuticos y terciarios de más de 10 años, donde la frescura es crítica y donde una renovación pesada resulta difícil de organizar.
            </p>
          </article>
      </div>
    </div>
  </section>
);

export default CoolRoofGuideES;