// Block `variantes_produit` (produit) — design repris de
// src/components/product/ProductVariants.tsx : cards de pricing, la dernière
// variante mise en avant en navy (pattern "Recommandé"), stats garantie / SRI,
// encart italique "Idéal si".

import ScrollReveal from "@/components/ScrollReveal";
import { arr } from "@/lib/wp/mappers";
import type { VariantesProduitBlock } from "@/lib/wp/types";
import { SectionHeading } from "./shared";

const VariantesProduit = (props: VariantesProduitBlock & { position?: number }) => {
  const variantes = arr(props.variantes).filter((v) => v.nom);
  if (!variantes.length) return null;

  return (
    <section className="py-16 lg:py-24 bg-cream">
      <div className="container mx-auto px-4 lg:px-8">
        <ScrollReveal>
          <SectionHeading entete={props.entete} />
        </ScrollReveal>

        <ScrollReveal>
          <div
            className={`grid grid-cols-1 gap-4 max-w-4xl mx-auto ${
              variantes.length >= 3 ? "lg:grid-cols-3" : "lg:grid-cols-2"
            }`}
          >
            {variantes.map((v, i) => {
              // Dernière variante mise en avant (pattern CovaTherm 20).
              const featured = variantes.length > 1 && i === variantes.length - 1;
              return (
                <div
                  key={i}
                  className={`relative rounded-2xl p-8 lg:p-10 flex flex-col ${
                    featured
                      ? "bg-foreground shadow-[0_20px_60px_rgba(26,42,58,0.2)]"
                      : "bg-white border border-border shadow-[0_2px_20px_rgba(26,42,58,0.05)]"
                  }`}
                >
                  {featured && (
                    <div className="absolute -top-4 left-1/2 -translate-x-1/2">
                      <span className="inline-flex items-center gap-1.5 bg-primary text-white text-[11px] font-bold font-body uppercase tracking-[0.15em] px-4 py-2 rounded-full whitespace-nowrap">
                        Recommandé
                      </span>
                    </div>
                  )}

                  <div className="mb-6">
                    <h3
                      className={`font-satoshi text-3xl font-black leading-tight ${
                        featured ? "text-white" : "text-foreground"
                      }`}
                      style={{ letterSpacing: "-0.02em" }}
                    >
                      {v.nom}
                    </h3>
                    {v.description && (
                      <p
                        className={`text-sm font-body leading-relaxed mt-2 ${
                          featured ? "text-white/50" : "text-foreground/50"
                        }`}
                      >
                        {v.description}
                      </p>
                    )}
                  </div>

                  {(v.garantie || v.sri) && (
                    <div
                      className={`flex items-end gap-6 pb-6 mb-6 border-b ${
                        featured ? "border-white/10" : "border-border"
                      }`}
                    >
                      {v.garantie && (
                        <div>
                          <p
                            className={`text-[10px] uppercase tracking-widest font-body mb-1 ${
                              featured ? "text-white/30" : "text-foreground/40"
                            }`}
                          >
                            Garantie
                          </p>
                          <span
                            className={`font-satoshi font-black leading-none ${
                              featured ? "text-primary" : "text-foreground/70"
                            }`}
                            style={{ fontSize: "clamp(1.5rem, 2.5vw, 2rem)", letterSpacing: "-0.03em" }}
                          >
                            {v.garantie}
                          </span>
                        </div>
                      )}
                      {v.sri && (
                        <div>
                          <p
                            className={`text-[10px] uppercase tracking-widest font-body mb-1 ${
                              featured ? "text-white/30" : "text-foreground/40"
                            }`}
                          >
                            SRI
                          </p>
                          <span
                            className={`font-satoshi font-black leading-none ${
                              featured ? "text-white" : "text-foreground/70"
                            }`}
                            style={{ fontSize: "clamp(1.5rem, 2.5vw, 2rem)", letterSpacing: "-0.03em" }}
                          >
                            {v.sri}
                          </span>
                        </div>
                      )}
                    </div>
                  )}

                  {v.usage && (
                    <div
                      className={`text-xs font-body italic mt-auto px-4 py-3 rounded-xl ${
                        featured ? "bg-white/5 text-white/40" : "bg-cream text-foreground/40"
                      }`}
                    >
                      Idéal si : {v.usage}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </ScrollReveal>
      </div>
    </section>
  );
};

export default VariantesProduit;