// Loading Skeleton Component
export function LoadingSkeleton() {
  return (
    <div className="min-h-screen bg-[#1e1d1c] py-20 md:py-32 lg:py-40 px-4 md:px-8">
      <div className="max-w-7xl mx-auto">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 mb-12">
          {/* Image Skeleton */}
          <div className="w-full h-96 md:h-125 bg-gray-800 rounded-lg animate-pulse" />

          {/* Info Skeleton */}
          <div className="flex flex-col justify-center space-y-4">
            {/* Title */}
            <div className="h-8 bg-gray-800 rounded animate-pulse w-3/4" />

            {/* Articular */}
            <div className="h-6 bg-gray-800 rounded animate-pulse w-1/2" />

            {/* Status */}
            <div className="h-8 bg-gray-800 rounded animate-pulse w-1/3" />

            {/* Description */}
            <div className="space-y-2">
              <div className="h-4 bg-gray-800 rounded animate-pulse w-full" />
              <div className="h-4 bg-gray-800 rounded animate-pulse w-5/6" />
              <div className="h-4 bg-gray-800 rounded animate-pulse w-4/6" />
            </div>

            {/* Price */}
            <div className="h-10 bg-gray-800 rounded animate-pulse w-32" />

            {/* Buttons */}
            <div className="flex gap-4">
              <div className="h-12 bg-gray-800 rounded animate-pulse flex-1" />
            </div>

            {/* Social */}
            <div className="flex gap-2">
              {[1, 2, 3, 4, 5, 6].map((i) => (
                <div
                  key={i}
                  className="w-10 h-10 bg-gray-800 rounded-lg animate-pulse"
                />
              ))}
            </div>
          </div>
        </div>

        {/* Features Skeleton */}
        <div className="space-y-2">
          <div className="h-12 bg-gray-800 rounded-t-xl animate-pulse" />
          {[1, 2, 3, 4].map((i) => (
            <div
              key={i}
              className="h-16 bg-gray-800/50 rounded animate-pulse"
            />
          ))}
        </div>
      </div>
    </div>
  );
}