export default function HostingSkeleton() {
  return (
    <div className="animate-fade-up space-y-4">
      <div className="rounded-3xl border border-ink-200 dark:border-ink-800 bg-white dark:bg-ink-900 p-6 md:p-8 overflow-hidden relative">
        <div className="absolute left-0 top-0 bottom-0 w-1 shimmer animate-shimmer" />
        <div className="flex flex-wrap items-start justify-between gap-5">
          <div className="space-y-3 flex-1 min-w-0">
            <div className="h-3 w-24 rounded shimmer animate-shimmer" />
            <div className="h-12 w-72 rounded-xl shimmer animate-shimmer" />
            <div className="flex gap-3">
              <div className="h-4 w-40 rounded shimmer animate-shimmer" />
              <div className="h-4 w-36 rounded shimmer animate-shimmer" />
              <div className="h-4 w-28 rounded shimmer animate-shimmer" />
            </div>
          </div>
          <div className="flex gap-2">
            <div className="h-14 w-48 rounded-xl shimmer animate-shimmer hidden md:block" />
            <div className="h-10 w-24 rounded-xl shimmer animate-shimmer" />
          </div>
        </div>
        <div className="mt-6 pt-5 border-t border-ink-100 dark:border-ink-800 space-y-3">
          <div className="h-3 w-32 rounded shimmer animate-shimmer" />
          <div className="h-2 w-full rounded-full shimmer animate-shimmer" />
        </div>
      </div>
      <div className="rounded-2xl border border-ink-200 dark:border-ink-800 bg-white dark:bg-ink-900 overflow-hidden">
        <div className="flex items-center justify-between px-5 py-3.5 border-b border-ink-100 dark:border-ink-800/80">
          <div className="h-4 w-48 rounded shimmer animate-shimmer" />
          <div className="h-4 w-40 rounded shimmer animate-shimmer" />
        </div>
        <div className="aspect-[16/9] bg-gradient-to-br from-ink-50 via-white to-ink-100 dark:from-ink-950 dark:via-ink-900 dark:to-ink-950" />
      </div>
    </div>
  );
}