"use client";

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

import covaTherm8Img from '@/assets/produits/Covalba-CovaTherm8-Produit.webp';
import covaTherm20Img from '@/assets/produits/Covalba-CovaTherm20-Produit.webp';

interface Variant {
  id: string;
  name: string;
  tagline: string;
  description: string;
  img: string;
  /** Dimensions intrinsèques du packshot (import webp local) — mode intrinsèque WpImage. */
  imgWidth?: number;
  imgHeight?: number;
  cta: { label: string; href: string };
}

export interface VariantWithAlt extends Variant {
  alt: string;
}

export const defaultVariants: VariantWithAlt[] = [
  {
    id: 'covatherm-8',
    name: 'CovaTherm 8',
    tagline: 'La meilleure combinaison durabilité-prix',
    description:
      "Revêtement réflectif cool roof à base de résines polyuréthanes bi-composantes. Grande résistance aux intempéries, blancheur conservée durablement. Plus résistant aux UV que les peintures acryliques. Contient 20% de matériaux minéraux biosourcés issus de la filière de recyclage.",
    img: covaTherm8Img.src,
    imgWidth: covaTherm8Img.width,
    imgHeight: covaTherm8Img.height,
    alt: 'Peinture cool roof polyuréthane CovaTherm 8 pot de 20L',
    cta: { label: 'Demander un devis', href: '/diagnostic' },
  },
  {
    id: 'covatherm-20',
    name: 'CovaTherm 20',
    tagline: 'La durabilité maximale',
    description:
      "Le revêtement réflectif blanc le plus performant du marché. Jusqu'à 20 ans de maintien de la blancheur grâce au vernis Top Coat anti-UV exclusif. S'encrasse 3× moins vite que les solutions traditionnelles. Ne farine pas. SRI 118 après vieillissement accéléré, record européen.",
    img: covaTherm20Img.src,
    imgWidth: covaTherm20Img.width,
    imgHeight: covaTherm20Img.height,
    alt: 'Peinture cool roof polyuréthane CovaTherm 20 pots de 20L',
    cta: { label: 'Demander un devis', href: '/diagnostic' },
  },
];

interface ProductShowcaseProps {
  badge?: string;
  titre?: ReactNode;
  intro?: ReactNode;
  variants?: VariantWithAlt[];
  note?: ReactNode;
}

const ProductShowcase = ({
  badge = 'Deux versions',
  titre,
  intro,
  variants = defaultVariants,
  note,
}: ProductShowcaseProps = {}) => {
  const [activeIdx, setActiveIdx] = useState(variants.length > 1 ? 1 : 0); // CovaTherm 20 par défaut
  const active = variants[activeIdx];

  return (
    <section className="relative py-16 lg:py-24 bg-[#1A2A3A] overflow-hidden">
      {/* Blobs décoratifs teal — version très discrète */}
      <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 existe
              <br />
              <span className="text-teal-vivid">en deux versions.</span>
              </>)}
            </h2>
            <p className="text-white/70 text-base lg:text-lg font-body leading-relaxed max-w-2xl mx-auto mt-6">
              {intro ?? (<>
              Deux peintures cool roof polyuréthane qui partagent la <strong className="text-white font-semibold">même base technique brevetée</strong>.
              Seule la finition change, selon l'âge de votre toiture et votre horizon d'amortissement.
              </>)}
            </p>
          </div>
        </ScrollReveal>

        <ScrollReveal>
          {/* Toggle pills */}
          <div className="flex items-center justify-center mb-10 lg:mb-12">
            <div className="inline-flex rounded-full bg-white/[0.08] p-1">
              {variants.map((v, i) => (
                <button
                  key={v.id}
                  onClick={() => setActiveIdx(i)}
                  className={`relative rounded-full px-6 py-2.5 text-sm font-semibold transition-all duration-300 ${
                    activeIdx === i
                      ? 'bg-white text-foreground shadow-[0_2px_10px_rgba(0,0,0,0.3)]'
                      : 'text-white/65 hover:text-white'
                  }`}
                >
                  {v.name}
                  {i === 1 && (
                    <span className={`ml-2 text-[9px] uppercase tracking-wider font-bold px-1.5 py-0.5 rounded-full transition-colors duration-300 ${
                      activeIdx === i ? 'bg-primary text-white' : 'bg-primary/30 text-primary'
                    }`}>
                      Pop
                    </span>
                  )}
                </button>
              ))}
            </div>
          </div>

          {/* 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
                              min-h-[280px] 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
                  key={active.id}
                  image={{
                    sourceUrl: active.img,
                    altText: active.alt,
                    width: active.imgWidth ?? null,
                    height: active.imgHeight ?? null,
                  }}
                  className="relative h-64 w-auto object-contain drop-shadow-[0_20px_40px_rgba(0,0,0,0.3)] transition-all duration-500 -mb-6
                             lg:absolute lg:h-[420px] lg:bottom-0 lg:-left-14 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">
                  {active.tagline}
                </p>
                <h3
                  className="font-satoshi text-3xl lg:text-4xl font-black text-foreground mb-5"
                  style={{ letterSpacing: '-0.02em' }}
                >
                  {active.name}
                </h3>
                <p className="text-foreground/70 text-sm lg:text-[15px] font-body leading-relaxed mb-8">
                  {active.description}
                </p>
                <div>
                  <CTAButton variant="primary" href={active.cta.href}>
                    {active.cta.label}
                  </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 ? Notre technicien recommande la version adaptée lors du diagnostic.'}{' '}
            <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 ProductShowcase;