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

type CellValue = string | boolean | null;

interface SpecRow {
  label: string;
  value: CellValue;
}

const defaultSpecs: SpecRow[] = [
  { label: 'Technologie', value: 'Résine acrylique élastomère\n+ finition Top Coat anti-UV' },
  { label: 'Supports', value: 'Bac acier galvanisé, peint ou brut\nTôle ondulée, zinc' },
  { label: 'Indice de réflectivité — SRI (état neuf)', value: '107' },
  { label: 'Système pour revêtement', value: 'Base Coat 400 à 800 g/m²\n+ finition Top Coat' },
  { label: "Couche d'entretien à prévoir dans", value: '20 ans' },
  { label: "Protection renforcée contre l'encrassement", value: true },
  { label: "Renforcement de l'étanchéité", value: true },
  { label: 'Prime CEE', value: 'Éligible' },
];

const Cell = ({ value }: { value: CellValue }) => {
  if (value === true) {
    return (
      <div className="w-6 h-6 rounded-full flex items-center justify-center bg-white/15">
        <Check className="w-3.5 h-3.5 text-white" strokeWidth={2.5} />
      </div>
    );
  }
  if (value === false || value === null) {
    return <Minus className="w-4 h-4 text-white/25" strokeWidth={1.5} />;
  }
  return (
    <span className="text-sm leading-snug whitespace-pre-line font-body text-white">
      {value}
    </span>
  );
};

interface CovaMetalSpecsProps {
  badge?: string;
  titre?: ReactNode;
  intro?: ReactNode;
  specs?: SpecRow[];
  nomColonne?: string;
  footnote?: string;
}

const CovaMetalSpecs = ({
  badge = 'Caractéristiques techniques',
  titre,
  intro,
  specs = defaultSpecs,
  nomColonne = 'CovaMetal 20',
  footnote = 'SRI mesuré selon norme ASTM 1980 · Garantie fabricant 20 ans · Données Covalba R&D',
}: CovaMetalSpecsProps = {}) => (
  <section className="py-16 lg:py-24 bg-white" id="specs">
    <div className="container mx-auto px-4 lg:px-8 max-w-3xl">
      <ScrollReveal>
        <div className="mb-8">
          <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]"
            style={{ letterSpacing: '-0.03em' }}
          >
            {titre ?? (<>
            Les caractéristiques
            <br />
            <span className="text-foreground/45">de CovaMetal 20.</span>
            </>)}
          </h2>
          <p className="text-foreground/70 text-base font-body leading-relaxed mt-5 max-w-2xl">
            {intro ?? (<>
            Anti-corrosion certifiée, étanchéité renforcée sur points critiques,
            réflectivité cool roof sur deux décennies. CovaMetal 20 est conçue pour les
            toitures industrielles et tertiaires en bac acier qui refusent de passer
            par un remplacement complet.
            </>)}
          </p>
        </div>
      </ScrollReveal>

      <ScrollReveal>
        {/* ─── Desktop : colonne CovaMetal 20 en élévation ─── */}
        <div className="hidden sm:block">
          {/* Header */}
          <div className="grid grid-cols-[3fr_2fr]">
            <div />
            <div className="bg-foreground rounded-t-2xl px-3 pt-5 pb-5 text-center relative z-10 shadow-[0_-6px_20px_rgba(0,0,0,0.06)]">
              <p className="text-[11px] font-semibold text-white/70 font-body uppercase tracking-[0.15em] mb-2">
                {nomColonne}
              </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">
                3-en-1
              </span>
            </div>
          </div>

          {/* Rows */}
          {specs.map((s, i) => (
            <div
              key={i}
              className={`grid grid-cols-[3fr_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">{s.label}</span>
              </div>
              <div className="px-4 py-4 flex items-center justify-center text-center bg-foreground relative z-10">
                <Cell value={s.value} />
              </div>
            </div>
          ))}

          {/* Footer CTA */}
          <div className="grid grid-cols-[3fr_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.06)] 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>

        {/* ─── Mobile : carte navy ─── */}
        <div className="sm:hidden">
          <div className="rounded-2xl bg-foreground overflow-hidden shadow-[0_20px_60px_-15px_rgba(26,42,58,0.3)]">
            <div className="px-5 py-4 text-center border-b border-white/10">
              <p className="text-[11px] font-semibold text-white/70 font-body uppercase tracking-[0.15em] mb-2">
                {nomColonne}
              </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">
                3-en-1
              </span>
            </div>
            <div className="divide-y divide-white/10">
              {specs.map((s, i) => (
                <div key={i} className="px-5 py-3 flex items-start justify-between gap-4">
                  <span className="text-xs text-white/60 font-body font-medium flex-1 leading-snug">{s.label}</span>
                  <div className="text-right max-w-[55%]">
                    <Cell value={s.value} />
                  </div>
                </div>
              ))}
            </div>
            <div className="px-5 py-4 border-t border-white/10 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 group-hover:translate-x-0.5">
                  <ArrowRight className="w-3 h-3" />
                </span>
              </a>
            </div>
          </div>
        </div>

        <p className="text-foreground/50 text-xs font-body mt-8 text-center sm:text-left">
          {footnote}
        </p>
      </ScrollReveal>
    </div>
  </section>
);

export default CovaMetalSpecs;