import { Flame, FileCheck2, Leaf, Building2, BadgeCheck, Droplets } from 'lucide-react';
import type { LucideIcon } from 'lucide-react';
import type { ReactNode } from 'react';
import ScrollReveal from '@/components/ScrollReveal';

export interface CertificationItem {
  icon: LucideIcon;
  label: string;
  desc: string;
}

const defaultCertifications: CertificationItem[] = [
  {
    icon: Flame,
    label: 'Broof(t3)',
    desc: 'Classement de résistance à un feu extérieur, niveau le plus exigeant pour une toiture industrielle.',
  },
  {
    icon: FileCheck2,
    label: 'Avis technique CSTB',
    desc: 'Document de référence pour la mise en œuvre en France.',
  },
  {
    icon: Building2,
    label: 'RE2020',
    desc: 'Compatibilité avec les exigences thermiques des bâtiments neufs et rénovés.',
  },
  {
    icon: BadgeCheck,
    label: 'Décret tertiaire',
    desc: "S'inscrit dans les leviers d'économie d'énergie obligatoires pour le parc tertiaire.",
  },
  {
    icon: Droplets,
    label: 'Prime CEE BAT-EN-112',
    desc: 'Éligible sous conditions pour les bâtiments tertiaires commerciaux chauffés/refroidis par PAC.',
  },
  {
    icon: Leaf,
    label: 'Formulation faible COV',
    desc: 'Respect des exigences environnementales des bâtiments labellisés.',
  },
];

interface CovaMetalCertificationsProps {
  badge?: string;
  titre?: ReactNode;
  intro?: ReactNode;
  certifications?: CertificationItem[];
}

const CovaMetalCertifications = ({
  badge = 'Certifications',
  titre,
  intro,
  certifications = defaultCertifications,
}: CovaMetalCertificationsProps = {}) => (
  <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="mb-12 lg:mb-14 max-w-2xl">
          <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 ?? (<>
            Certifications et
            <br />
            <span className="text-foreground/45">conformité réglementaire.</span>
            </>)}
          </h2>
          <p className="text-foreground/70 text-base font-body leading-relaxed">
            {intro ?? (<>
            CovaMetal 20 répond aux exigences techniques et environnementales du bâtiment
            industriel. Classement feu Broof(t3), avis technique CSTB, compatibilité
            RE2020 et décret tertiaire, éligibilité aux primes CEE : chaque chantier de
            rénovation bac acier est couvert par un cadre normatif complet.
            </>)}
          </p>
        </div>
      </ScrollReveal>

      <ScrollReveal>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {certifications.map((c, i) => (
            <div
              key={i}
              className="rounded-2xl border border-border bg-cream/40 p-6 flex flex-col gap-3 hover:border-primary/25 hover:shadow-[0_4px_20px_rgba(26,42,58,0.05)] transition-all"
            >
              <div className="w-11 h-11 rounded-xl bg-primary/10 flex items-center justify-center">
                <c.icon className="w-5 h-5 text-primary" strokeWidth={1.75} />
              </div>
              <div>
                <p className="font-satoshi text-base font-bold text-foreground mb-1.5">
                  {c.label}
                </p>
                <p className="text-sm text-foreground/65 font-body leading-relaxed">
                  {c.desc}
                </p>
              </div>
            </div>
          ))}
        </div>
      </ScrollReveal>
    </div>
  </section>
);

export default CovaMetalCertifications;