'use client';

import { motion } from 'framer-motion';
import Link from 'next/link';
import {
  Brain,
  Sparkles,
  Target,
  MessageSquare,
  BarChart3,
  Zap,
  Shield,
  Clock,
  ArrowRight,
  Star,
  CheckCircle2,
} from 'lucide-react';

const features = [
  {
    icon: Brain,
    title: 'AI-Powered Questions',
    description: 'Dynamic question generation tailored to your role, difficulty level, and performance.',
    color: 'var(--primary)',
    gradient: 'var(--gradient-primary)',
  },
  {
    icon: MessageSquare,
    title: 'Real-Time Chat Interface',
    description: 'Natural conversation flow with AI interviewer that adapts to your responses.',
    color: 'var(--secondary)',
    gradient: 'var(--gradient-secondary)',
  },
  {
    icon: Target,
    title: 'Deep Evaluation',
    description: 'Multi-dimensional scoring across relevance, clarity, accuracy, and confidence.',
    color: 'var(--accent)',
    gradient: 'var(--gradient-accent)',
  },
  {
    icon: BarChart3,
    title: 'Performance Analytics',
    description: 'Comprehensive session summaries with category breakdowns and improvement paths.',
    color: 'var(--success)',
    gradient: 'linear-gradient(135deg, #00b894, #55efc4)',
  },
  {
    icon: Zap,
    title: 'Instant Feedback',
    description: 'Get immediate, actionable feedback with sample answers after each response.',
    color: 'var(--warning)',
    gradient: 'linear-gradient(135deg, #fdcb6e, #f39c12)',
  },
  {
    icon: Shield,
    title: '8+ Interview Roles',
    description: 'Practice for Software Engineer, Data Scientist, Product Manager, and more.',
    color: 'var(--primary-light)',
    gradient: 'linear-gradient(135deg, #a29bfe, #6c5ce7)',
  },
];

const stats = [
  { value: '8+', label: 'Interview Roles' },
  { value: '3', label: 'Difficulty Levels' },
  { value: '5D', label: 'Evaluation Metrics' },
  { value: 'AI', label: 'Powered by Gemini' },
];

const steps = [
  { step: '01', title: 'Choose Your Role', description: 'Select from 8+ professional roles and set your difficulty level.' },
  { step: '02', title: 'Answer Questions', description: 'AI generates tailored questions. Answer naturally in the chat interface.' },
  { step: '03', title: 'Get AI Feedback', description: 'Receive instant scoring, suggestions, and sample answers for each response.' },
  { step: '04', title: 'Review & Improve', description: 'Access comprehensive analytics and actionable recommendations.' },
];

