import { Skeleton } from '@/components/ui/skeleton';

export default function Loading() {
  return (
    <div className="min-h-screen bg-deep-black">
      {/* Hero Section Skeleton */}
      <section className="relative overflow-hidden bg-dark-gray py-16 md:py-24">
        <div className="container relative z-10">
          {/* Hero Content */}
          <div className="text-center max-w-3xl mx-auto mb-12">
            <Skeleton className="h-12 md:h-16 w-3/4 mx-auto mb-6" />
            <Skeleton className="h-6 w-full mb-2" />
            <Skeleton className="h-6 w-5/6 mx-auto mb-8" />
            <Skeleton className="h-12 w-40 mx-auto rounded-md" />
          </div>
          
          {/* Category Quick Links Skeleton */}
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 max-w-5xl mx-auto">
            {[...Array(5)].map((_, i) => (
              <Skeleton 
                key={i} 
                className="h-24 rounded-xl bg-soft-dark border border-soft-gray-border"
              />
            ))}
          </div>
        </div>
      </section>

      {/* Featured Article Skeleton */}
      <section className="container py-12">
        <Skeleton className="h-8 w-32 mb-6" />
        <div className="grid gap-6">
          <Skeleton className="h-80 rounded-lg bg-soft-dark border border-soft-gray-border" />
        </div>
      </section>

      {/* Latest Articles Skeleton */}
      <section className="container py-12">
        <Skeleton className="h-8 w-32 mb-6" />
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {[...Array(12)].map((_, i) => (
            <div key={i} className="space-y-3">
              <Skeleton className="h-48 rounded-lg bg-soft-dark border border-soft-gray-border" />
              <Skeleton className="h-6 w-20 rounded-full" />
              <Skeleton className="h-6 w-full" />
              <Skeleton className="h-4 w-full" />
              <Skeleton className="h-4 w-3/4" />
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}
