import { Reveal } from "@/components/Reveal";

/**
 * The centred editorial column that carries every section of this page:
 * small tracked caption → large light headline → narrow measure of body text.
 *
 * The rhythm mirrors the reference layout — a 192px vertical band, a 927px
 * cap on the headline and a 738px measure on the prose — so the page reads as
 * a sequence of calm, symmetrical statements separated by full-bleed imagery.
 */
export function Editorial({
  caption,
  captionLatin,
  title,
  body,
  tone = "light",
  compact = false,
}: {
  caption?: string;
  captionLatin?: string;
  title?: string;
  body?: readonly string[];
  tone?: "light" | "dark";
  compact?: boolean;
}) {
  const heading = tone === "dark" ? "text-white" : "text-ink";
  const prose = tone === "dark" ? "text-white/65" : "text-muted";

  return (
    <div
      className={`mx-auto flex max-w-[1400px] flex-col items-center gap-6 px-6 text-center lg:px-12 ${
        compact ? "py-12 lg:py-16" : "py-16 lg:py-24"
      }`}
    >
      {(caption || captionLatin) && (
        <Reveal>
          <p className="flex items-center justify-center gap-3 text-sm text-gold">
            {caption}
            {caption && captionLatin && (
              <span aria-hidden="true" className="h-1 w-1 rotate-45 bg-gold/60" />
            )}
            {captionLatin && (
              <span className="latin tracking-[0.1em]">{captionLatin}</span>
            )}
          </p>
        </Reveal>
      )}

      {title && (
        <Reveal delay={90}>
          <h2
            className={`max-w-[927px] text-[1.9rem] leading-[1.45] font-light sm:text-4xl lg:text-5xl lg:leading-[1.3] ${heading}`}
          >
            {title}
          </h2>
        </Reveal>
      )}

      {body?.map((paragraph, i) => (
        <Reveal key={i} delay={170 + i * 80}>
          <p className={`max-w-[738px] text-base leading-[2.1] ${prose}`}>{paragraph}</p>
        </Reveal>
      ))}
    </div>
  );
}
