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 covaSealImg from '@/assets/produits/Covalba-CovaSeal20-Duo-Produit.webp';

interface CovaSealShowcaseProps {
  badge?: string;
  titre?: ReactNode;
  /** Corps HTML (WordPress). Absent => contenu d'origine. */
  contenu?: string;
  image?: string;
  imageAlt?: string;
  /** Dimensions intrinsèques du packshot. Défaut : celles de l'import webp local. */
  imageWidth?: number;
  imageHeight?: number;
  ctaLabel?: string;
  ctaHref?: string;
  note?: ReactNode;
}

const CovaSealShowcase = ({
  badge = 'Positionnement',
  titre,
  contenu,
  image = covaSealImg.src,
  imageAlt = 'Système CovaSeal 20 : pots Base Coat et Top Coat, étanchéité liquide cool roof Covalba',
  imageWidth,
  imageHeight,
  ctaLabel = 'Demander un devis',
  ctaHref = '/diagnostic',
  note,
}: CovaSealShowcaseProps = {}) => {
  // Dimensions intrinsèques connues uniquement pour le packshot local par défaut.
  const isDefaultImage = image === covaSealImg.src;
  const width = imageWidth ?? (isDefaultImage ? covaSealImg.width : null);
  const height = imageHeight ?? (isDefaultImage ? covaSealImg.height : null);

  return (
  <section className="relative py-16 lg:py-24 bg-[#1A2A3A] overflow-hidden">
    {/* Blobs décoratifs teal */}
    <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 ?? (<>
            CovaSeal 20,
            <br />
            <span className="text-teal-vivid">l'étanchéité liquide cool roof.</span>
            </>)}
          </h2>
        </div>
      </ScrollReveal>

      <ScrollReveal>
        {/* Showcase card — 2 colonnes */}
        <div className="max-w-5xl mx-auto overflow-visible">
          <div className="grid grid-cols-1 lg:grid-cols-2 items-stretch">

            {/* Image — top on mobile, right on desktop */}
            <div className="relative flex items-end justify-center bg-[#C2E8F2] 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, height }}
                className="relative w-[85%] max-w-[340px] h-auto object-contain drop-shadow-[0_20px_40px_rgba(0,0,0,0.25)] mb-[-24px]
                           lg:absolute lg:w-auto lg:max-w-none lg:h-[340px] lg:bottom-[70px] lg:left-[-56px] lg:mb-0 lg:z-10"
              />
            </div>

            {/* Texte — bottom on mobile, left on desktop */}
            <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">
                L'étanchéité liquide cool roof
              </p>
              <h3
                className="font-satoshi text-3xl lg:text-4xl font-black text-foreground mb-5"
                style={{ letterSpacing: '-0.02em' }}
              >
                CovaSeal 20
              </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">
                Système 2 couches qui combine la performance thermique d'une peinture cool roof
                et la protection d'une étanchéité polyuréthane acrylique élastomère sur le même
                chantier. Pensé pour les toitures qui présentent des microfissures, des
                boursouflures ou de petites infiltrations. Rebouche jusqu'à <strong>2 mm</strong>,
                protège et rafraîchit sans réfection complète.
              </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">Base Coat</strong> — étanchéité liquide cool roof (2 à 3 kg/m²).</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">Top Coat</strong> — finition anti-encrassement haute durabilité.</span>
                </li>
              </ul>
              </>)}
              <div>
                <CTAButton variant="primary" href={ctaHref}>
                  {ctaLabel}
                </CTAButton>
              </div>
            </div>

          </div>
        </div>

        {/* Note de bas */}
        <p className="text-center text-white/55 text-sm font-body mt-10">
          {note ?? 'Vous hésitez entre CovaSeal et CovaTherm ? Notre technicien arbitre 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 CovaSealShowcase;