import { Container } from '@/components/ui/section';

export default function Loading() {
  return (
    <Container wide className="pb-16 pt-7 md:pt-10" aria-busy="true">
      <div className="h-3 w-64 animate-pulse bg-surface-2" />
      <div className="mt-3 h-9 w-48 animate-pulse bg-surface-2" />
      <div className="mt-6 flex gap-2 border-b border-rule pb-2">
        {Array.from({ length: 7 }).map((_, i) => (
          <div key={i} className="h-6 w-24 animate-pulse bg-surface-2" />
        ))}
      </div>
      <ul className="mt-8 border-t border-rule">
        {Array.from({ length: 10 }).map((_, i) => (
          <li key={i} className="border-b border-rule py-3">
            <div className="h-4 w-3/4 animate-pulse bg-surface-2" />
          </li>
        ))}
      </ul>
      <p className="sr-only">Loading the frontier…</p>
    </Container>
  );
}