import { lazy, Suspense, useEffect, useState } from 'react'

const Debug = lazy(() => import('./video/Debug'))
const TDebug = lazy(() => import('./video/TDebug'))
const ADebug = lazy(() => import('./video/ADebug'))
const XDebug = lazy(() => import('./video/XDebug'))
const Studio = lazy(() => import('./video/Studio'))

function Splash() {
  return (
    <div className="min-h-screen bg-[#04080f] flex items-center justify-center text-cyan-200 text-sm tracking-widest">
      腱鞘炎 · 3D 医学科普动画 加载中…
    </div>
  )
}

export default function App() {
  const [q, setQ] = useState<URLSearchParams | null>(null)
  useEffect(() => { setQ(new URLSearchParams(window.location.search)); document.title = '腱鞘炎 · 3D 医学科普动画'; document.documentElement.lang = 'zh-CN' }, [])
  if (!q) return <Splash />
  if (q.has('debug')) return <Suspense fallback={null}><Debug /></Suspense>
  if (q.has('tdebug')) return <Suspense fallback={null}><TDebug /></Suspense>
  if (q.has('adebug')) return <Suspense fallback={null}><ADebug /></Suspense>
  if (q.has('xdebug')) return <Suspense fallback={null}><XDebug /></Suspense>
  return <Suspense fallback={<Splash />}><Studio /></Suspense>
}