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

export function PublicLandingLoadingView() {
  return (
    <div className="space-y-0 pb-8 pt-0 sm:pt-0">
      {/* Hero Section Skeleton */}
      <section className="relative left-1/2 right-1/2 w-screen -translate-x-1/2 bg-[#f7f7f7] py-12 sm:py-16">
        <div className="mx-auto max-w-6xl grid grid-cols-1 lg:grid-cols-[1.05fr_minmax(0,0.95fr)] items-center gap-10 lg:gap-16 px-6 sm:px-10 lg:px-14 pt-0">
          <div className="space-y-4 max-w-2xl">
            <div className="space-y-2">
              <Skeleton className="h-10 w-72 max-w-full rounded-md" />
              <Skeleton className="h-10 w-80 max-w-full rounded-md" />
            </div>
            <div className="space-y-2">
              <Skeleton className="h-4 w-full rounded-md" />
              <Skeleton className="h-4 w-4/5 rounded-md" />
            </div>
            <div className="flex flex-col sm:flex-row gap-3 pt-2">
              <Skeleton className="h-12 w-48 rounded-full" />
              <Skeleton className="h-12 w-48 rounded-full" />
            </div>
          </div>
          <div className="w-full">
            <Skeleton className="w-full aspect-[4/3] rounded-2xl" />
          </div>
        </div>
      </section>

      {/* Solutions Carousel Skeleton */}
      <section className="relative left-1/2 right-1/2 w-screen -translate-x-1/2 bg-[#8dc3fb] py-12 sm:py-14">
        <div className="mx-auto max-w-7xl px-6 sm:px-10 lg:px-14 space-y-6">
          <Skeleton className="h-10 w-40 rounded-md" />
          <div className="flex gap-6 overflow-hidden">
            {Array.from({ length: 4 }).map((_, idx) => (
              <div key={idx} className="w-[260px] flex-shrink-0">
                <Skeleton className="h-64 w-full rounded-3xl" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Trust and Excellence 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-[1fr_1.1fr] gap-10 lg:gap-14 items-center">
          <Skeleton className="h-full w-full rounded-2xl min-h-[320px]" />
          <div className="space-y-4">
            <Skeleton className="h-4 w-36 rounded-md" />
            <Skeleton className="h-10 w-3/4 rounded-md" />
            <Skeleton className="h-10 w-1/2 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>

      {/* Support Downloads Skeleton */}
      <section className="max-w-5xl mx-auto px-6 sm:px-10 lg:px-14 pb-16">
        <Skeleton className="h-10 w-40 mx-auto rounded-md mb-10" />
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-8 sm:gap-10">
          {Array.from({ length: 2 }).map((_, idx) => (
            <div
              key={idx}
              className="rounded-2xl border border-border/60 bg-white p-6 shadow-sm space-y-4"
            >
              <Skeleton className="h-5 w-32 mx-auto rounded-md" />
              <Skeleton className="h-24 w-24 mx-auto rounded-full" />
              <Skeleton className="h-9 w-32 mx-auto rounded-md" />
            </div>
          ))}
        </div>
      </section>

      {/* Contact Skeleton */}
      <section className="relative left-1/2 right-1/2 w-screen -translate-x-1/2 bg-[#e8f5ff] py-14 sm:py-16">
        <div className="max-w-6xl mx-auto px-6 sm:px-10 lg:px-14 space-y-6">
          <Skeleton className="h-10 w-48 rounded-md" />
          <div className="grid grid-cols-1 lg:grid-cols-[1.1fr_0.9fr] gap-10 lg:gap-12">
            <div className="rounded-2xl bg-white shadow-sm border border-border/60 p-6 sm:p-8 space-y-4">
              <Skeleton className="h-8 w-48 rounded-md" />
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <Skeleton className="h-11 w-full rounded-md" />
                <Skeleton className="h-11 w-full rounded-md" />
              </div>
              <Skeleton className="h-11 w-full rounded-md" />
              <Skeleton className="h-11 w-full rounded-md" />
              <Skeleton className="h-11 w-full rounded-md" />
              <Skeleton className="h-11 w-full rounded-md" />
              <Skeleton className="h-28 w-full rounded-md" />
              <Skeleton className="h-11 w-full rounded-md" />
            </div>
            <div className="space-y-6">
              <Skeleton className="h-48 w-full rounded-2xl" />
              <Skeleton className="h-28 w-full rounded-2xl" />
              <Skeleton className="h-20 w-full rounded-2xl" />
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
