saju-web/app/page.tsx

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

export default function Home() {
  return (
    <div className="min-h-screen bg-white">
      <Header />

      {/* Hero Section */}
      <section className="cosmic-pattern pt-32 pb-24 md:pt-40 md:pb-32">
        <div className="container-custom">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            {/* 왼쪽 텍스트 */}
            <div className="text-white space-y-8 fade-in-up">
              <div className="inline-block px-4 py-2 bg-[#F3E7E3] rounded-full">
                <span className="text-[#173658] text-sm font-bold">AI 명리학 전문 상담</span>
              </div>

              <h1 className="text-4xl md:text-6xl font-bold leading-tight">
                AI가 만난<br />
                <span className="text-glow text-[#d4af37]">고대의 지혜</span>
              </h1>

              <p className="text-xl md:text-2xl text-gray-200 leading-relaxed">
                전통 역학과 AI 기술의 만남<br />
                당신만을 위한 깊이 있는 사주 해석
              </p>

              <div className="flex flex-wrap gap-4 pt-4">
                <Link
                  href="/saju"
                  className="bg-[#F3E7E3] hover:bg-[#d4af37] text-[#173658] px-8 py-4 rounded-xl text-lg font-bold transition-all shadow-lg hover:shadow-xl hover:scale-105"
                >
                  운명 감정 시작하기
                </Link>
                <Link
                  href="/compatibility"
                  className="bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white px-8 py-4 rounded-xl text-lg font-bold transition-all border border-white/20"
                >
                  궁합 보기
                </Link>
              </div>

              {/* 신뢰 배지 */}
              <div className="flex flex-wrap gap-6 pt-8">
                <div className="flex items-center space-x-2">
                  <svg className="w-6 h-6 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                  </svg>
                  <span className="text-white font-medium">98% 정확도</span>
                </div>
                <div className="flex items-center space-x-2">
                  <svg className="w-6 h-6 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" />
                  </svg>
                  <span className="text-white font-medium">안전한 보안</span>
                </div>
                <div className="flex items-center space-x-2">
                  <svg className="w-6 h-6 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
                  </svg>
                  <span className="text-white font-medium">5,000+ 이용자</span>
                </div>
              </div>
            </div>

            {/* 오른쪽 장식 카드 */}
            <div className="hidden lg:block">
              <div className="relative">
                <div className="glass-panel rounded-3xl p-8 float-animation">
                  <div className="space-y-6">
                    <div className="flex items-center space-x-3">
                      <div className="w-12 h-12 bg-[#d4af37] rounded-full flex items-center justify-center">
                        <span className="text-white text-xl font-bold">木</span>
                      </div>
                      <div>
                        <p className="text-white font-bold">오행 균형 분석</p>
                        <p className="text-gray-300 text-sm">정밀한 사주 계산</p>
                      </div>
                    </div>
                    <div className="flex items-center space-x-3">
                      <div className="w-12 h-12 bg-[#1e426a] rounded-full flex items-center justify-center">
                        <span className="text-white text-xl font-bold">AI</span>
                      </div>
                      <div>
                        <p className="text-white font-bold">AI 심층 해석</p>
                        <p className="text-gray-300 text-sm">개인 맞춤 분석</p>
                      </div>
                    </div>
                    <div className="flex items-center space-x-3">
                      <div className="w-12 h-12 bg-[#F3E7E3] rounded-full flex items-center justify-center">
                        <span className="text-[#173658] text-xl font-bold">⚡</span>
                      </div>
                      <div>
                        <p className="text-white font-bold">즉시 결과</p>
                        <p className="text-gray-300 text-sm">실시간 분석 제공</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 서비스 카드 섹션 */}
      <section className="bg-[#F3E7E3] py-20">
        <div className="container-custom">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-[#173658] mb-4">
              프리미엄 사주 서비스
            </h2>
            <p className="text-lg text-[#5d6d7e]">
              당신이 원하는 모든 운세를 한 곳에서
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {/* 사주 분석 카드 */}
            <Link href="/saju" className="glass-panel-light rounded-2xl p-8 card-hover">
              <div className="text-center">
                <div className="w-16 h-16 bg-[#122a45] rounded-2xl flex items-center justify-center mx-auto mb-6">
                  <svg className="w-8 h-8 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>
                <h3 className="text-2xl font-bold text-[#173658] mb-3">사주 분석</h3>
                <p className="text-[#5d6d7e] mb-6 leading-relaxed">
                  천간과 지지의 조화로 타고난 성격, 재능, 인생의 흐름을 심층 분석합니다
                </p>
                <div className="space-y-2 mb-6 text-sm">
                  <div className="flex items-center justify-center space-x-2">
                    <svg className="w-4 h-4 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                    <span className="text-[#173658]">기본 사주 분석 무료</span>
                  </div>
                  <div className="flex items-center justify-center space-x-2">
                    <svg className="w-4 h-4 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                    <span className="text-[#173658]">AI 해석 10토큰</span>
                  </div>
                </div>
                <div className="inline-flex items-center text-[#173658] font-bold">
                  <span>시작하기</span>
                  <svg className="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
                  </svg>
                </div>
                <div className="absolute top-4 right-4 px-3 py-1 bg-[#d4af37] text-white text-xs font-bold rounded-full">
                  인기
                </div>
              </div>
            </Link>

            {/* 궁합 카드 */}
            <Link href="/compatibility" className="glass-panel-light rounded-2xl p-8 card-hover">
              <div className="text-center">
                <div className="w-16 h-16 bg-[#122a45] rounded-2xl flex items-center justify-center mx-auto mb-6">
                  <svg className="w-8 h-8 text-[#d4af37]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                  </svg>
                </div>
                <h3 className="text-2xl font-bold text-[#173658] mb-3">궁합 분석</h3>
                <p className="text-[#5d6d7e] mb-6 leading-relaxed">
                  두 사람의 오행 관계와 지지 합충을 분석하여 관계의 조화를 확인합니다
                </p>
                <div className="space-y-2 mb-6 text-sm">
                  <div className="flex items-center justify-center space-x-2">
                    <svg className="w-4 h-4 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                    <span className="text-[#173658]">종합 궁합 점수</span>
                  </div>
                  <div className="flex items-center justify-center space-x-2">
                    <svg className="w-4 h-4 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                    <span className="text-[#173658]">15토큰</span>
                  </div>
                </div>
                <div className="inline-flex items-center text-[#173658] font-bold">
                  <span>궁합 확인하기</span>
                  <svg className="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
                  </svg>
                </div>
              </div>
            </Link>

            {/* 토정비결 카드 */}
            <Link href="/tojeong" className="glass-panel-light rounded-2xl p-8 card-hover">
              <div className="text-center">
                <div className="w-16 h-16 bg-[#122a45] rounded-2xl flex items-center justify-center mx-auto mb-6">
                  <svg className="w-8 h-8 text-[#d4af37]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                  </svg>
                </div>
                <h3 className="text-2xl font-bold text-[#173658] mb-3">토정비결</h3>
                <p className="text-[#5d6d7e] mb-6 leading-relaxed">
                  올 한 해의 월별 운세와 카테고리별 운세를 미리 확인하고 준비하세요
                </p>
                <div className="space-y-2 mb-6 text-sm">
                  <div className="flex items-center justify-center space-x-2">
                    <svg className="w-4 h-4 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                    <span className="text-[#173658]">월별 운세 12개월</span>
                  </div>
                  <div className="flex items-center justify-center space-x-2">
                    <svg className="w-4 h-4 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                    <span className="text-[#173658]">5토큰</span>
                  </div>
                </div>
                <div className="inline-flex items-center text-[#173658] font-bold">
                  <span>올해 운세 보기</span>
                  <svg className="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
                  </svg>
                </div>
              </div>
            </Link>
          </div>
        </div>
      </section>

      {/* 특징 배너 */}
      <section className="bg-white py-20">
        <div className="container-custom">
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
            <div className="text-center">
              <div className="w-16 h-16 bg-[#F3E7E3] rounded-2xl flex items-center justify-center mx-auto mb-4">
                <svg className="w-8 h-8 text-[#173658]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                </svg>
              </div>
              <h3 className="text-lg font-bold text-[#173658] mb-2">전통 역학</h3>
              <p className="text-sm text-[#5d6d7e]">수천 년 역사의<br />정통 사주명리학</p>
            </div>

            <div className="text-center">
              <div className="w-16 h-16 bg-[#F3E7E3] rounded-2xl flex items-center justify-center mx-auto mb-4">
                <svg className="w-8 h-8 text-[#173658]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                </svg>
              </div>
              <h3 className="text-lg font-bold text-[#173658] mb-2">AI 엔진</h3>
              <p className="text-sm text-[#5d6d7e]">최첨단 AI가<br />심층 해석</p>
            </div>

            <div className="text-center">
              <div className="w-16 h-16 bg-[#F3E7E3] rounded-2xl flex items-center justify-center mx-auto mb-4">
                <svg className="w-8 h-8 text-[#173658]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
              </div>
              <h3 className="text-lg font-bold text-[#173658] mb-2">즉시 결과</h3>
              <p className="text-sm text-[#5d6d7e]">입력 즉시<br />실시간 분석</p>
            </div>

            <div className="text-center">
              <div className="w-16 h-16 bg-[#F3E7E3] rounded-2xl flex items-center justify-center mx-auto mb-4">
                <svg className="w-8 h-8 text-[#173658]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
                </svg>
              </div>
              <h3 className="text-lg font-bold text-[#173658] mb-2">쉬운 해석</h3>
              <p className="text-sm text-[#5d6d7e]">누구나 이해하기<br />쉬운 설명</p>
            </div>
          </div>
        </div>
      </section>

      {/* CTA 섹션 */}
      <section className="bg-[#173658] py-24 pattern-overlay">
        <div className="container-custom">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div className="text-white space-y-6">
              <h2 className="text-4xl md:text-5xl font-bold leading-tight">
                우주의 비밀을<br />
                <span className="text-[#d4af37]">풀어보세요</span>
              </h2>
              <p className="text-xl text-gray-200 leading-relaxed">
                당신의 생년월일에 숨겨진 운명의 코드.<br />
                지금 바로 확인해보세요.
              </p>
              <div className="flex flex-wrap gap-4 pt-4">
                <Link
                  href="/saju"
                  className="bg-[#d4af37] hover:bg-[#F3E7E3] text-[#173658] px-8 py-4 rounded-xl text-lg font-bold transition-all shadow-lg hover:shadow-xl inline-flex items-center space-x-2"
                >
                  <span>무료로 시작하기</span>
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
                  </svg>
                </Link>
              </div>

              {/* 통계 */}
              <div className="grid grid-cols-3 gap-6 pt-8">
                <div>
                  <div className="text-3xl font-bold text-[#d4af37]">5,000+</div>
                  <div className="text-sm text-gray-300 mt-1">누적 분석</div>
                </div>
                <div>
                  <div className="text-3xl font-bold text-[#d4af37]">98%</div>
                  <div className="text-sm text-gray-300 mt-1">정확도</div>
                </div>
                <div>
                  <div className="text-3xl font-bold text-[#d4af37]">4.8</div>
                  <div className="text-sm text-gray-300 mt-1">만족도</div>
                </div>
              </div>
            </div>

            {/* 오른쪽 이미지 카드 */}
            <div className="hidden lg:block">
              <div className="glass-panel rounded-3xl p-8 space-y-4">
                <div className="bg-[#F3E7E3] rounded-2xl p-6">
                  <h4 className="text-[#173658] font-bold text-lg mb-2">오늘의 인사이트</h4>
                  <p className="text-[#5d6d7e] text-sm leading-relaxed">
                    "목(木) 기운이 강한 당신, 오늘은 새로운 시작을 위한 최적의 날입니다."
                  </p>
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div className="bg-white/10 rounded-xl p-4 text-center">
                    <div className="text-2xl mb-2">🌟</div>
                    <div className="text-white text-sm font-bold">종합운</div>
                    <div className="text-[#d4af37] text-xs">85점</div>
                  </div>
                  <div className="bg-white/10 rounded-xl p-4 text-center">
                    <div className="text-2xl mb-2">💰</div>
                    <div className="text-white text-sm font-bold">재물운</div>
                    <div className="text-[#d4af37] text-xs">92점</div>
                  </div>
                  <div className="bg-white/10 rounded-xl p-4 text-center">
                    <div className="text-2xl mb-2">❤️</div>
                    <div className="text-white text-sm font-bold">애정운</div>
                    <div className="text-[#d4af37] text-xs">78점</div>
                  </div>
                  <div className="bg-white/10 rounded-xl p-4 text-center">
                    <div className="text-2xl mb-2">💼</div>
                    <div className="text-white text-sm font-bold">직업운</div>
                    <div className="text-[#d4af37] text-xs">88점</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}