import { Skeleton } from "@/components/atoms/loading-skeleton";

export function PublicLandingLoadingView() {
  return (
    <div className="space-y-20 pb-8 pt-8 sm:pt-16">
      {/* Hero Section Skeleton */}
      <section className="text-center space-y-8 max-w-4xl mx-auto px-4">
        <div className="flex flex-col items-center space-y-6">
          <Skeleton className="h-8 w-64 rounded-full" />
          <div className="space-y-3 w-full flex flex-col items-center">
            <Skeleton className="h-16 w-3/4 sm:w-1/2" />
            <Skeleton className="h-16 w-2/3 sm:w-1/3" />
          </div>
          <div className="space-y-2 w-full flex flex-col items-center">
            <Skeleton className="h-6 w-3/4 sm:w-2/3" />
            <Skeleton className="h-6 w-1/2 sm:w-1/3" />
          </div>
        </div>
        <div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4">
          <Skeleton className="h-14 w-48 rounded-lg" />
          <Skeleton className="h-14 w-40 rounded-lg" />
        </div>
      </section>

      {/* Concept Section Skeleton */}
      <section className="max-w-5xl mx-auto px-4">
        <div className="text-center mb-12 flex flex-col items-center space-y-3">
          <Skeleton className="h-4 w-32" />
          <Skeleton className="h-10 w-64" />
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {Array.from({ length: 3 }).map((_, index) => (
            <div key={index} className="flex flex-col items-center text-center space-y-4">
              <Skeleton className="h-14 w-14 rounded-xl" />
              <Skeleton className="h-8 w-48" />
              <div className="space-y-2 w-full flex flex-col items-center">
                <Skeleton className="h-4 w-64 max-w-full" />
                <Skeleton className="h-4 w-48 max-w-full" />
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}
