import type { Metadata } from "next";
import PricingPageClient from "./PricingPageClient";
import { FAQ_ITEMS } from "./faq-data";
import {
  BreadcrumbJsonLd,
  FAQPageJsonLd,
  WebPageJsonLd,
} from "@/components/seo";

const BASE_URL = "https://llmhosts.com";

export const metadata: Metadata = {
  title: "Pricing — Free, Pro, and Team Plans",
  description:
    "Compare LLMHosts plans. Free tier for personal use, Pro at $29/mo with priority routing and multi-device mesh, Team at $99/mo with Hive Mode GPU pooling.",
  alternates: {
    canonical: `${BASE_URL}/pricing`,
  },
  openGraph: {
    title: "LLMHosts Pricing — Free, Pro, and Team Plans",
    description:
      "Compare LLMHosts plans. Free tier for personal use, Pro at $29/mo, Team at $99/mo.",
    url: `${BASE_URL}/pricing`,
    siteName: "LLMHosts",
    type: "website",
    images: [
      {
        url: `${BASE_URL}/og?page=pricing`,
        width: 1200,
        height: 630,
        alt: "LLMHosts Pricing — Free, Pro, and Team Plans",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "LLMHosts Pricing — Free, Pro, and Team Plans",
    description:
      "Free tier forever. Pro at $29/mo. Team at $99/mo. Start free, scale when you need to.",
    images: [`${BASE_URL}/og?page=pricing`],
  },
};

export default function PricingPage() {
  return (
    <>
      <BreadcrumbJsonLd
        items={[
          { name: "Home", url: BASE_URL },
          { name: "Pricing", url: `${BASE_URL}/pricing` },
        ]}
      />
      <WebPageJsonLd
        name="LLMHosts Pricing — Free, Pro, and Team Plans"
        description="Compare LLMHosts plans. Free tier for personal use, Pro at $29/mo with priority routing, Team at $99/mo with GPU pooling."
        url={`${BASE_URL}/pricing`}
      />
      <FAQPageJsonLd items={FAQ_ITEMS} />
      <PricingPageClient />
    </>
  );
}
