"use client";

import { Suspense } from "react";
import { usePathname } from "next/navigation";

import { FloatingNav } from "@/components/layout/floating-nav";
import { SiteHeader } from "@/components/layout/site-header";
import { isCinematicRoute } from "@/lib/route-chrome";

/**
 * Site chrome controller.
 *
 * Two pieces, and only one of each on screen:
 *
 *   - `SiteHeader` — transparent top bar with the wordmark, search and the
 *     account control. It overlays the hero on the homepage and gains a solid
 *     surface on scroll.
 *   - `FloatingNav` — icons-only pill of destinations along the bottom edge.
 *
 * Neither is *rendered at all* on cinematic routes rather than being hidden with
 * CSS. That matters for correctness, not just looks:
 *
 *   - no fixed overlays, so nothing intercepts taps on the player
 *   - no `<nav>`/`<header>` landmarks, so screen readers never announce dead
 *     links
 *   - no search, account control or logo is shipped to those routes
 *   - nothing is reserved, so the player sits flush against the viewport top
 *
 * Detail and watch pages carry their own controls instead: `[ ← Back ]` on
 * detail pages, and `[ ← Back ]` + `[ Server ▼ ]` above the player.
 *
 * `usePathname()` is available during SSR in the App Router, so the first HTML
 * response is already correct — there is no chrome flash on navigation.
 */
export function SiteChrome() {
  const pathname = usePathname();
  const showNavigation = !isCinematicRoute(pathname);

  if (!showNavigation) return null;

  return (
    <Suspense fallback={null}>
      <SiteHeader />
      <FloatingNav />
    </Suspense>
  );
}