import { cn } from "@/lib/utils";

export type Tone = "stage" | "graphite" | "paper" | "warm";

/**
 * Section tones — the dark-cinematic base with sparing light contrast moments
 * (the original alternates black product stages against light "spec" plates).
 *   stage    pure black bench (#000) — cinematic product
 *   graphite near-black — quieter dark sections
 *   paper    white plate — deliberate light contrast (form factor, fit)
 *   warm     off-white plate — softer light variant
 */
const tones: Record<Tone, string> = {
  stage: "bg-paper text-ink",
  graphite: "bg-[#0a0a0b] text-ink",
  paper: "bg-white text-paper",
  warm: "bg-off-white text-paper",
};

/**
 * Section wrapper — tone, vertical rhythm, and the contained grid, nothing more.
 * Deliberately free of framing chrome: the original carries no per-section
 * eyebrow or numbered marker, so neither does this. Blocks that want the brand's
 * centered slash-kicker render <SectionKicker> themselves.
 */
export function SectionShell({
  id,
  tone = "stage",
  className,
  innerClassName,
  children,
}: {
  id?: string;
  tone?: Tone;
  className?: string;
  innerClassName?: string;
  children: React.ReactNode;
}) {
  return (
    <section
      id={id}
      className={cn("relative overflow-hidden py-20 md:py-30", tones[tone], className)}
    >
      <div className={cn("container-site relative", innerClassName)}>{children}</div>
    </section>
  );
}