export default function SeasonPage() {
  return (
    <main className="mx-auto max-w-6xl px-4 pb-20 pt-8">
      <section className="result-hero rounded-[2rem]">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_15%_24%,rgba(74,215,226,0.14),transparent_24%),radial-gradient(circle_at_82%_22%,rgba(216,173,83,0.18),transparent_30%),linear-gradient(135deg,#101521_0%,#161f34_46%,#0d1a22_100%)]" />
        <div className="relative z-[2] grid gap-8 px-7 py-9 md:grid-cols-[1.1fr_0.9fr] md:px-10">
          <div>
            <p className="text-sm font-black tracking-[0.24em] text-[#d8ad53]">시즌 리캡</p>
            <h1 className="mt-3 text-5xl font-black tracking-[-0.06em] text-white md:text-6xl">시즌 회고</h1>
            <p className="mt-5 max-w-2xl text-lg leading-8 text-[#c8d4e5]">
              시즌별 플레이 성향 변화와 주력 챔피언, 듀오 시너지 변화를 한 화면에서 보는 회고
              페이지입니다. 현재는 확장 예정 영역이며 배치 요약 데이터 기반으로 연결됩니다.
            </p>
          </div>
          <div className="ggti-card rounded-[1.75rem] p-6">
            <div className="space-y-4">
              <SeasonPlaceholder title="성향 변화 타임라인" body="패치와 시즌 구간별 GGTI 지표 변화를 시각화합니다." />
              <SeasonPlaceholder title="주력 챔피언 히트맵" body="챔피언별 사용 빈도와 승패 흐름을 함께 표시합니다." />
              <SeasonPlaceholder title="듀오 시너지 기록" body="자주 함께한 플레이어와의 궁합 변화를 추적합니다." />
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

function SeasonPlaceholder({ title, body }: { title: string; body: string }) {
  return (
    <div className="rounded-2xl border border-white/8 bg-black/18 p-4">
      <p className="text-lg font-black text-white">{title}</p>
      <p className="mt-2 text-sm leading-6 text-[#9fb0c7]">{body}</p>
    </div>
  );
}