import { Sun, Flame, Zap, TrendingDown, type LucideIcon } from 'lucide-react';
import ScrollReveal from './ScrollReveal';

interface Step {
  icon: LucideIcon;
  title: string;
  text: string;
}

const steps: Step[] = [
  {
    icon: Sun,
    title: "70°C en surface l'été",
    text: "Votre toiture absorbe 85% du rayonnement solaire et stocke cette chaleur.",
  },
  {
    icon: Flame,
    title: "+8 à 15°C à l'intérieur",
    text: "Cette chaleur traverse le toit et surchauffe vos locaux, même avec la clim.",
  },
  {
    icon: Zap,
    title: "40% de la facture élec",
    text: "Vos climatiseurs compensent en permanence. Ce poste explose chaque été.",
  },
  {
    icon: TrendingDown,
    title: "÷2 durée de vie étanchéité",
    text: "Les chocs thermiques fragilisent vos membranes. Réfection tous les 10 ans au lieu de 20.",
  },
];

const ProblemSection = () => (
  <section className="py-20 lg:py-28 bg-cream">
    <div className="container mx-auto px-4 lg:px-8">
      {/* Fond arrondi teinté */}
      <div className="bg-[#faf0ed]/60 rounded-3xl px-6 py-16 sm:px-10 lg:px-16 lg:py-24">
        <div className="flex flex-col lg:flex-row gap-12 lg:gap-20 items-start">
          {/* Left : titre */}
          <div className="lg:w-[45%] lg:sticky lg:top-[120px]">
            <ScrollReveal>
              <span className="inline-block border border-terracotta/30 text-terracotta font-satoshi font-medium text-sm px-4 py-1.5 rounded-full mb-6">
                Le problème
              </span>
              <h2 className="font-satoshi text-3xl sm:text-4xl lg:text-[42px] font-black text-foreground leading-[1.15] tracking-tight mb-6">
                Votre toiture est responsable de la majorité de la chaleur dans vos locaux.
              </h2>
              <p className="text-muted-foreground text-base lg:text-lg leading-relaxed">
                Le toit est le premier point d'entrée de la chaleur. C'est une réaction en chaîne : il chauffe, vos locaux surchauffent, la clim compense, la facture explose.
              </p>
            </ScrollReveal>
          </div>

          {/* Right : cards empilées avec décalage */}
          <div className="lg:w-[55%] flex flex-col gap-5">
            {steps.map((step, i) => (
              <ScrollReveal key={i}>
                <div
                  className="bg-white rounded-2xl p-6 lg:p-8 shadow-[0_1px_3px_rgba(0,0,0,0.04)] hover:shadow-[0_8px_30px_rgba(0,0,0,0.06)] transition-shadow duration-500"
                >
                  <div className="w-10 h-10 rounded-xl bg-terracotta/10 flex items-center justify-center mb-4">
                    <step.icon className="w-5 h-5 text-terracotta" />
                  </div>
                  <h3 className="font-satoshi text-xl lg:text-2xl font-bold text-foreground mb-2">
                    {step.title}
                  </h3>
                  <p className="text-muted-foreground text-sm lg:text-base leading-relaxed">
                    {step.text}
                  </p>
                </div>
              </ScrollReveal>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

export default ProblemSection;