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: 'Coste por m²', a: '20 a 25 €', b: '80 a 120 €' },
  { label: 'Duración de la obra', a: '3 a 5 días', b: '3 a 8 semanas' },
  { label: 'Efecto cool roof', a: 'hasta -10 °C', b: 'Según el tono de las nuevas placas' },
  { label: 'Anticorrosión', a: 'Tratamiento activo durante 20 años', b: 'Placas nuevas' },
  { label: 'Impermeabilización', a: 'Film elástico continuo', b: 'Nuevas juntas' },
  { label: 'Vida útil', a: '20 años', b: '25 a 40 años' },
  { label: 'Interrupción de la actividad', a: 'No', b: 'Sí' },
  { label: 'Desmontaje de lo existente', a: 'No', b: 'Sí' },
  { label: 'ROI medio', a: '14 meses', b: '8 a 15 años' },
];

// Rows where CovaMetal a) value should display a check icon (wins on ergonomics)
const checkRows = new Set(['Efecto cool roof', 'Anticorrosión', 'Impermeabilización']);

const CovaMetalComparisonES = () => (
  <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' }}
          >
            ¿Pintura reflectante para cubierta metálica o
            <br />
            <span className="text-foreground/45">sustitución de la cubierta?</span>
          </h2>
          <p className="text-foreground/70 text-base lg:text-lg font-body leading-relaxed">
            La elección entre CovaMetal 20 y una sustitución completa de la cubierta
            metálica depende del estado estructural de la cubierta, del presupuesto
            disponible y de la tolerancia a la interrupción de la actividad. A continuación
            se resumen los criterios que cuentan.
          </p>
        </div>
      </ScrollReveal>

      <ScrollReveal>
        {/* Desktop table — colonne CovaMetal élevée */}
        <div className="hidden sm:block">
          <div className="grid grid-cols-[1.4fr_1.2fr_1.2fr]">
            {/* Header row */}
            <div />
            <div className="bg-foreground rounded-t-2xl px-5 pt-6 pb-6 text-center relative z-10 shadow-[0_-6px_20px_rgba(0,0,0,0.08)]">
              <p className="text-lg font-black text-white font-satoshi leading-tight mb-2">
                CovaMetal 20
              </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-5 pt-6 pb-5 text-center">
              <p className="font-satoshi text-lg font-black leading-tight text-foreground">
                Sustitución de la cubierta metálica
              </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>
          ))}

          {/* Footer CTA row */}
          <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>

        {/* Mobile — cards empilées par critère */}
        <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-black text-sm">CovaMetal 20</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="font-bold text-foreground/70 text-sm">Sustitución de la cubierta metálica</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">
          CovaMetal 20 es la solución que se amortiza con mayor rapidez, sin desmontaje ni
          interrupción de la actividad. Se impone como la referencia para los edificios
          industriales, logísticos y agrícolas cuya cubierta metálica está corroída en
          superficie pero sigue siendo estructuralmente aprovechable. Para una cubierta no
          metálica (asfalto, hormigón, membrana), el{' '}
          <a
            href="/es/soluciones/covaseal-20"
            className="text-primary font-semibold hover:underline"
          >
            recubrimiento de impermeabilización líquida CovaSeal 20
          </a>{' '}
          resulta más adecuado.
        </p>
      </ScrollReveal>
    </div>
  </section>
);

export default CovaMetalComparisonES;