import { CheckCircle2, Clock, MapPin } from 'lucide-react';
import ScrollReveal from '@/components/ScrollReveal';
import type { ZoneData } from '@/data/zones';

interface LocalIntroSectionProps {
  zoneData: ZoneData;
}

function getZoneTitle(zone: ZoneData): string {
  if (zone.pageType === 'region') return `en ${zone.region}`;
  if (zone.pageType === 'departement') return `dans le ${zone.departementNom}`;
  return `à ${zone.ville}`;
}

function getZoneName(zone: ZoneData): string {
  if (zone.pageType === 'region') return zone.region;
  if (zone.pageType === 'departement') return zone.departementNom;
  return zone.ville ?? '';
}

const LocalIntroSection = ({ zoneData }: LocalIntroSectionProps) => {
  const intro = zoneData.introSection;
  if (!intro) return null;

  const titleSuffix = getZoneTitle(zoneData);
  const zoneName = getZoneName(zoneData);

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

          <div className="flex flex-col lg:flex-row gap-10 lg:gap-14">

            {/* LEFT — Texte */}
            <div className="lg:w-[58%]">
              <ScrollReveal>
                <p className="text-[10px] uppercase tracking-[0.25em] font-semibold text-primary/50 font-body mb-6">
                  Votre zone, votre enjeu
                </p>
                <h2
                  className="font-satoshi text-3xl sm:text-4xl lg:text-[3rem] font-black text-foreground !leading-[1.05]"
                  style={{ letterSpacing: '-0.03em' }}
                >
                  Peinture cool roof {titleSuffix}
                  <span className="text-foreground/30"> — {intro.hook}</span>
                </h2>
              </ScrollReveal>

              <ScrollReveal>
                <p className="text-foreground/55 text-base lg:text-lg font-body leading-relaxed mt-6">
                  {intro.accroche}
                </p>
              </ScrollReveal>

              <ScrollReveal>
                <p className="text-foreground/55 font-body text-[15px] lg:text-base leading-relaxed mt-6">
                  {intro.contexte}
                </p>
              </ScrollReveal>

              {/* Coût caché */}
              <ScrollReveal>
                <div className="bg-white rounded-2xl p-6 mt-8 shadow-[0_2px_20px_rgba(26,42,58,0.06)] border border-foreground/[0.05] border-l-[3px] border-l-primary">
                  <p className="text-foreground/60 font-body text-sm leading-relaxed">
                    {intro.coutCache}
                  </p>
                </div>
              </ScrollReveal>

              {/* Trust + urgence */}
              <ScrollReveal>
                <div className="mt-8 space-y-3">
                  <div className="flex items-center gap-2.5">
                    <CheckCircle2 className="w-4 h-4 text-primary shrink-0" strokeWidth={2.2} />
                    <p className="text-foreground/50 font-body text-sm">
                      {intro.trustLine}
                    </p>
                  </div>
                  <div className="flex items-center gap-2.5">
                    <Clock className="w-3.5 h-3.5 text-foreground/30 shrink-0" strokeWidth={2.2} />
                    <p className="text-foreground/35 font-body text-xs">
                      {intro.urgenceLine}
                    </p>
                  </div>
                </div>
              </ScrollReveal>
            </div>

            {/* RIGHT — 2 stat cards empilées */}
            <div className="lg:w-[42%] flex flex-col gap-4 lg:gap-5 lg:pt-12">
              {intro.kpis.slice(0, 2).map((kpi, i) => (
                <ScrollReveal key={i}>
                  <div className="bg-white rounded-2xl p-7 lg:p-8 shadow-[0_2px_20px_rgba(26,42,58,0.06)] border border-foreground/[0.05]">
                    <p
                      className="font-satoshi font-black text-foreground !leading-none"
                      style={{ fontSize: 'clamp(2.75rem, 5vw, 3.75rem)', letterSpacing: '-0.04em' }}
                    >
                      {kpi.value}
                    </p>
                    <p className="text-foreground/55 text-sm font-body mt-3">
                      {kpi.label}
                    </p>
                    <div className="flex items-center gap-1.5 mt-4 pt-4 border-t border-foreground/[0.05]">
                      <MapPin className="w-3 h-3 text-primary" strokeWidth={2.5} />
                      <p className="text-primary/70 text-xs font-body font-semibold uppercase tracking-wide">
                        {titleSuffix} — données {i === 0 ? 'observées' : 'mesurées'}
                      </p>
                    </div>
                  </div>
                </ScrollReveal>
              ))}
            </div>

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

export default LocalIntroSection;