frontend/src/components/layout/Section.tsx

import type { ReactNode } from "react"
import type { DashboardSection } from "@/modules/registry"

export function Section({
  section,
  children,
}: {
  section: DashboardSection
  children: ReactNode
}) {
  return (
    <section id={section.id} className="scroll-mt-20">
      {/* labeled horizontal separator */}
      <div className="mb-5 flex items-center gap-4">
        <div className="flex items-baseline gap-2.5">
          <span className="font-mono text-[0.625rem] tabular-nums text-primary/70">
            {String(section.order).padStart(2, "0")}
          </span>
          <h2 className="font-display text-base font-semibold tracking-tight text-foreground">
            {section.label}
          </h2>
          <span className="font-mono text-[0.625rem] uppercase tracking-[0.16em] text-muted-foreground">
            {section.hint}
          </span>
        </div>
        <div className="h-px flex-1 hairline" />
      </div>

      <div className="grid grid-cols-1 gap-5 lg:grid-cols-12">{children}</div>
    </section>
  )
}