import { ArrowRight, Check } from 'lucide-react';
import ScrollReveal from '@/components/ScrollReveal';
import CTAButton from '@/components/ui/CTAButton';

type Row = { label: string; a: string; b: string };

const rows: Row[] = [
  { label: 'Duración de la obra', a: '1 a 3 días', b: '1 a 3 semanas' },
  { label: 'Luz natural conservada', a: 'hasta el 65 %', b: 'Total (lucernarios nuevos)' },
  { label: 'Efecto contra el calor', a: '-5 °C de media', b: 'Según el modelo elegido' },
  { label: 'Filtración de UV', a: 'Activa durante 8 a 10 años', b: 'Si lleva aditivos UV integrados' },
  { label: 'Impermeabilización', a: 'Sin modificar', b: 'Juntas nuevas' },
  { label: 'Interrupción de la actividad', a: 'Ninguna', b: 'Parcial' },
  { label: 'Vida útil', a: '8 a 10 años', b: '15 a 20 años' },
  { label: 'Plazo de amortización', a: 'Corto', b: 'Largo' },
];

const checkRows = new Set([
  'Luz natural conservada',
  'Efecto contra el calor',
  'Filtración de UV',
  'Interrupción de la actividad',
]);

const CovaThermLightComparisonES = () => (
  <section className="py-16 lg:py-24 bg-white">
    <div className="container mx-auto px-4 lg:px-8 max-w-5xl">
      <ScrollReveal>
        <div className="max-w-3xl mb-10 lg:mb-14">
          <p className="text-[10px] uppercase tracking-[0.25em] font-semibold text-primary/65 font-body mb-3">
            Comparativa
          </p>
          <h2
            className="font-satoshi text-3xl sm:text-4xl lg:text-5xl font-black text-foreground !leading-[1.05] mb-5"
            style={{ letterSpacing: '-0.03em' }}
          >
            ¿Recubrimiento solar o
            <br />
            <span className="text-foreground/45">sustitución de los lucernarios?</span>
          </h2>
          <p className="text-foreground/70 text-base lg:text-lg font-body leading-relaxed">
            La elección entre CovaTherm Light y una sustitución completa de los
            lucernarios depende de la antigüedad de los elementos translúcidos, de su
            estado de degradación y del presupuesto disponible. Los criterios que importan
            se resumen a continuación.
          </p>
        </div>
      </ScrollReveal>

      <ScrollReveal>
        <div className="hidden sm:block">
          <div className="grid grid-cols-[1.4fr_1.2fr_1.2fr]">
            <div />
            <div className="bg-foreground rounded-t-2xl px-4 pt-5 pb-5 text-center relative z-10 shadow-[0_-6px_20px_rgba(0,0,0,0.08)]">
              <p className="text-[11px] font-semibold text-white/70 font-body uppercase tracking-[0.15em] mb-2">
                CovaTherm Light
              </p>
              <span className="inline-flex items-center bg-teal-vivid/20 text-teal-vivid text-[9px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full">
                Recomendado
              </span>
            </div>
            <div className="px-4 pt-5 pb-4 text-center">
              <p className="text-[11px] font-semibold text-foreground/55 font-body uppercase tracking-[0.15em]">
                Sustitución de lucernarios
              </p>
            </div>
          </div>

          {rows.map((r, i) => (
            <div
              key={i}
              className={`grid grid-cols-[1.4fr_1.2fr_1.2fr] items-stretch ${i % 2 === 0 ? 'bg-muted/40' : ''}`}
            >
              <div className="px-5 py-4 flex items-center">
                <span className="text-sm text-foreground/80 font-body font-medium">{r.label}</span>
              </div>
              <div className="px-4 py-4 flex items-center justify-center text-center bg-foreground relative z-10">
                <span className="text-sm text-white font-body font-semibold inline-flex items-center gap-1.5">
                  {checkRows.has(r.label) && <Check className="w-3.5 h-3.5 text-teal-vivid shrink-0" strokeWidth={2.5} />}
                  {r.a}
                </span>
              </div>
              <div className="px-4 py-4 flex items-center justify-center text-center">
                <span className="text-sm text-foreground/70 font-body">{r.b}</span>
              </div>
            </div>
          ))}

          <div className="grid grid-cols-[1.4fr_1.2fr_1.2fr]">
            <div />
            <div className="bg-foreground rounded-b-2xl px-3 py-5 relative z-10 shadow-[0_6px_20px_rgba(0,0,0,0.08)] flex justify-center">
              <a
                href="/es"
                className="group inline-flex items-center gap-2 cta-gradient text-white rounded-full font-semibold pl-4 pr-1.5 py-1.5 text-[12px]"
              >
                Solicitar presupuesto
                <span className="flex items-center justify-center w-7 h-7 rounded-full bg-white/20 transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] group-hover:translate-x-0.5 group-hover:scale-105">
                  <ArrowRight className="w-3 h-3" />
                </span>
              </a>
            </div>
            <div />
          </div>
        </div>

        <div className="sm:hidden space-y-3">
          {rows.map((r, i) => (
            <div key={i} className="rounded-xl border border-foreground/10 bg-white p-4">
              <p className="text-xs uppercase tracking-wider font-bold text-foreground/50 mb-3">{r.label}</p>
              <div className="space-y-2 text-sm">
                <div className="flex justify-between gap-3 bg-foreground text-white rounded-lg px-3 py-2">
                  <span className="text-teal-vivid font-semibold text-xs">CovaTherm Light</span>
                  <span className="font-semibold text-xs inline-flex items-center gap-1">
                    {checkRows.has(r.label) && <Check className="w-3.5 h-3.5 text-teal-vivid" strokeWidth={2.5} />}
                    {r.a}
                  </span>
                </div>
                <div className="flex justify-between gap-3 px-3">
                  <span className="text-foreground/55 text-xs">Sustitución de lucernarios</span>
                  <span className="text-foreground/75 text-xs">{r.b}</span>
                </div>
              </div>
            </div>
          ))}
          <div className="pt-2 flex justify-center">
            <CTAButton variant="primary" href="/es">
              Solicitar presupuesto
            </CTAButton>
          </div>
        </div>

        <p className="text-foreground/70 text-base lg:text-lg font-body leading-relaxed mt-10 max-w-3xl">
          CovaTherm Light es la solución adecuada cuando los lucernarios todavía están
          estructuralmente en buen estado, pero provocan incomodidad térmica y lumínica.
          Para bóvedas de iluminación muy amarilleadas, deformadas o al final de su vida
          útil, es preferible una sustitución puntual de los elementos afectados antes de
          plantearse un recubrimiento solar sobre el resto. Para la parte opaca de su
          cubierta, la{' '}
          <a
            href="/es/soluciones/covatherm"
            className="text-primary font-semibold hover:underline"
          >
            pintura reflectante CovaTherm
          </a>{' '}
          completa el tratamiento.
        </p>
      </ScrollReveal>
    </div>
  </section>
);

export default CovaThermLightComparisonES;