import React from 'react';
import { Utensils, MapPin, Gift } from 'lucide-react';

export default function Home() {
  return (
    <div className="min-h-screen flex flex-col bg-[#F9F7F2] text-gray-800 font-sans overflow-hidden">
      
      {/* 1. Header 영역 */}
      <header className="relative flex items-center justify-center py-6 px-4">
        <h1 className="text-3xl font-extrabold tracking-tight">뭐먹지뭐하지</h1>
        {/* 우측 상단 퍼스널 브랜딩 */}
        <span className="absolute right-4 top-8 text-sm font-semibold text-gray-500">
          by LeeOn
        </span>
      </header>

      {/* 2. Body 영역 (3단 카드) */}
      <main className="flex-1 w-full max-w-5xl mx-auto px-4 py-8 flex flex-col md:flex-row items-center justify-center gap-6">
        
        {/* 레드 카드: 오늘 뭐 먹지? */}
        <button className="group w-full md:w-1/3 h-40 md:h-96 bg-[#E74C3C] rounded-3xl flex flex-col items-center justify-center text-white shadow-lg transition-transform duration-300 hover:scale-105 active:scale-95">
          <Utensils size={48} className="mb-4 transition-transform group-hover:-translate-y-2" />
          <h2 className="text-2xl font-bold">오늘 뭐 먹지?</h2>
        </button>

        {/* 옐로 카드: 오늘 뭐 하지? */}
        <button className="group w-full md:w-1/3 h-40 md:h-96 bg-[#F1C40F] rounded-3xl flex flex-col items-center justify-center text-white shadow-lg transition-transform duration-300 hover:scale-105 active:scale-95">
          <MapPin size={48} className="mb-4 transition-transform group-hover:-translate-y-2" />
          <h2 className="text-2xl font-bold">오늘 뭐 하지?</h2>
        </button>

        {/* 그린 카드: 선물 뭐 주지? */}
        <button className="group w-full md:w-1/3 h-40 md:h-96 bg-[#2ECC71] rounded-3xl flex flex-col items-center justify-center text-white shadow-lg transition-transform duration-300 hover:scale-105 active:scale-95">
          <Gift size={48} className="mb-4 transition-transform group-hover:-translate-y-2" />
          <h2 className="text-2xl font-bold">선물 뭐 주지?</h2>
        </button>

      </main>

      {/* 3. Footer 영역 */}
      <footer className="w-full bg-white/60 backdrop-blur-sm border-t border-gray-200">
        
        {/* 실시간 인기 순위 Ticker (Marquee 애니메이션 효과) */}
        <div className="w-full overflow-hidden whitespace-nowrap py-3 border-b border-gray-200 text-sm font-medium text-gray-600 flex">
          <div className="animate-[marquee_20s_linear_infinite] inline-block">
            🔥 현재 실시간 인기 우승: 1위 돈까스 🏆 | 2위 한강공원 산책 🏆 | 3위 논픽션 핸드크림 🏆 | 4위 마라탕 🏆 | 5위 도자기 공방 🏆
          </div>
        </div>

        {/* 이용약관 및 하단 구글 광고 영역 (Placeholder) */}
        <div className="flex flex-col items-center justify-center py-6 px-4 gap-4">
          <div className="flex gap-4 text-xs text-gray-500">
            <a href="#" className="hover:underline">이용약관</a>
            <a href="#" className="hover:underline">개인정보처리방침</a>
            <a href="#" className="hover:underline">광고 문의</a>
          </div>
          
          {/* 구글 애드센스 하단 앵커 광고 들어갈 자리 */}
          <div className="w-full max-w-3xl h-16 bg-gray-200 rounded-lg flex items-center justify-center text-gray-400 text-sm border border-dashed border-gray-400">
            구글 애드센스 광고 영역 (728x90)
          </div>
        </div>
      </footer>

      {/* Ticker 애니메이션을 위한 커스텀 스타일 */}
      <style dangerouslySetInnerHTML={{__html: `
        @keyframes marquee {
          0% { transform: translateX(100vw); }
          100% { transform: translateX(-100%); }
        }
      `}} />
    </div>
  );
}