/**
 * IndustrieApplicationsES — Spanish variant of src/components/industrie/IndustrieApplications.tsx.
 * Faithful copy with ES strings from the [applications] copy block. Image assets and
 * the same-page #preuves anchors are preserved.
 */

import { ArrowRight } from 'lucide-react';
import ScrollReveal from '@/components/ScrollReveal';

type Application = {
  name: string;
  line: string;
  img: string;
};

const applications: Application[] = [
  {
    name: 'Plantas de producción',
    line: 'Controlar el calor en la zona de producción',
    img: '/images/secteur-industrie.jpg',
  },
  {
    name: 'Alimentación',
    line: 'Aliviar los equipos de frío',
    img: '/images/secteur-distribution.jpg',
  },
  {
    name: 'Farmacéutica y salud',
    line: 'Estabilidad térmica para las instalaciones',
    img: '/images/secteur-collectivite.jpg',
  },
  {
    name: 'Aeronáutica y defensa',
    line: 'Preservar los entornos técnicos',
    img: '/images/secteur-logistique.jpg',
  },
  {
    name: 'Terciario industrial',
    line: 'Confort de los equipos en verano',
    img: '/images/secteur-tertiaire.jpg',
  },
  {
    name: 'Naves técnicas',
    line: 'Reducir el calentamiento de los grandes volúmenes',
    img: '/images/secteur-logistique.jpg',
  },
];

const IndustrieApplicationsES = () => (
  <section className="relative bg-cream py-28 lg:py-40 overflow-hidden">
    <div className="container mx-auto px-4 lg:px-8">
      {/* Header — centered */}
      <ScrollReveal>
        <div className="text-center max-w-3xl mx-auto mb-14 lg:mb-20">
          <div className="inline-flex items-center gap-3 mb-6 lg:mb-8">
            <span className="h-px w-8 bg-primary/55" aria-hidden="true" />
            <span className="text-primary text-[11px] font-bold font-body uppercase tracking-[0.22em]">
              Aplicaciones industriales
            </span>
            <span className="h-px w-8 bg-primary/55" aria-hidden="true" />
          </div>

          <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' }}
          >
            Una solución pensada
            <br />
            <span className="text-foreground/40">
              para las naves industriales expuestas al calor.
            </span>
          </h2>

          <p className="text-foreground/65 text-base lg:text-[17px] font-body leading-relaxed max-w-[600px] mx-auto">
            Covalba acompaña a las instalaciones donde el control térmico es crítico para el confort,
            la producción y la eficiencia energética.
          </p>
        </div>
      </ScrollReveal>

      {/* Grid of 6 sector cards (SectorsGrid pattern from the homepage) */}
      <ScrollReveal stagger>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 lg:gap-6">
          {applications.map((a) => (
            <a
              key={a.name}
              href="#preuves"
              className="
                group relative aspect-[3/4] rounded-2xl overflow-hidden
                shadow-[0_4px_24px_-8px_hsl(var(--navy)/0.15)]
                hover:shadow-[0_20px_60px_-15px_hsl(var(--navy)/0.35)]
                transition-shadow duration-500
              "
            >
              {/* Background image */}
              <img
                src={a.img}
                alt={a.name}
                className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-110"
                loading="lazy"
              />

              {/* Navy gradient for legibility */}
              <div className="absolute inset-0 bg-gradient-to-t from-navy/90 via-navy/30 to-transparent" />

              {/* Arrow top-right */}
              <div className="absolute top-4 right-4 w-10 h-10 rounded-full bg-white/15 backdrop-blur-sm flex items-center justify-center transition-all duration-300 group-hover:bg-white group-hover:scale-110">
                <ArrowRight
                  className="w-4 h-4 text-white transition-colors duration-300 group-hover:text-navy"
                  strokeWidth={2.2}
                />
              </div>

              {/* Bottom-left text */}
              <div className="absolute bottom-0 left-0 right-0 p-6 lg:p-7">
                <h3
                  className="font-satoshi font-black text-white text-2xl lg:text-[1.7rem] !leading-[1.05] mb-2"
                  style={{ letterSpacing: '-0.02em' }}
                >
                  {a.name}
                </h3>
                <p className="text-white/80 text-sm font-body leading-snug">
                  {a.line}
                </p>
              </div>
            </a>
          ))}
        </div>
      </ScrollReveal>

      {/* CTA */}
      <ScrollReveal>
        <div className="mt-14 lg:mt-16 flex justify-center">
          <a
            href="#preuves"
            className="group inline-flex items-center gap-2 text-primary font-semibold text-sm hover:gap-2.5 transition-all"
          >
            Ver las realizaciones <ArrowRight className="w-4 h-4" />
          </a>
        </div>
      </ScrollReveal>
    </div>
  </section>
);

export default IndustrieApplicationsES;