// Block `grille_solutions` — sans relationship : fallback statique
// SolutionsGrid.tsx tel quel. Avec produits sélectionnés : affichage `cards`
// (pattern SolutionsGrid) ou `compact` (pattern product/RelatedProducts.tsx),
// alimenté par le groupe ficheProduit des nodes.

import { ArrowRight } from "lucide-react";
import SolutionsGrid from "@/components/SolutionsGrid";
import ScrollReveal from "@/components/ScrollReveal";
import { productCanonicalPath } from "@/lib/frProdRoutes";
import { arr } from "@/lib/wp/mappers";
import type { GrilleSolutionsBlock } from "@/lib/wp/types";
import { SectionHeading } from "./shared";

const GrilleSolutions = (props: GrilleSolutionsBlock & { position?: number }) => {
  const nodes = arr(props.produits?.nodes).filter((n) => n.title);

  if (!nodes.length) {
    return <SolutionsGrid />;
  }

  const compact = props.affichage === "compact";

  return (
    <section className="py-20 lg:py-28 bg-offwhite">
      <div className="container mx-auto px-4 lg:px-8">
        <ScrollReveal>
          <SectionHeading entete={props.entete} centered={!compact} />
        </ScrollReveal>

        <ScrollReveal stagger>
          <div
            className={`grid grid-cols-1 gap-4 lg:gap-6 ${
              compact
                ? "sm:grid-cols-3"
                : nodes.length >= 4
                ? "sm:grid-cols-2 lg:grid-cols-4"
                : "sm:grid-cols-2 lg:grid-cols-3"
            }`}
          >
            {nodes.map((node) => {
              const fiche = node.ficheProduit;
              const name = fiche?.productName ?? node.title ?? "";
              return (
                <a
                  key={node.id}
                  href={node.slug ? productCanonicalPath(node.slug) : "/nos-solutions-cool-roof"}
                  className="group flex flex-col rounded-2xl border border-border hover:border-primary/25 bg-cream hover:shadow-[0_4px_30px_rgba(26,42,58,0.08)] transition-all duration-300 overflow-hidden"
                >
                  <div className="p-5 lg:p-6 flex flex-col gap-2 flex-1">
                    {fiche?.tagline && (
                      <span className="inline-block text-[10px] font-bold text-primary bg-primary/10 px-2 py-0.5 rounded-full font-body w-fit tracking-wide">
                        {fiche.tagline}
                      </span>
                    )}
                    <p className="font-satoshi font-black text-lg text-foreground group-hover:text-primary transition-colors">
                      {name}
                    </p>
                    {(fiche?.garantie || fiche?.sri || fiche?.prix) && (
                      <div className="flex flex-wrap gap-x-5 gap-y-2 mt-2">
                        {fiche?.prix && (
                          <div>
                            <p className="text-[10px] uppercase tracking-widest font-body text-foreground/40 mb-0.5">
                              Prix
                            </p>
                            <p className="font-satoshi font-bold text-foreground/80 text-sm">{fiche.prix}</p>
                          </div>
                        )}
                        {fiche?.garantie && (
                          <div>
                            <p className="text-[10px] uppercase tracking-widest font-body text-foreground/40 mb-0.5">
                              Garantie
                            </p>
                            <p className="font-satoshi font-bold text-foreground/80 text-sm">{fiche.garantie}</p>
                          </div>
                        )}
                        {fiche?.sri && (
                          <div>
                            <p className="text-[10px] uppercase tracking-widest font-body text-foreground/40 mb-0.5">
                              SRI
                            </p>
                            <p className="font-satoshi font-bold text-foreground/80 text-sm">{fiche.sri}</p>
                          </div>
                        )}
                      </div>
                    )}
                    <span className="flex items-center gap-1 text-xs font-semibold text-primary mt-auto pt-4 group-hover:gap-1.5 transition-all">
                      Découvrir <ArrowRight className="w-3 h-3" />
                    </span>
                  </div>
                </a>
              );
            })}
          </div>
        </ScrollReveal>

        <ScrollReveal>
          <div className="text-center mt-10">
            <a
              href="/nos-solutions-cool-roof"
              className="inline-flex items-center gap-2 text-primary font-semibold hover:gap-3 transition-all text-sm"
            >
              Toutes les solutions <ArrowRight className="w-4 h-4" />
            </a>
          </div>
        </ScrollReveal>
      </div>
    </section>
  );
};

export default GrilleSolutions;