/**
 * LogistiqueFinalCTAES — Spanish variant of the logistics final CTA.
 *
 * Faithful copy of LogistiqueFinalCTA with Castilian Spanish strings from the
 * [final-cta] copy block. Product pivot: CTA sells the coating ("Solicitar
 * presupuesto").
 */

import { ArrowRight, Award, BadgeCheck, CalendarCheck, 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: 'Asesoramiento técnico especializado' },
];

const LogistiqueFinalCTAES = () => (
  <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">
              Cool roof para logística
            </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' }}
          >
            Recupere el control del calor en sus naves.
          </h2>

          <p className="text-white/[0.72] text-base lg:text-lg font-body leading-relaxed max-w-2xl mx-auto mb-9">
            Solicite su presupuesto y descubra el potencial de su nave logística, para sus equipos,
            sus mercancías y sus costes.
          </p>

          <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-center gap-3">
            <a
              href="/diagnostic"
              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">
                <ArrowRight className="w-3.5 h-3.5" />
              </span>
            </a>
            <a
              href="/diagnostic"
              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">Hablar con un experto</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 LogistiqueFinalCTAES;