"use client"

import type { ReactNode } from "react"
import { DemoNavigationGuard } from "@/components/demo/demo-navigation-guard"
import { cn } from "@/lib/utils"

export function DemoChrome({
  children,
  className,
}: {
  children: ReactNode
  className?: string
}) {
  return (
    <div
      className={cn(
        "relative flex h-dvh max-h-dvh flex-col overflow-hidden",
        className
      )}
    >
      <DemoNavigationGuard />
      <div
        className={cn(
          "pointer-events-none absolute inset-x-0 top-0 z-50 flex justify-center pt-2",
          "max-sm:pt-1"
        )}
      >
        <span className="rounded-full border border-[var(--mail-border)]/60 bg-[var(--mail-surface-elevated)]/75 px-3 py-1 text-[11px] font-semibold text-[var(--mail-text-muted)]/90 shadow-sm backdrop-blur-sm">
          Démo interactive — zéro rétention
        </span>
      </div>
      {children}
    </div>
  )
}