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; c: string };

const rows: Row[] = [
  { label: 'Cost per m²', a: '€20 to €25', b: '€80 to €100', c: '≈ €150' },
  { label: 'Application time', a: '3 to 5 days', b: '2 to 4 weeks', c: '3 to 6 weeks' },
  { label: 'Cool roof effect', a: 'up to -10°C', b: 'Depending on color', c: 'Depending on insulation' },
  { label: 'Lifespan', a: '20 years', b: '15 to 20 years', c: '20 to 30 years' },
  { label: 'Interruption of operations', a: 'No', b: 'Yes', c: 'Yes' },
  { label: 'Micro-cracks treated', a: 'up to 2 mm', b: 'Full overhaul', c: 'Full overhaul' },
  { label: 'Dismantling existing', a: 'No', b: 'Yes', c: 'Yes' },
  { label: 'Average ROI', a: '14 months', b: '3 to 5 years', c: '8 to 12 years' },
];

// Rows where the CovaSeal a) value should display a check icon (wins on ergonomics)
const checkRows = new Set(['Cool roof effect', 'Micro-cracks treated']);

const CovaSealComparisonEN = () => (
  <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">
            Comparison
          </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' }}
          >
            Cool roof waterproofing coating or
            <br />
            <span className="text-foreground/45">full overhaul?</span>
          </h2>
          <p className="text-foreground/70 text-base lg:text-lg font-body leading-relaxed">
            The choice between CovaSeal 20 and a traditional waterproofing overhaul depends
            on the condition of the roof, the available budget, and the payback horizon. The
            criteria that matter are summarized below.
          </p>
        </div>
      </ScrollReveal>

      <ScrollReveal>
        {/* Desktop table — CovaSeal column elevated */}
        <div className="hidden sm:block">
          <div className="grid grid-cols-[1.4fr_1.2fr_1fr_1fr]">
            {/* Header row */}
            <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">
                CovaSeal 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">
                Recommended
              </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]">
                New membrane
              </p>
            </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]">
                Insulation + waterproofing
              </p>
            </div>
          </div>

          {rows.map((r, i) => (
            <div
              key={i}
              className={`grid grid-cols-[1.4fr_1.2fr_1fr_1fr] 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 className="px-4 py-4 flex items-center justify-center text-center">
                <span className="text-sm text-foreground/70 font-body">{r.c}</span>
              </div>
            </div>
          ))}

          {/* Footer CTA row */}
          <div className="grid grid-cols-[1.4fr_1.2fr_1fr_1fr]">
            <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="/en"
                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]"
              >
                Request a quote
                <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>

        {/* Mobile — cards stacked by criterion */}
        <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">CovaSeal 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="text-foreground/55 text-xs">New membrane</span>
                  <span className="text-foreground/75 text-xs">{r.b}</span>
                </div>
                <div className="flex justify-between gap-3 px-3">
                  <span className="text-foreground/55 text-xs">Insulation + waterproofing</span>
                  <span className="text-foreground/75 text-xs">{r.c}</span>
                </div>
              </div>
            </div>
          ))}
          <div className="pt-2 flex justify-center">
            <CTAButton variant="primary" href="/en">
              Request a quote
            </CTAButton>
          </div>
        </div>

        <p className="text-foreground/70 text-base lg:text-lg font-body leading-relaxed mt-10 max-w-3xl">
          CovaSeal 20 is the solution with the fastest payback, with no dismantling or
          interruption of operations. It stands out as the benchmark for industrial,
          pharmaceutical, food-processing, aerospace, and commercial buildings whose roof is
          tired but still usable. For a metal roof such as steel deck, the{' '}
          <a
            href="/en/solutions/covametal-20"
            className="text-primary font-semibold hover:underline"
          >
            CovaMetal 20 cool roof coating for steel deck
          </a>{' '}
          is better suited.
        </p>
      </ScrollReveal>
    </div>
  </section>
);

export default CovaSealComparisonEN;