import type { ReactNode } from 'react';
import { ThermometerSun, Zap, Settings2, ShieldAlert, type LucideIcon } from 'lucide-react';
import ScrollReveal from '@/components/ScrollReveal';

export type IndustrieProblemFriction = {
  icon: LucideIcon;
  title: string;
  desc: string;
};

type Friction = IndustrieProblemFriction;

export const defaultFrictions: Friction[] = [
  {
    icon: ThermometerSun,
    title: 'Confort dégradé',
    desc: 'Des températures intérieures difficiles à supporter lors des pics de chaleur.',
  },
  {
    icon: Zap,
    title: 'Énergie en hausse',
    desc: 'Des besoins de climatisation, ventilation ou froid industriel plus importants.',
  },
  {
    icon: Settings2,
    title: 'Équipements sollicités',
    desc: 'Des groupes froids, CTA et installations techniques qui fonctionnent davantage.',
  },
  {
    icon: ShieldAlert,
    title: 'Étanchéité fragilisée',
    desc: 'Une toiture soumise aux UV, aux écarts thermiques et au vieillissement accéléré.',
  },
];

const defaultTitre = (
  <>
    La chaleur pénalise
    <br />
    <span className="text-foreground/40">directement vos bâtiments.</span>
  </>
);

type IndustrieProblemProps = {
  badge?: string;
  titre?: ReactNode;
  intro?: string;
  frictions?: Friction[];
};

const IndustrieProblem = ({
  badge = 'Pourquoi agir ?',
  titre = defaultTitre,
  intro = "Sous une toiture exposée, la chaleur s'accumule, dégrade le confort, sollicite les équipements et augmente les coûts d'exploitation.",
  frictions = defaultFrictions,
}: IndustrieProblemProps = {}) => (
  <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-terracotta/70" aria-hidden="true" />
          <span className="text-terracotta-dark text-[11px] font-bold font-body uppercase tracking-[0.22em]">
            {badge}
          </span>
        </div>
      </ScrollReveal>

      {/* Top row — H2 left, description right (horizontally aligned) */}
      <div className="grid grid-cols-1 lg:grid-cols-[3fr_2fr] gap-10 lg:gap-20 items-start mb-20 lg:mb-28">
        <ScrollReveal>
          <h2
            className="font-satoshi font-black text-foreground !leading-[1.05]"
            style={{ fontSize: 'clamp(1.875rem, 3.8vw, 3rem)', letterSpacing: '-0.03em' }}
          >
            {titre}
          </h2>
        </ScrollReveal>

        <ScrollReveal>
          <p className="text-foreground/65 text-base lg:text-[17px] font-body leading-relaxed max-w-[460px] lg:mt-2">
            {intro}
          </p>
        </ScrollReveal>
      </div>

      {/* Bottom row — 4 detailed friction cards */}
      <ScrollReveal stagger>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6">
          {frictions.map((f, i) => {
            const Icon = f.icon;
            return (
              <div
                key={i}
                className="
                  group relative bg-white rounded-2xl
                  px-7 py-8 lg:px-8 lg:py-10
                  min-h-[260px] lg:min-h-[300px]
                  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-12 h-12 lg:w-[52px] lg:h-[52px] rounded-full bg-foreground/[0.04] flex items-center justify-center transition-colors duration-300 group-hover:bg-terracotta/[0.08]">
                  <Icon
                    className="w-5 h-5 lg:w-[22px] lg:h-[22px] text-terracotta-dark"
                    strokeWidth={1.4}
                  />
                </div>
                <div>
                  <h3
                    className="font-satoshi font-bold text-foreground text-[17px] lg:text-[18px] !leading-tight mb-3"
                    style={{ letterSpacing: '-0.015em' }}
                  >
                    {f.title}
                  </h3>
                  <p className="text-foreground/60 text-[14px] lg:text-[14.5px] font-body leading-relaxed">
                    {f.desc}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </ScrollReveal>
    </div>
  </section>
);

export default IndustrieProblem;