import type { ReactNode } from 'react';
import chantierCoolRoof from '@/assets/chantier-cool-roof.jpg';
import ScrollReveal from './ScrollReveal';
import WpImage from './ui/WpImage';

interface WinterObjectionSectionProps {
  titre?: ReactNode;
  intro?: string;
  paragraphe1?: string;
  paragraphe2?: string;
  imageSrc?: string;
  imageAlt?: string;
}

const WinterObjectionSection = ({
  titre,
  intro = "Le soleil d'hiver ne chauffe pas votre toiture.",
  paragraphe1 = "En hiver, le soleil est bas dans le ciel. Il frappe les murs, pas les toits. Votre toiture reçoit très peu de rayonnement direct. Qu'elle soit blanche ou noire, elle ne chauffe presque pas l'intérieur.",
  paragraphe2 = "En intersaison, CovaTherm peut générer une légère pénalité thermique, quelques heures par an. Ce gain est sans commune mesure avec les économies réalisées pendant les mois d'été.",
  imageSrc = chantierCoolRoof.src,
  imageAlt = 'Chantier Cool Roof Covalba',
}: WinterObjectionSectionProps = {}) => (
  <section
    className="relative z-10 -mt-8 -mb-8 lg:-mt-16 lg:-mb-16 py-10 lg:py-16"
    style={{ background: 'linear-gradient(to bottom, #F6FAFB 50%, hsl(60 20% 97%) 50%)' }}
  >
    <div className="container mx-auto px-4 lg:px-8">
      <ScrollReveal>
        <div className="relative flex flex-col lg:flex-row rounded-2xl overflow-hidden bg-[#192A3A] shadow-[0_20px_60px_-10px_rgba(25,42,58,0.35)]">

          {/* Blobs décoratifs teal — à l'intérieur de la card */}
          <img
            src="/images/applicateur-blobs.svg"
            alt=""
            aria-hidden="true"
            className="absolute -right-[15%] -top-[40%] w-[60%] opacity-20 pointer-events-none select-none"
            style={{
              maskImage: 'radial-gradient(circle at center, black 35%, transparent 75%)',
              WebkitMaskImage: 'radial-gradient(circle at center, black 35%, transparent 75%)',
            }}
          />
          <img
            src="/images/applicateur-blobs.svg"
            alt=""
            aria-hidden="true"
            className="absolute -left-[20%] -bottom-[40%] w-[50%] opacity-15 pointer-events-none select-none rotate-180"
            style={{
              maskImage: 'radial-gradient(circle at center, black 35%, transparent 75%)',
              WebkitMaskImage: 'radial-gradient(circle at center, black 35%, transparent 75%)',
            }}
          />

          {/* Photo */}
          <div className="relative lg:w-[42%] aspect-[4/3] lg:aspect-auto flex-shrink-0 overflow-hidden">
            <WpImage
              image={{ sourceUrl: imageSrc, altText: imageAlt, width: null, height: null }}
              fill
              className="w-full h-full object-cover"
            />
          </div>

          {/* Texte */}
          <div className="relative flex flex-col justify-center px-8 py-10 lg:px-12 lg:py-14 lg:w-[58%]">
            <h2
              className="font-satoshi text-3xl lg:text-4xl font-black text-white !leading-[1.05] mb-6"
              style={{ letterSpacing: '-0.03em' }}
            >
              {titre ?? (<>Et l'hiver,<br /><span className="text-teal-vivid">on perd en chaleur ?</span></>)}
            </h2>

            <p
              className="font-satoshi text-lg lg:text-xl font-medium text-white/95 !leading-[1.4] mb-6"
              style={{ letterSpacing: '-0.015em' }}
            >
              {intro}
            </p>

            <div className="space-y-4">
              <p className="text-white/60 text-[15px] lg:text-base font-body leading-relaxed">
                {paragraphe1}
              </p>
              <p className="text-white/60 text-[15px] lg:text-base font-body leading-relaxed">
                {paragraphe2}
              </p>
            </div>
          </div>

        </div>
      </ScrollReveal>
    </div>
  </section>
);

export default WinterObjectionSection;