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

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

type Reassurance = LogistiqueFinalCTAReassurance;

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

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

const LogistiqueFinalCTA = ({
  eyebrow = 'Cool roof logistique',
  titre = 'Reprenez le contrôle de la chaleur de vos entrepôts.',
  texte = 'Demandez votre devis et découvrez le potentiel de votre site logistique, pour vos équipes, vos marchandises et vos coûts.',
  ctaPrimaireLabel = 'Demander un devis',
  ctaPrimaireHref = '/diagnostic',
  ctaSecondaireLabel = 'Parler à un expert',
  ctaSecondaireHref = '/diagnostic',
  reassurances = defaultReassurances,
}: LogistiqueFinalCTAProps = {}) => (
  <section id="contact" className="bg-[#182A3A] py-20 lg:py-32 overflow-hidden">
    <div className="container mx-auto px-4 lg:px-8">
      <ScrollReveal>
        <div className="mx-auto max-w-4xl text-center">
          <div className="mb-6 inline-flex items-center gap-3">
            <span className="h-px w-8 bg-teal-vivid/70" 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/70" aria-hidden="true" />
          </div>

          <h2
            className="font-satoshi font-black text-white !leading-[1.04] mb-6"
            style={{ fontSize: 'clamp(2rem, 3.8vw, 3.5rem)', letterSpacing: '-0.03em' }}
          >
            {titre}
          </h2>

          <p className="text-white/[0.72] text-base lg:text-lg font-body leading-relaxed max-w-2xl mx-auto mb-9">
            {texte}
          </p>

          <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-center gap-3">
            <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">
                <ArrowRight className="w-3.5 h-3.5" />
              </span>
            </a>
            <a
              href={ctaSecondaireHref}
              className="group inline-flex items-center justify-center gap-2 border border-white/[0.22] text-white/[0.88] hover:bg-white/[0.08] transition-colors font-semibold pl-6 pr-2 py-2.5 rounded-full"
            >
              <span className="text-sm">{ctaSecondaireLabel}</span>
              <span className="flex items-center justify-center w-8 h-8 rounded-full bg-white/[0.12] transition-transform duration-500 group-hover:translate-x-0.5">
                <ArrowRight className="w-3.5 h-3.5" />
              </span>
            </a>
          </div>
        </div>
      </ScrollReveal>

      <ScrollReveal>
        <ul className="mt-12 grid gap-3 sm:grid-cols-3 max-w-3xl mx-auto">
          {reassurances.map((item) => {
            const Icon = item.icon;
            return (
              <li
                key={item.title}
                className="flex items-center justify-center gap-2.5 rounded-lg border border-white/[0.12] bg-white/[0.045] px-4 py-3"
              >
                <Icon className="w-4 h-4 text-teal-vivid shrink-0" strokeWidth={1.8} />
                <span className="text-white/[0.76] text-sm font-body">{item.title}</span>
              </li>
            );
          })}
        </ul>
      </ScrollReveal>
    </div>
  </section>
);

export default LogistiqueFinalCTA;