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

export function PublicLandingLoadingView() {
  return (
    <div className="space-y-0 pb-8 pt-0">
      {/* Hero Section Skeleton */}
      <section className="full-bleed bg-surface-sunken py-16 sm:py-20 lg:py-24">
        <div className="mx-auto max-w-3xl px-6 sm:px-10 lg:px-14 text-center space-y-6">
          <div className="space-y-3 mx-auto max-w-lg">
            <Skeleton className="h-10 w-72 mx-auto rounded-md" />
            <Skeleton className="h-10 w-56 mx-auto rounded-md" />
          </div>
          <div className="space-y-2 max-w-2xl mx-auto">
            <Skeleton className="h-4 w-full rounded-md" />
            <Skeleton className="h-4 w-4/5 mx-auto rounded-md" />
          </div>
          <div className="flex justify-center gap-3 pt-2">
            <Skeleton className="h-12 w-48 rounded-full" />
            <Skeleton className="h-12 w-48 rounded-full" />
          </div>
        </div>
      </section>

      {/* TrustStrip Skeleton */}
      <section className="full-bleed bg-surface-sunken/50 border-y border-border/40">
        <div className="mx-auto max-w-6xl px-6 sm:px-10 lg:px-14 py-5">
          <div className="grid grid-cols-2 gap-4 sm:flex sm:justify-between">
            {Array.from({ length: 4 }).map((_, idx) => (
              <div key={idx} className="flex items-center gap-2.5">
                <Skeleton className="h-5 w-5 rounded-full" />
                <Skeleton className="h-4 w-24 rounded-md" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ServicesGrid Skeleton */}
      <section className="py-14 sm:py-16">
        <div className="mx-auto max-w-6xl px-6 sm:px-10 lg:px-14">
          <div className="text-center mb-10 space-y-2">
            <Skeleton className="h-8 w-40 mx-auto rounded-md" />
            <Skeleton className="h-4 w-64 mx-auto rounded-md" />
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
            {Array.from({ length: 4 }).map((_, idx) => (
              <Skeleton key={idx} className="h-52 w-full rounded-2xl" />
            ))}
          </div>
        </div>
      </section>

      {/* WhyUsSection Skeleton */}
      <section className="max-w-6xl mx-auto px-6 sm:px-10 lg:px-14 py-14 sm:py-16">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-14 items-center">
          <Skeleton className="w-full aspect-[3/2] rounded-2xl" />
          <div className="space-y-4">
            <Skeleton className="h-8 w-3/4 rounded-md" />
            <Skeleton className="h-6 w-full rounded-md" />
            <Skeleton className="h-6 w-4/5 rounded-md" />
            <div className="space-y-3 pt-2">
              {Array.from({ length: 3 }).map((_, idx) => (
                <div key={idx} className="flex items-center gap-3">
                  <Skeleton className="h-5 w-5 rounded-full" />
                  <Skeleton className="h-5 w-40 rounded-md" />
                </div>
              ))}
            </div>
            <Skeleton className="h-5 w-40 rounded-md" />
          </div>
        </div>
      </section>

      {/* CTABanner Skeleton */}
      <section className="full-bleed bg-primary-soft">
        <div className="mx-auto max-w-3xl px-6 sm:px-10 py-14 sm:py-16 text-center space-y-4">
          <Skeleton className="h-8 w-64 mx-auto rounded-md" />
          <Skeleton className="h-4 w-80 mx-auto rounded-md" />
          <Skeleton className="h-6 w-36 mx-auto rounded-md" />
          <div className="flex justify-center gap-3 pt-2">
            <Skeleton className="h-12 w-48 rounded-full" />
            <Skeleton className="h-12 w-40 rounded-full" />
          </div>
        </div>
      </section>
    </div>
  );
}
