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

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

const defaultRows: Row[] = [
  { label: 'Durée de chantier', a: '1 à 3 jours', b: '1 à 3 semaines' },
  { label: 'Lumière naturelle préservée', a: "jusqu'à 65 %", b: 'Totale (lanterneaux neufs)' },
  { label: 'Effet anti-chaleur', a: '-5°C en moyenne', b: 'Selon modèle choisi' },
  { label: 'Filtration UV', a: 'Active sur 8 à 10 ans', b: 'Si additifs UV intégrés' },
  { label: 'Étanchéité', a: 'Non modifiée', b: 'Joints neufs' },
  { label: "Interruption d'activité", a: 'Aucune', b: 'Partielle' },
  { label: 'Durée de vie', a: '8 à 10 ans', b: '15 à 20 ans' },
  { label: 'ROI moyen', a: 'Court', b: 'Long' },
];

const checkRows = new Set([
  'Lumière naturelle préservée',
  'Effet anti-chaleur',
  'Filtration UV',
  "Interruption d'activité",
]);

interface CovaThermLightComparisonProps {
  badge?: string;
  titre?: ReactNode;
  intro?: ReactNode;
  rows?: Row[];
  colA?: string;
  colB?: string;
  texteApres?: ReactNode;
}

const CovaThermLightComparison = ({
  badge = 'Comparatif',
  titre,
  intro,
  rows = defaultRows,
  colA = 'CovaTherm Light',
  colB = 'Remplacement lanterneaux',
  texteApres,
}: CovaThermLightComparisonProps = {}) => (
  <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">
            {badge}
          </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' }}
          >
            {titre ?? (<>
            Laque solaire ou
            <br />
            <span className="text-foreground/45">remplacement des lanterneaux ?</span>
            </>)}
          </h2>
          <p className="text-foreground/70 text-base lg:text-lg font-body leading-relaxed">
            {intro ?? (<>
            Le choix entre CovaTherm Light et un remplacement complet des lanterneaux
            dépend de l'âge des éléments translucides, de leur état de dégradation et
            du budget disponible. Les critères qui comptent sont résumés ci-dessous.
            </>)}
          </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">
                {colA}
              </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">
                Recommandé
              </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]">
                {colB}
              </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="/diagnostic"
                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]"
              >
                Demander un devis
                <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">{colA}</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">{colB}</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="/diagnostic">
              Demander un devis
            </CTAButton>
          </div>
        </div>

        <p className="text-foreground/70 text-base lg:text-lg font-body leading-relaxed mt-10 max-w-3xl">
          {texteApres ?? (<>
          CovaTherm Light est la solution adaptée quand les lanterneaux sont encore
          structurellement sains mais provoquent un inconfort thermique et lumineux.
          Pour des voûtes éclairantes très jaunies, déformées ou en fin de vie, un
          remplacement ponctuel des éléments concernés est préférable avant d'envisager
          une laque solaire sur le reste. Pour la partie opaque de votre toiture, la{' '}
          <a
            href="/peinture-reflective-covatherm"
            className="text-primary font-semibold hover:underline"
          >
            peinture cool roof CovaTherm
          </a>{' '}
          complète le traitement.
          </>)}
        </p>
      </ScrollReveal>
    </div>
  </section>
);

export default CovaThermLightComparison;