/**
 * LogistiqueProblemEN — English variant of the Logistics "Why act?" section.
 *
 * Faithful copy with EN strings. The FR 4th card ("Décret tertiaire", France-
 * specific) is replaced by the de-Frenchified EN copy ("Asset value").
 */

import ScrollReveal from '@/components/ScrollReveal';

type Friction = {
  image: string;
  imageAlt: string;
  kicker: string;
  title: string;
  desc: string;
};

const frictions: Friction[] = [
  {
    image: '/images/logistique/card-equipes.webp',
    imageAlt: 'Warehouse aisle exposed to intense summer heat',
    kicker: 'Team comfort',
    title: 'Teams working in a furnace',
    desc: 'Over 35°C in the picking area: throughput drops and heat-related breaks multiply.',
  },
  {
    image: '/images/logistique/card-marchandises.webp',
    imageAlt: 'Pallets and goods stored in a logistics warehouse',
    kicker: 'Sensitive stock',
    title: 'Damaged goods',
    desc: 'Cosmetics, wines, pharma: temperature spikes lead to losses, returns and customer disputes.',
  },
  {
    image: '/images/logistique/card-groupes-froids.webp',
    imageAlt: 'Cooling units and compressors installed outside a cold storage warehouse',
    kicker: 'Industrial cooling',
    title: 'Overloaded cooling units',
    desc: 'Compressors run longer, the bill climbs and the cold chain becomes more fragile.',
  },
  {
    image: '/images/logistique/card-decret.webp',
    imageAlt: 'Facade and roof of a modern logistics building under the sun',
    kicker: 'Asset value',
    title: 'A building that deteriorates faster',
    desc: 'Beyond a certain size, controlling consumption becomes a matter of operating costs and building value, not just comfort.',
  },
];

const LogistiqueProblemEN = () => (
  <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">
      {/* Header */}
      <div className="grid grid-cols-1 lg:grid-cols-[1.05fr_0.95fr] gap-8 lg:gap-20 items-end mb-8 lg:mb-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="text-terracotta-dark text-[11px] font-bold font-body uppercase tracking-[0.22em]">
                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 takes a toll on
              <br />
              <span className="text-foreground/40">your teams and your goods.</span>
            </h2>
          </ScrollReveal>
        </div>

        <ScrollReveal>
          <div className="max-w-[560px] lg:ml-auto">
            <p className="text-foreground/65 text-base lg:text-[17px] font-body leading-relaxed">
              A steel deck warehouse roof can exceed{' '}
              <strong className="font-semibold text-foreground">80°C at the height of summer</strong>. The heat passes through the building, puts your teams under strain, threatens your goods and overloads your cooling units.
            </p>
          </div>
        </ScrollReveal>
      </div>

      {/* Photo cards */}
      <ScrollReveal stagger>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-5 xl:gap-6">
          {frictions.map((f, i) => (
            <article
              key={i}
              className="
                group relative overflow-hidden rounded-2xl bg-white
                ring-1 ring-foreground/[0.05]
                shadow-[0_18px_45px_-34px_hsl(var(--navy)/0.28)]
                transition-all duration-500 ease-out
                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={f.image}
                  alt={f.imageAlt}
                  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 rounded-full bg-cream/90 px-3 py-1 text-[10px] font-body font-bold uppercase tracking-[0.16em] text-terracotta-dark shadow-sm backdrop-blur-sm">
                  {f.kicker}
                </span>
              </div>

              <div className="px-6 py-7 lg:px-6 lg:py-8">
                <h3
                  className="font-satoshi font-bold text-foreground text-[18px] lg:text-[19px] !leading-tight mb-3"
                  style={{ letterSpacing: '-0.015em' }}
                >
                  {f.title}
                </h3>
                <p className="text-foreground/62 text-[14px] lg:text-[14.5px] font-body leading-relaxed">
                  {f.desc}
                </p>
              </div>
            </article>
          ))}
        </div>
      </ScrollReveal>
    </div>
  </section>
);

export default LogistiqueProblemEN;