import Link from 'next/link';
import SajuForm from '../components/SajuForm';
import Header from '@/components/Header';
import Footer from '@/components/Footer';

export default function SajuPage() {
  return (
    <div className="min-h-screen bg-[#F3E7E3]">
      <Header />

      {/* Hero Section */}
      <section className="pt-32 pb-20 px-4">
        <div className="max-w-4xl mx-auto text-center">
          <div className="inline-block mb-6 px-6 py-2 bg-white rounded-full text-[#173658] font-bold border-2 border-[#173658]">
            무료로 내 사주를 확인해보세요
          </div>

          <h1 className="text-4xl md:text-6xl font-bold text-[#173658] mb-6 leading-tight">
            나의 <span className="gradient-text">사주팔자</span>를<br />
            확인하세요
          </h1>

          <p className="text-xl text-[#5d6d7e] mb-12 max-w-2xl mx-auto leading-relaxed">
            생년월일시를 입력하면 무료로 사주팔자, 운세, 궁합을 확인할 수 있습니다.
            쉽고 빠르게 나의 운명을 알아보세요.
          </p>

          {/* Main Input Card */}
          <div className="glass-panel-light rounded-3xl p-8 md:p-12 max-w-2xl mx-auto shadow-2xl">
            <div className="flex items-center justify-center space-x-3 mb-8">
              <div className="w-12 h-12 bg-[#173658] rounded-full flex items-center justify-center">
                <svg className="w-6 h-6 text-[#d4af37]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
              </div>
              <h2 className="text-2xl font-bold text-[#173658]">생년월일시 입력</h2>
            </div>

            <SajuForm />
          </div>

          {/* 안내 카드 */}
          <div className="grid md:grid-cols-3 gap-6 mt-12 max-w-3xl mx-auto">
            <div className="bg-white rounded-xl p-6 text-center">
              <div className="text-3xl mb-3">✨</div>
              <h3 className="text-[#173658] font-bold mb-2">정확한 분석</h3>
              <p className="text-sm text-[#5d6d7e]">전통 명리학에 기반한<br />정밀한 사주 계산</p>
            </div>
            <div className="bg-white rounded-xl p-6 text-center">
              <div className="text-3xl mb-3">🎯</div>
              <h3 className="text-[#173658] font-bold mb-2">무료 제공</h3>
              <p className="text-sm text-[#5d6d7e]">기본 사주팔자는<br />무료로 확인 가능</p>
            </div>
            <div className="bg-white rounded-xl p-6 text-center">
              <div className="text-3xl mb-3">🔐</div>
              <h3 className="text-[#173658] font-bold mb-2">개인정보 보호</h3>
              <p className="text-sm text-[#5d6d7e]">안전하게 보호되는<br />개인정보</p>
            </div>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}