import type { ReactNode } from "react";

/**
 * Layout for the watch routes (`/watch/movie/[id]`, `/watch/tv/[id]`).
 *
 * A watch page is a dedicated viewing surface, and this layout is where that
 * contract is enforced for the whole subtree:
 *
 *   - **No `<main>` here.** `MainShell` in the root layout already renders
 *     `<main id="main">`, which is also the skip link's target. The two watch
 *     pages previously each opened their own `<main>` inside it, which is
 *     invalid HTML and gives assistive technology two competing landmarks. This
 *     layout is a plain `<div>`, and the pages below it are the stage.
 *
 *   - **Nothing scrolls.** The stage is viewport-sized and clipped (see
 *     `.watch-stage` in `globals.css`), so this wrapper is told to collapse too,
 *     which stops a stray focus ring on a control just off-screen from being
 *     able to extend the document.
 *
 *   - **Black, and only black.** The `bg-black` on the wrapper covers the
 *     `bg-bg` the rest of the app paints on `<body>`, so a moment when the
 *     stage has not yet painted — or a provider that letterboxes its own frame —
 *     shows black rather than the site theme bleeding through the edges.
 *
 *   - **No site chrome.** The header and the bottom nav are both suppressed for
 *     this route by `isCinematicRoute()` inside `SiteChrome` and `MainShell`;
 *     this layout does not reintroduce them.
 */
export default function WatchLayout({ children }: { children: ReactNode }) {
  return <div className="h-[100svh] w-full overflow-hidden bg-black">{children}</div>;
}