// Block `contenu_seo` — design repris de SEOContent.tsx : dossier éditorial
// max-w-4xl, h3 satoshi bold par section, sources numérotées. Le mode replié
// utilise <details> natif (pas de state → reste Server Component).

import { ChevronDown } from "lucide-react";
import { arr } from "@/lib/wp/mappers";
import type { ContenuSeoBlock } from "@/lib/wp/types";
import { WysiwygHtml } from "./shared";

const ContenuSeo = (props: ContenuSeoBlock & { position?: number }) => {
  const sections = arr(props.sections).filter((s) => s.titre || s.contenu);
  const sources = arr(props.sources).filter((s) => s.label);
  if (!props.intro && !sections.length) return null;

  const body = (
    <div className="space-y-14 text-foreground/75 leading-relaxed font-body">
      <WysiwygHtml html={props.intro} className="text-base lg:text-lg" />

      {sections.map((section, i) => (
        <div key={i}>
          {section.titre && (
            <h3 className="font-satoshi text-2xl lg:text-3xl font-bold text-foreground mb-4">
              {section.titre}
            </h3>
          )}
          <WysiwygHtml html={section.contenu} />
        </div>
      ))}

      {sources.length > 0 && (
        <div className="border-t border-foreground/10 pt-10">
          <h3 className="font-satoshi text-xl lg:text-2xl font-bold text-foreground mb-5">
            Sources et références
          </h3>
          <ol className="list-decimal pl-6 space-y-3 text-sm text-foreground/70">
            {sources.map((s, i) => (
              <li key={i} className="leading-relaxed">
                {s.label}
                {s.url && (
                  <>
                    {" "}
                    <a
                      href={s.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-primary hover:underline break-words"
                    >
                      {s.url}
                    </a>
                  </>
                )}
              </li>
            ))}
          </ol>
        </div>
      )}
    </div>
  );

  return (
    <section className="py-16 lg:py-32 bg-cream">
      <div className="container mx-auto px-4 lg:px-8 max-w-4xl">
        {props.replie !== false ? (
          <details className="group">
            <summary className="flex items-center justify-between cursor-pointer list-none [&::-webkit-details-marker]:hidden">
              <h2
                className="font-satoshi text-2xl sm:text-3xl font-black text-foreground !leading-[1.05]"
                style={{ letterSpacing: "-0.03em" }}
              >
                Tout comprendre
                <span className="text-foreground/45"> sur le sujet.</span>
              </h2>
              <span className="flex items-center justify-center w-10 h-10 rounded-full bg-primary/10 flex-shrink-0 ml-4 transition-transform duration-300 group-open:rotate-180">
                <ChevronDown className="w-5 h-5 text-primary" />
              </span>
            </summary>
            <div className="mt-10">{body}</div>
          </details>
        ) : (
          body
        )}
      </div>
    </section>
  );
};

export default ContenuSeo;