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 haute réflectivité' },
  {
    label: 'Supports',
    value: 'Skydômes, lanterneaux,\nvoûtes éclairantes\nen polycarbonate ou polyester',
  },
  { label: 'Rejet UV', value: 'Jusqu\'à 98 % des UV filtrés' },
  { label: 'Énergie solaire rejetée', value: '75 %' },
  { label: 'Luminosité naturelle préservée', value: 'Jusqu\'à 65 %' },
  { label: 'Système pour revêtement', value: '200 g/m²\n(1 à 2 couches)' },
  { label: "Couche d'entretien à prévoir dans", value: '5 à 8 ans\nsur support sain' },
  { label: "Protection renforcée contre l'encrassement", value: true },
  { label: 'Prime CEE', value: 'Non é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 CovaThermLightSpecsProps {
  badge?: string;
  titre?: ReactNode;
  intro?: ReactNode;
  specs?: SpecRow[];
  nomColonne?: string;
  footnote?: string;
}

const CovaThermLightSpecs = ({
  badge = 'Caractéristiques techniques',
  titre,
  intro,
  specs = defaultSpecs,
  nomColonne = 'CovaTherm Light',
  footnote = 'Performance mesurée sur support polycarbonate · Garantie fabricant · Données Covalba R&D',
}: CovaThermLightSpecsProps = {}) => (
  <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 CovaTherm Light.</span>
            </>)}
          </h2>
          <p className="text-foreground/70 text-base font-body leading-relaxed mt-5 max-w-2xl">
            {intro ?? (<>
            Résine acrylique à haute réflectivité solaire, application au rouleau ou au
            pistolet airless, préservation de la translucidité du support. CovaTherm
            Light est conçue spécifiquement pour les surfaces translucides de toiture,
            là où une peinture cool roof opaque ne peut pas être appliquée.
            </>)}
          </p>
        </div>
      </ScrollReveal>

      <ScrollReveal>
        <div className="hidden sm:block">
          <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">
                Laque solaire
              </span>
            </div>
          </div>

          {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>
          ))}

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

        <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">
                Laque solaire
              </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 CovaThermLightSpecs;