import Link from "next/link";
import { IndicesPanel } from "../components/IndicesPanel";
import { MarketsOverview } from "../components/MarketsOverview";
import { RecentTiles } from "../components/RecentTiles";
import { SearchBox } from "../components/SearchBox";
import { SeedTiles } from "../components/SeedTiles";
import { ThemeTiles } from "../components/ThemeTiles";

export default function HomePage() {
  return (
    <main className="mx-auto max-w-5xl px-6 py-12">
      <div className="flex items-start justify-between gap-3">
        <div>
          <h1 className="text-3xl font-bold tracking-tight text-zinc-50">종목 검색</h1>
          <p className="mt-2 text-sm text-zinc-400">
            종목을 골라 차트를 보고, <b className="text-rose-300">예상차트 보기</b> 버튼으로
            15일·30일·1년 예측 캔들을 같은 차트에 이어 붙입니다.
          </p>
        </div>
        <Link
          href="/watchlist"
          className="shrink-0 rounded-full border border-amber-500/40 bg-amber-500/10 px-3 py-1.5 text-xs text-amber-300 hover:bg-amber-500/20"
        >
          ★ 관심종목
        </Link>
      </div>

      <div className="mt-6">
        <SearchBox autoFocus />
      </div>

      <div className="mt-8">
        <RecentTiles />
      </div>

      <div className="mt-8">
        <IndicesPanel />
      </div>

      <div className="mt-8">
        <SeedTiles />
      </div>

      <div className="mt-8">
        <ThemeTiles />
      </div>

      <div className="mt-6">
        <MarketsOverview />
      </div>

      <div className="mt-6 rounded-lg border border-zinc-800 bg-zinc-900/30 p-4 text-xs text-zinc-500">
        <div className="font-medium text-zinc-300">매칭 · 재학습</div>
        <div className="mt-1">
          평일 16:30 KST 예측↔실제 매칭, 일요일 02:00 KST LGBM 재학습.
          앙상블은 Chronos(zero-shot) + LightGBM.
        </div>
      </div>
    </main>
  );
}