import ScrollReveal from '@/components/ScrollReveal';
import ClimateScrollBlock from '@/components/ClimateScrollBlock';
import type { ZoneData } from '@/data/zones';
import { zoneInPhrase } from '@/lib/zoneGeo';
import { sanitizeWpHtml } from '@/lib/sanitizeHtml';
import sansCoolRoof from '@/assets/sans-cool-roof-carrre.webp';

/* ── Helpers ── */

function getZonePrefix(zone: ZoneData): string {
  return zoneInPhrase(zone);
}

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

/* ── Component ── */

interface StickyClimateZoneProps {
  zoneData: ZoneData;
}

const StickyClimateZone = ({ zoneData }: StickyClimateZoneProps) => {
  const zonePrefix = getZonePrefix(zoneData);
  const zoneName = getZoneName(zoneData);
  const zonePrep = zonePrefix.replace(zoneName, '');
  const c = zoneData.content;
  const probTitle1 = c?.problemeTitlePart1 ?? 'Chaque été, votre toiture';
  const probTitle2 = c?.problemeTitlePart2 ?? 'vous coûte très cher.';

  return (
    <section>
      <div className="bg-cream py-16 lg:py-28">
        <div className="container mx-auto px-4 lg:px-8">
          <div className="mx-auto max-w-6xl">
            <ScrollReveal>
              <div className="mx-auto max-w-4xl text-center">
                <p className="mb-5 text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/50 font-body">
                  Le problème
                </p>
                <h2
                  className="font-satoshi text-3xl font-black !leading-[1.05] text-foreground sm:text-4xl lg:text-[3.25rem]"
                  style={{ letterSpacing: '-0.03em' }}
                >
                  {probTitle1}
                  <span className="text-foreground/30"> {probTitle2}</span>
                </h2>
                {c?.problemeParagraph ? (
                  <p
                    className="mx-auto mt-6 max-w-3xl text-base leading-relaxed text-foreground/58 font-body"
                    dangerouslySetInnerHTML={{ __html: sanitizeWpHtml(c.problemeParagraph) }}
                  />
                ) : (
                  <p className="mx-auto mt-6 max-w-3xl text-base leading-relaxed text-foreground/58 font-body">
                    <strong className="font-semibold text-foreground/82">{zoneName}</strong> étouffe : kilomètres de toitures bac acier, tarmac, îlot de chaleur. Sur les entrepôts et plateformes {zonePrep}<strong className="font-semibold text-foreground/82">{zoneName}</strong>, le <strong className="font-semibold text-foreground/82">rayonnement solaire traverse la toiture sans filtre</strong>. Les groupes froids compensent en continu, la facture grimpe, et chaque bâtiment non protégé subit le même cercle vicieux.
                  </p>
                )}
              </div>
            </ScrollReveal>

            <div className="mt-12 grid items-center gap-10 lg:grid-cols-[0.9fr_1fr] lg:gap-16">
              <ScrollReveal>
                <figure className="mx-auto max-w-md">
                  <div className="rounded-[1.75rem] bg-white p-3 shadow-[0_20px_70px_rgba(214,84,62,0.12)] ring-1 ring-foreground/[0.05]">
                    <img
                      src={sansCoolRoof.src}
                      alt={`Toiture non traitée à ${zoneName} absorbant la chaleur`}
                      className="aspect-square w-full rounded-[1.25rem] object-cover"
                      loading="lazy"
                    />
                  </div>
                  <figcaption className="mt-5 text-center text-[11px] font-semibold uppercase tracking-[0.16em] text-[#c86b57]/70">
                    Sans cool roof : absorption thermique
                  </figcaption>
                </figure>
              </ScrollReveal>

              <ScrollReveal>
                <div className="border-l border-[#c86b57]/70 pl-7 lg:pl-10">
                  {[
                    {
                      title: 'Baisse de productivité des équipes',
                      text: "Dès 28°C en intérieur, les conditions de travail se dégradent et les fins de journée deviennent plus difficiles.",
                    },
                    {
                      title: 'Surconsommation énergétique',
                      text: 'Groupes froids en surcharge, systèmes de climatisation sollicités en continu, facture qui grimpe dès les premiers pics.',
                    },
                    {
                      title: "Vieillissement prématuré de l'étanchéité",
                      text: "À 70°C en surface, l'étanchéité de votre toiture se dégrade plus vite et impose une maintenance anticipée.",
                    },
                  ].map((item) => (
                    <div key={item.title} className="py-5 first:pt-0 last:pb-0">
                      <h3 className="font-satoshi text-xl font-black leading-tight text-foreground lg:text-2xl">
                        {item.title}
                      </h3>
                      <p className="mt-2 text-base leading-relaxed text-foreground/55 font-body">
                        {item.text}
                      </p>
                    </div>
                  ))}
                </div>
              </ScrollReveal>
            </div>
          </div>
        </div>
      </div>

      {/* ═══ Projection climatique 2026 → 2046 — ne pas modifier ═══ */}
      <ClimateScrollBlock zoneData={zoneData} />
    </section>
  );
};

export default StickyClimateZone;