function SkeletonBlocks() {
  return (
    <div className="space-y-6">
      <div className="mx-auto h-9 max-w-lg rounded-lg bg-[var(--muted)] animate-pulse" />
      <div className="mx-auto h-[min(40vh,280px)] w-full max-w-3xl rounded-2xl bg-[var(--muted)]/70 animate-pulse" />
      <div className="flex flex-wrap justify-center gap-3">
        <div className="h-12 w-40 rounded-xl bg-[var(--muted)] animate-pulse" />
        <div className="h-12 w-40 rounded-xl bg-[var(--muted)] animate-pulse" />
      </div>
      <div className="mx-auto mt-8 max-w-2xl space-y-3">
        <div className="h-4 w-full rounded bg-[var(--muted)] animate-pulse" />
        <div className="h-4 w-[90%] rounded bg-[var(--muted)] animate-pulse" />
        <div className="h-4 w-[75%] rounded bg-[var(--muted)] animate-pulse" />
      </div>
    </div>
  );
}

type HomePageSkeletonProps = {
  className?: string;
  /** full：整页含顶栏；main：仅主内容区（已包在 VipLayout 内时用） */
  variant?: "full" | "main";
};

/**
 * 首页骨架（Server/Client 均可引用），保证首屏 HTML 即有可见结构，避免白屏。
 */
export function HomePageSkeleton({
  className = "",
  variant = "full",
}: HomePageSkeletonProps) {
  const main = (
    <main className="mx-auto w-full max-w-[1200px] flex-1 px-4 py-8 sm:px-6">
      <SkeletonBlocks />
    </main>
  );

  if (variant === "main") {
    return (
      <div
        className={`min-h-[50vh] bg-[var(--background)] text-[var(--foreground)] ${className}`}
        aria-busy="true"
        aria-label="页面加载中"
      >
        {main}
      </div>
    );
  }

  return (
    <div
      className={`flex min-h-screen flex-col bg-[var(--background)] text-[var(--foreground)] ${className}`}
      aria-busy="true"
      aria-label="页面加载中"
    >
      <header className="flex items-center justify-between border-b border-[var(--border)] px-4 py-3 sm:px-6">
        <div className="h-7 w-28 rounded-md bg-[var(--muted)] animate-pulse" />
        <div className="h-9 w-24 rounded-lg bg-[var(--muted)] animate-pulse" />
      </header>
      {main}
    </div>
  );
}
