'use client';

import Link from 'next/link';

export default function RegisterCompletePage() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-white">
      <div className="w-full max-w-2xl px-4">
        {/* 회원가입 완료 카드 */}
        <div className="bg-white rounded-lg shadow-lg p-8">
          {/* 제목 */}
          <h1 className="text-2xl font-bold text-center mb-8">회원가입</h1>

          {/* 단계 표시 */}
          <div className="flex items-center justify-center mb-8 text-sm">
            <div className="flex items-center">
              <span className="px-3 py-1 text-gray-500">01 약관 동의</span>
              <span className="mx-2 text-gray-400">&gt;</span>
              <span className="px-3 py-1 text-gray-500">02 회원정보입력</span>
              <span className="mx-2 text-gray-400">&gt;</span>
              <span className="px-3 py-1 bg-blue-500 text-white rounded-md font-semibold">
                03 회원가입완료
              </span>
            </div>
          </div>

          {/* 완료 메시지 */}
          <div className="text-center py-12">
            {/* 체크 아이콘 */}
            <div className="mb-6 flex justify-center">
              <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center">
                <svg
                  className="w-12 h-12 text-green-500"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M5 13l4 4L19 7"
                  />
                </svg>
              </div>
            </div>

            {/* 완료 메시지 */}
            <h2 className="text-2xl font-bold mb-4 text-gray-800">
              회원가입이 완료되었습니다!
            </h2>
            <p className="text-gray-600 mb-8">
              XL LMS에 오신 것을 환영합니다.
              <br />
              이제 다양한 강의를 수강하실 수 있습니다.
            </p>

            {/* 버튼 영역 */}
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Link
                href="/login"
                className="px-8 py-3 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition font-medium text-center"
              >
                로그인하기
              </Link>
              <Link
                href="/"
                className="px-8 py-3 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition font-medium text-center"
              >
                홈으로 가기
              </Link>
            </div>
          </div>
        </div>

        {/* 카피라이트 */}
        <div className="mt-8 text-center text-sm text-gray-500">
          Copyright © 2025 XL LMS. All rights reserved
        </div>
      </div>
    </div>
  );
}