import type { Metadata } from 'next';
import Pricing from '@/components/Pricing';
import { ClaimMeter } from '@/components/vyndr';
import DeskShowcase from './DeskShowcase';

export const metadata: Metadata = {
  title: 'Pricing — VYNDR',
  description: 'Founder pricing locks for life. $14.99/mo Analyst, $44.99/mo Desk. First 100 seats only.',
  openGraph: {
    title: 'VYNDR — Founder Pricing',
    description: 'Sports prop intelligence. Beta pricing locks for life. First 100 seats.',
    type: 'website',
    url: 'https://vyndr.app/pricing',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'VYNDR — Founder Pricing',
    description: 'Sports prop intelligence. Beta pricing locks for life.',
  },
};

/**
 * Dedicated /pricing route. The Pricing component is also embedded on
 * the landing page under the `#pricing` anchor; this page exists so:
 *   - The renewal email at `web/src/services/email.ts` (which links
 *     to `/pricing`) lands on something real instead of 404'ing.
 *   - Nav / CTA links can hand users a single stable URL whether
 *     they're already authenticated or not.
 *   - SEO crawlers see pricing on a canonical URL, not deep in the
 *     landing-page anchor.
 *
 * The component itself is fully client-side rendered (it owns
 * checkout state + AuthContext access), so this page wraps it in a
 * minimal scroll-restoration-friendly shell.
 */
export default function PricingPage() {
  return (
    <main style={{ minHeight: '100vh' }}>
      {/* DS5 (#8) — Desk is the hero. The "$1M terminal" story leads, above the
          grid, so the premium tier stops being an afterthought. */}
      <DeskShowcase />
      <Pricing />
      {/* Founder-seat scarcity under the grid (§12) */}
      <div style={{ padding: '8px 16px 48px' }}>
        <ClaimMeter />
      </div>
    </main>
  );
}