import { Shield, Droplets, Heart, Zap, Banknote, Clock } from 'lucide-react';
import type { LucideIcon } from 'lucide-react';
import type { ReactNode } from 'react';
import ScrollReveal from '@/components/ScrollReveal';

export interface AdvantageItem {
  icon: LucideIcon;
  title: string;
  desc: string;
}

const defaultAdvantages: AdvantageItem[] = [
  {
    icon: Shield,
    title: 'Corrosion stoppée en une application',
    desc: "Stoppe la progression de la rouille sur les plaques attaquées et protège le métal sain des futures agressions air et humidité. Garantie 20 ans.",
  },
  {
    icon: Droplets,
    title: 'Étanchéité renforcée sur les points critiques',
    desc: "Membrane élastique à 200 % d'allongement qui scelle les chevauchements de plaques, les points de fixation et les détails. Aspect caoutchouteux durable.",
  },
  {
    icon: Heart,
    title: 'Bien-être au travail',
    desc: "Jusqu'à 8 à 10°C de fraîcheur en intérieur sans climatisation. Un entrepôt en bac acier à 45°C redescend autour de 32°C.",
  },
  {
    icon: Zap,
    title: "Facture d'électricité réduite",
    desc: "Consommation de climatisation réduite de 15 à 40 % selon l'activité. ROI moyen de 14 mois.",
  },
  {
    icon: Banknote,
    title: 'Alternative économique au remplacement',
    desc: '20 à 25 €/m² pour un traitement complet contre 80 à 120 €/m² pour un remplacement de bac acier.',
  },
  {
    icon: Clock,
    title: "Chantier sans interruption d'activité",
    desc: "Pose par pulvérisation depuis le sol, machines au pied du bâtiment, flexibles seuls en toiture. Aucune charge, aucune vibration, aucun risque pour la structure.",
  },
];

interface CovaMetalAdvantagesProps {
  badge?: string;
  titre?: ReactNode;
  intro?: ReactNode;
  advantages?: AdvantageItem[];
}

const CovaMetalAdvantages = ({
  badge = 'Avantages',
  titre,
  intro,
  advantages = defaultAdvantages,
}: CovaMetalAdvantagesProps = {}) => (
  <section className="relative py-16 lg:py-24 bg-[#1A2A3A] overflow-hidden">
    {/* Blobs décoratifs teal */}
    <img
      src="/images/applicateur-blobs.svg"
      alt=""
      aria-hidden="true"
      className="absolute -right-[18%] -top-[35%] w-[55%] opacity-[0.10] pointer-events-none select-none"
      style={{
        maskImage: 'radial-gradient(circle at center, black 35%, transparent 75%)',
        WebkitMaskImage: 'radial-gradient(circle at center, black 35%, transparent 75%)',
      }}
    />
    <img
      src="/images/applicateur-blobs.svg"
      alt=""
      aria-hidden="true"
      className="absolute -left-[22%] -bottom-[35%] w-[45%] opacity-[0.07] pointer-events-none select-none rotate-180"
      style={{
        maskImage: 'radial-gradient(circle at center, black 35%, transparent 75%)',
        WebkitMaskImage: 'radial-gradient(circle at center, black 35%, transparent 75%)',
      }}
    />

    <div className="relative container mx-auto px-4 lg:px-8 max-w-5xl">
      <ScrollReveal>
        <div className="mb-12 lg:mb-16 max-w-2xl">
          <p className="text-[10px] uppercase tracking-[0.25em] font-semibold text-white/55 font-body mb-4">
            {badge}
          </p>
          <h2
            className="font-satoshi text-3xl sm:text-4xl lg:text-5xl font-black text-white !leading-[1.05] mb-5"
            style={{ letterSpacing: '-0.03em' }}
          >
            {titre ?? (<>
            Les avantages de la peinture cool roof
            <span className="text-teal-vivid"> bac acier CovaMetal 20.</span>
            </>)}
          </h2>
          <p className="text-white/65 text-base font-body leading-relaxed">
            {intro ?? (<>
            Appliquer CovaMetal 20 sur une toiture métallique corrodée produit un triple
            effet dès la première saison : la corrosion est stoppée, l'étanchéité est
            restaurée, et la température intérieure baisse de façon mesurable. Voici les
            six bénéfices constatés sur nos chantiers.
            </>)}
          </p>
        </div>
      </ScrollReveal>

      <ScrollReveal>
        <div className="grid grid-cols-1 lg:grid-cols-2 border-t border-white/10">
          {advantages.map((a, i) => (
            <div
              key={i}
              className="flex gap-5 py-8 border-b border-white/10 lg:odd:pr-12 lg:even:pl-12 lg:[&:nth-child(odd)]:border-r lg:[&:nth-child(odd)]:border-white/10"
            >
              <div className="shrink-0 w-10 h-10 rounded-xl bg-teal-vivid/15 flex items-center justify-center mt-0.5">
                <a.icon className="w-4.5 h-4.5 text-teal-vivid" strokeWidth={1.75} />
              </div>
              <div>
                <h3 className="text-base font-bold text-white mb-1.5 leading-snug">{a.title}</h3>
                <p className="text-sm text-white/70 font-body leading-relaxed">{a.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </ScrollReveal>
    </div>
  </section>
);

export default CovaMetalAdvantages;