import { useState } from 'react'
import BottomNav, { type TabId } from './components/BottomNav'
import Home from './pages/Home'
import Rules from './pages/Rules'
import Cards from './pages/Cards'
import Game from './pages/Game'
import Contact from './pages/Contact'

const TABS: TabId[] = ['start', 'regeln', 'karten', 'spiel', 'kontakt']

export default function App() {
  const [tab, setTab] = useState<TabId>(() => {
    const p = new URLSearchParams(window.location.search).get('tab')
    return TABS.includes(p as TabId) ? (p as TabId) : 'start'
  })

  return (
    <div className="mx-auto min-h-dvh max-w-md pb-24">
      <main key={tab} className="rein">
        {tab === 'start' && <Home onSpielStart={() => setTab('spiel')} onRegeln={() => setTab('regeln')} onRedRalf={() => setTab('karten')} />}
        {tab === 'regeln' && <Rules />}
        {tab === 'karten' && <Cards />}
        {tab === 'spiel' && <Game />}
        {tab === 'kontakt' && <Contact />}
      </main>
      <BottomNav aktiv={tab} onWechsel={setTab} />
    </div>
  )
}