export default function DashboardSkeleton() {
  return (
    <div className="space-y-10">
      {/* Hero Section Skeleton */}
      <section className="relative overflow-hidden rounded-3xl border border-gray-200 bg-gradient-to-br from-gray-100 via-gray-50 to-gray-100 shadow-lg">
        <div className="grid gap-10 p-8 sm:p-10 lg:grid-cols-[1.35fr,1fr]">
          {/* Left column */}
          <div className="space-y-6">
            {/* Status badges */}
            <div className="flex flex-wrap items-center gap-3">
              <div className="h-7 w-36 rounded-full bg-gray-200 animate-pulse"></div>
              <div className="h-7 w-32 rounded-full bg-gray-200 animate-pulse"></div>
            </div>

            {/* Title and description */}
            <div className="space-y-3">
              <div className="h-10 w-72 rounded-lg bg-gray-200 animate-pulse"></div>
              <div className="h-6 w-full max-w-md rounded-lg bg-gray-200 animate-pulse"></div>
            </div>

            {/* Action buttons */}
            <div className="flex flex-wrap items-center gap-3">
              <div className="h-10 w-44 rounded-full bg-gray-200 animate-pulse"></div>
              <div className="h-10 w-32 rounded-full bg-gray-200 animate-pulse"></div>
            </div>

            {/* Highlight cards */}
            <div className="grid grid-cols-2 gap-4 sm:grid-cols-3">
              {[...Array(3)].map((_, i) => (
                <div
                  key={i}
                  className="h-28 rounded-2xl bg-gray-200/80 animate-pulse"
                ></div>
              ))}
            </div>
          </div>

          {/* Right column */}
          <div className="space-y-5">
            <div className="h-52 rounded-2xl bg-gray-200/80 animate-pulse"></div>
            <div className="h-56 rounded-2xl bg-gray-200/80 animate-pulse"></div>
          </div>
        </div>
      </section>

      {/* Main Grid Layout Skeleton */}
      <div className="grid grid-cols-1 gap-8 xl:grid-cols-[1.15fr,380px]">
        {/* Left Column */}
        <div className="space-y-8">
          {/* Metrics Section */}
          <section className="overflow-hidden rounded-3xl border border-gray-100 bg-white shadow-lg">
            <div className="flex items-center justify-between border-b border-gray-100 px-6 py-5">
              <div className="space-y-2">
                <div className="h-3 w-24 rounded bg-gray-200 animate-pulse"></div>
                <div className="h-6 w-48 rounded bg-gray-200 animate-pulse"></div>
              </div>
              <div className="h-6 w-28 rounded-full bg-gray-200 animate-pulse"></div>
            </div>
            <div className="grid grid-cols-1 gap-4 p-6 sm:grid-cols-2 xl:grid-cols-3">
              {[...Array(6)].map((_, i) => (
                <div
                  key={i}
                  className="h-40 rounded-2xl bg-gray-100 animate-pulse"
                ></div>
              ))}
            </div>
          </section>

          {/* Activity Section */}
          <section className="rounded-3xl border border-gray-100 bg-gradient-to-br from-gray-50 to-white p-5 shadow-lg">
            <div className="flex items-center justify-between px-1 mb-6">
              <div className="space-y-2">
                <div className="h-3 w-32 rounded bg-gray-200 animate-pulse"></div>
                <div className="h-6 w-56 rounded bg-gray-200 animate-pulse"></div>
              </div>
              <div className="h-6 w-20 rounded-full bg-gray-200 animate-pulse"></div>
            </div>
            <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
              {[...Array(3)].map((_, i) => (
                <div
                  key={i}
                  className="h-[420px] rounded-3xl bg-white border border-gray-100 animate-pulse"
                ></div>
              ))}
            </div>
          </section>
        </div>

        {/* Right Column - Quick Insights */}
        <div className="space-y-6">
          <div className="h-[600px] rounded-3xl bg-white border border-gray-100 shadow-lg animate-pulse"></div>
        </div>
      </div>
    </div>
  );
}
