// Block `chiffres` — design repris de SocialProofSection : rangée de chiffres
// satoshi black séparés par des bordures verticales, fond sombre ou clair.

import ScrollReveal from "@/components/ScrollReveal";
import { arr } from "@/lib/wp/mappers";
import type { ChiffresBlock } from "@/lib/wp/types";
import { SectionHeading } from "./shared";

const Chiffres = (props: ChiffresBlock & { position?: number }) => {
  const figures = arr(props.figures).filter((f) => f.value);
  const dark = (props.theme ?? "sombre") === "sombre";
  if (!figures.length) return null;

  return (
    <section className={`py-16 lg:py-24 ${dark ? "bg-foreground" : "bg-cream"}`}>
      <div className="container mx-auto px-4 lg:px-8">
        <ScrollReveal>
          <SectionHeading entete={props.entete} dark={dark} />
        </ScrollReveal>

        <ScrollReveal>
          <div className="flex flex-col sm:flex-row items-center justify-center lg:justify-around gap-8 sm:gap-0 w-full">
            {figures.map((f, i) => (
              <div
                key={i}
                className={`flex flex-col items-center text-center sm:flex-1 px-4 ${
                  i < figures.length - 1
                    ? dark
                      ? "sm:border-r sm:border-white/10"
                      : "sm:border-r sm:border-foreground/10"
                    : ""
                }`}
              >
                <p
                  className={`font-satoshi font-black leading-none mb-1 ${
                    dark ? "text-white" : "text-foreground"
                  }`}
                  style={{ fontSize: "clamp(2rem, 3.5vw, 2.75rem)", letterSpacing: "-0.04em" }}
                >
                  {f.value}
                </p>
                {f.label && (
                  <p
                    className={`text-sm font-semibold font-body ${
                      dark ? "text-white/60" : "text-foreground/60"
                    }`}
                  >
                    {f.label}
                  </p>
                )}
                {f.sublabel && (
                  <p
                    className={`text-sm font-body mt-0.5 ${
                      dark ? "text-white/50" : "text-foreground/45"
                    }`}
                  >
                    {f.sublabel}
                  </p>
                )}
              </div>
            ))}
          </div>
        </ScrollReveal>
      </div>
    </section>
  );
};

export default Chiffres;