// Block `hero` — design repris de src/components/Hero.tsx + LocalHero.tsx
// (fond image plein écran + dégradés navy, h1 satoshi black, CTAs pill).

import { ArrowRight } from "lucide-react";
import WpImage from "@/components/ui/WpImage";
import { arr, mapImage } from "@/lib/wp/mappers";
import type { HeroBlock } from "@/lib/wp/types";
import { AccentTitle } from "./shared";
import type { WpCta } from "@/lib/wp/types";

const HeroCta = ({ cta, primary }: { cta?: WpCta | null; primary?: boolean }) => {
  if (!cta?.label || !cta?.lien) return null;
  return primary ? (
    <a
      href={cta.lien}
      className="group inline-flex items-center gap-3 cta-gradient text-white font-semibold pl-7 pr-2 py-2 rounded-full"
    >
      <span className="text-[15px]">{cta.label}</span>
      <span className="flex items-center justify-center w-9 h-9 rounded-full bg-white/20 transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] group-hover:translate-x-0.5 group-hover:scale-105">
        <ArrowRight className="w-4 h-4" />
      </span>
    </a>
  ) : (
    <a
      href={cta.lien}
      className="group inline-flex items-center gap-3 border border-white/30 text-white font-semibold pl-7 pr-2 py-2 rounded-full transition-all duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] hover:bg-white/10 hover:border-white/50"
    >
      <span className="text-[15px]">{cta.label}</span>
      <span className="flex items-center justify-center w-9 h-9 rounded-full bg-white/10 group-hover:bg-white/20 transition-all duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] group-hover:translate-x-0.5 group-hover:scale-105">
        <ArrowRight className="w-4 h-4" />
      </span>
    </a>
  );
};

const Hero = (props: HeroBlock & { position?: number }) => {
  const { variante, eyebrow, titre, lead, ctaPrimaire, ctaSecondaire } = props;
  const image = mapImage(props.image);
  const stats = arr(props.stats).filter((s) => s.value);
  const badges = arr(props.badges).filter((b) => b.texte);
  const isCompact = variante === "compact";
  const isHome = variante === "home";

  return (
    <section
      className={`relative flex flex-col overflow-hidden bg-[#0b1a2b] ${
        isCompact ? "" : "min-h-dvh"
      }`}
    >
      {/* Background */}
      {image && (
        <div className="absolute inset-0">
          <WpImage
            image={image}
            fill
            priority={props.position === 0}
            sizes="100vw"
            className="w-full h-full object-cover scale-[1.02]"
          />
          <div className="absolute inset-0 bg-gradient-to-r from-[#0b1a2b]/80 via-[#0b1a2b]/45 to-[#0b1a2b]/15" />
          <div className="absolute inset-0 bg-gradient-to-t from-[#0b1a2b]/50 via-transparent to-transparent" />
        </div>
      )}

      {/* Content */}
      <div
        className={`relative flex-1 flex items-center container mx-auto px-4 lg:px-8 ${
          isCompact ? "pt-28 pb-14 lg:pt-36 lg:pb-20" : "pt-28 pb-8 lg:pt-32 lg:pb-10"
        }`}
      >
        <div className="max-w-3xl">
          {eyebrow && (
            <p className="text-[10px] uppercase tracking-[0.25em] font-semibold text-teal-vivid font-body mb-5">
              {eyebrow}
            </p>
          )}

          {titre && (
            <h1
              className={`font-satoshi font-black text-white !leading-[1.05] mb-6 ${
                isHome
                  ? "text-[clamp(1.95rem,5.5vw,5rem)]"
                  : "text-[clamp(2rem,3.4vw,3.5rem)]"
              }`}
            >
              <AccentTitle titre={titre} accentClass="text-teal-vivid" />
            </h1>
          )}

          {lead && (
            <p className="text-base lg:text-lg max-w-[520px] mb-8 font-body leading-relaxed text-white/70">
              {lead}
            </p>
          )}

          {(ctaPrimaire?.label || ctaSecondaire?.label) && (
            <div className="flex flex-col sm:flex-row items-start gap-4">
              <HeroCta cta={ctaPrimaire} primary />
              <HeroCta cta={ctaSecondaire} />
            </div>
          )}

          {badges.length > 0 && (
            <div className="flex flex-wrap items-center gap-3 mt-8">
              {badges.map((b, i) => (
                <span
                  key={i}
                  className="inline-flex items-center rounded-full border border-white/15 bg-white/[0.07] px-4 py-1.5 text-xs font-semibold text-white/75 font-body"
                >
                  {b.texte}
                </span>
              ))}
            </div>
          )}
        </div>
      </div>

      {/* Stats bar (max 4) */}
      {stats.length > 0 && (
        <div className="relative">
          <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
          <div className="bg-[#0b1a2b]/80 backdrop-blur-md py-6 lg:py-8">
            <div className="container mx-auto px-4 lg:px-8">
              <div className="flex flex-wrap justify-center lg:justify-around gap-x-10 gap-y-6">
                {stats.map((s, i) => (
                  <div key={i} className="flex flex-col items-center text-center">
                    <p
                      className="font-satoshi font-black text-white leading-none mb-1"
                      style={{ fontSize: "clamp(1.75rem, 3vw, 2.5rem)", letterSpacing: "-0.04em" }}
                    >
                      {s.value}
                    </p>
                    <p className="text-white/60 text-sm font-semibold font-body">{s.label}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      )}
    </section>
  );
};

export default Hero;