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: 'Clientes en los pasillos de una gran superficie durante un día caluroso',
    title: 'Sus clientes acortan sus visitas',
    desc: 'Una tienda demasiado calurosa reduce el tiempo que pasan en los lineales.',
  },
  {
    icon: ThermometerSun,
    image: '/images/distribution/problem-climatisation.webp',
    alt: 'Equipos de climatización en la cubierta de una tienda expuesta al sol',
    title: 'Su climatización funciona a pleno rendimiento',
    desc: 'Los equipos compensan sin parar y la factura sube.',
  },
  {
    icon: Snowflake,
    image: '/images/distribution/problem-rayons-frais.webp',
    alt: 'Lineales de frescos de un supermercado con muebles refrigerados',
    title: 'Sus lineales de frescos sufren',
    desc: 'Los muebles refrigerados trabajan más para mantener la cadena de frío.',
  },
  {
    icon: UsersRound,
    image: '/images/distribution/problem-equipes.webp',
    alt: 'Equipo de tienda en una superficie comercial en período estival',
    title: 'Sus equipos en primera línea',
    desc: 'Cajas, recepción y lineales soportan el calor de cara al público.',
  },
];

const DistributionProblemES = () => (
  <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">
                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 pesa
              <br />
              <span className="text-foreground/40">sobre sus ventas.</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]">
            En verano, una gran cubierta comercial absorbe el sol y lo irradia hacia el interior.
            Los clientes permanecen menos tiempo, la climatización se fuerza y los productos frescos sufren.
          </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">
          La causa común: una cubierta que absorbe el calor en lugar de devolverlo.
        </p>
      </ScrollReveal>
    </div>
  </section>
);

export default DistributionProblemES;