export default function Loading() {
  return (
    <div className="min-h-screen bg-[#F8F9FA] pb-20">
      <header className="sticky top-0 z-10 bg-white">
        <div className="flex items-center h-14 px-4">
          <div className="w-6 h-6 bg-gray-200 rounded animate-pulse" />
          <div className="ml-2 w-32 h-5 bg-gray-200 rounded animate-pulse" />
        </div>
      </header>

      <div className="mt-8">
        {/* Step Indicator Skeleton */}
        <div className="flex justify-center items-center space-x-4 px-6">
          <div className="w-8 h-8 bg-gray-200 rounded-full animate-pulse" />
          <div className="w-16 h-1 bg-gray-200 rounded animate-pulse" />
          <div className="w-8 h-8 bg-gray-200 rounded-full animate-pulse" />
          <div className="w-16 h-1 bg-gray-200 rounded animate-pulse" />
          <div className="w-8 h-8 bg-gray-200 rounded-full animate-pulse" />
        </div>

        {/* Content Skeleton */}
        <div className="mt-8 px-6">
          <div className="bg-white rounded-lg p-6 space-y-6">
            <div className="space-y-2">
              <div className="w-20 h-4 bg-gray-200 rounded animate-pulse" />
              <div className="w-full h-10 bg-gray-200 rounded animate-pulse" />
            </div>
            <div className="space-y-2">
              <div className="w-32 h-4 bg-gray-200 rounded animate-pulse" />
              <div className="flex space-x-2">
                <div className="w-24 h-10 bg-gray-200 rounded animate-pulse" />
                <div className="w-8 h-4 bg-gray-200 rounded animate-pulse" />
                <div className="w-24 h-10 bg-gray-200 rounded animate-pulse" />
              </div>
            </div>
            <div className="space-y-2">
              <div className="w-24 h-4 bg-gray-200 rounded animate-pulse" />
              <div className="flex items-center space-x-4">
                <div className="w-8 h-8 bg-gray-200 rounded animate-pulse" />
                <div className="w-8 h-4 bg-gray-200 rounded animate-pulse" />
                <div className="w-8 h-8 bg-gray-200 rounded animate-pulse" />
                <div className="w-16 h-4 bg-gray-200 rounded animate-pulse" />
              </div>
            </div>
            <div className="w-full h-10 bg-gray-200 rounded animate-pulse" />
          </div>
        </div>
      </div>

      {/* Bottom Navigation Skeleton */}
      <nav className="fixed bottom-0 left-0 right-0 h-16 bg-white border-t flex items-center justify-around px-6">
        {Array.from({ length: 4 }).map((_, i) => (
          <div key={i} className="flex flex-col items-center space-y-1">
            <div className="w-6 h-6 bg-gray-200 rounded animate-pulse" />
            <div className="w-12 h-3 bg-gray-200 rounded animate-pulse" />
          </div>
        ))}
      </nav>
    </div>
  )
}
