/**
 * Loading state for pricing page
 * Provides instant feedback while page loads
 */
export default function PricingLoading() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-brand-green/5 via-white to-brand-sand/10 py-16">
      <div className="mx-auto max-w-6xl px-4">
        <div className="animate-pulse space-y-8">
          {/* Header skeleton */}
          <div className="text-center">
            <div className="mx-auto h-12 w-2/3 rounded-lg bg-slate-200" />
            <div className="mx-auto mt-4 h-6 w-1/2 rounded bg-slate-100" />
          </div>

          {/* Pricing cards skeleton */}
          <div className="mt-12 grid gap-8 md:grid-cols-3">
            {[1, 2, 3].map((i) => (
              <div
                key={i}
                className="rounded-2xl border border-slate-200 bg-white p-8 shadow-sm"
              >
                <div className="space-y-4">
                  <div className="h-8 w-1/2 rounded bg-slate-200" />
                  <div className="h-12 w-3/4 rounded bg-slate-100" />
                  <div className="space-y-2">
                    <div className="h-4 rounded bg-slate-100" />
                    <div className="h-4 rounded bg-slate-100" />
                    <div className="h-4 rounded bg-slate-100" />
                    <div className="h-4 w-2/3 rounded bg-slate-100" />
                  </div>
                  <div className="h-12 rounded-lg bg-brand-green/20" />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}
