import { ArrowRight, CalendarCheck, BadgeCheck, Award, type LucideIcon } from 'lucide-react';
import ScrollReveal from '@/components/ScrollReveal';

export type IndustrieFinalCTAReassurance = {
  icon: LucideIcon;
  title: string;
};

type Reassurance = IndustrieFinalCTAReassurance;

export const defaultReassurances: Reassurance[] = [
  { icon: CalendarCheck, title: 'Étude personnalisée sous 48h' },
  { icon: BadgeCheck, title: 'Sans engagement' },
  { icon: Award, title: 'Expertise technique reconnue' },
];

type IndustrieFinalCTAProps = {
  eyebrow?: string;
  titre?: string;
  texte?: string;
  ctaPrimaireLabel?: string;
  ctaPrimaireHref?: string;
  ctaSecondaireLabel?: string;
  ctaSecondaireHref?: string;
  reassurances?: Reassurance[];
};

const IndustrieFinalCTA = ({
  eyebrow = 'Cool roof industriel',
  titre = 'Faites travailler votre toiture intelligemment.',
  texte = "Demandez votre devis cool roof et découvrez le potentiel d'économies de votre bâtiment industriel.",
  ctaPrimaireLabel = 'Demander un devis',
  ctaPrimaireHref = '/diagnostic',
  ctaSecondaireLabel = 'Parler à un expert',
  ctaSecondaireHref = '/diagnostic',
  reassurances = defaultReassurances,
}: IndustrieFinalCTAProps = {}) => (
  <section id="contact" className="relative bg-[#192A3A] py-28 lg:py-40 overflow-hidden">
    {/* Decorative teal blobs — same pattern as the homepage CTASection */}
    <img
      src="/images/applicateur-blobs.svg"
      alt=""
      aria-hidden="true"
      className="absolute -right-[15%] -top-[40%] w-[60%] opacity-20 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-[20%] -bottom-[40%] w-[50%] opacity-15 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">
      {/* Centered header + CTAs */}
      <ScrollReveal>
        <div className="flex flex-col items-center text-center mb-16 lg:mb-20">
          <div className="mb-6 lg:mb-8 inline-flex items-center gap-3">
            <span className="h-px w-8 bg-teal-vivid/60" aria-hidden="true" />
            <span className="text-teal-vivid text-[11px] uppercase tracking-[0.22em] font-bold font-body">
              {eyebrow}
            </span>
            <span className="h-px w-8 bg-teal-vivid/60" aria-hidden="true" />
          </div>

          <h2
            className="font-satoshi font-black text-white !leading-[1.05] mb-6 lg:mb-7 max-w-3xl"
            style={{ fontSize: 'clamp(2rem, 4.2vw, 3.5rem)', letterSpacing: '-0.03em' }}
          >
            {titre}
          </h2>

          <p className="text-white/60 text-base lg:text-[17px] font-body leading-relaxed max-w-[560px] mb-10 lg:mb-12">
            {texte}
          </p>

          {/* CTAs */}
          <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-center gap-3 sm:gap-4">
            <a
              href={ctaPrimaireHref}
              className="group inline-flex items-center justify-center gap-2 cta-gradient text-white font-semibold pl-6 pr-2 py-2.5 rounded-full"
            >
              <span className="text-sm">{ctaPrimaireLabel}</span>
              <span className="flex items-center justify-center w-8 h-8 rounded-full bg-white/20 transition-transform duration-500 group-hover:translate-x-0.5 group-hover:scale-105">
                <ArrowRight className="w-3.5 h-3.5" />
              </span>
            </a>
            <a
              href={ctaSecondaireHref}
              className="group inline-flex items-center justify-center gap-2 border-2 border-[#991437] text-[#ce5b73] hover:bg-[#991437]/10 transition-colors font-semibold pl-6 pr-2 py-2 rounded-full"
            >
              <span className="text-sm">{ctaSecondaireLabel}</span>
              <span className="flex items-center justify-center w-8 h-8 rounded-full bg-[#991437]/30 transition-transform duration-500 group-hover:translate-x-0.5">
                <ArrowRight className="w-3.5 h-3.5" />
              </span>
            </a>
          </div>
        </div>
      </ScrollReveal>

      {/* 3 reassurance items — minimalist inline (no cards, no descriptions) */}
      <ScrollReveal>
        <ul className="flex flex-col sm:flex-row flex-wrap items-center justify-center gap-y-4 gap-x-10 lg:gap-x-14">
          {reassurances.map((r, i) => {
            const Icon = r.icon;
            return (
              <li key={i} className="flex items-center gap-2.5">
                <Icon className="w-4 h-4 text-teal-vivid shrink-0" strokeWidth={1.75} />
                <span className="text-white/70 text-sm lg:text-[14.5px] font-body">
                  {r.title}
                </span>
              </li>
            );
          })}
        </ul>
      </ScrollReveal>
    </div>
  </section>
);

export default IndustrieFinalCTA;