/**
 * IndustrieBenefitsES — Spanish variant of src/components/industrie/IndustrieBenefits.tsx.
 * Faithful copy with ES strings from the [benefits] copy block.
 */

import { Thermometer, Snowflake, Heart, Shield, Leaf, type LucideIcon } from 'lucide-react';
import ScrollReveal from '@/components/ScrollReveal';

type Benefit = {
  icon: LucideIcon;
  title: string;
  desc: string;
};

const benefits: Benefit[] = [
  {
    icon: Thermometer,
    title: 'Temperatura reducida',
    desc: 'La cubierta se calienta menos, incluso con fuerte exposición solar.',
  },
  {
    icon: Snowflake,
    title: 'Menor necesidad de climatización',
    desc: 'Los equipos de frío y ventilación trabajan menos.',
  },
  {
    icon: Heart,
    title: 'Mayor confort interior',
    desc: 'Los equipos disfrutan de un entorno más estable durante el verano.',
  },
  {
    icon: Shield,
    title: 'Vida útil de la cubierta prolongada',
    desc: 'El recubrimiento contribuye a proteger la impermeabilización existente.',
  },
  {
    icon: Leaf,
    title: 'Mejor desempeño medioambiental',
    desc: 'Una solución pasiva para reducir la carga térmica del edificio.',
  },
];

const IndustrieBenefitsES = () => (
  <section className="relative bg-cream py-28 lg:py-40 overflow-hidden">
    <div className="container mx-auto px-4 lg:px-8">
      {/* Label */}
      <ScrollReveal>
        <div className="mb-9 lg:mb-12 flex items-center gap-3">
          <span className="h-px w-12 bg-primary/70" aria-hidden="true" />
          <span className="text-primary text-[11px] font-bold font-body uppercase tracking-[0.22em]">
            Beneficios medibles
          </span>
        </div>
      </ScrollReveal>

      {/* Top row — H2 left, -40% promise right (horizontally aligned) */}
      <div className="grid grid-cols-1 lg:grid-cols-[3fr_2fr] gap-12 lg:gap-16 items-start mb-20 lg:mb-28">
        {/* Left — H2 + intro */}
        <ScrollReveal>
          <h2
            className="font-satoshi font-black text-foreground !leading-[1.05] mb-7 lg:mb-8"
            style={{ fontSize: 'clamp(1.875rem, 3.8vw, 3rem)', letterSpacing: '-0.03em' }}
          >
            Menos calor,
            <br />
            <span className="text-foreground/40">más rendimiento.</span>
          </h2>

          <p className="text-foreground/65 text-base lg:text-[17px] font-body leading-relaxed max-w-[500px]">
            El cool roof reduce el calor transmitido por la cubierta y mejora de forma duradera el
            funcionamiento del edificio.
          </p>
        </ScrollReveal>

        {/* Right — -40% promise */}
        <ScrollReveal>
          <div className="relative">
            <p className="text-primary/70 text-[11px] uppercase tracking-[0.28em] font-bold font-body mb-3 lg:mb-4">
              Hasta
            </p>

            <p
              className="font-satoshi font-black text-foreground !leading-[0.9] mb-5 lg:mb-6 select-none"
              style={{
                fontSize: 'clamp(4.5rem, 9vw, 7.5rem)',
                letterSpacing: '-0.05em',
              }}
            >
              -40<span className="text-foreground/40">%</span>
            </p>

            <p className="text-foreground/65 text-sm lg:text-[15.5px] font-body leading-relaxed max-w-[340px]">
              en las necesidades de climatización, medido en naves industriales equipadas con cool
              roof.
            </p>
          </div>
        </ScrollReveal>
      </div>

      {/* Bottom row — 5 detailed benefit cards */}
      <ScrollReveal stagger>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 lg:gap-5">
          {benefits.map((b, i) => {
            const Icon = b.icon;
            return (
              <div
                key={i}
                className="
                  group relative bg-white rounded-2xl
                  px-6 py-8 lg:px-7 lg:py-9
                  min-h-[240px] lg:min-h-[280px]
                  ring-1 ring-foreground/[0.04]
                  flex flex-col justify-between items-start text-left
                  transition-all duration-500 ease-out
                  hover:shadow-[0_24px_50px_-22px_hsl(var(--navy)/0.15)] hover:-translate-y-1
                "
              >
                <div className="w-11 h-11 lg:w-12 lg:h-12 rounded-full bg-foreground/[0.04] flex items-center justify-center transition-colors duration-300 group-hover:bg-primary/[0.08]">
                  <Icon
                    className="w-[18px] h-[18px] lg:w-5 lg:h-5 text-primary"
                    strokeWidth={1.5}
                  />
                </div>
                <div>
                  <h3
                    className="font-satoshi font-bold text-foreground text-[15.5px] lg:text-[16.5px] !leading-tight mb-2.5"
                    style={{ letterSpacing: '-0.015em' }}
                  >
                    {b.title}
                  </h3>
                  <p className="text-foreground/60 text-[13px] lg:text-[13.5px] font-body leading-relaxed">
                    {b.desc}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </ScrollReveal>
    </div>
  </section>
);

export default IndustrieBenefitsES;