// Mapper de la vue monolithique src/views/FAQ.tsx.
// Les 4 sections `faq` de page--faq deviennent les catégories de l'accordéon ;
// ids d'ancre + icônes repris des originaux par position (parité pixel).

import { HelpCircle, ShieldCheck, Sparkles, Wrench } from "lucide-react";
import { arr } from "../mappers";
import type { CtaBlock, FaqBlock, HeroBlock, WpSection } from "../types";
import type { FAQProps, FaqCategory } from "@/views/FAQ";
import { byLayout, nthLayout, plainTitle, stripHtml, u } from "./shared";

/** Ancres + icônes des catégories de l'original, par position. */
const CATEGORY_DEFAULTS = [
  { id: "generalites", icon: HelpCircle },
  { id: "technique", icon: Sparkles },
  { id: "durabilite", icon: Wrench },
  { id: "chantier", icon: ShieldCheck },
];

const slugify = (s: string): string =>
  s
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, "-")
    .replace(/(^-+|-+$)/g, "");

export function mapFAQProps(sections: WpSection[]): FAQProps {
  const hero = nthLayout<HeroBlock>(sections, "HeroLayout");
  const faqs = byLayout<FaqBlock>(sections, "FaqLayout");
  const cta = nthLayout<CtaBlock>(sections, "CtaLayout");

  const categories: FaqCategory[] | undefined = faqs.length
    ? faqs.map((faq, i) => {
        const label = plainTitle(faq.entete?.titre) ?? "";
        return {
          id: CATEGORY_DEFAULTS[i]?.id ?? (slugify(label) || `categorie-${i + 1}`),
          label,
          icon: CATEGORY_DEFAULTS[i]?.icon ?? HelpCircle,
          questions: arr(faq.questions).map((q) => ({
            q: q?.question ?? "",
            a: stripHtml(q?.reponse) ?? "",
          })),
        };
      })
    : undefined;

  return {
    heroBadge: u(hero?.eyebrow),
    heroTitre: plainTitle(hero?.titre),
    heroIntro: stripHtml(hero?.lead),
    categories,
    ctaTitre: plainTitle(cta?.titre),
    ctaTexte: stripHtml(cta?.texte),
    ctaLabel: u(cta?.ctaPrimaire?.label),
    ctaHref: u(cta?.ctaPrimaire?.lien),
  };
}