"use client";

import type { ReactNode } from 'react';
import { Users, Zap, ShieldAlert, type LucideIcon } from 'lucide-react';
import ScrollReveal from './ScrollReveal';
import sansCoolRoof from '@/assets/sans-cool-roof-carrre.webp';
import { useLocale } from '@/components/blocks/localeContext';
import { pickAlt, type AltDict } from '@/components/blocks/altText';

const CONSTAT_ALT: AltDict = {
  fr: 'Entrepôt industriel sans cool roof, absorption thermique',
  en: 'Industrial warehouse without cool roof, heat absorption',
  es: 'Nave industrial sin cool roof, absorción térmica',
};

const defaultBlocs: { icon: LucideIcon; title: string; desc: string }[] = [
  {
    icon: Users,
    title: 'Baisse de productivité des équipes',
    desc: "Dès 28°C en intérieur, les conditions de travail se dégradent.",
  },
  {
    icon: Zap,
    title: 'Surconsommation énergétique',
    desc: "Groupes froids en surcharge, systèmes de climatisation sollicités en continu.",
  },
  {
    icon: ShieldAlert,
    title: "Vieillissement prématuré de l'étanchéité",
    desc: "À 70°C en surface, l'étanchéité de votre toiture se dégrade 2 fois plus vite.",
  },
];

interface ConstatSectionProps {
  titre?: ReactNode;
  blocs?: { title: string; desc: string }[];
  imageSrc?: string;
  imageAlt?: string;
  note?: string;
}

const ConstatSection = ({
  titre,
  blocs = defaultBlocs,
  imageSrc = sansCoolRoof.src,
  imageAlt,
  note = 'Sans cool roof : absorption thermique',
}: ConstatSectionProps = {}) => {
  const locale = useLocale();
  return (
  <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' }}
          >
            {titre ?? (<>Chaque été, votre toiture<span className="text-foreground/30"> vous coûte très cher.</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={imageSrc}
                  alt={pickAlt(locale, imageAlt, CONSTAT_ALT)}
                  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">
              {note}
            </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 ConstatSection;