/**
 * IndustrieFinalCTAES — Spanish variant of src/components/industrie/IndustrieFinalCTA.tsx.
 * Faithful copy with ES strings from the [final-cta] copy block. Both CTAs link to the
 * live ES diagnostic route (/es/diagnostico).
 */

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

type Reassurance = {
  icon: LucideIcon;
  title: string;
};

const reassurances: Reassurance[] = [
  { icon: CalendarCheck, title: 'Estudio personalizado en 48 h' },
  { icon: BadgeCheck, title: 'Sin compromiso' },
  { icon: Award, title: 'Experiencia técnica reconocida' },
];

const IndustrieFinalCTAES = () => (
  <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">
              Cool roof industrial
            </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' }}
          >
            Haga que su cubierta trabaje de forma inteligente.
          </h2>

          <p className="text-white/60 text-base lg:text-[17px] font-body leading-relaxed max-w-[560px] mb-10 lg:mb-12">
            Solicite su presupuesto cool roof y descubra el potencial de ahorro de su nave industrial.
          </p>

          {/* CTAs */}
          <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-center gap-3 sm:gap-4">
            <a
              href="/es/diagnostico"
              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">Solicitar presupuesto</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="/es/diagnostico"
              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">Hablar con un experto</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 IndustrieFinalCTAES;