/**
 * LogistiqueFinalCTAEN — English variant of the Logistics final CTA section.
 * Faithful copy with EN strings. CTAs point to /en (no live EN diagnostic route).
 */

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: 'Tailored assessment within 48h' },
  { icon: BadgeCheck, title: 'No commitment' },
  { icon: Award, title: 'Proven technical expertise' },
];

const LogistiqueFinalCTAEN = () => (
  <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">
              Logistics cool roof
            </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' }}
          >
            Take back control of the heat in your warehouses.
          </h2>

          <p className="text-white/[0.72] text-base lg:text-lg font-body leading-relaxed max-w-2xl mx-auto mb-9">
            Request a quote and discover the potential of your logistics site, for your teams, your
            goods and your costs.
          </p>

          <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-center gap-3">
            <a
              href="/en"
              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">Request a quote</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="/en"
              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">Talk to an expert</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 LogistiqueFinalCTAEN;