export default function MarketplaceLoading() {
  return (
    <div className="animate-pulse p-4 space-y-4">
      {/* Hero skeleton */}
      <div className="h-48 rounded-2xl" style={{ background: "var(--card)" }} />
      {/* Category row */}
      <div className="flex gap-3 overflow-hidden">
        {[1, 2, 3, 4, 5, 6].map((i) => (
          <div key={i} className="w-20 h-20 rounded-2xl shrink-0" style={{ background: "var(--card)" }} />
        ))}
      </div>
      {/* Grid */}
      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
        {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
          <div key={i} className="rounded-2xl overflow-hidden" style={{ background: "var(--card)" }}>
            <div className="h-40" style={{ background: "var(--deep)" }} />
            <div className="p-3 space-y-2">
              <div className="h-3 rounded" style={{ background: "var(--deep)" }} />
              <div className="h-3 w-2/3 rounded" style={{ background: "var(--deep)" }} />
              <div className="h-4 w-1/2 rounded" style={{ background: "var(--deep)" }} />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
