// Block `secteur_hero` — réutilise le composant d'origine DistributionHero
// (héros navy + carte lead-form + logos + stats). Le FORMULAIRE interne reste
// non éditable ; seuls eyebrow/titre/lead/image/stats/ctaLabel et les logos
// sont pilotés depuis WP. Les champs non remplis retombent sur les défauts du
// composant (parité pixel préservée).

import { HelpCircle } from "lucide-react";

import DistributionHero from "@/components/industries/DistributionHero";
import { arr, mapImage } from "@/lib/wp/mappers";
import type { SecteurHeroBlock } from "@/lib/wp/types";
import { iconFor } from "./shared";

const SecteurHero = (props: SecteurHeroBlock & { position?: number }) => {
  const image = mapImage(props.image);

  const stats = arr(props.secteurStats)
    .filter((s) => s.value)
    .map((s) => ({
      icon: iconFor(s.icone) ?? HelpCircle,
      value: s.value ?? "",
      label: s.label ?? "",
    }));

  const logos = arr(props.secteurLogos)
    .map((l) => ({ name: l.name ?? "", url: mapImage(l.logo)?.sourceUrl ?? "" }))
    .filter((l) => l.url);

  return (
    <DistributionHero
      {...(props.eyebrow ? { eyebrow: props.eyebrow } : {})}
      {...(props.titre ? { titre: props.titre } : {})}
      {...(props.lead ? { lead: props.lead } : {})}
      {...(image?.sourceUrl ? { imageSrc: image.sourceUrl } : {})}
      {...(image?.altText ? { imageAlt: image.altText } : {})}
      {...(props.ctaLabel ? { ctaLabel: props.ctaLabel } : {})}
      {...(props.logosTitle ? { logosTitle: props.logosTitle } : {})}
      {...(stats.length ? { stats } : {})}
      {...(logos.length ? { logos } : {})}
    />
  );
};

export default SecteurHero;