import { ErrorBoundary } from './components/ErrorBoundary'
import Matches from './pages/Matches'

function Logo() {
  // 纯 SVG 队徽/足球图形,替代 emoji ⚽(跨平台渲染不一致)
  return (
    <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-brand-600 shadow-sm">
      <svg viewBox="0 0 24 24" className="h-5 w-5" fill="none" aria-hidden="true">
        <circle cx="12" cy="12" r="9" stroke="white" strokeWidth="1.6" />
        <path
          d="M12 6.2l3.1 2.2-1.2 3.6h-3.8L8.9 8.4 12 6.2z"
          fill="white"
          fillOpacity="0.95"
        />
        <path
          d="M12 3v3.2M4.2 9.6l4.7-1.2M7.1 19.4l2.9-4.6M16.9 19.4l-2.9-4.6M19.8 9.6l-4.7-1.2"
          stroke="white"
          strokeWidth="1.4"
          strokeLinecap="round"
          strokeOpacity="0.85"
        />
      </svg>
    </span>
  )
}

export default function App() {
  return (
    <ErrorBoundary>
      <div className="min-h-screen bg-ink-100">
        <header className="sticky top-0 z-20 border-b border-ink-200 bg-white/85 backdrop-blur-sm">
          <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-6 py-3">
            <div className="flex items-center gap-3">
              <Logo />
              <div className="leading-tight">
                <h1 className="text-[15px] font-semibold tracking-tight text-ink-900">
                  先知 <span className="font-normal text-ink-400">Profeto</span>
                </h1>
                <p className="text-2xs text-ink-500">
                  LLM 多专家协作 · 足球比分预测
                </p>
              </div>
            </div>
            <span className="hidden items-center gap-1.5 sm:inline-flex">
              <span className="relative flex h-2 w-2">
                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60" />
                <span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-500" />
              </span>
              <span className="text-2xs font-medium text-ink-500">服务运行中</span>
            </span>
          </div>
        </header>

        <main className="mx-auto max-w-6xl px-6 py-6">
          <Matches />
        </main>

        <footer className="mx-auto max-w-6xl px-6 pb-8 pt-2">
          <p className="text-center text-2xs text-ink-400">
            预测结果由大语言模型生成,仅供研究参考,不构成任何投注建议
          </p>
        </footer>
      </div>
    </ErrorBoundary>
  )
}