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: 'Cost per m²', a: '€20 to €25', b: '€80 to €120' },
  { label: 'Project duration', a: '3 to 5 days', b: '3 to 8 weeks' },
  { label: 'Cool roof effect', a: 'up to 10°C cooler', b: 'Depending on the color of the new sheets' },
  { label: 'Anti-corrosion', a: 'Active treatment over 20 years', b: 'New sheets' },
  { label: 'Waterproofing', a: 'Continuous elastic film', b: 'New joints' },
  { label: 'Service life', a: '20 years', b: '25 to 40 years' },
  { label: 'Business interruption', a: 'No', b: 'Yes' },
  { label: 'Removal of existing roof', a: 'No', b: 'Yes' },
  { label: 'Average ROI', a: '14 months', b: '8 to 15 years' },
];

// Rows where CovaMetal a) value should display a check icon (wins on ergonomics)
const checkRows = new Set(['Cool roof effect', 'Anti-corrosion', 'Waterproofing']);

const CovaMetalComparisonEN = () => (
  <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' }}
          >
            Steel deck cool roof coating or
            <br />
            <span className="text-foreground/45">full roof replacement?</span>
          </h2>
          <p className="text-foreground/70 text-base lg:text-lg font-body leading-relaxed">
            The choice between CovaMetal 20 and a full steel deck replacement depends on
            the structural condition of the roof, the available budget, and the tolerance
            for business interruption. The criteria that matter are summarized below.
          </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">
                Recommended
              </span>
            </div>
            <div className="px-5 pt-6 pb-5 text-center">
              <p className="font-satoshi text-lg font-black leading-tight text-foreground">
                Steel deck replacement
              </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="/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>

        {/* 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">Steel deck replacement</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="/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">
          CovaMetal 20 is the solution that pays for itself the fastest, with no removal
          and no business interruption. It stands out as the reference for industrial,
          logistics and agricultural buildings whose steel deck roof is corroded at the
          surface but still structurally usable. For a non-metal roof (bitumen, concrete,
          membrane), the{' '}
          <a
            href="/en/solutions/covaseal-20"
            className="text-primary font-semibold hover:underline"
          >
            CovaSeal 20 cool roof waterproofing coating
          </a>{' '}
          is better suited.
        </p>
      </ScrollReveal>
    </div>
  </section>
);

export default CovaMetalComparisonEN;