import { ArrowRight, MapPin, Thermometer, Sun, Flame } from 'lucide-react';
import Link from 'next/link';
import ScrollReveal from '@/components/ScrollReveal';

interface IlotsChaleurSectionProps {
  zoneLabel: string;
  zoneClimatiqueCEE: 'H1' | 'H2' | 'H3';
  descriptionClimatique: string;
  joursSup30C: number;
  tempMoyEstivale: number;
  picHistorique: number;
}

const IlotsChaleurSection = ({
  zoneLabel,
  zoneClimatiqueCEE,
  descriptionClimatique,
  joursSup30C,
  tempMoyEstivale,
  picHistorique,
}: IlotsChaleurSectionProps) => {

  return (
    <section className="py-20 lg:py-28">
      <div className="container mx-auto px-4 lg:px-8">

        {/* Header */}
        <ScrollReveal>
          <div className="text-center max-w-2xl mx-auto mb-6">
            <p className="text-[10px] uppercase tracking-[0.25em] font-semibold text-primary/50 font-body mb-6">
              Vulnérabilité thermique
            </p>
            <h2
              className="font-satoshi text-3xl sm:text-4xl lg:text-[3rem] font-black text-foreground !leading-[1.05]"
              style={{ letterSpacing: '-0.03em' }}
            >
              Le {zoneLabel} face aux îlots
              <span className="text-foreground/30"> de chaleur.</span>
            </h2>
          </div>
        </ScrollReveal>

        {/* Intro — zone CEE + description */}
        <ScrollReveal>
          <div className="max-w-3xl mx-auto mb-14">
            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
              <span className="inline-flex items-center gap-2 bg-foreground/[0.03] border border-foreground/[0.06] rounded-full px-4 py-2 shrink-0">
                <MapPin className="w-3.5 h-3.5 text-primary" />
                <span className="text-foreground/60 text-sm font-body font-semibold">
                  Zone {zoneClimatiqueCEE}
                </span>
              </span>
              <p className="text-foreground/45 font-body text-sm leading-relaxed">
                {descriptionClimatique}
              </p>
            </div>
          </div>
        </ScrollReveal>

        {/* Single big "Actuellement" block */}
        <ScrollReveal>
          <div className="max-w-5xl mx-auto">
            <div className="bg-white border border-foreground/[0.08] rounded-2xl shadow-[0_2px_20px_rgba(26,42,58,0.06)] p-8 lg:p-10">

              {/* Badge */}
              <span className="inline-block text-[11px] font-bold font-body uppercase tracking-wide px-3 py-1 rounded-full mb-8 bg-foreground/[0.05] text-foreground/60">
                Actuellement — Données observées
              </span>

              {/* 3 KPIs in a row */}
              <div className="grid grid-cols-1 sm:grid-cols-3 gap-8 lg:gap-12">

                {/* Tx été moyenne */}
                <div>
                  <div className="flex items-center gap-2 mb-3">
                    <Thermometer className="w-4 h-4 text-foreground/30" strokeWidth={2.2} />
                    <p className="text-foreground/40 text-xs font-body font-semibold uppercase tracking-wide">
                      Tx été moyenne
                    </p>
                  </div>
                  <p
                    className="font-satoshi font-black text-foreground !leading-none"
                    style={{ fontSize: 'clamp(2.5rem, 5vw, 3.5rem)', letterSpacing: '-0.04em' }}
                  >
                    {tempMoyEstivale}°C
                  </p>
                </div>

                {/* Jours > 30°C */}
                <div className="sm:border-l sm:border-foreground/[0.06] sm:pl-8 lg:pl-12">
                  <div className="flex items-center gap-2 mb-3">
                    <Sun className="w-4 h-4 text-foreground/30" strokeWidth={2.2} />
                    <p className="text-foreground/40 text-xs font-body font-semibold uppercase tracking-wide">
                      Jours &gt; 30°C / an
                    </p>
                  </div>
                  <p
                    className="font-satoshi font-black text-foreground !leading-none"
                    style={{ fontSize: 'clamp(2.5rem, 5vw, 3.5rem)', letterSpacing: '-0.04em' }}
                  >
                    {joursSup30C}
                  </p>
                </div>

                {/* Pic historique */}
                {picHistorique > 0 && (
                  <div className="sm:border-l sm:border-foreground/[0.06] sm:pl-8 lg:pl-12">
                    <div className="flex items-center gap-2 mb-3">
                      <Flame className="w-4 h-4 text-foreground/30" strokeWidth={2.2} />
                      <p className="text-foreground/40 text-xs font-body font-semibold uppercase tracking-wide">
                        Pic historique
                      </p>
                    </div>
                    <p
                      className="font-satoshi font-black text-foreground !leading-none"
                      style={{ fontSize: 'clamp(2.5rem, 5vw, 3.5rem)', letterSpacing: '-0.04em' }}
                    >
                      {picHistorique}°C
                    </p>
                  </div>
                )}
              </div>
            </div>
          </div>
        </ScrollReveal>

        {/* CTA */}
        <ScrollReveal>
          <div className="max-w-5xl mx-auto mt-8 rounded-2xl bg-foreground/[0.02] border border-foreground/[0.06] p-6 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
            <p className="text-foreground/70 font-body text-sm lg:text-base">
              Le cool roof réduit la température de surface de 35 °C — protection immédiate.
            </p>
            <Link
              href="/diagnostic"
              className="group inline-flex items-center gap-2 cta-gradient text-white font-semibold pl-6 pr-2 py-2 rounded-full shrink-0"
            >
              <span className="text-sm">Audit thermique gratuit</span>
              <span className="flex items-center justify-center w-8 h-8 rounded-full bg-white/20 transition-transform duration-500 group-hover:translate-x-0.5 group-hover:scale-105">
                <ArrowRight className="w-3.5 h-3.5" />
              </span>
            </Link>
          </div>
        </ScrollReveal>

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

export default IlotsChaleurSection;