import type { Metadata } from "next";
import { BreadcrumbJsonLd, WebPageJsonLd } from "@/components/seo";
import QuickstartContent from "./QuickstartContent";

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

export const metadata: Metadata = {
  title: "Quickstart — Get Running in 60 Seconds",
  description:
    "Install LLMHosts, start your server, make your first API call, and connect from anywhere in under a minute.",
  alternates: {
    canonical: `${BASE_URL}/docs/quickstart`,
  },
  openGraph: {
    title: "LLMHosts Quickstart — Get Running in 60 Seconds",
    description:
      "Install, start your server, make your first API call, and connect from anywhere.",
    url: `${BASE_URL}/docs/quickstart`,
    siteName: "LLMHosts",
    type: "website",
    images: [
      {
        url: `${BASE_URL}/og?page=docs`,
        width: 1200,
        height: 630,
        alt: "LLMHosts Quickstart",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "LLMHosts Quickstart",
    description: "From zero to production AI inference in 60 seconds.",
    images: [`${BASE_URL}/og?page=docs`],
  },
};

export default function QuickstartPage() {
  return (
    <>
      <BreadcrumbJsonLd
        items={[
          { name: "Home", url: BASE_URL },
          { name: "Documentation", url: `${BASE_URL}/docs` },
          { name: "Quickstart", url: `${BASE_URL}/docs/quickstart` },
        ]}
      />
      <WebPageJsonLd
        name="LLMHosts Quickstart — Get Running in 60 Seconds"
        description="Install LLMHosts, start your server, make your first API call, and connect from anywhere."
        url={`${BASE_URL}/docs/quickstart`}
      />
      <QuickstartContent />
    </>
  );
}
