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: 'Project duration', a: '1 to 3 days', b: '1 to 3 weeks' },
  { label: 'Natural light preserved', a: 'up to 65%', b: 'Full (new skylights)' },
  { label: 'Anti-heat effect', a: '-5°C on average', b: 'Depending on the model chosen' },
  { label: 'UV filtration', a: 'Active for 8 to 10 years', b: 'If UV additives included' },
  { label: 'Waterproofing', a: 'Unchanged', b: 'New seals' },
  { label: 'Activity interruption', a: 'None', b: 'Partial' },
  { label: 'Lifespan', a: '8 to 10 years', b: '15 to 20 years' },
  { label: 'Average ROI', a: 'Short', b: 'Long' },
];

const checkRows = new Set([
  'Natural light preserved',
  'Anti-heat effect',
  'UV filtration',
  'Activity interruption',
]);

const CovaThermLightComparisonEN = () => (
  <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' }}
          >
            Solar-control coating or
            <br />
            <span className="text-foreground/45">skylight replacement?</span>
          </h2>
          <p className="text-foreground/70 text-base lg:text-lg font-body leading-relaxed">
            The choice between CovaTherm Light and a full skylight replacement depends on
            the age of the translucent elements, their level of degradation and the
            available budget. The criteria that matter are summarized below.
          </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">
                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]">
                Skylight 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>
          ))}

          <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>

        <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">Skylight 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">
          CovaTherm Light is the appropriate solution when skylights are still
          structurally sound but cause thermal and light discomfort. For barrel-vault
          rooflights that are heavily yellowed, deformed or near the end of their life, a
          targeted replacement of the affected elements is preferable before considering
          a solar-control coating on the rest. For the opaque part of your roof, the{' '}
          <a
            href="/en/solutions/covatherm"
            className="text-primary font-semibold hover:underline"
          >
            CovaTherm cool roof coating
          </a>{' '}
          completes the treatment.
        </p>
      </ScrollReveal>
    </div>
  </section>
);

export default CovaThermLightComparisonEN;