import { Container } from "@/components/Container";

export default function RootLoading() {
  return (
    <>
      <section className="bg-white pt-10 pb-10 md:pt-14 md:pb-12">
        <Container>
          <div className="h-3 w-20 animate-pulse rounded-full bg-[var(--color-mist)]" />
          <div className="mt-4 h-12 w-[70%] max-w-3xl animate-pulse rounded-lg bg-[var(--color-line)] md:h-14" />
          <div className="mt-6 h-4 w-[90%] max-w-2xl animate-pulse rounded-md bg-[var(--color-line)]/70" />
          <div className="mt-2 h-4 w-[60%] max-w-xl animate-pulse rounded-md bg-[var(--color-line)]/70" />
        </Container>
      </section>
      <Container>
        <div className="py-10 md:py-12">
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {Array.from({ length: 6 }).map((_, i) => (
              <div
                key={i}
                className="h-40 animate-pulse rounded-xl border border-[var(--color-line)] bg-white"
                style={{ animationDelay: `${i * 75}ms` }}
              />
            ))}
          </div>
        </div>
      </Container>
    </>
  );
}
