/**
 * The route component behind `/demos/:slug`.
 *
 * It owns almost nothing on purpose. The router's loader has already validated
 * the slug against the registry and started the demo's chunk, and `DemoShell`
 * owns the loading, the tabs and the URL state, so all that is left here is
 * the document head — the half of SEO that `scripts/prerender.mjs` cannot do,
 * because a visitor who lands on `/` and clicks through never fetches a new
 * document and would otherwise keep the home page's title and canonical link.
 */

import { useParams } from 'react-router-dom';

import { DemoShell } from '@/components/demo/DemoShell';
import { getDemo } from '@/lib/demo-kit/registry';
import { pageTitle, useSeo } from '@/lib/seo';
import { routes } from '@/content/lineup';

export default function DemoPage() {
  const { slug } = useParams<{ slug: string }>();
  // The loader 404s an unknown slug before this ever renders, so `meta` is
  // present in practice; the fallbacks are here so a direct render in a test
  // or a preview cannot crash on the head.
  const meta = slug ? getDemo(slug) : undefined;

  useSeo({
    title: pageTitle(meta?.title ?? 'Demo'),
    ...(meta ? { description: meta.tagline } : {}),
    ...(slug ? { canonical: routes.demo(slug) } : {}),
    ...(meta ? { ogImage: meta.ogImage } : {}),
  });

  return <DemoShell />;
}
