// Block `texte_image` — design repris de CoolRoofExplainerSection : grille 12
// colonnes, image 5 cols avec glow teal + coins très arrondis, texte 7 cols.
// `position_image` contrôle l'ordre gauche/droite.

import { Check } from "lucide-react";
import ScrollReveal from "@/components/ScrollReveal";
import WpImage from "@/components/ui/WpImage";
import { arr, mapImage } from "@/lib/wp/mappers";
import type { TexteImageBlock } from "@/lib/wp/types";
import { AccentTitle, BlockCta, WysiwygHtml } from "./shared";

const TexteImage = (props: TexteImageBlock & { position?: number }) => {
  const image = mapImage(props.image);
  const liste = arr(props.liste).filter((l) => l.texte);
  const imageRight = props.positionImage === "droite";

  return (
    <section className="relative bg-[#F6FAFB] py-16 lg:py-32 overflow-hidden">
      {/* Ambient teal — cf. CoolRoofExplainerSection */}
      <div className="absolute top-0 left-0 w-[70%] h-full bg-[radial-gradient(ellipse_80%_60%_at_15%_30%,_rgba(32,150,140,0.10)_0%,_transparent_65%)] pointer-events-none" />

      <div className="relative container mx-auto px-4 lg:px-8">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
          {/* Image */}
          {image && (
            <div className={`lg:col-span-5 order-2 ${imageRight ? "lg:order-2" : "lg:order-1"}`}>
              <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)]">
                    {/* Intrinsèque (pas `fill`) : la hauteur vient de l'image,
                        comme l'<img> d'origine — le parent n'a pas de hauteur. */}
                    <WpImage
                      image={image}
                      sizes="(min-width: 1024px) 42vw, 100vw"
                      className="w-full h-auto object-cover rounded-[2rem]"
                    />
                  </div>
                </div>
              </ScrollReveal>
            </div>
          )}

          {/* Texte */}
          <div
            className={`order-1 ${
              image
                ? imageRight
                  ? "lg:col-span-7 lg:pr-12 lg:order-1"
                  : "lg:col-span-7 lg:pl-12 lg:order-2"
                : "lg:col-span-8 lg:col-start-3"
            }`}
          >
            <ScrollReveal>
              {props.entete?.badge && (
                <p className="text-[10px] uppercase tracking-[0.25em] font-semibold text-primary/50 font-body mb-6">
                  {props.entete.badge}
                </p>
              )}
              {props.entete?.titre && (
                <h2
                  className="font-satoshi text-3xl sm:text-4xl lg:text-[3rem] font-black text-foreground !leading-[1.05] mb-8"
                  style={{ letterSpacing: "-0.03em" }}
                >
                  <AccentTitle titre={props.entete.titre} />
                </h2>
              )}
              {props.entete?.intro && (
                <p className="text-foreground/60 text-base lg:text-lg font-body leading-relaxed max-w-lg mb-6">
                  {props.entete.intro}
                </p>
              )}

              <WysiwygHtml html={props.contenu} className="max-w-lg mb-8 text-base" />

              {liste.length > 0 && (
                <ul className="space-y-3 mb-8">
                  {liste.map((item, i) => (
                    <li key={i} className="flex items-start gap-2.5">
                      <span className="w-6 h-6 rounded-full bg-primary/15 flex items-center justify-center flex-shrink-0 mt-0.5">
                        <Check className="w-3.5 h-3.5 text-primary" strokeWidth={2.5} />
                      </span>
                      <span className="text-foreground/70 text-sm lg:text-base font-body leading-relaxed">
                        {item.texte}
                      </span>
                    </li>
                  ))}
                </ul>
              )}

              <BlockCta cta={props.cta} />

              {props.note && (
                <p className="text-xs text-foreground/45 font-body italic mt-6 max-w-lg">
                  {props.note}
                </p>
              )}
            </ScrollReveal>
          </div>
        </div>
      </div>
    </section>
  );
};

export default TexteImage;