/**
 * LogistiqueProblemES — Spanish variant of the "Why act?" section.
 *
 * Faithful copy of LogistiqueProblem with Castilian Spanish strings from the
 * [problem] copy block. The France-specific "décret tertiaire" card is replaced
 * by the energy-cost card supplied in the ES copy.
 */

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: 'Pasillo de nave logística expuesto a un fuerte calor estival',
    kicker: 'Confort de los equipos',
    title: 'Equipos expuestos a un calor sofocante',
    desc: 'Más de 35°C en la zona de preparación: el ritmo baja y se multiplican las pausas por calor.',
  },
  {
    image: '/images/logistique/card-marchandises.webp',
    imageAlt: 'Palés y mercancías almacenadas en una nave logística',
    kicker: 'Stock sensible',
    title: 'Mercancías deterioradas',
    desc: 'Cosmética, vinos, productos farmacéuticos: los picos de temperatura generan pérdidas, devoluciones y reclamaciones de clientes.',
  },
  {
    image: '/images/logistique/card-groupes-froids.webp',
    imageAlt: 'Grupos de frío y compresores instalados en el exterior de una nave frigorífica',
    kicker: 'Frío industrial',
    title: 'Grupos de frío saturados',
    desc: 'Los compresores funcionan más tiempo, la factura sube y la cadena de frío se vuelve más frágil.',
  },
  {
    image: '/images/logistique/card-decret.webp',
    imageAlt: 'Fachada y cubierta de una nave logística moderna bajo el sol',
    kicker: 'Costes energéticos',
    title: 'Facturas que se disparan',
    desc: 'A partir de varios miles de m², controlar el consumo se convierte en una verdadera cuestión de presupuesto, no solo de confort.',
  },
];

const LogistiqueProblemES = () => (
  <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]">
                ¿Por qué actuar?
              </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' }}
            >
              El calor afecta a
              <br />
              <span className="text-foreground/40">sus equipos y sus mercancías.</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">
              La cubierta de una nave de chapa de acero puede superar los{' '}
              <strong className="font-semibold text-foreground">80°C en pleno verano</strong>. El calor atraviesa el edificio, pone a prueba a sus equipos, amenaza sus mercancías y sobrecarga sus grupos de frío.
            </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 LogistiqueProblemES;