// Block `avant_apres` (reference, toiture, produit) — paire d'images repris du
// duo ConstatSection (glow terracotta, "sans cool roof") /
// CoolRoofExplainerSection (glow teal, "avec cool roof") : coins très
// arrondis, ombres colorées, légende uppercase sous chaque visuel.

import ScrollReveal from "@/components/ScrollReveal";
import WpImage from "@/components/ui/WpImage";
import { mapImage } from "@/lib/wp/mappers";
import type { AvantApresBlock } from "@/lib/wp/types";
import { SectionHeading } from "./shared";

const AvantApres = (props: AvantApresBlock & { position?: number }) => {
  const avant = mapImage(props.imageAvant);
  const apres = mapImage(props.imageApres);
  if (!avant && !apres) return null;

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

        <div className="grid grid-cols-1 md:grid-cols-2 gap-10 lg:gap-16 max-w-4xl mx-auto">
          {/* Avant — traitement terracotta (cf. ConstatSection) */}
          {avant && (
            <ScrollReveal>
              <div className="relative">
                <div className="absolute -inset-8 rounded-[3rem] bg-[radial-gradient(ellipse_at_50%_50%,_hsl(var(--terracotta)/0.18)_0%,_transparent_65%)] blur-2xl pointer-events-none" />
                <div className="relative rounded-[2rem] overflow-hidden shadow-[0_30px_80px_-15px_hsl(var(--terracotta-dark)/0.25),_0_10px_30px_-5px_hsl(var(--terracotta)/0.12)] aspect-square">
                  <WpImage
                    image={avant}
                    alt={avant.altText || props.legendeAvant || "Avant"}
                    fill
                    className="w-full h-full object-cover rounded-[2rem]"
                  />
                  <span className="absolute top-4 left-4 inline-flex items-center bg-terracotta text-white text-[10px] font-bold uppercase tracking-[0.15em] px-3 py-1.5 rounded-full">
                    Avant
                  </span>
                </div>
              </div>
              {props.legendeAvant && (
                <p className="text-[11px] text-terracotta/60 font-body mt-4 text-center tracking-wide uppercase">
                  {props.legendeAvant}
                </p>
              )}
            </ScrollReveal>
          )}

          {/* Après — traitement teal (cf. CoolRoofExplainerSection) */}
          {apres && (
            <ScrollReveal>
              <div className="relative">
                <div className="absolute -inset-8 rounded-[3rem] bg-[radial-gradient(ellipse_at_50%_50%,_rgba(32,150,140,0.18)_0%,_transparent_65%)] blur-2xl pointer-events-none" />
                <div className="relative rounded-[2rem] overflow-hidden shadow-[0_30px_80px_-15px_rgba(20,120,110,0.20),_0_10px_30px_-5px_rgba(32,150,140,0.10)] aspect-square">
                  <WpImage
                    image={apres}
                    alt={apres.altText || props.legendeApres || "Après"}
                    fill
                    className="w-full h-full object-cover rounded-[2rem]"
                  />
                  <span className="absolute top-4 left-4 inline-flex items-center bg-teal-vivid text-white text-[10px] font-bold uppercase tracking-[0.15em] px-3 py-1.5 rounded-full">
                    Après
                  </span>
                </div>
              </div>
              {props.legendeApres && (
                <p className="text-[11px] text-primary/60 font-body mt-4 text-center tracking-wide uppercase">
                  {props.legendeApres}
                </p>
              )}
            </ScrollReveal>
          )}
        </div>
      </div>
    </section>
  );
};

export default AvantApres;