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

export default function Loading() {
  return (
    <Container className="pb-16 pt-7 md:pt-10" aria-busy="true">
      <div className="h-4 w-20 animate-pulse bg-surface-2" />
      <div className="mt-3 h-9 w-72 max-w-full animate-pulse bg-surface-2" />
      <div className="mt-6 flex gap-1.5">
        {Array.from({ length: 5 }).map((_, i) => (
          <div key={i} className="h-9 w-16 animate-pulse bg-surface-2" />
        ))}
      </div>
      <div className="mt-8 h-[90px] animate-pulse bg-surface-2" />
      <ul className="mt-8 border-t border-rule">
        {Array.from({ length: 8 }).map((_, i) => (
          <li key={i} className="border-b border-rule py-3">
            <div className="h-4 w-1/2 animate-pulse bg-surface-2" />
            <div className="mt-2 h-3 w-3/4 animate-pulse bg-surface-2" />
          </li>
        ))}
      </ul>
      <p className="sr-only">Loading timeline…</p>
    </Container>
  );
}