import Link from 'next/link'

export default function Home(){
  return (
    <div className="bg-white">
      {/* Hero */}
      <div className="max-w-6xl mx-auto px-4 py-20">
        <div className="text-center">
          <span className="inline-block px-3 py-1 rounded-full bg-slate-900 text-white text-xs font-bold">LV10 관리자 / LV2 회원 / LV1 비회원</span>
          <h1 className="mt-6 text-5xl font-black text-slate-900 tracking-tight leading-tight">
            댓글 하나가<br/>매출이 됩니다
          </h1>
          <p className="mt-4 text-lg font-medium text-slate-900">
            Facebook, Instagram 자동댓글로 24시간 응대하세요.
            <br/>그누보드처럼 LV로 권한 관리.
          </p>

          {/* 여기가 진입점! */}
          <div className="mt-8 flex gap-3 justify-center">
            <Link href="/login" className="px-8 py-4 rounded-full bg-white border-2 border-slate-900 text-slate-900 font-black text-base hover:bg-slate-50">
              로그인
            </Link>
            <Link href="/signup" className="px-8 py-4 rounded-full bg-slate-900 text-white font-black text-base hover:bg-black">
              무료로 시작하기
            </Link>
          </div>

          <div className="mt-4 text-sm font-bold text-slate-900">
            이미 계정이 있나요? <Link href="/login" className="underline decoration-2">로그인</Link>
          </div>
        </div>

        {/* 3단계 */}
        <div className="mt-20 grid md:grid-cols-3 gap-4">
          <div className="border-2 border-slate-900 rounded-2xl p-6 bg-white">
            <div className="text-2xl font-black text-slate-900">1</div>
            <div className="mt-2 font-black text-slate-900">Gmail로 3초 가입</div>
            <div className="mt-1 text-sm font-medium text-slate-900">LV1 비회원으로 시작</div>
          </div>
          <div className="border-2 border-slate-900 rounded-2xl p-6 bg-white">
            <div className="text-2xl font-black text-slate-900">2</div>
            <div className="mt-2 font-black text-slate-900">Facebook / Instagram 연결</div>
            <div className="mt-1 text-sm font-medium text-slate-900">LV2 회원으로 승급, 무제한</div>
          </div>
          <div className="border-2 border-slate-900 rounded-2xl p-6 bg-slate-900">
            <div className="text-2xl font-black text-white">3</div>
            <div className="mt-2 font-black text-white">자동댓글 설정</div>
            <div className="mt-1 text-sm font-medium text-white">댓글 달리면 자동 응답</div>
          </div>
        </div>
      </div>
    </div>
  )
}
