// Block `faq` — design repris de src/components/FAQ.tsx : titre sticky 2 cols
// à gauche, accordéon shadcn 3 cols à droite. Les réponses sont du wysiwyg.
// `json_ld` injecte le schema.org FAQPage.

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import ScrollReveal from "@/components/ScrollReveal";
import { arr } from "@/lib/wp/mappers";
import { safeJsonLd } from "@/lib/sanitizeHtml";
import type { FaqBlock } from "@/lib/wp/types";
import { AccentTitle, BlockCta, WysiwygHtml } from "./shared";

const stripHtml = (html: string) => html.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();

const Faq = (props: FaqBlock & { position?: number }) => {
  const questions = arr(props.questions).filter((q) => q.question);
  if (!questions.length) return null;

  const jsonLd =
    props.jsonLd !== false
      ? {
          "@context": "https://schema.org",
          "@type": "FAQPage",
          mainEntity: questions.map((q) => ({
            "@type": "Question",
            name: q.question,
            acceptedAnswer: { "@type": "Answer", text: stripHtml(q.reponse ?? "") },
          })),
        }
      : null;

  return (
    <section className="py-16 lg:py-32 bg-cream">
      {jsonLd && (
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: safeJsonLd(jsonLd) }}
        />
      )}
      <div className="container mx-auto px-4 lg:px-8">
        <ScrollReveal>
          <div className="grid lg:grid-cols-5 gap-12 lg:gap-16">
            <div className="lg:col-span-2 lg:sticky lg:top-24 lg:self-start">
              <p className="text-[10px] uppercase tracking-[0.25em] font-semibold text-primary/50 font-body mb-6">
                {props.entete?.badge ?? "FAQ"}
              </p>
              <h2
                className="font-satoshi text-3xl sm:text-4xl lg:text-[3rem] font-black text-foreground !leading-[1.05] mb-3"
                style={{ letterSpacing: "-0.03em" }}
              >
                <AccentTitle titre={props.entete?.titre ?? "Vos questions"} />
              </h2>
              {props.entete?.intro && (
                <p className="text-muted-foreground text-base">{props.entete.intro}</p>
              )}
            </div>

            <div className="lg:col-span-3">
              <Accordion type="single" collapsible className="space-y-3">
                {questions.map((faq, i) => (
                  <AccordionItem
                    key={i}
                    value={`faq-${i}`}
                    className="border border-border bg-card rounded-xl px-6 data-[state=open]:shadow-sm"
                  >
                    <AccordionTrigger className="text-left font-semibold text-foreground hover:no-underline py-5">
                      {faq.question}
                    </AccordionTrigger>
                    <AccordionContent className="text-muted-foreground leading-relaxed pb-5">
                      <WysiwygHtml html={faq.reponse} />
                    </AccordionContent>
                  </AccordionItem>
                ))}
              </Accordion>

              {props.cta?.label && (
                <div className="mt-8">
                  <BlockCta cta={{ ...props.cta, style: props.cta.style ?? "ghost" }} />
                </div>
              )}
            </div>
          </div>
        </ScrollReveal>
      </div>
    </section>
  );
};

export default Faq;