import type { ReactNode } from 'react';
import { Container } from '@/components/primitives/Container';
import { MarcaSeccion } from '@/components/primitives/MarcaSeccion';

// The document's grid: a narrow margin column carrying the section number and
// its mark, and a wide column carrying everything else. That asymmetry is what
// makes the page read as a document rather than as a stack of landing blocks.
//
// Three vertical rhythms rather than one. Every section used to share
// `py-16 md:py-24`, which made ten sections go past like a metronome; the page
// needs somewhere to breathe and somewhere to hurry.

type Ritmo = 'compacta' | 'normal' | 'momento';
type Fondo = 'claro' | 'oscuro';

const RITMO: Record<Ritmo, string> = {
  compacta: 'py-20 md:py-28',
  normal: 'py-28 md:py-40',
  momento: 'py-36 md:py-56',
};

const FONDO: Record<Fondo, string> = {
  claro: 'bg-white text-azul-profundo',
  oscuro: 'bg-azul-profundo bg-hondo-navy text-white',
};

// Gold on navy is 6,07:1; on white it is 2,76:1 and the mark is a graphic that
// carries meaning, so it needs 3:1.
const MARCA: Record<Fondo, string> = {
  claro: 'text-dorado-texto',
  oscuro: 'text-dorado',
};

export function Seccion({
  numero,
  paso,
  ritmo = 'compacta',
  fondo = 'claro',
  id,
  children,
}: {
  numero: string;
  paso: number;
  ritmo?: Ritmo;
  fondo?: Fondo;
  id?: string;
  children: ReactNode;
}) {
  return (
    <section id={id} className={`${FONDO[fondo]}${id ? ' scroll-mt-24' : ''}`}>
      <Container className={RITMO[ritmo]}>
        <div className="grid gap-y-8 md:grid-cols-[7rem_minmax(0,1fr)] md:gap-x-10">
          <div
            aria-hidden="true"
            className="flex items-center gap-4 md:flex-col md:items-start md:gap-5"
          >
            <span className="font-sans font-semibold text-xs tracking-[0.2em] tabular-nums opacity-50">
              {numero}
            </span>
            <MarcaSeccion paso={paso} className={`w-10 shrink-0 ${MARCA[fondo]}`} />
          </div>
          <div className="min-w-0">{children}</div>
        </div>
      </Container>
    </section>
  );
}