/**
 * Page-level loading fallback for /shop/[category]/[subCategory]/[slug].
 * Mirrors the new PDP layout: hero grid + tab navigation + content skeleton.
 * Uses Tailwind only so this stays a Server Component (HeroUI Skeleton is client-only).
 */
export default function ProductDetailLoading() {
  return (
    <main className="mx-auto w-full max-w-7xl px-4 py-6 md:py-8">
      {/* Breadcrumb */}
      <div className="mb-6 h-4 w-2/3 max-w-sm animate-pulse rounded bg-[var(--muted)] md:mb-8" />

      {/* Hero grid */}
      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 md:gap-10">
        {/* Gallery */}
        <div className="flex flex-col gap-3">
          <div className="aspect-square w-full animate-pulse rounded-xl bg-[var(--muted)] md:aspect-[4/3]" />
          <div className="flex gap-2">
            {[1, 2, 3, 4].map((i) => (
              <div
                key={i}
                className="h-16 w-16 shrink-0 animate-pulse rounded-lg bg-[var(--muted)]"
              />
            ))}
          </div>
        </div>

        {/* Buy box */}
        <div className="flex flex-col gap-5">
          <div className="h-6 w-20 animate-pulse rounded-full bg-[var(--muted)]" />
          <div className="h-8 w-full max-w-sm animate-pulse rounded bg-[var(--muted)]" />
          <div className="h-4 w-32 animate-pulse rounded bg-[var(--muted)]" />
          <div className="h-7 w-28 animate-pulse rounded bg-[var(--muted)]" />
          <div className="h-6 w-20 animate-pulse rounded-full bg-[var(--muted)]" />
          <div className="flex flex-col gap-4 md:flex-row">
            <div className="h-10 w-full animate-pulse rounded-lg bg-[var(--muted)] md:w-36" />
            <div className="h-12 w-full animate-pulse rounded-lg bg-[var(--muted)] md:w-44" />
          </div>
        </div>
      </div>

      {/* Tab navigation + first section skeleton */}
      <div className="mt-8 md:mt-12">
        <div className="flex gap-4 border-b border-[var(--muted)]">
          <div className="h-10 w-28 animate-pulse rounded-t bg-[var(--muted)]" />
          <div className="h-10 w-20 animate-pulse rounded-t bg-[var(--muted)]" />
          <div className="h-10 w-24 animate-pulse rounded-t bg-[var(--muted)]" />
        </div>
        <div className="space-y-2 py-6 md:py-8">
          <div className="mb-4 h-6 w-32 animate-pulse rounded bg-[var(--muted)]" />
          <div className="h-4 w-full max-w-2xl animate-pulse rounded bg-[var(--muted)]" />
          <div className="h-4 w-full max-w-2xl animate-pulse rounded bg-[var(--muted)]" />
          <div className="h-4 w-3/4 max-w-xl animate-pulse rounded bg-[var(--muted)]" />
        </div>
      </div>
    </main>
  );
}
