import { Sun, Brain, Eye, Snowflake, Clock, Banknote } 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: Sun,
    title: 'Lumière naturelle préservée',
    desc: "Filtre les UV et les infrarouges, conserve jusqu'à 65 % de la luminosité visible. Vos équipes travaillent à la lumière du jour, sans éblouissement ni surchauffe.",
  },
  {
    icon: Brain,
    title: 'Effet « tête chaude » éliminé',
    desc: "Supprime la sensation d'inconfort sous les puits de lumière, responsable de maux de tête, vertiges et baisse de vigilance. Les postes redeviennent exploitables en été.",
  },
  {
    icon: Eye,
    title: 'Fatigue oculaire réduite',
    desc: "Diminue l'éblouissement qui force vos équipes à plisser les yeux ou à porter des lunettes de soleil en intérieur. Bénéfice direct sur la concentration et la prévention des TMS visuels.",
  },
  {
    icon: Snowflake,
    title: 'Gain thermique mesurable',
    desc: "Jusqu'à 5°C de fraîcheur en moyenne sous les surfaces traitées, sans climatisation supplémentaire. Rejette 75 % de l'énergie solaire.",
  },
  {
    icon: Clock,
    title: 'Durée de vie des lanterneaux allongée',
    desc: "Bloque les UV qui jaunissent et fragilisent le polycarbonate. Repousse le remplacement des lanterneaux de plusieurs années.",
  },
  {
    icon: Banknote,
    title: "Facture d'électricité réduite",
    desc: "Consommation de climatisation réduite de 10 à 20 % selon l'activité, grâce à l'élimination de la surchauffe localisée sous les éléments translucides.",
  },
];

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

const CovaThermLightAdvantages = ({
  badge = 'Avantages',
  titre,
  intro,
  advantages = defaultAdvantages,
}: CovaThermLightAdvantagesProps = {}) => (
  <section className="relative py-16 lg:py-24 bg-[#1A2A3A] overflow-hidden">
    <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 anti-UV
            <span className="text-teal-vivid"> pour polycarbonate CovaTherm Light.</span>
            </>)}
          </h2>
          <p className="text-white/65 text-base font-body leading-relaxed">
            {intro ?? (<>
            Appliquer CovaTherm Light sur vos lanterneaux transforme l'ambiance
            intérieure de votre bâtiment dès le premier été : la chaleur radiante
            disparaît, l'éblouissement cesse, mais la lumière naturelle reste. 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 CovaThermLightAdvantages;