import { MATCH } from "@/lib/mockData";

export default function Hero() {
  return (
    <header className="pt-7 text-center">
      <div className="font-impact text-[44px] leading-none tracking-tight">
        TRIPLE PICK <span className="text-[var(--green)]">2026</span>
      </div>
      <div className="mt-2 text-[16px] font-extrabold text-[var(--green)]">
        AI Prediction Arena
      </div>
      <div className="mt-2 inline-block rounded-full border border-white/12 bg-white/8 px-3 py-1 text-[13px] font-semibold text-white/85">
        AI와 함께하는 월드컵 승부 예측 대결 챌린지
      </div>

      <h1 className="mt-6 flex items-center justify-center gap-2 whitespace-nowrap text-[19px] font-extrabold leading-snug">
        <span className="text-[var(--green)]">⫽</span>
        {MATCH.hookText}
        <span className="text-[var(--green)]">⫽</span>
      </h1>
      <div className="mt-1.5 text-[13px] font-semibold text-[var(--green)]">
        Korea Republic vs Czechia · Matchday Prediction
      </div>
    </header>
  );
}