"use client";

import { motion } from "framer-motion";
import { 
  Sparkles, 
  Zap, 
  Brain, 
  MessageSquare, 
  Bot, 
  ArrowRight,
  CheckCircle2,
  Shield,
  Clock,
  Users,
  Rocket
} from "lucide-react";

export default function Home() {
  const features = [
    {
      icon: Brain,
      title: "AI 기반 지능형 대화",
      description: "최첨단 AI가 대화를 이해하고 맥락에 맞는 응답을 제공합니다.",
      color: "from-cyan-400 to-fuchsia-500"
    },
    {
      icon: Zap,
      title: "스마트 자동화",
      description: "반복적인 작업을 자동화하고 효율성을 극대화하세요.",
      color: "from-emerald-400 to-cyan-500"
    },
    {
      icon: Shield,
      title: "엔터프라이즈급 보안",
      description: "최고 수준의 암호화로 모든 대화를 안전하게 보호합니다.",
      color: "from-fuchsia-400 to-pink-500"
    },
    {
      icon: Clock,
      title: "실시간 동기화",
      description: "모든 기기에서 즉시 동기화되는 실시간 메시징 경험.",
      color: "from-cyan-500 to-blue-600"
    },
    {
      icon: Users,
      title: "스마트 협업",
      description: "AI가 팀 협업을 돕고 프로젝트 관리를 자동화합니다.",
      color: "from-emerald-500 to-teal-500"
    },
    {
      icon: Rocket,
      title: "무한 확장성",
      description: "개인 사용자부터 대기업까지 모든 규모에 대응합니다.",
      color: "from-cyan-500 via-fuchsia-500 to-emerald-500"
    }
  ];

  const animations = {
    fadeInUp: {
      initial: { opacity: 0, y: 30 },
      animate: { opacity: 1, y: 0 },
      transition: { duration: 0.6 }
    },
    stagger: {
      initial: { opacity: 0, y: 20 },
      animate: { opacity: 1, y: 0 },
      transition: { duration: 0.5 }
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-cyan-950 to-slate-950 relative overflow-hidden">
      {/* 펑키한 배경 패턴 */}
      <div className="absolute inset-0 opacity-20">
        <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_20%_50%,rgba(6,182,212,0.3),transparent_50%)]"></div>
        <div className="absolute top-0 right-0 w-full h-full bg-[radial-gradient(circle_at_80%_50%,rgba(244,114,182,0.3),transparent_50%)]"></div>
        <div className="absolute bottom-0 left-1/2 w-full h-full bg-[radial-gradient(circle_at_50%_100%,rgba(16,185,129,0.3),transparent_50%)]"></div>
      </div>
      {/* Navigation */}
      <nav className="fixed top-0 w-full z-50 backdrop-blur-md bg-black/30 border-b border-cyan-500/20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <motion.div 
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              className="flex items-center space-x-2"
            >
              <motion.div
                whileHover={{ scale: 1.1, rotate: 5 }}
                transition={{ type: "spring", stiffness: 300 }}
              >
                <MessageSquare className="w-8 h-8 text-cyan-400 drop-shadow-[0_0_8px_rgba(6,182,212,0.8)]" />
              </motion.div>
              <motion.span 
                className="text-2xl font-black tracking-tight"
                animate={{
                  backgroundPosition: ["0%", "100%", "0%"],
                }}
                transition={{
                  duration: 5,
                  repeat: Infinity,
                  ease: "linear"
                }}
                style={{
                  background: "linear-gradient(90deg, #06b6d4, #10b981, #f472b6, #06b6d4)",
                  backgroundSize: "200% auto",
                  WebkitBackgroundClip: "text",
                  WebkitTextFillColor: "transparent",
                  backgroundClip: "text",
                  filter: "drop-shadow(0 0 8px rgba(6,182,212,0.6))"
                }}
              >
                IYKYKA
              </motion.span>
            </motion.div>
            <motion.div 
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              className="flex items-center space-x-4"
            >
              <button className="px-4 py-2 text-sm font-medium text-white/80 hover:text-white transition-colors">
                로그인
              </button>
              <motion.button 
                className="px-6 py-2 text-sm font-bold bg-gradient-to-r from-cyan-500 via-fuchsia-500 to-emerald-500 rounded-full text-white hover:shadow-lg hover:shadow-cyan-500/50 transition-all"
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                animate={{
                  backgroundPosition: ["0%", "100%", "0%"],
                }}
                transition={{
                  duration: 3,
                  repeat: Infinity,
                  ease: "linear"
                }}
                style={{
                  backgroundSize: "200% auto",
                }}
              >
                시작하기
              </motion.button>
            </motion.div>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="relative pt-32 pb-20 px-4 sm:px-6 lg:px-8 overflow-hidden">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,182,212,0.2),transparent_50%)]"></div>
        <div className="max-w-7xl mx-auto">
          <motion.div
            initial="initial"
            animate="animate"
            variants={{
              initial: { opacity: 0 },
              animate: {
                opacity: 1,
                transition: {
                  staggerChildren: 0.2
                }
              }
            }}
            className="text-center"
          >
            <motion.div
              variants={animations.fadeInUp}
              className="inline-flex items-center space-x-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-md border border-white/20 mb-8"
            >
              <Sparkles className="w-4 h-4 text-cyan-400" />
              <span className="text-sm text-white/90">AI 기술로 업계를 선도합니다</span>
            </motion.div>

            <motion.h1
              variants={animations.fadeInUp}
              className="text-5xl sm:text-6xl lg:text-8xl font-black mb-6 leading-tight tracking-tight"
            >
              <motion.span 
                className="block mb-2"
                animate={{
                  backgroundPosition: ["0%", "100%", "0%"],
                }}
                transition={{
                  duration: 4,
                  repeat: Infinity,
                  ease: "linear"
                }}
                style={{
                  background: "linear-gradient(90deg, #ffffff, #06b6d4, #10b981, #f472b6, #ffffff)",
                  backgroundSize: "200% auto",
                  WebkitBackgroundClip: "text",
                  WebkitTextFillColor: "transparent",
                  backgroundClip: "text",
                  filter: "drop-shadow(0 0 20px rgba(6,182,212,0.5))"
                }}
              >
                IYKYKA
              </motion.span>
              <br />
              <span className="bg-gradient-to-r from-cyan-400 via-emerald-400 to-fuchsia-400 bg-clip-text text-transparent animate-pulse drop-shadow-[0_0_15px_rgba(6,182,212,0.6)]">
                자동화의 미래
              </span>
            </motion.h1>

            <motion.p
              variants={animations.fadeInUp}
              className="text-xl sm:text-2xl text-white/80 max-w-3xl mx-auto mb-12 leading-relaxed"
            >
              지능형 AI가 대화를 이해하고, 작업을 자동화하며, 
              <span className="text-cyan-300 font-semibold"> 커뮤니케이션의 새로운 차원</span>을 열어갑니다.
            </motion.p>

            <motion.div
              variants={animations.fadeInUp}
              className="flex flex-col sm:flex-row gap-4 justify-center items-center"
            >
              <motion.button 
                className="group relative px-8 py-4 rounded-full text-white font-bold text-lg overflow-hidden"
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                animate={{
                  backgroundPosition: ["0%", "100%", "0%"],
                }}
                transition={{
                  duration: 3,
                  repeat: Infinity,
                  ease: "linear"
                }}
                style={{
                  background: "linear-gradient(90deg, #06b6d4, #10b981, #f472b6, #06b6d4)",
                  backgroundSize: "200% auto",
                  boxShadow: "0 0 30px rgba(6,182,212,0.5)"
                }}
              >
                <span className="flex items-center space-x-2 relative z-10">
                  <span>무료로 시작하기</span>
                  <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
                </span>
              </motion.button>
              <motion.button 
                className="px-8 py-4 rounded-full border-2 border-cyan-500/50 text-white font-bold text-lg hover:bg-cyan-500/10 hover:border-fuchsia-400 hover:shadow-[0_0_20px_rgba(244,114,182,0.5)] backdrop-blur-sm transition-all"
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
              >
                데모 보기
              </motion.button>
            </motion.div>
          </motion.div>
        </div>

        {/* Floating Elements */}
        <motion.div
          animate={{
            y: [0, -20, 0],
            rotate: [0, 5, 0]
          }}
          transition={{
            duration: 6,
            repeat: Infinity,
            ease: "easeInOut"
          }}
          className="absolute top-40 left-10 w-20 h-20 bg-gradient-to-br from-cyan-500/40 to-fuchsia-500/40 rounded-full blur-xl"
        />
        <motion.div
          animate={{
            y: [0, 20, 0],
            rotate: [0, -5, 0]
          }}
          transition={{
            duration: 8,
            repeat: Infinity,
            ease: "easeInOut"
          }}
          className="absolute bottom-20 right-20 w-32 h-32 bg-gradient-to-br from-emerald-500/40 to-cyan-500/40 rounded-full blur-xl"
        />
      </section>

      {/* Features Grid */}
      <section className="py-20 px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            className="text-center mb-16"
          >
            <h2 className="text-4xl sm:text-5xl font-black mb-4">
              <motion.span 
                className="block"
                animate={{
                  backgroundPosition: ["0%", "100%", "0%"],
                }}
                transition={{
                  duration: 5,
                  repeat: Infinity,
                  ease: "linear"
                }}
                style={{
                  background: "linear-gradient(90deg, #06b6d4, #10b981, #f472b6, #06b6d4)",
                  backgroundSize: "200% auto",
                  WebkitBackgroundClip: "text",
                  WebkitTextFillColor: "transparent",
                  backgroundClip: "text",
                }}
              >
                강력한 기능들
              </motion.span>
            </h2>
            <p className="text-xl text-white/70 max-w-2xl mx-auto">
              AI 기술로 메신저 경험을 혁신하는 핵심 기능들을 만나보세요
            </p>
          </motion.div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {features.map((feature, index) => {
              const Icon = feature.icon;
              return (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                  className="group relative p-6 rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 overflow-hidden group-hover:bg-white/10 group-hover:border-cyan-500/50 group-hover:shadow-[0_0_30px_rgba(6,182,212,0.5)] transition-all"
                >
                  <div className={`absolute inset-0 bg-gradient-to-br ${feature.color} opacity-0 group-hover:opacity-10 transition-opacity`}></div>
                  <div className={`relative w-12 h-12 rounded-xl bg-gradient-to-br ${feature.color} p-3 mb-4`}>
                    <Icon className="w-6 h-6 text-white" />
                  </div>
                  <h3 className="text-xl font-semibold text-white mb-2">{feature.title}</h3>
                  <p className="text-white/70 leading-relaxed">{feature.description}</p>
                </motion.div>
              );
            })}
          </div>
        </div>
      </section>

      {/* AI Automation Section */}
      <section className="py-20 px-4 sm:px-6 lg:px-8 relative">
        <div className="absolute inset-0 bg-gradient-to-r from-cyan-950/50 to-emerald-950/50"></div>
        <div className="max-w-7xl mx-auto relative">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <motion.div
              initial={{ opacity: 0, x: -50 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
            >
              <div className="inline-flex items-center space-x-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-md border border-white/20 mb-6">
                <Bot className="w-5 h-5 text-cyan-400" />
                <span className="text-sm text-white/90">AI 자동화</span>
              </div>
              <h2 className="text-4xl sm:text-5xl font-bold mb-6">
                <span className="bg-gradient-to-r from-white to-cyan-200 bg-clip-text text-transparent">
                  지능형 자동화로
                </span>
                <br />
                <motion.span 
                  className="block"
                  animate={{
                    backgroundPosition: ["0%", "100%", "0%"],
                  }}
                  transition={{
                    duration: 4,
                    repeat: Infinity,
                    ease: "linear"
                  }}
                  style={{
                    background: "linear-gradient(90deg, #06b6d4, #10b981, #f472b6, #06b6d4)",
                    backgroundSize: "200% auto",
                    WebkitBackgroundClip: "text",
                    WebkitTextFillColor: "transparent",
                    backgroundClip: "text",
                  }}
                >
                  시간을 절약하세요
                </motion.span>
              </h2>
              <p className="text-xl text-white/80 mb-8 leading-relaxed">
                AI가 반복적인 작업을 자동으로 처리하고, 스마트한 응답을 생성하며, 
                업무 흐름을 최적화합니다. 더 중요한 일에 집중할 수 있습니다.
              </p>
              <ul className="space-y-4">
                {[
                  "지능형 메시지 자동 응답",
                  "스마트 일정 관리 및 알림",
                  "컨텍스트 기반 작업 자동화",
                  "다국어 실시간 번역",
                  "의미 분석 및 우선순위 설정"
                ].map((item, index) => (
                  <motion.li
                    key={index}
                    initial={{ opacity: 0, x: -20 }}
                    whileInView={{ opacity: 1, x: 0 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.5, delay: index * 0.1 }}
                    className="flex items-center space-x-3"
                  >
                    <CheckCircle2 className="w-6 h-6 text-emerald-400 flex-shrink-0" />
                    <span className="text-white/90 text-lg">{item}</span>
                  </motion.li>
                ))}
              </ul>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, x: 50 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="relative"
            >
              <div className="relative p-8 rounded-3xl bg-gradient-to-br from-cyan-500/20 to-emerald-500/20 backdrop-blur-md border border-white/20">
                <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,182,212,0.3),transparent_70%)] rounded-3xl"></div>
                <div className="relative space-y-4">
                  {[1, 2, 3].map((i) => (
                    <motion.div
                      key={i}
                      initial={{ opacity: 0, y: 20 }}
                      whileInView={{ opacity: 1, y: 0 }}
                      viewport={{ once: true }}
                      transition={{ delay: i * 0.2 }}
                      className="p-4 rounded-xl bg-white/10 backdrop-blur-sm border border-white/20"
                    >
                      <div className="flex items-center space-x-3 mb-2">
                        <div className="w-8 h-8 rounded-full bg-gradient-to-br from-cyan-400 to-emerald-400"></div>
                        <div className="flex-1 h-4 bg-white/20 rounded w-24"></div>
                      </div>
                      <div className="space-y-2">
                        <div className="h-3 bg-white/20 rounded w-full"></div>
                        <div className="h-3 bg-white/20 rounded w-3/4"></div>
                      </div>
                    </motion.div>
                  ))}
                </div>
              </div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 px-4 sm:px-6 lg:px-8">
        <div className="max-w-4xl mx-auto text-center">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            className="relative p-12 rounded-3xl overflow-hidden"
            style={{
              background: "linear-gradient(135deg, #06b6d4, #10b981, #f472b6)",
              backgroundSize: "200% 200%",
            }}
          >
            <motion.div
              animate={{
                backgroundPosition: ["0% 0%", "100% 100%", "0% 0%"],
              }}
              transition={{
                duration: 5,
                repeat: Infinity,
                ease: "linear"
              }}
              className="absolute inset-0"
              style={{
                background: "linear-gradient(135deg, #06b6d4, #10b981, #f472b6)",
                backgroundSize: "200% 200%",
              }}
            />
            <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]"></div>
            <div className="relative z-10">
              <h2 className="text-4xl sm:text-5xl font-bold text-white mb-6">
                지금 시작하세요
              </h2>
              <p className="text-xl text-white/90 mb-8 max-w-2xl mx-auto relative z-10">
                IYKYKA와 함께 AI 기술로 업계를 선도하는 메신저 플랫폼의 일원이 되세요. 
                무료로 시작하고 즉시 혜택을 경험하세요.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <motion.button 
                  className="px-8 py-4 bg-white rounded-full font-bold text-lg hover:shadow-2xl transition-all relative z-10"
                  whileHover={{ scale: 1.05 }}
                  whileTap={{ scale: 0.95 }}
                  style={{
                    color: "#06b6d4"
                  }}
                >
                  무료 체험 시작
                </motion.button>
                <button className="px-8 py-4 bg-white/10 backdrop-blur-md border-2 border-white/30 text-white rounded-full font-semibold text-lg hover:bg-white/20 transition-all">
                  영업팀에 문의
                </button>
              </div>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-12 px-4 sm:px-6 lg:px-8 border-t border-white/10">
        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
            <div>
              <div className="flex items-center space-x-2 mb-4">
                <MessageSquare className="w-6 h-6 text-cyan-400 drop-shadow-[0_0_8px_rgba(6,182,212,0.8)]" />
                <motion.span 
                  className="text-lg font-black tracking-tight"
                  animate={{
                    backgroundPosition: ["0%", "100%", "0%"],
                  }}
                  transition={{
                    duration: 4,
                    repeat: Infinity,
                    ease: "linear"
                  }}
                  style={{
                    background: "linear-gradient(90deg, #06b6d4, #10b981, #f472b6, #06b6d4)",
                    backgroundSize: "200% auto",
                    WebkitBackgroundClip: "text",
                    WebkitTextFillColor: "transparent",
                    backgroundClip: "text",
                  }}
                >
                  IYKYKA
                </motion.span>
              </div>
              <p className="text-white/60 text-sm">
                AI 기술로 커뮤니케이션의 미래를 만들어갑니다.
              </p>
            </div>
            <div>
              <h4 className="text-white font-semibold mb-4">제품</h4>
              <ul className="space-y-2 text-white/60 text-sm">
                <li><a href="#" className="hover:text-white transition-colors">기능</a></li>
                <li><a href="#" className="hover:text-white transition-colors">가격</a></li>
                <li><a href="#" className="hover:text-white transition-colors">보안</a></li>
              </ul>
            </div>
            <div>
              <h4 className="text-white font-semibold mb-4">회사</h4>
              <ul className="space-y-2 text-white/60 text-sm">
                <li><a href="#" className="hover:text-white transition-colors">소개</a></li>
                <li><a href="#" className="hover:text-white transition-colors">블로그</a></li>
                <li><a href="#" className="hover:text-white transition-colors">채용</a></li>
              </ul>
            </div>
            <div>
              <h4 className="text-white font-semibold mb-4">지원</h4>
              <ul className="space-y-2 text-white/60 text-sm">
                <li><a href="#" className="hover:text-white transition-colors">도움말</a></li>
                <li><a href="#" className="hover:text-white transition-colors">문의하기</a></li>
                <li><a href="#" className="hover:text-white transition-colors">API 문서</a></li>
              </ul>
            </div>
          </div>
          <div className="pt-8 border-t border-white/10 text-center text-white/60 text-sm">
            <p>&copy; 2024 IYKYKA. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  );
}