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

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;
  cta: { label: string; href: string };
}

interface VariantWithAlt extends Variant {
  alt: string;
}

const variants: VariantWithAlt[] = [
  {
    id: 'covatherm-8',
    name: 'CovaTherm 8',
    tagline: 'The best durability-to-price ratio',
    description:
      "Reflective cool roof coating based on two-component polyurethane resins. High weather resistance, with whiteness retained over time. More UV-resistant than acrylic paints. Contains 20% bio-based mineral materials sourced from recycling.",
    img: covaTherm8Img.src,
    alt: 'CovaTherm 8 polyurethane cool roof coating, 20L tub',
    cta: { label: 'Request a quote', href: '/en' },
  },
  {
    id: 'covatherm-20',
    name: 'CovaTherm 20',
    tagline: 'Maximum durability',
    description:
      "One of the best-performing white reflective coatings on the market. Up to 20 years of retained whiteness thanks to the exclusive anti-UV Top Coat varnish. Soils 3× slower than traditional solutions. Does not chalk. SRI 118 after accelerated aging, among the best-performing.",
    img: covaTherm20Img.src,
    alt: 'CovaTherm 20 polyurethane cool roof coating, 20L tubs',
    cta: { label: 'Request a quote', href: '/en' },
  },
];

const ProductShowcaseEN = () => {
  const [activeIdx, setActiveIdx] = useState(1); // CovaTherm 20 by default
  const active = variants[activeIdx];

  return (
    <section className="relative py-16 lg:py-24 bg-[#1A2A3A] overflow-hidden">
      {/* Decorative teal blobs — very subtle version */}
      <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">
              Two versions
            </p>
            <h2
              className="font-satoshi text-3xl sm:text-4xl lg:text-5xl font-black text-white !leading-[1.05]"
              style={{ letterSpacing: '-0.03em' }}
            >
              CovaTherm comes
              <br />
              <span className="text-teal-vivid">in two versions.</span>
            </h2>
            <p className="text-white/70 text-base lg:text-lg font-body leading-relaxed max-w-2xl mx-auto mt-6">
              Two polyurethane cool roof coatings that share the <strong className="text-white font-semibold">same patented technical base</strong>.
              Only the finish changes, depending on the age of your roof and your payback horizon.
            </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'
                    }`}>
                      Popular
                    </span>
                  )}
                </button>
              ))}
            </div>
          </div>

          {/* Showcase card — 2 columns */}
          <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">
                <img
                  key={active.id}
                  src={active.img}
                  alt={active.alt}
                  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>

              {/* Text — 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>

          {/* Footer note */}
          <p className="text-center text-white/55 text-sm font-body mt-10">
            Not sure which to choose? Our technician recommends the right version during the assessment.{' '}
            <a href="/en" className="text-primary font-semibold inline-flex items-center gap-1 hover:gap-1.5 transition-all">
              Free quote <ArrowRight className="w-3.5 h-3.5" />
            </a>
          </p>
        </ScrollReveal>
      </div>
    </section>
  );
};

export default ProductShowcaseEN;