anouma/components/Section.tsx

import type { ReactNode } from "react";

type ContainerProps = {
  children: ReactNode;
  className?: string;
};

export function Container({ children, className = "" }: ContainerProps) {
  return <div className={`mx-auto w-full max-w-6xl px-6 sm:px-8 lg:px-12 ${className}`}>{children}</div>;
}

type SectionProps = {
  children: ReactNode;
  className?: string;
  id?: string;
  tone?: "cream" | "warm" | "plain" | "mauve";
};

const tones: Record<NonNullable<SectionProps["tone"]>, string> = {
  cream: "bg-anouma-cream-light",
  warm: "bg-anouma-cream-beige",
  plain: "bg-background",
  mauve: "bg-anouma-plum text-anouma-cream-light",
};

export function Section({ children, className = "", id, tone = "plain" }: SectionProps) {
  return (
    <section id={id} className={`py-20 sm:py-28 ${tones[tone]} ${className}`}>
      <Container>{children}</Container>
    </section>
  );
}

type SectionHeadingProps = {
  eyebrow?: string;
  title: string;
  lead?: string;
  align?: "left" | "center";
  className?: string;
};

export function SectionHeading({
  eyebrow,
  title,
  lead,
  align = "left",
  className = "",
}: SectionHeadingProps) {
  return (
    <div
      className={`max-w-2xl ${align === "center" ? "mx-auto text-center" : ""} ${className}`}
    >
      {eyebrow && (
        <p className="mb-3 text-xs font-medium uppercase tracking-[0.22em] text-anouma-plum">
          {eyebrow}
        </p>
      )}
      <h2 className="text-balance font-serif text-4xl font-medium leading-tight text-anouma-plum sm:text-5xl">
        {title}
      </h2>
      {lead && (
        <p className="mt-5 text-lg leading-relaxed text-anouma-plum">{lead}</p>
      )}
    </div>
  );
}