"use client";

import { Skeleton } from "@heroui/react";

/**
 * Hero + Tabs skeleton. Mirrors the new PDP layout:
 * breadcrumb → gallery + buy box grid → tab navigation → content sections.
 */
export function ProductDetailHeroSkeleton() {
  return (
    <div className="flex flex-col gap-6 md:gap-8">
      {/* Breadcrumb skeleton */}
      <Skeleton className="h-4 w-3/4 max-w-md rounded" />

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

        {/* Buy box */}
        <div className="flex flex-col gap-5">
          <Skeleton className="h-6 w-20 rounded-full" />
          <Skeleton className="h-8 w-full max-w-sm rounded" />
          <Skeleton className="h-4 w-32 rounded" />
          <Skeleton className="h-7 w-28 rounded" />
          <Skeleton className="h-6 w-20 rounded-full" />
          <div className="flex flex-col gap-4 md:flex-row md:items-end">
            <Skeleton className="h-10 w-full rounded-lg md:w-36" />
            <Skeleton className="h-12 w-full rounded-lg md:w-44" />
          </div>
        </div>
      </div>

      {/* Tab navigation skeleton */}
      <div className="mt-8 md:mt-12">
        <div className="flex gap-1 border-b border-[var(--separator)]">
          <Skeleton className="h-10 w-28 rounded-t" />
          <Skeleton className="h-10 w-20 rounded-t" />
          <Skeleton className="h-10 w-24 rounded-t" />
        </div>
        <div className="py-6 md:py-8">
          <Skeleton className="mb-4 h-6 w-32 rounded" />
          <div className="space-y-2">
            <Skeleton className="h-4 w-full max-w-2xl rounded" />
            <Skeleton className="h-4 w-full max-w-2xl rounded" />
            <Skeleton className="h-4 w-4/5 max-w-xl rounded" />
            <Skeleton className="h-4 w-full max-w-2xl rounded" />
          </div>
        </div>
      </div>
    </div>
  );
}
