"use client";

import Link from "next/link";

const HIGHLIGHTS = [
  "每日市场结论",
  "主线与板块判断",
  "推荐池与自选股跟踪",
];

export default function LandingPage() {
  return (
    <main className="min-h-screen bg-bg-primary text-text-primary relative overflow-hidden">
      <div className="absolute inset-0 pointer-events-none bg-[radial-gradient(circle_at_top_right,rgba(245,158,11,0.08),transparent_28%),linear-gradient(180deg,rgba(255,255,255,0.01),transparent_45%)]" />

      <div className="relative max-w-6xl mx-auto px-6 md:px-8 min-h-screen flex flex-col">
        <header className="flex items-center justify-between py-6 animate-fade-in-up">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-500 to-amber-600 flex items-center justify-center text-sm font-bold text-white shadow-glow-sm">
              D
            </div>
            <div>
              <div className="text-sm font-semibold tracking-tight">Dragon AI Agent</div>
              <div className="text-xs text-text-muted mt-0.5">A 股 AI 作战系统</div>
            </div>
          </div>

          <Link
            href="/login"
            className="text-xs px-4 py-2 bg-gradient-to-r from-amber-500/20 to-amber-600/15 text-amber-400 rounded-xl hover:from-amber-500/30 hover:to-amber-600/25 transition-all duration-200 border border-amber-500/10 font-medium"
          >
            登录
          </Link>
        </header>

        <section className="flex-1 flex items-center py-12 md:py-20">
          <div className="w-full max-w-4xl">
            <div className="text-[10px] uppercase tracking-[0.24em] text-amber-400 font-semibold animate-fade-in-up">
              AI Market Operating System
            </div>

            <h1 className="mt-5 text-4xl md:text-6xl font-bold tracking-tight leading-[1.02] animate-fade-in-up">
              每天给你一份
              <br />
              可以直接看的市场作战结论。
            </h1>

            <p className="mt-6 max-w-2xl text-base md:text-lg text-text-secondary leading-relaxed animate-fade-in-up">
              从大盘、主线板块到推荐池和自选股，
              用 AI 帮你整理成一套清晰、连续、可跟踪的交易研究结果。
            </p>

            <div className="flex flex-wrap gap-3 mt-8 animate-fade-in-up">
              {HIGHLIGHTS.map((item) => (
                <span
                  key={item}
                  className="px-3.5 py-1.5 rounded-full bg-surface-2 border border-border-subtle text-sm text-text-secondary"
                >
                  {item}
                </span>
              ))}
            </div>

            <div className="flex flex-wrap items-center gap-3 mt-10 animate-fade-in-up">
              <Link
                href="/login"
                className="px-6 py-3 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-xl text-sm font-semibold hover:from-amber-400 hover:to-amber-500 transition-all shadow-glow-sm"
              >
                进入系统
              </Link>
            </div>
          </div>
        </section>

        <footer className="py-6 text-xs text-text-muted animate-fade-in-up">
          面向每日交易研究的 A 股 AI 作战台
        </footer>
      </div>
    </main>
  );
}