import { Banknote, Heart, Zap, Thermometer, Shield, 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: Banknote,
    title: 'Dépenser moins pour isoler',
    desc: 'Alternative moins onéreuse aux travaux d\'isolation traditionnels. 20–25 €/m² vs 80–100 €/m² pour une membrane neuve.',
  },
  {
    icon: Heart,
    title: 'Bien-être au travail',
    desc: "Jusqu'à 8 à 10°C de fraîcheur en intérieur sans climatisation. Un entrepôt qui grimpait à 40°C redescend autour de 30°C en pic de chaleur. Conditions de travail améliorées pour tous les collaborateurs.",
  },
  {
    icon: Zap,
    title: 'Facture d\'électricité réduite',
    desc: 'Utilisation de la climatisation réduite de 15% à 40% en fonction de votre activité. ROI moyen de 14 mois.',
  },
  {
    icon: Thermometer,
    title: 'Maintien des consignes',
    desc: 'Garantit la sécurité des marchandises et le confort des équipes. Compatible chaîne du froid et normes HACCP/BPF.',
  },
  {
    icon: Shield,
    title: 'Durée de vie prolongée',
    desc: 'Protège des variations thermiques fragilisant les membranes. Prolonge la durée de vie de l\'étanchéité de 10 ans.',
  },
  {
    icon: Sun,
    title: 'Boost les panneaux solaires',
    desc: 'Maximise la réflexion solaire et crée une zone de fraîcheur. Les panneaux gagnent 3% à 7% de production.',
  },
];

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

const ProductAdvantages = ({
  badge = 'Avantages',
  titre,
  intro,
  advantages = defaultAdvantages,
}: ProductAdvantagesProps = {}) => (
  <section className="relative py-16 lg:py-24 bg-[#1A2A3A] overflow-hidden">
    {/* Blobs décoratifs teal — version discrète, cohérente avec CTASection */}
    <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">
          <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]"
            style={{ letterSpacing: '-0.03em' }}
          >
            {titre ?? (<>
            Les avantages de la
            <span className="text-teal-vivid"> peinture cool roof CovaTherm.</span>
            </>)}
          </h2>
          <p className="text-white/70 text-base lg:text-lg font-body leading-relaxed mt-6 max-w-2xl">
            {intro ?? (<>
            Appliquer une peinture cool roof sur une toiture professionnelle produit des effets mesurables <strong className="text-white font-semibold">dès le premier été</strong>. 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 ProductAdvantages;