import { Shield, Heart, Zap, Banknote, Clock, Sun } 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: 'Étanchéité restaurée en une application',
    desc: "Rebouche les microfissures jusqu'à 2 mm et crée un film continu imperméable, sans démontage ni réfection lourde. Garantie 20 ans.",
  },
  {
    icon: Heart,
    title: 'Bien-être au travail',
    desc: "Jusqu'à 8 à 10°C de fraîcheur en intérieur sans climatisation. Un entrepôt à 40°C redescend autour de 30°C.",
  },
  {
    icon: Zap,
    title: "Facture d'électricité réduite",
    desc: "Consommation de climatisation divisée par deux dans certains cas, 15 à 40 % d'économies selon l'activité. ROI moyen de 14 mois.",
  },
  {
    icon: Banknote,
    title: 'Alternative économique à la rénovation',
    desc: "20 à 25 €/m² contre 80 à 100 €/m² pour une membrane neuve, et jusqu'à 150 €/m² pour un remplacement isolation + étanchéité.",
  },
  {
    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.',
  },
  {
    icon: Sun,
    title: "Allonge la durée de vie de l'étanchéité",
    desc: "Protège des UV et des chocs thermiques, limite les cycles de dilatation-rétraction. Décale l'investissement de remplacement de 8 à 10 ans.",
  },
];

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

const CovaSealAdvantages = ({
  badge = 'Avantages',
  titre,
  intro,
  advantages = defaultAdvantages,
}: CovaSealAdvantagesProps = {}) => (
  <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 l'étanchéité
            <span className="text-teal-vivid"> cool roof CovaSeal 20.</span>
            </>)}
          </h2>
          <p className="text-white/65 text-base font-body leading-relaxed">
            {intro ?? (<>
            Appliquer CovaSeal 20 sur une toiture fatiguée produit un double effet dès le
            premier été : 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,
            chiffres à l'appui.
            </>)}
          </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 CovaSealAdvantages;