// src/App.tsx
import React, { useState } from 'react';

// [부트캠프 3주차] React 기반의 UI 구성 [cite: 10, 39]
// 5070 타겟: text-xl 이상, 큰 버튼, 명확한 한국어 사용 [cite: 23, 25, 26, 39]

function App() {
  const [birthDate, setBirthDate] = useState('');
  const [email, setEmail] = useState('');

  return (
    <div className="min-h-screen bg-slate-50 flex flex-col items-center py-12 px-4">
      {/* 헤더: 신뢰감을 주는 디자인 [cite: 24, 39] */}
      <header className="text-center mb-12">
        <h1 className="text-4xl md:text-5xl font-extrabold text-red-700 mb-4">
          ✨ 미라클운세
        </h1>
        <p className="text-2xl md:text-3xl font-bold text-gray-800 break-keep">
          당신의 사주에 숨겨진 <br/> 
          <span className="text-amber-500 underline decoration-amber-500">이번 주 로또 번호 무료 받기</span>
        </p>
      </header>

      {/* 입력 폼: 인지 부하 최소화 [cite: 23, 83] */}
      <main className="w-full max-w-lg bg-white p-8 rounded-3xl shadow-xl border-4 border-amber-400">
        <div className="space-y-8">
          <div>
            <label className="block text-xl font-bold text-gray-700 mb-3">
              태어난 날짜 (8자리)
            </label>
            <input
              type="number"
              placeholder="예: 19700101"
              className="w-full p-5 text-2xl border-2 border-gray-300 rounded-xl focus:border-amber-500 outline-none transition-all"
              value={birthDate}
              onChange={(e) => setBirthDate(e.target.value)}
            />
          </div>

          <div>
            <label className="block text-xl font-bold text-gray-700 mb-3">
              결과 받을 이메일 주소
            </label>
            <input
              type="email"
              placeholder="example@email.com"
              className="w-full p-5 text-2xl border-2 border-gray-300 rounded-xl focus:border-amber-500 outline-none transition-all"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
          </div>

          {/* 메인 버튼: 크고 클릭하기 쉽게 설계 [cite: 26, 39, 83] */}
          <button
            className="w-full py-6 text-2xl font-black text-white bg-gradient-to-r from-red-600 to-amber-500 rounded-2xl shadow-lg active:scale-95 transition-transform"
            onClick={() => alert('2단계에서 DB 연동이 진행될 예정입니다.')}
          >
            무료로 행운 번호 받기
          </button>
        </div>
      </main>

      <footer className="mt-12 text-gray-500 text-lg">
        © 2026 미라클운세 | 모든 운세는 AI 분석 결과입니다.
      </footer>
    </div>
  );
}

export default App;