import { Users, Zap, ShieldAlert, type LucideIcon } from 'lucide-react';
import ScrollReveal from '@/components/ScrollReveal';
import sansCoolRoof from '@/assets/sans-cool-roof-carrre.webp';

const blocs: { icon: LucideIcon; title: string; desc: string }[] = [
  {
    icon: Users,
    title: 'Caída de la productividad de los equipos',
    desc: 'A partir de 28 °C en el interior, las condiciones de trabajo se deterioran.',
  },
  {
    icon: Zap,
    title: 'Sobreconsumo energético',
    desc: 'Equipos de frío sobrecargados, sistemas de climatización funcionando de forma continua.',
  },
  {
    icon: ShieldAlert,
    title: 'Envejecimiento prematuro de la cubierta',
    desc: 'A 70 °C en superficie, la impermeabilización de su cubierta se degrada el doble de rápido.',
  },
];

const ConstatSectionES = () => (
  <section className="relative bg-cream py-16 lg:py-40 overflow-hidden">

    <div className="relative container mx-auto px-4 lg:px-8">
      {/* Titre centré en haut */}
      <ScrollReveal>
        <div className="text-center max-w-3xl mx-auto mb-14 lg:mb-20">
          <h2
            className="font-satoshi text-3xl sm:text-4xl lg:text-[3rem] font-black text-foreground !leading-[1.05]"
            style={{ letterSpacing: '-0.03em' }}
          >
            Cada verano, su cubierta
            <span className="text-foreground/30"> le cuesta muy caro.</span>
          </h2>
        </div>
      </ScrollReveal>

      <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">

        {/* Left : illustration (5 cols) */}
        <div className="lg:col-span-5 order-2 lg:order-1">
          <ScrollReveal>
            <div className="relative">
              {/* Warm glow behind image — terracotta charte */}
              <div className="absolute -inset-8 rounded-[3rem] bg-[radial-gradient(ellipse_at_50%_50%,_hsl(var(--terracotta)/0.18)_0%,_transparent_65%)] blur-2xl pointer-events-none" />
              <div className="rounded-[2rem] overflow-hidden shadow-[0_30px_80px_-15px_hsl(var(--terracotta-dark)/0.25),_0_10px_30px_-5px_hsl(var(--terracotta)/0.12)] aspect-square">
                <img
                  src={sansCoolRoof.src}
                  alt="Nave industrial sin pintura reflectante, absorción térmica"
                  className="w-full h-full object-contain p-4 rounded-[2rem]"
                  loading="lazy"
                />
              </div>
            </div>
            <p className="text-[11px] text-terracotta/60 font-body mt-4 text-center tracking-wide uppercase">
              Sin pintura reflectante: absorción térmica
            </p>
          </ScrollReveal>
        </div>

        {/* Right : blocs (7 cols) */}
        <div className="lg:col-span-7 lg:pl-12 order-1 lg:order-2">
          {/* 3 blocs */}
          <ScrollReveal stagger>
            <div className="border-l-2 pl-8 lg:pl-10 space-y-8 lg:space-y-10" style={{ borderImage: 'linear-gradient(to bottom, hsl(var(--terracotta)), hsl(var(--terracotta-dark))) 1' }}>
              {blocs.map((bloc, i) => (
                <div key={i}>
                  <p
                    className="font-satoshi font-bold text-foreground text-xl lg:text-2xl !leading-[1.2] mb-2"
                    style={{ letterSpacing: '-0.02em' }}
                  >
                    {bloc.title}
                  </p>
                  <p className="text-foreground/55 text-base font-body leading-relaxed">
                    {bloc.desc}
                  </p>
                </div>
              ))}
            </div>
          </ScrollReveal>
        </div>

      </div>
    </div>
  </section>
);

export default ConstatSectionES;