import { ArrowRight } from 'lucide-react';
import type { ReactNode } from 'react';
import ScrollReveal from '@/components/ScrollReveal';
import CTAButton from '@/components/ui/CTAButton';
import WpImage from '@/components/ui/WpImage';
import { sanitizeWpHtml } from '@/lib/sanitizeHtml';

import covaThermLightImg from '@/assets/produits/Covalba-CovaTherm-Light-Produit.webp';

interface CovaThermLightShowcaseProps {
  badge?: string;
  titre?: ReactNode;
  /** Corps HTML (WordPress). Absent => contenu d'origine. */
  contenu?: string;
  image?: string;
  imageAlt?: string;
  ctaLabel?: string;
  ctaHref?: string;
  note?: ReactNode;
}

const CovaThermLightShowcase = ({
  badge = 'Positionnement',
  titre,
  contenu,
  image = covaThermLightImg.src,
  imageAlt = 'Laque solaire CovaTherm Light pots Covalba pour lanterneaux polycarbonate',
  ctaLabel = 'Demander un devis',
  ctaHref = '/diagnostic',
  note,
}: CovaThermLightShowcaseProps = {}) => (
  <section className="relative py-16 lg:py-24 bg-[#1A2A3A] overflow-hidden">
    <img
      src="/images/applicateur-blobs.svg"
      alt=""
      aria-hidden="true"
      className="absolute -left-[18%] -top-[30%] w-[50%] opacity-[0.06] 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 -right-[20%] -bottom-[35%] w-[45%] opacity-[0.05] 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%)',
      }}
    />

    <div className="relative container mx-auto px-4 lg:px-8">
      <ScrollReveal>
        <div className="text-center mb-10 lg:mb-14">
          <p className="text-[10px] uppercase tracking-[0.25em] font-semibold text-white/55 font-body mb-4">
            {badge}
          </p>
          <h2
            className="font-satoshi text-3xl sm:text-4xl lg:text-5xl font-black text-white !leading-[1.05]"
            style={{ letterSpacing: '-0.03em' }}
          >
            {titre ?? (<>
            CovaTherm Light,
            <br />
            <span className="text-teal-vivid">la laque solaire non-opacifiante.</span>
            </>)}
          </h2>
        </div>
      </ScrollReveal>

      <ScrollReveal>
        <div className="max-w-5xl mx-auto overflow-visible">
          <div className="grid grid-cols-1 lg:grid-cols-2 items-stretch">

            <div className="relative flex items-center justify-center bg-[#DCEEF1] order-1 lg:order-2
                            py-8 lg:py-0 lg:min-h-[380px] overflow-visible
                            rounded-t-3xl rounded-b-none
                            lg:rounded-t-3xl lg:rounded-br-3xl lg:rounded-bl-none lg:rounded-tl-none">
              <WpImage
                image={{
                  sourceUrl: image,
                  altText: imageAlt,
                  width: covaThermLightImg.width,
                  height: covaThermLightImg.height,
                }}
                alt={imageAlt}
                className="relative w-[85%] max-w-[320px] h-auto object-contain drop-shadow-[0_20px_40px_rgba(0,0,0,0.25)]
                           lg:w-auto lg:max-w-none lg:h-[300px] lg:z-10"
              />
            </div>

            <div className="p-8 lg:p-12 flex flex-col justify-center order-2 lg:order-1 bg-white lg:overflow-visible
                            rounded-b-3xl rounded-t-none
                            lg:rounded-b-3xl lg:rounded-tl-3xl lg:rounded-tr-none lg:rounded-br-none">
              <p className="text-[#D25A1E] text-[10px] uppercase tracking-[0.22em] font-bold font-body mb-3">
                La laque solaire translucide
              </p>
              <h3
                className="font-satoshi text-3xl lg:text-4xl font-black text-foreground mb-5"
                style={{ letterSpacing: '-0.02em' }}
              >
                CovaTherm Light
              </h3>
              {contenu ? (
                <div
                  className="text-foreground/70 text-sm lg:text-[15px] font-body leading-relaxed mb-8 [&_p]:mb-4 [&_strong]:text-foreground [&_ol]:text-sm [&_ol]:space-y-1.5 [&_ol]:list-decimal [&_ol]:pl-5 [&_ol]:marker:text-primary [&_ol]:marker:font-bold [&_ul]:text-sm [&_ul]:space-y-1.5 [&_ul]:list-disc [&_ul]:pl-5"
                  dangerouslySetInnerHTML={{ __html: sanitizeWpHtml(contenu) }}
                />
              ) : (<>
              <p className="text-foreground/70 text-sm lg:text-[15px] font-body leading-relaxed mb-4">
                Le seul revêtement cool roof conçu pour les surfaces qu'on ne peut pas
                peindre en blanc opaque sans sacrifier la lumière naturelle. Filtre
                sélectivement UV et infrarouges, laisse passer le spectre visible.
              </p>
              <ul className="text-foreground/70 text-sm font-body space-y-1.5 mb-8">
                <li className="flex items-baseline gap-2">
                  <span className="text-primary font-bold text-xs tabular-nums shrink-0">1.</span>
                  <span><strong className="text-foreground">Polycarbonate</strong> — lanterneaux, voûtes éclairantes, skydômes modernes.</span>
                </li>
                <li className="flex items-baseline gap-2">
                  <span className="text-primary font-bold text-xs tabular-nums shrink-0">2.</span>
                  <span><strong className="text-foreground">Polyester translucide</strong> — voûtes éclairantes et skydômes anciens.</span>
                </li>
              </ul>
              </>)}
              <div>
                <CTAButton variant="primary" href={ctaHref}>
                  {ctaLabel}
                </CTAButton>
              </div>
            </div>

          </div>
        </div>

        <p className="text-center text-white/55 text-sm font-body mt-10">
          {note ?? 'Vos lanterneaux provoquent un effet « tête chaude » en été ? Notre technicien diagnostique sur terrain.'}{' '}
          <a href="/diagnostic" className="text-primary font-semibold inline-flex items-center gap-1 hover:gap-1.5 transition-all">
            Devis gratuit <ArrowRight className="w-3.5 h-3.5" />
          </a>
        </p>
      </ScrollReveal>
    </div>
  </section>
);

export default CovaThermLightShowcase;