// Block `citation` — blockquote éditorial centré, repris du pattern de quote
// de ReferenceDetail.tsx (card blanche) et du guillemet satoshi des
// Testimonials.

import ScrollReveal from "@/components/ScrollReveal";
import WpImage from "@/components/ui/WpImage";
import { mapImage } from "@/lib/wp/mappers";
import type { CitationBlock } from "@/lib/wp/types";

const Citation = (props: CitationBlock & { position?: number }) => {
  if (!props.texte) return null;
  const photo = mapImage(props.photo);

  return (
    <section className="py-16 lg:py-28 bg-cream">
      <div className="container mx-auto px-4 lg:px-8">
        <ScrollReveal>
          <figure className="max-w-3xl mx-auto text-center">
            <div
              className="font-satoshi text-primary/30 !leading-none mb-4"
              style={{ fontSize: "4rem" }}
              aria-hidden="true"
            >
              “
            </div>
            <blockquote
              className="font-satoshi text-2xl sm:text-3xl lg:text-4xl font-bold text-foreground !leading-[1.25]"
              style={{ letterSpacing: "-0.02em" }}
            >
              {props.texte}
            </blockquote>
            {(props.auteur || photo) && (
              <figcaption className="mt-8 flex flex-col items-center gap-3">
                {photo && (
                  <div className="relative w-14 h-14 rounded-full overflow-hidden">
                    <WpImage
                      image={photo}
                      alt={photo.altText || props.auteur || ""}
                      fill
                      sizes="56px"
                      className="w-full h-full rounded-full object-cover"
                    />
                  </div>
                )}
                {props.auteur && (
                  <div className="font-body text-sm text-foreground/55">
                    <span className="font-semibold text-foreground">{props.auteur}</span>
                    {props.role && <span> · {props.role}</span>}
                  </div>
                )}
              </figcaption>
            )}
          </figure>
        </ScrollReveal>
      </div>
    </section>
  );
};

export default Citation;