// Block `grille_secteurs` — mode auto (ou sans nodes) : fallback statique
// SectorsGrid.tsx tel quel. Mode manuel : entête WP + cards des industries
// sélectionnées (style card navy "Applicateur" de SectorsGrid, les nodes
// relationship n'ayant pas d'image).

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

const GrilleSecteurs = (props: GrilleSecteursBlock & { position?: number }) => {
  const nodes = arr(props.secteurs?.nodes).filter((n) => n.title);

  if (props.mode !== "manuel" || !nodes.length) {
    return <SectorsGrid />;
  }

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

        <ScrollReveal stagger>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 lg:gap-6">
            {nodes.map((node) => (
              <a
                key={node.id}
                href={node.slug ? industryCanonicalPath(node.slug) : "/industrie"}
                className="group relative aspect-[4/3] rounded-2xl overflow-hidden bg-[#192A3A] border border-white/5 shadow-[0_4px_24px_-8px_hsl(var(--navy)/0.15)] hover:shadow-[0_20px_60px_-15px_hsl(var(--teal-vivid)/0.4)] transition-all duration-500"
              >
                <img
                  src="/images/applicateur-blobs.svg"
                  alt=""
                  aria-hidden="true"
                  className="absolute inset-0 w-full h-full object-cover opacity-25 pointer-events-none transition-transform duration-700 ease-out group-hover:scale-110"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-navy/85 via-navy/40 to-navy/20 pointer-events-none" />

                <div className="absolute top-4 right-4 w-10 h-10 rounded-full bg-white/15 backdrop-blur-sm flex items-center justify-center transition-all duration-300 group-hover:bg-white group-hover:scale-110">
                  <ArrowRight
                    className="w-4 h-4 text-white transition-colors duration-300 group-hover:text-navy"
                    strokeWidth={2.2}
                  />
                </div>

                <div className="absolute bottom-0 left-0 right-0 p-6 lg:p-7">
                  <h3
                    className="font-satoshi font-black text-white text-2xl lg:text-[1.7rem] !leading-[1.05] mb-2"
                    style={{ letterSpacing: "-0.02em" }}
                  >
                    {node.title}
                  </h3>
                  <p className="text-white/60 text-sm font-body leading-snug">
                    Le cool roof pour votre filière
                  </p>
                </div>
              </a>
            ))}
          </div>
        </ScrollReveal>
      </div>
    </section>
  );
};

export default GrilleSecteurs;