import { Suspense } from 'react'
import type { Metadata } from 'next'
import PricingSection from '@/components/PricingSection'
import { PricingCardsSkeleton } from '@/components/skeletons'

export const metadata: Metadata = {
  title: 'Pricing | Pulse',
  description: 'Simple, transparent pricing for privacy-first web analytics. Free tier included.',
  openGraph: {
    title: 'Pricing | Pulse',
    description: 'Simple, transparent pricing for privacy-first web analytics. Free tier included.',
    siteName: 'Pulse by Ciphera',
  },
}

export default function PricingPage() {
  return (
    <div className="min-h-screen pt-20">
      <Suspense fallback={
        <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-16">
          <div className="text-center mb-12">
            <div className="h-10 w-64 animate-pulse rounded bg-neutral-800 mx-auto mb-4" />
            <div className="h-5 w-96 animate-pulse rounded bg-neutral-800 mx-auto" />
          </div>
          <PricingCardsSkeleton />
        </div>
      }>
        <PricingSection />
      </Suspense>
    </div>
  )
}