import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { Link } from 'react-router-dom';
import { Calendar, Users, Disc3, ArrowRight } from 'lucide-react';
import { schedules, albums } from '../../data/dummy';

function Home() {
    const [members, setMembers] = useState([]);

    useEffect(() => {
        fetch('/api/members')
            .then(res => res.json())
            .then(data => setMembers(data))
            .catch(error => console.error('멤버 데이터 로드 오류:', error));
    }, []);

    return (
        <div>
            {/* 히어로 섹션 */}
            <section className="relative h-[600px] bg-gradient-to-br from-primary to-primary-dark overflow-hidden">
                <div className="absolute inset-0 bg-black/20" />
                <div className="relative max-w-7xl mx-auto px-6 h-full flex items-center">
                    <motion.div
                        initial={{ opacity: 0, y: 30 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.8 }}
                        className="text-white"
                    >
                        <h1 className="text-6xl font-bold mb-4">fromis_9</h1>
                        <p className="text-2xl font-light mb-2">프로미스나인</p>
                        <p className="text-lg opacity-80 mb-8 leading-relaxed">
                            인사드리겠습니다. 둘, 셋!<br />
                            이제는 약속해 소중히 간직해,<br />
                            당신의 아이돌로 성장하겠습니다!
                        </p>
                        <Link
                            to="/members"
                            className="inline-flex items-center gap-2 bg-white text-primary px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition-colors"
                        >
                            멤버 보기
                            <ArrowRight size={18} />
                        </Link>
                    </motion.div>
                </div>

                {/* 장식 */}
                <div className="absolute right-0 bottom-0 w-1/2 h-full opacity-10">
                    <div className="absolute right-10 top-20 w-64 h-64 rounded-full bg-white/30" />
                    <div className="absolute right-40 bottom-20 w-48 h-48 rounded-full bg-white/20" />
                </div>
            </section>

            {/* 퀵 링크 섹션 */}
            <section className="py-16 bg-white">
                <div className="max-w-7xl mx-auto px-6">
                    <div className="grid grid-cols-3 gap-8">
                        <Link
                            to="/members"
                            className="group p-8 bg-gray-50 rounded-2xl hover:bg-primary hover:text-white transition-all duration-300"
                        >
                            <Users size={40} className="mb-4 text-primary group-hover:text-white" />
                            <h3 className="text-xl font-bold mb-2">멤버</h3>
                            <p className="text-gray-500 group-hover:text-white/80">5명의 멤버를 만나보세요</p>
                        </Link>
                        <Link
                            to="/album"
                            className="group p-8 bg-gray-50 rounded-2xl hover:bg-primary hover:text-white transition-all duration-300"
                        >
                            <Disc3 size={40} className="mb-4 text-primary group-hover:text-white" />
                            <h3 className="text-xl font-bold mb-2">앨범</h3>
                            <p className="text-gray-500 group-hover:text-white/80">앨범과 음악을 확인하세요</p>
                        </Link>
                        <Link
                            to="/schedule"
                            className="group p-8 bg-gray-50 rounded-2xl hover:bg-primary hover:text-white transition-all duration-300"
                        >
                            <Calendar size={40} className="mb-4 text-primary group-hover:text-white" />
                            <h3 className="text-xl font-bold mb-2">스케줄</h3>
                            <p className="text-gray-500 group-hover:text-white/80">다가오는 일정을 확인하세요</p>
                        </Link>
                    </div>
                </div>
            </section>

            {/* 멤버 미리보기 */}
            <section className="py-16 bg-gray-50">
                <div className="max-w-7xl mx-auto px-6">
                    <div className="flex justify-between items-center mb-8">
                        <h2 className="text-3xl font-bold">멤버</h2>
                        <Link to="/members" className="text-primary hover:underline flex items-center gap-1">
                            전체보기 <ArrowRight size={16} />
                        </Link>
                    </div>
                    <div className="grid grid-cols-5 gap-6">
                        {members.map((member, index) => (
                            <motion.div
                                key={member.id}
                                initial={{ opacity: 0, y: 20 }}
                                animate={{ opacity: 1, y: 0 }}
                                transition={{ delay: index * 0.1 }}
                                className="bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-lg transition-shadow"
                            >
                                <div className="aspect-square bg-gray-100">
                                    <img
                                        src={member.image_url}
                                        alt={member.name}
                                        className="w-full h-full object-cover"
                                    />
                                </div>
                                <div className="p-4 text-center">
                                    <h3 className="font-bold text-lg">{member.name}</h3>
                                    <p className="text-sm text-gray-500">{member.position?.split(',')[0]}</p>
                                </div>
                            </motion.div>
                        ))}
                    </div>
                </div>
            </section>

            {/* 스케줄 미리보기 */}
            <section className="py-16 bg-white">
                <div className="max-w-7xl mx-auto px-6">
                    <div className="flex justify-between items-center mb-8">
                        <h2 className="text-3xl font-bold">다가오는 스케줄</h2>
                        <Link to="/schedule" className="text-primary hover:underline flex items-center gap-1">
                            전체보기 <ArrowRight size={16} />
                        </Link>
                    </div>
                    <div className="space-y-4">
                        {schedules.slice(0, 3).map((schedule) => (
                            <div
                                key={schedule.id}
                                className="flex items-center gap-6 p-6 bg-gray-50 rounded-xl hover:bg-gray-100 transition-colors"
                            >
                                <div className="text-center min-w-[80px]">
                                    <p className="text-2xl font-bold text-primary">
                                        {schedule.date.split('-')[2]}
                                    </p>
                                    <p className="text-sm text-gray-500">
                                        {schedule.date.split('-')[1]}월
                                    </p>
                                </div>
                                <div className="flex-1">
                                    <h3 className="font-bold text-lg">{schedule.title}</h3>
                                    <p className="text-gray-500">{schedule.platform} · {schedule.time}</p>
                                </div>
                                <div className="text-sm text-primary font-medium">
                                    {schedule.members.join(', ')}
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>
        </div>
    );
}

export default Home;