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

interface CovaMetalShowcaseProps {
  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 CovaMetalShowcase = ({
  badge = 'Positionnement',
  titre,
  contenu,
  image = covaMetalImg.src,
  imageAlt = 'Système CovaMetal 20 : pots Base Coat et Top Coat, peinture cool roof bac acier Covalba',
  imageWidth,
  imageHeight,
  ctaLabel = 'Demander un devis',
  ctaHref = '/diagnostic',
  note,
}: CovaMetalShowcaseProps = {}) => {
  // Dimensions intrinsèques connues uniquement pour le packshot local par défaut.
  const isDefaultImage = image === covaMetalImg.src;
  const width = imageWidth ?? (isDefaultImage ? covaMetalImg.width : null);
  const height = imageHeight ?? (isDefaultImage ? covaMetalImg.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 ?? (<>
            CovaMetal 20, le cool roof 3-en-1
            <br />
            <span className="text-teal-vivid">pour toitures métalliques.</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">
                La peinture cool roof 3-en-1
              </p>
              <h3
                className="font-satoshi text-3xl lg:text-4xl font-black text-foreground mb-5"
                style={{ letterSpacing: '-0.02em' }}
              >
                CovaMetal 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">
                Une seule application pour traiter simultanément les trois problèmes
                récurrents des toitures en bac acier vieillissantes : corrosion, fuites
                sur chevauchements et surchauffe estivale.
              </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">Anti-corrosion</strong> — stoppe la progression de la rouille sur le métal exposé.</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">Étanchéité</strong> — membrane élastique à 200 % d'allongement sur chevauchements et points de fixation.</span>
                </li>
                <li className="flex items-baseline gap-2">
                  <span className="text-primary font-bold text-xs tabular-nums shrink-0">3.</span>
                  <span><strong className="text-foreground">Cool roof</strong> — jusqu'à 90 % de rayonnement solaire réfléchi, sur 20 ans.</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 ?? 'Votre toiture est en bac acier corrodé ? 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 CovaMetalShowcase;