// Block `grille_cards` — entête centrée + grille de cards (icône lucide ou
// image, titre, texte, lien). Structure et typo reprises de ConstatSection /
// PriceComparisonSection (encart Shield) ; thèmes clair / sombre / accent.

import { ArrowRight } from "lucide-react";
import ScrollReveal from "@/components/ScrollReveal";
import WpImage from "@/components/ui/WpImage";
import { arr, mapImage } from "@/lib/wp/mappers";
import type { GrilleCardsBlock } from "@/lib/wp/types";
import { SectionHeading, iconFor } from "./shared";

const colsClass: Record<string, string> = {
  "2": "sm:grid-cols-2",
  "3": "sm:grid-cols-2 lg:grid-cols-3",
  "4": "sm:grid-cols-2 lg:grid-cols-4",
};

const GrilleCards = (props: GrilleCardsBlock & { position?: number }) => {
  const cards = arr(props.cards);
  const theme = props.theme ?? "clair";
  const dark = theme === "sombre";
  const sectionBg =
    theme === "sombre" ? "bg-[#192A3A]" : theme === "accent" ? "bg-teal-light" : "bg-cream";

  if (!cards.length && !props.entete?.titre) return null;

  return (
    <section className={`py-16 lg:py-32 ${sectionBg}`}>
      <div className="container mx-auto px-4 lg:px-8">
        <ScrollReveal>
          <SectionHeading entete={props.entete} dark={dark} />
        </ScrollReveal>

        <ScrollReveal stagger>
          <div className={`grid grid-cols-1 gap-5 lg:gap-6 ${colsClass[props.colonnes ?? "3"] ?? colsClass["3"]}`}>
            {cards.map((card, i) => {
              const Icon = iconFor(card.icone);
              const image = mapImage(card.image);
              const inner = (
                <>
                  {image ? (
                    <div className="relative aspect-[16/10] overflow-hidden rounded-xl mb-5">
                      <WpImage
                        image={image}
                        alt={image.altText || card.titre || ""}
                        fill
                        sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
                        className="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
                      />
                    </div>
                  ) : Icon ? (
                    <div
                      className={`w-12 h-12 rounded-2xl flex items-center justify-center mb-5 ${
                        dark ? "bg-teal-vivid/15" : "bg-primary/10"
                      }`}
                    >
                      <Icon
                        className={`w-6 h-6 ${dark ? "text-teal-vivid" : "text-primary"}`}
                        strokeWidth={1.5}
                      />
                    </div>
                  ) : null}
                  {card.titre && (
                    <h3
                      className={`font-satoshi font-bold text-xl !leading-[1.2] mb-2 ${
                        dark ? "text-white" : "text-foreground"
                      }`}
                      style={{ letterSpacing: "-0.02em" }}
                    >
                      {card.titre}
                    </h3>
                  )}
                  {card.texte && (
                    <p
                      className={`text-sm lg:text-base font-body leading-relaxed ${
                        dark ? "text-white/60" : "text-foreground/55"
                      }`}
                    >
                      {card.texte}
                    </p>
                  )}
                  {card.lien && (
                    <span
                      className={`inline-flex items-center gap-1.5 text-sm font-semibold mt-4 group-hover:gap-2.5 transition-all ${
                        dark ? "text-teal-vivid" : "text-primary"
                      }`}
                    >
                      En savoir plus <ArrowRight className="w-4 h-4" />
                    </span>
                  )}
                </>
              );

              const cardClass = `group flex flex-col rounded-2xl p-6 lg:p-8 transition-all duration-300 ${
                dark
                  ? "bg-white/[0.06] border border-white/10 hover:bg-white/[0.09]"
                  : "bg-white border border-border shadow-[0_2px_20px_rgba(26,42,58,0.05)] hover:shadow-[0_12px_40px_rgba(26,42,58,0.10)] hover:-translate-y-1"
              }`;

              return card.lien ? (
                <a key={i} href={card.lien} className={cardClass}>
                  {inner}
                </a>
              ) : (
                <div key={i} className={cardClass}>
                  {inner}
                </div>
              );
            })}
          </div>
        </ScrollReveal>

        {props.transition && (
          <ScrollReveal>
            <p
              className={`text-center text-base font-body leading-relaxed max-w-2xl mx-auto mt-12 ${
                dark ? "text-white/55" : "text-foreground/55"
              }`}
            >
              {props.transition}
            </p>
          </ScrollReveal>
        )}
      </div>
    </section>
  );
};

export default GrilleCards;