import type { Metadata } from "next";
import { pageSeo } from "@/content/page-seo";
import { createPageMetadata } from "@/lib/seo";
import { Suspense } from "react";
import { site } from "@/content/site";
import { ticketTiers } from "@/content/tickets";
import { PageRiftHeader } from "@/components/layout/PageRiftHeader";
import { Section } from "@/components/layout/Section";
import { PaymentForm } from "@/components/payment/PaymentForm";
import { TicketCard } from "@/components/tickets/TicketCard";

export const metadata: Metadata = createPageMetadata(pageSeo.payment);

export default function PaymentPage() {
  return (
    <>
      <PageRiftHeader
        variant="tickets"
        eyebrow={site.dates.label}
        title={<h1 className="text-4xl font-bold">Tickets & payment</h1>}
        description={
          <p>
            Secure your place at {site.venue.name}, {site.venue.address}. Choose a pass and complete
            checkout below.
          </p>
        }
      />

      <Section>
        <div className="grid gap-8 md:grid-cols-3 md:items-stretch">
          {ticketTiers.map((tier, index) => (
            <TicketCard key={tier.id} tier={tier} index={index} compact />
          ))}
        </div>
      </Section>

      <Section variant="muted" id="checkout">
        <h2 className="text-2xl font-bold">Checkout</h2>
        <p className="mt-2 text-muted-foreground">Complete your registration in a few steps.</p>
        <div className="mt-8">
          <Suspense fallback={<p className="text-muted-foreground">Loading checkout…</p>}>
            <PaymentForm />
          </Suspense>
        </div>
      </Section>
    </>
  );
}