import { ArrowRight, Check } from 'lucide-react';
import ScrollReveal from '@/components/ScrollReveal';
import type { ZoneData } from '@/data/zones';
import { zoneInPhrase } from '@/lib/zoneGeo';
import { sanitizeWpHtml } from '@/lib/sanitizeHtml';
import avecCoolRoof from '@/assets/avec-cool-roof.webp';

interface LocalSolutionSectionProps {
  zoneData: ZoneData;
}

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

const points = [
  {
    title: '90 % du rayonnement renvoyé',
    text: 'La surface passe de 70°C à 35°C.',
  },
  {
    title: 'SRI 118 après vieillissement',
    text: 'Record européen, performances maintenues dans le temps.',
  },
  {
    title: "Sans arrêt d'activité",
    text: "Application depuis l'extérieur, en 2 à 5 jours.",
  },
];

const defaultSolutionParagraph =
  'Notre résine polyuréthane CovaTherm renvoie <strong class="font-semibold text-foreground/85">90 % du rayonnement solaire</strong>. La surface de votre toiture passe de <strong class="font-semibold text-foreground/85">70°C à 35°C</strong>, sans travaux lourds ni arrêt d\'activité. Fruit de <strong class="font-semibold text-foreground/85">14 ans de R&amp;D</strong>, elle conserve ses performances année après année : avec un <strong class="font-semibold text-foreground/85">SRI de 118 après vieillissement</strong>, un record européen, et un vernis anti-UV 20 ans (CovaTherm 20), votre toiture reste réfléchissante là où les autres jaunissent.';

const LocalSolutionSection = ({ zoneData }: LocalSolutionSectionProps) => {
  const zonePrefix = getZonePrefix(zoneData);
  const content = zoneData.content;
  const solutionTitlePart1 = content?.solutionTitlePart1 || 'Votre toiture';
  const solutionTitlePart2 = content?.solutionTitlePart2 || 'passe de 70°C à 35°C.';
  const solutionParagraph = content?.solutionParagraph || defaultSolutionParagraph;

  return (
    <section className="bg-cream py-16 lg:py-32">
      <div className="container mx-auto px-4 lg:px-8">
        <div className="grid grid-cols-1 gap-10 lg:grid-cols-12 lg:items-center lg:gap-14">
          <div className="lg:col-span-7">
            <ScrollReveal>
              <h2 className="mb-5 text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/50 font-body">
                Avec l'application de peinture Cool Roof {zonePrefix}
              </h2>
              <p
                className="font-satoshi text-3xl font-black !leading-[1.05] text-foreground sm:text-4xl lg:text-[3rem]"
                style={{ letterSpacing: '-0.03em' }}
              >
                {solutionTitlePart1}
                <span className="text-foreground/30"> {solutionTitlePart2}</span>
              </p>
              <p
                className="mt-6 max-w-2xl text-base leading-relaxed text-foreground/60 font-body"
                dangerouslySetInnerHTML={{ __html: sanitizeWpHtml(solutionParagraph) }}
              />

              <div className="mt-8 grid gap-4 sm:grid-cols-3">
                {points.map((point) => (
                  <div key={point.title} className="border-t border-foreground/10 pt-4">
                    <Check className="mb-3 h-4 w-4 text-primary" />
                    <h3 className="font-satoshi text-base font-black leading-tight text-foreground">
                      {point.title}
                    </h3>
                    <p className="mt-2 text-sm leading-relaxed text-foreground/55 font-body">
                      {point.text}
                    </p>
                  </div>
                ))}
              </div>

              <div className="mt-8">
                <a
                  href="/diagnostic"
                  className="group inline-flex items-center gap-2 rounded-full cta-gradient py-2 pl-6 pr-2 text-sm font-semibold text-white"
                >
                  Protéger mon bâtiment
                  <span className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 transition-transform duration-500 group-hover:translate-x-0.5 group-hover:scale-105">
                    <ArrowRight className="h-3.5 w-3.5" />
                  </span>
                </a>
              </div>
            </ScrollReveal>
          </div>

          <div className="lg:col-span-5">
            <ScrollReveal>
              <div className="overflow-hidden rounded-2xl shadow-[0_8px_40px_rgba(26,42,58,0.12)]">
                <img
                  src={avecCoolRoof.src}
                  alt={`Toiture traitée cool roof ${zonePrefix}`}
                  className="aspect-[4/3] h-full w-full object-cover"
                  loading="lazy"
                />
              </div>
            </ScrollReveal>
          </div>
        </div>
      </div>
    </section>
  );
};

export default LocalSolutionSection;