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

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

const reassurances: Reassurance[] = [
  { icon: CalendarCheck, title: 'Personalized assessment within 48h' },
  { icon: FileCheck2, title: 'Detailed quote' },
  { icon: BadgeCheck, title: 'No commitment' },
];

const DistributionFinalCTAEN = () => (
  <section id="contact-retail" className="overflow-hidden bg-[#182A3A] py-20 lg:py-32">
    <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="font-body text-[11px] font-bold uppercase tracking-[0.22em] text-teal-vivid">
              Cool roof for retail
            </span>
            <span className="h-px w-8 bg-teal-vivid/70" aria-hidden="true" />
          </div>

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

          <p className="mx-auto mb-9 max-w-2xl font-body text-base leading-relaxed text-white/[0.72] lg:text-[17px]">
            Request your quote, or order a sample to test the coating yourself.
          </p>

          <div className="flex flex-col items-stretch justify-center gap-3 sm:flex-row sm:items-center">
            <a href="/en" className="group inline-flex items-center justify-center gap-2 rounded-full cta-gradient py-2.5 pl-6 pr-2 font-semibold text-white">
              <span className="text-sm">Request a quote</span>
              <span className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 transition-transform duration-500 group-hover:translate-x-0.5">
                <ArrowRight className="h-3.5 w-3.5" />
              </span>
            </a>
            <a href="/en" className="group inline-flex items-center justify-center gap-2 rounded-full border border-white/[0.22] py-2.5 pl-6 pr-2 font-semibold text-white/[0.88] transition-colors hover:bg-white/[0.08]">
              <span className="text-sm">Order a sample</span>
              <span className="flex h-8 w-8 items-center justify-center rounded-full bg-white/[0.12] transition-transform duration-500 group-hover:translate-x-0.5">
                <ArrowRight className="h-3.5 w-3.5" />
              </span>
            </a>
          </div>
        </div>
      </ScrollReveal>

      <ScrollReveal>
        <ul className="mx-auto mt-12 grid max-w-3xl gap-3 sm:grid-cols-3">
          {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="h-4 w-4 shrink-0 text-teal-vivid" strokeWidth={1.8} />
                <span className="font-body text-sm text-white/[0.76]">{item.title}</span>
              </li>
            );
          })}
        </ul>
      </ScrollReveal>
    </div>
  </section>
);

export default DistributionFinalCTAEN;