import * as React from "react";

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

/**
 * Marketing section wrapper: consistent vertical rhythm + a centered max-width
 * container with the page gutter. The home page renders OUTSIDE the portal
 * shell, so each section owns its own horizontal padding (unlike portal pages,
 * where the shell provides it). `scroll-mt` offsets the sticky header when a nav
 * anchor jumps here.
 */
export function Section({
  id,
  className,
  containerClassName,
  children,
}: {
  id?: string;
  className?: string;
  containerClassName?: string;
  children: React.ReactNode;
}) {
  return (
    <section
      id={id}
      className={cn("scroll-mt-20 py-16 sm:py-20 lg:py-24", className)}
    >
      <div
        className={cn(
          "mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8",
          containerClassName,
        )}
      >
        {children}
      </div>
    </section>
  );
}