export default function HomePage() {
  return (
    <div className="relative">
      {/* Hero Section */}
      <section className="relative min-h-[90vh] flex items-center justify-center overflow-hidden px-6">
        <div className="max-w-6xl mx-auto text-center">
          {/* Badge */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="inline-flex items-center gap-2 px-4 py-2 rounded-full mb-8"
            style={{
              background: 'rgba(108, 92, 231, 0.1)',
              border: '1px solid rgba(108, 92, 231, 0.2)',
            }}
          >
            <Sparkles className="w-4 h-4" style={{ color: 'var(--primary-light)' }} />
            <span className="text-sm font-medium" style={{ color: 'var(--primary-light)' }}>
              Powered by Google Gemini AI
            </span>
          </motion.div>

          {/* Heading */}
          <motion.h1
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.1 }}
            className="text-5xl sm:text-6xl md:text-7xl font-bold leading-tight mb-6"
          >
            Master Your Next
            <br />
            <span className="text-gradient">Interview with AI</span>
          </motion.h1>

          {/* Subtitle */}
          <motion.p
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="text-lg sm:text-xl max-w-2xl mx-auto mb-10 leading-relaxed"
            style={{ color: 'var(--muted-light)' }}
          >
            Practice with an AI interviewer that adapts to your role, evaluates your responses
            in real-time, and provides actionable feedback to help you land your dream job.
          </motion.p>

          {/* CTA Buttons */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.3 }}
            className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16"
          >
            <Link href="/interview" className="btn-primary flex items-center gap-2 text-lg px-8 py-4">
              Start Interview
              <ArrowRight className="w-5 h-5" />
            </Link>
            <Link href="/settings" className="btn-secondary flex items-center gap-2 text-lg px-8 py-4">
              Configure API Key
            </Link>
          </motion.div>

          {/* Stats */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.4 }}
            className="grid grid-cols-2 sm:grid-cols-4 gap-6 max-w-2xl mx-auto"
          >
            {stats.map((stat, i) => (
              <div key={i} className="flex flex-col items-center gap-1">
                <span className="text-2xl sm:text-3xl font-bold text-gradient">{stat.value}</span>
                <span className="text-xs sm:text-sm" style={{ color: 'var(--muted)' }}>{stat.label}</span>
              </div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-24 px-6" id="features">
        <div className="max-w-6xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-center mb-16"
          >
            <h2 className="text-3xl sm:text-4xl font-bold mb-4">
              Everything You Need to <span className="text-gradient">Ace Your Interview</span>
            </h2>
            <p className="text-lg max-w-2xl mx-auto" style={{ color: 'var(--muted-light)' }}>
              Our AI-powered platform provides a complete interview preparation experience
              with advanced features designed to maximize your confidence and performance.
            </p>
          </motion.div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {features.map((feature, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.1 }}
                className="card group cursor-default"
              >
                <div
                  className="w-12 h-12 rounded-xl flex items-center justify-center mb-4 transition-transform duration-300 group-hover:scale-110"
                  style={{ background: `${feature.color}15` }}
                >
                  <feature.icon className="w-6 h-6" style={{ color: feature.color }} />
                </div>
                <h3 className="text-lg font-semibold mb-2">{feature.title}</h3>
                <p className="text-sm leading-relaxed" style={{ color: 'var(--muted-light)' }}>
                  {feature.description}
                </p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* How It Works Section */}
      <section className="py-24 px-6">
        <div className="max-w-5xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-center mb-16"
          >
            <h2 className="text-3xl sm:text-4xl font-bold mb-4">
              How It <span className="text-gradient-secondary">Works</span>
            </h2>
            <p className="text-lg max-w-2xl mx-auto" style={{ color: 'var(--muted-light)' }}>
              Get started in minutes. Our streamlined process makes interview practice effortless.
            </p>
          </motion.div>

          <div className="grid md:grid-cols-2 gap-8">
            {steps.map((step, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, x: i % 2 === 0 ? -30 : 30 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.15 }}
                className="flex gap-5 p-6 rounded-2xl transition-all duration-300 group"
                style={{
                  background: 'rgba(255,255,255,0.02)',
                  border: '1px solid var(--border)',
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.borderColor = 'var(--primary)';
                  e.currentTarget.style.background = 'rgba(108, 92, 231, 0.03)';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.borderColor = 'var(--border)';
                  e.currentTarget.style.background = 'rgba(255,255,255,0.02)';
                }}
              >
                <div
                  className="shrink-0 w-12 h-12 rounded-xl flex items-center justify-center font-bold text-lg"
                  style={{
                    background: 'var(--gradient-primary)',
                    color: 'white',
                  }}
                >
                  {step.step}
                </div>
                <div>
                  <h3 className="text-lg font-semibold mb-1">{step.title}</h3>
                  <p className="text-sm" style={{ color: 'var(--muted-light)' }}>
                    {step.description}
                  </p>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-24 px-6">
        <div className="max-w-3xl mx-auto">
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            className="relative rounded-3xl p-12 text-center overflow-hidden"
            style={{
              background: 'var(--gradient-primary)',
            }}
          >
            {/* Decorative */}
            <div
              className="absolute inset-0 opacity-10"
              style={{
                backgroundImage: 'radial-gradient(circle at 20% 50%, white 1px, transparent 1px), radial-gradient(circle at 80% 50%, white 1px, transparent 1px)',
                backgroundSize: '40px 40px',
              }}
            />

            <div className="relative z-10">
              <div className="flex justify-center mb-4">
                {[0, 1, 2, 3, 4].map((i) => (
                  <Star key={i} className="w-6 h-6 text-yellow-300 fill-yellow-300" />
                ))}
              </div>
              <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
                Ready to Ace Your Interview?
              </h2>
              <p className="text-lg text-white/80 mb-8 max-w-xl mx-auto">
                Join thousands of professionals who have improved their interview skills
                with our AI-powered platform.
              </p>
              <Link
                href="/interview"
                className="inline-flex items-center gap-2 bg-white text-gray-900 font-bold px-8 py-4 rounded-xl text-lg transition-all duration-300 hover:shadow-lg hover:scale-105"
              >
                Start Free Practice
                <ArrowRight className="w-5 h-5" />
              </Link>

              <div className="flex flex-wrap justify-center gap-6 mt-8">
                {['No signup required', 'Instant AI feedback', '8+ roles available'].map((item, i) => (
                  <div key={i} className="flex items-center gap-2 text-white/90 text-sm">
                    <CheckCircle2 className="w-4 h-4" />
                    <span>{item}</span>
                  </div>
                ))}
              </div>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Footer */}
      <footer
        className="py-8 px-6 text-center"
        style={{ borderTop: '1px solid var(--border)' }}
      >
        <p className="text-sm" style={{ color: 'var(--muted)' }}>
          Built with Next.js, Tailwind CSS & Google Gemini AI •{' '}
          <span className="text-gradient">InterviewAI</span> © {new Date().getFullYear()}
        </p>
      </footer>
    </div>
  );
}