import { ArrowRight, CheckCircle } from 'lucide-react';
import ScrollReveal from './ScrollReveal';

interface CTASectionProps {
  title?: string;
  subtitle?: string;
  proofBanner?: string;
  primaryLabel?: string;
  primaryHref?: string;
  secondaryLabel?: string;
  secondaryHref?: string;
}

const CTASection = ({
  title = 'Quel budget prévoir pour traiter votre toiture ?',
  subtitle = "Estimation personnalisée de l'investissement travaux en moins de 48 h. Réponse sous 24 h, sans engagement.",
  proofBanner,
  primaryLabel = 'Demander un devis',
  primaryHref = '/diagnostic',
  secondaryLabel = 'Estimer mon budget',
  secondaryHref = '/estimation',
}: CTASectionProps) => (
  <section className="relative bg-[#192A3A] py-16 lg:py-32 overflow-hidden">
    {/* Blobs décoratifs teal — cohérent avec WinterObjectionSection */}
    <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">
      <ScrollReveal>
        <div className="flex flex-col items-center text-center">
          {proofBanner && (
            <div className="inline-flex items-center gap-2 bg-white/[0.08] border border-white/[0.12] rounded-full px-5 py-2 mb-6">
              <CheckCircle className="w-4 h-4 text-[#70bfc6]" />
              <span className="text-white/70 text-sm font-body font-medium">{proofBanner}</span>
            </div>
          )}
          <h2
            className="font-satoshi text-3xl sm:text-4xl lg:text-[3rem] font-black text-white !leading-[1.05] mb-4"
            style={{ letterSpacing: '-0.03em' }}
          >
            {title}
          </h2>
          <p className="text-white/50 text-base lg:text-lg font-body leading-relaxed max-w-xl mb-10">
            {subtitle}
          </p>

          <div className="flex flex-col sm:flex-row items-center gap-4">
            {/* Primary */}
            <a
              href={primaryHref}
              className="group inline-flex items-center gap-2 cta-gradient text-white font-semibold pl-6 pr-2 py-2 rounded-full"
            >
              <span className="text-sm">{primaryLabel}</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>

            {/* Secondary */}
            <a
              href={secondaryHref}
              className="group inline-flex items-center gap-2 border-2 border-[#991437] text-[#991437] rounded-full font-semibold pl-6 pr-2 py-2 hover:bg-[#991437]/5"
            >
              <span className="text-sm">{secondaryLabel}</span>
              <span className="flex items-center justify-center w-8 h-8 rounded-full bg-[#991437]/15 transition-transform duration-500 group-hover:translate-x-0.5 group-hover:scale-105">
                <ArrowRight className="w-3.5 h-3.5" />
              </span>
            </a>
          </div>
        </div>
      </ScrollReveal>
    </div>
  </section>
);

export default CTASection;