"use client"; import React, { useState, useEffect } from "react"; import { BoothConfig } from "@/types/booth"; import { SpookyAtmosphere } from "@/components/SpookyAtmosphere"; import { useI18n } from "@/lib/i18n"; import { Globe } from "lucide-react"; interface KioskFrameProps { config: BoothConfig; children: React.ReactNode; showHeaderLogo?: boolean; showLanguageToggle?: boolean; } export const KioskFrame: React.FC = ({ config, children, showHeaderLogo = true, showLanguageToggle = true, }) => { const [isModeFullscreen, setIsModeFullscreen] = useState(false); const { language, toggleLanguage, isWeChat } = useI18n(); useEffect(() => { if (typeof window !== "undefined") { const params = new URLSearchParams(window.location.search); const isFull = params.get("mode") === "fullscreen"; setIsModeFullscreen(isFull); if (isFull) { const triggerFullscreen = () => { if (!document.fullscreenElement && document.documentElement.requestFullscreen) { document.documentElement.requestFullscreen().catch((err) => { console.log("[Kiosk] Fullscreen request prevented:", err); }); } }; window.addEventListener("pointerdown", triggerFullscreen, { once: true }); return () => window.removeEventListener("pointerdown", triggerFullscreen); } } }, []); const theme = config.theme; return (

{/* Dynamic Martial Arts & Shanghai Halloween Atmosphere */} {/* Floating Language Toggle (Top Right) */} {showLanguageToggle && (

)} {/* Brand Header Logo - 20% larger */} {showHeaderLogo && (

{theme.logoUrl ? ( // eslint-disable-next-line @next/next/no-img-element

) : (

{config.appName}

)}

)} {/* Screen Content Layer */}

{children}

{/* Dojo Brand Footer - clean single line, smaller font, no emoji */}

); };