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: 'Coût au m²', a: '20 à 25 €', b: '80 à 120 €' },
  { label: 'Durée de chantier', a: '3 à 5 jours', b: '3 à 8 semaines' },
  { label: 'Effet cool roof', a: "jusqu'à -10°C", b: 'Selon teinte des nouvelles plaques' },
  { label: 'Anti-corrosion', a: 'Traitement actif sur 20 ans', b: 'Plaques neuves' },
  { label: 'Étanchéité', a: 'Film élastique continu', b: 'Nouveaux joints' },
  { label: 'Durée de vie', a: '20 ans', b: '25 à 40 ans' },
  { label: "Interruption d'activité", a: 'Non', b: 'Oui' },
  { label: 'Démontage existant', a: 'Non', b: 'Oui' },
  { label: 'ROI moyen', a: '14 mois', b: '8 à 15 ans' },
];

// Rows where CovaMetal a) value should display a check icon (wins on ergonomics)
const checkRows = new Set(['Effet cool roof', 'Anti-corrosion', 'Étanchéité']);

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

const CovaMetalComparison = ({
  badge = 'Comparatif',
  titre,
  intro,
  rows = defaultRows,
  colA = 'CovaMetal 20',
  colB = 'Remplacement bac acier',
  texteApres,
}: CovaMetalComparisonProps = {}) => (
  <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 ?? (<>
            Peinture cool roof bac acier ou
            <br />
            <span className="text-foreground/45">remplacement de toiture ?</span>
            </>)}
          </h2>
          <p className="text-foreground/70 text-base lg:text-lg font-body leading-relaxed">
            {intro ?? (<>
            Le choix entre CovaMetal 20 et un remplacement complet de bac acier dépend
            de l'état structurel de la toiture, du budget disponible et de la tolérance
            à l'interruption d'activité. Les critères qui comptent sont résumés
            ci-dessous.
            </>)}
          </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">
                {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-5 pt-6 pb-5 text-center">
              <p className="font-satoshi text-lg font-black leading-tight text-foreground">
                {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>
          ))}

          {/* 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="/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>

        {/* 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">{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="font-bold text-foreground/70 text-sm">{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 ?? (<>
          CovaMetal 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, logistiques et agricoles dont la toiture bac acier est
          corrodée en surface mais encore structurellement exploitable. Pour une
          toiture non métallique (bitume, béton, membrane), la{' '}
          <a
            href="/covaseal"
            className="text-primary font-semibold hover:underline"
          >
            peinture étanchéité cool roof CovaSeal 20
          </a>{' '}
          est mieux adaptée.
          </>)}
        </p>
      </ScrollReveal>
    </div>
  </section>
);

export default CovaMetalComparison;