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

export default function TojeongPage() {
  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 mb-12">
          <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>
          </h1>

          <p className="text-xl text-[#5d6d7e] mb-12 max-w-2xl mx-auto leading-relaxed">
            조선시대 토정 이지함 선생이 창안한 역술서로,
            한 해 동안의 운세를 월별로 확인할 수 있습니다.
          </p>
        </div>

        {/* Input Form */}
        <div className="max-w-2xl mx-auto">
          <TojeongForm />
        </div>
      </section>

      {/* 토정비결 소개 */}
      <section className="py-20 px-4 bg-white">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-[#173658] mb-4">토정비결이란?</h2>
            <p className="text-xl text-[#5d6d7e]">조선시대부터 전해 내려오는 전통 운세</p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            <div className="text-center p-6 glass-panel-light rounded-2xl card-hover">
              <div className="text-5xl mb-4">📅</div>
              <h3 className="text-xl font-bold text-[#173658] mb-3">한 해 운세</h3>
              <p className="text-[#5d6d7e]">
                새해부터 연말까지 전체적인 운의 흐름을 미리 파악할 수 있습니다.
              </p>
            </div>

            <div className="text-center p-6 glass-panel-light rounded-2xl card-hover">
              <div className="text-5xl mb-4">📆</div>
              <h3 className="text-xl font-bold text-[#173658] mb-3">월별 운세</h3>
              <p className="text-[#5d6d7e]">
                12개월 각각의 운세를 확인하여 중요한 결정을 내리는 데 참고하세요.
              </p>
            </div>

            <div className="text-center p-6 glass-panel-light rounded-2xl card-hover">
              <div className="text-5xl mb-4">🎯</div>
              <h3 className="text-xl font-bold text-[#173658] mb-3">분야별 운세</h3>
              <p className="text-[#5d6d7e]">
                재물, 건강, 관운 등 분야별로 세분화된 운세 정보를 제공합니다.
              </p>
            </div>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}