import StartControls from "./StartControls";

export default function Home() {
  return (
    <main className="flex min-h-screen items-center bg-slate-50 px-6 py-12 text-slate-950">
      <section className="mx-auto flex w-full max-w-3xl flex-col gap-8">
        <div className="space-y-4">
          <p className="text-sm font-semibold text-emerald-700">
            중학교 2학년 수학 - 괄호 풀기 연습
          </p>
          <h1 className="text-4xl font-bold tracking-normal sm:text-5xl">
            괄호 음수 분배 연습
          </h1>
          <p className="max-w-2xl text-lg leading-8 text-slate-700">
            괄호 앞의 음수를 분배할 때 부호가 어떻게 바뀌는지 차근차근
            연습합니다.
          </p>
        </div>

        <StartControls />

        <div className="border-l-4 border-emerald-700 pl-4 text-sm leading-6 text-slate-600">
          <p>반복할 문제 수를 선택한 뒤, [연습 시작] 버튼을 클릭하세요.</p>
        </div>
      </section>
    </main>
  );
}