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

/**
 * Global layout tokens for Amin Rayan.
 * All page sections must use these — do not invent ad-hoc max-widths or gutters.
 *
 * Base was max-w-5xl (64rem); +20% → 76.8rem for a wider content column.
 */
export const layout = {
  /** Outer horizontal gutter (full-bleed backgrounds stay outside this). */
  gutter: "px-6",
  /** Main content max width (64rem × 1.2). */
  maxWidth: "max-w-[76.8rem]",
  /** Shared content shell: centered, capped, padded. */
  container: "mx-auto w-full max-w-[76.8rem] px-6",
  /**
   * Vertical rhythm for major sections.
   * Adjacent sections always meet as `pb + pt` from this token
   * (`py-16` → 8rem gap, `md:py-20` → 10rem) — including hero → خدمات ما.
   */
  sectionY: "py-16 md:py-20",
  /** Top offset under fixed header for first section (incl. homepage hero). */
  sectionTopWithHeader: "pt-28 pb-16 md:pt-32 md:pb-20",
  /** Anchor scroll offset under fixed header. */
  scrollMargin: "scroll-mt-28",
  /** Soft visual cue between bands — no hard template break. */
  sectionBandDivider: "border-t border-border/30",
} as const;

export function containerClassName(className?: string) {
  return cn(layout.container, className);
}