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

const defaultRows: Row[] = [
  { label: 'Coût au m²', a: '20 à 25 €', b: '80 à 100 €', c: '≈ 150 €' },
  { label: 'Durée de chantier', a: '3 à 5 jours', b: '2 à 4 semaines', c: '3 à 6 semaines' },
  { label: 'Effet cool roof', a: 'jusqu\'à -10°C', b: 'Selon teinte', c: 'Selon isolation' },
  { label: 'Durée de vie', a: '20 ans', b: '15 à 20 ans', c: '20 à 30 ans' },
  { label: "Interruption d'activité", a: 'Non', b: 'Oui', c: 'Oui' },
  { label: 'Microfissures traitées', a: 'jusqu\'à 2 mm', b: 'Réfection complète', c: 'Réfection complète' },
  { label: 'Démontage existant', a: 'Non', b: 'Oui', c: 'Oui' },
  { label: 'ROI moyen', a: '14 mois', b: '3 à 5 ans', c: '8 à 12 ans' },
];

// Rows where CovaSeal a) value should display a check icon (wins on ergonomics)
const checkRows = new Set(['Effet cool roof', 'Microfissures traitées']);

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

const CovaSealComparison = ({
  badge = 'Comparatif',
  titre,
  intro,
  rows = defaultRows,
  colA = 'CovaSeal 20',
  colB = 'Membrane neuve',
  colC = 'Isolation + étanchéité',
  texteApres,
}: CovaSealComparisonProps = {}) => (
  <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 ?? (<>
            Étanchéité cool roof ou
            <br />
            <span className="text-foreground/45">réfection complète ?</span>
            </>)}
          </h2>
          <p className="text-foreground/70 text-base lg:text-lg font-body leading-relaxed">
            {intro ?? (<>
            Le choix entre CovaSeal 20 et une réfection d'étanchéité traditionnelle dépend
            de l'état de la toiture, du budget disponible et de l'horizon d'amortissement.
            Les critères qui comptent sont résumés ci-dessous.
            </>)}
          </p>
        </div>
      </ScrollReveal>

      <ScrollReveal>
        {/* Desktop table — colonne CovaSeal élevée */}
        <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">
                {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 className="px-4 pt-5 pb-4 text-center">
              <p className="text-[11px] font-semibold text-foreground/55 font-body uppercase tracking-[0.15em]">
                {colC}
              </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="/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>

        {/* 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-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 className="flex justify-between gap-3 px-3">
                  <span className="text-foreground/55 text-xs">{colC}</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="/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 ?? (<>
          CovaSeal 20 est la solution qui s'amortit le plus rapidement, sans démontage ni
          interruption d'activité. Elle s'impose comme la référence pour les bâtiments
          industriels, pharmaceutiques, agroalimentaires, aéronautiques et tertiaires dont
          la toiture est fatiguée mais encore exploitable. Pour une toiture métallique type
          bac acier, la{' '}
          <a
            href="/covametal"
            className="text-primary font-semibold hover:underline"
          >
            peinture cool roof pour bac acier CovaMetal 20
          </a>{' '}
          est mieux adaptée.
          </>)}
        </p>
      </ScrollReveal>
    </div>
  </section>
);

export default CovaSealComparison;