import type { HTMLAttributes } from 'react';
import { cn } from '@/lib/utils';

/*
 * Container de seção — regra de grid do DS (validada nos frames 1280/1440/1680/1920):
 * conteúdo trava em 1160px com margem lateral MÍNIMA de 140px.
 *   max-w-[1440px] + px-[140px] (web) =>
 *     ≤1440: conteúdo = viewport − 280 (margem 140; ex.: 1280 → 1000)
 *     >1440: conteúdo 1160 centralizado (margem cresce: 260 em 1680, 380 em 1920)
 * Mobile: margem 28px (px-7). */
export function Section({ className, children, ...props }: HTMLAttributes<HTMLElement>) {
    return (
        <section className={cn('w-full', className)} {...props}>
            <div className="mx-auto w-full max-w-[1440px] px-7 web:px-[140px]">{children}</div>
        </section>
    );
}