import { Snowflake, Store, ThermometerSun, UsersRound, type LucideIcon } from 'lucide-react';
import ScrollReveal from '@/components/ScrollReveal';

type ProblemCard = {
  icon: LucideIcon;
  image: string;
  alt: string;
  title: string;
  desc: string;
};

const problems: ProblemCard[] = [
  {
    icon: Store,
    image: '/images/distribution/problem-clients.webp',
    alt: 'Customers in the aisles of a large-format store on a hot day',
    title: 'Your customers cut their visits short',
    desc: 'An overheated store reduces the time spent browsing the aisles.',
  },
  {
    icon: ThermometerSun,
    image: '/images/distribution/problem-climatisation.webp',
    alt: 'Air conditioning units on a sun-exposed store roof',
    title: 'Your air conditioning runs at full capacity',
    desc: 'The units compensate continuously and the bill climbs.',
  },
  {
    icon: Snowflake,
    image: '/images/distribution/problem-rayons-frais.webp',
    alt: 'Refrigerated sections of a supermarket with chilled cabinets',
    title: 'Your refrigerated sections suffer',
    desc: 'Refrigerated cabinets work harder to maintain the cold chain.',
  },
  {
    icon: UsersRound,
    image: '/images/distribution/problem-equipes.webp',
    alt: 'Store team in a commercial space during the summer',
    title: 'Your teams are on the front line',
    desc: 'Checkouts, reception and aisles endure the heat while facing the public.',
  },
];

const DistributionProblemEN = () => (
  <section className="relative overflow-hidden bg-cream py-20 lg:py-32">
    <div
      aria-hidden="true"
      className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-foreground/10 to-transparent"
    />
    <div className="container mx-auto px-4 lg:px-8">
      <div className="mb-10 grid grid-cols-1 items-end gap-8 lg:mb-16 lg:grid-cols-[1.05fr_0.95fr] lg:gap-20">
        <div className="space-y-6 lg:space-y-9">
          <ScrollReveal>
            <div className="flex items-center gap-3">
              <span className="h-px w-9 bg-terracotta/70" aria-hidden="true" />
              <span className="font-body text-[11px] font-bold uppercase tracking-[0.22em] text-terracotta-dark">
                Why act
              </span>
            </div>
          </ScrollReveal>

          <ScrollReveal>
            <h2
              className="font-satoshi font-bold text-foreground !leading-[1.05]"
              style={{ fontSize: 'clamp(1.875rem, 3.6vw, 2.875rem)', letterSpacing: '-0.025em' }}
            >
              Heat weighs
              <br />
              <span className="text-foreground/40">on your sales.</span>
            </h2>
          </ScrollReveal>
        </div>

        <ScrollReveal>
          <p className="max-w-[560px] font-body text-base leading-relaxed text-foreground/65 lg:ml-auto lg:text-[16px]">
            In summer, a large commercial roof absorbs the sun and radiates heat inward.
            Customers stay for less time, air conditioning works harder and refrigerated sections struggle.
          </p>
        </ScrollReveal>
      </div>

      <ScrollReveal stagger>
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 lg:gap-5 xl:gap-6">
          {problems.map((problem) => {
            const Icon = problem.icon;
            return (
              <article
                key={problem.title}
                className="group overflow-hidden rounded-2xl bg-white shadow-[0_18px_45px_-34px_hsl(var(--navy)/0.28)] ring-1 ring-foreground/[0.05] transition-all duration-500 hover:-translate-y-1 hover:shadow-[0_28px_60px_-32px_hsl(var(--navy)/0.32)]"
              >
                <div className="relative aspect-[4/3] overflow-hidden bg-foreground/[0.04]">
                  <img
                    src={problem.image}
                    alt={problem.alt}
                    className="size-full object-cover transition-transform duration-700 ease-out group-hover:scale-[1.035]"
                    loading="lazy"
                    decoding="async"
                  />
                  <div aria-hidden="true" className="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-navy/45 to-transparent" />
                  <span className="absolute left-4 top-4 flex h-10 w-10 items-center justify-center rounded-full bg-cream/90 text-terracotta-dark shadow-sm backdrop-blur-sm">
                    <Icon className="h-5 w-5" strokeWidth={1.7} />
                  </span>
                </div>
                <div className="px-6 py-7 lg:px-6 lg:py-8">
                  <h3
                    className="mb-3 font-satoshi text-[18px] font-bold text-foreground !leading-tight lg:text-[19px]"
                    style={{ letterSpacing: '-0.015em' }}
                  >
                    {problem.title}
                  </h3>
                  <p className="font-body text-[14px] leading-relaxed text-foreground/62 lg:text-[14.5px]">
                    {problem.desc}
                  </p>
                </div>
              </article>
            );
          })}
        </div>
      </ScrollReveal>

      <ScrollReveal>
        <p className="mx-auto mt-10 max-w-3xl border-t border-foreground/10 pt-6 text-center font-body text-sm leading-relaxed text-foreground/58 lg:mt-14 lg:text-base">
          The common cause: a roof that absorbs heat instead of reflecting it back.
        </p>
      </ScrollReveal>
    </div>
  </section>
);

export default DistributionProblemEN;