import { useState } from 'react'
import { TopBar } from './components/TopBar.jsx'
import { TabNav } from './components/TabNav.jsx'
import { RunWithLlm } from './pages/RunWithLlm.jsx'
import { ApiPlayground } from './pages/ApiPlayground.jsx'
import { LandscapeExplorer } from './pages/LandscapeExplorer.jsx'
import { BaselineRace } from './pages/BaselineRace.jsx'
import { OptimizerArena } from './pages/OptimizerArena.jsx'
import { About } from './pages/About.jsx'

const TABS = [
  { id: 'llm',       label: 'Run with LLM' },
  { id: 'api',       label: 'API playground' },
  { id: 'landscape', label: 'Landscape' },
  { id: 'race',      label: 'Baseline race' },
  { id: 'arena',     label: 'Optimizer arena' },
  { id: 'about',     label: 'About' },
]

export default function App() {
  const [active, setActive] = useState('llm')

  return (
    <div className="min-h-screen bg-bg text-ink">
      <div className="max-w-[1400px] mx-auto px-6 py-6">
        <TopBar />
        <section className="py-4">
          <h1 className="text-[2rem] leading-tight max-w-[820px]">
            An LLM designs optimizers, through a probe–draft–commit REPL.
          </h1>
          <p className="text-muted text-base mt-2 max-w-[720px]">
            Two agents co-evolve: one writes optimizer code, the other picks
            adversarial landscapes. Connect any OpenAI-compatible endpoint
            and watch a model play, or explore the landscape library interactively.
          </p>
        </section>

        <TabNav tabs={TABS} active={active} onChange={setActive} />

        <main className="mt-6">
          {active === 'llm'       && <RunWithLlm />}
          {active === 'api'       && <ApiPlayground />}
          {active === 'landscape' && <LandscapeExplorer />}
          {active === 'race'      && <BaselineRace />}
          {active === 'arena'     && <OptimizerArena />}
          {active === 'about'     && <About />}
        </main>
      </div>
    </div>
  )
}