import React from "react";
import { motion } from "framer-motion";
import { ArrowRight, Zap, Brain, Zap as FastIcon, Layers } from "lucide-react";
import { Button, Card } from "@/components/common";
import Header from "@/components/sections/Header";
import Footer from "@/components/sections/Footer";

interface HomePageProps {
  onGetStarted?: () => void;
  onSettingsClick?: () => void;
}

const HomePage: React.FC<HomePageProps> = ({
  onGetStarted,
  onSettingsClick,
}) => {
  const features = [
    {
      icon: Zap,
      title: "Smart Job Scraping",
      description:
        "Automatically search and collect job listings from LinkedIn",
    },
    {
      icon: Brain,
      title: "AI-Powered Analysis",
      description: "Extract key skills and requirements from job descriptions",
    },
    {
      icon: FastIcon,
      title: "CV Tailoring",
      description: "Automatically customize your CV for each job application",
    },
    {
      icon: Layers,
      title: "Batch Processing",
      description: "Generate multiple tailored CVs for different jobs at once",
    },
  ];

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
        delayChildren: 0.2,
      },
    },
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.5 },
    },
  };

  return (
    <div className="min-h-screen bg-gradient-saas">
      <Header onSettingsClick={onSettingsClick} />

      {/* Hero Section */}
      <motion.section
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.6 }}
        className="relative px-4 sm:px-6 lg:px-8 py-20 lg:py-32 max-w-7xl mx-auto"
      >
        {/* Background gradient orbs */}
        <div className="absolute top-0 left-1/4 w-96 h-96 bg-emerald-500/20 rounded-full blur-3xl -z-10" />
        <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-emerald-500/10 rounded-full blur-3xl -z-10" />

        <div className="text-center mb-16">
          <motion.div
            variants={itemVariants}
            className="mb-6 inline-flex items-center gap-2 bg-emerald-500/10 border border-emerald-500/30 rounded-full px-4 py-2"
          >
            <Zap className="w-4 h-4 text-emerald-400" />
            <span className="text-sm font-medium text-emerald-200">
              Powered by AI
            </span>
          </motion.div>

          <motion.h1
            variants={itemVariants}
            className="text-5xl lg:text-7xl font-bold text-white mb-6 leading-tight"
          >
            Get Your Dream Job
            <br />
            <span className="bg-gradient-emerald bg-clip-text text-transparent">
              Faster
            </span>
          </motion.h1>

          <motion.p
            variants={itemVariants}
            className="text-xl text-slate-300 max-w-2xl mx-auto mb-8"
          >
            Automate your job application process with intelligent CV tailoring.
            Search jobs, analyze requirements, and generate tailored
            applications in minutes.
          </motion.p>

          <motion.div
            variants={itemVariants}
            className="flex flex-col sm:flex-row gap-4 justify-center"
          >
            <Button
              size="lg"
              onClick={onGetStarted}
              icon={<ArrowRight className="w-5 h-5" />}
            >
              Get Started
            </Button>
            <Button size="lg" variant="outline" onClick={onSettingsClick}>
              Learn More
            </Button>
          </motion.div>
        </div>
      </motion.section>

      {/* Features Section */}
      <motion.section
        variants={containerVariants}
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, margin: "-100px" }}
        className="px-4 sm:px-6 lg:px-8 py-20 max-w-7xl mx-auto"
      >
        <div className="text-center mb-16">
          <h2 className="text-4xl font-bold text-white mb-4">
            Why Choose SkillSync?
          </h2>
          <p className="text-slate-400 max-w-2xl mx-auto">
            Leverage cutting-edge AI and automation to transform your job search
            experience.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {features.map((feature, index) => (
            <motion.div key={index} variants={itemVariants}>
              <Card hover glow innerGlow>
                <div className="mb-4">
                  <div className="w-12 h-12 bg-emerald-500/20 rounded-lg flex items-center justify-center">
                    <feature.icon className="w-6 h-6 text-emerald-400" />
                  </div>
                </div>
                <h3 className="text-lg font-semibold text-white mb-2">
                  {feature.title}
                </h3>
                <p className="text-slate-400 text-sm">{feature.description}</p>
              </Card>
            </motion.div>
          ))}
        </div>
      </motion.section>

      {/* Stats Section */}
      <motion.section
        initial={{ opacity: 0 }}
        whileInView={{ opacity: 1 }}
        viewport={{ once: true }}
        className="px-4 sm:px-6 lg:px-8 py-20 max-w-7xl mx-auto"
      >
        <Card
          glow
          className="bg-gradient-to-br from-emerald-500/10 to-slate-900"
        >
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
            {[
              { number: "10K+", label: "Jobs Processed" },
              { number: "95%", label: "Success Rate" },
              { number: "45min", label: "Avg Time Saved" },
            ].map((stat, index) => (
              <div key={index}>
                <motion.p
                  className="text-4xl font-bold text-emerald-400 mb-2"
                  initial={{ opacity: 0, y: 10 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ delay: index * 0.1 }}
                >
                  {stat.number}
                </motion.p>
                <p className="text-slate-400">{stat.label}</p>
              </div>
            ))}
          </div>
        </Card>
      </motion.section>

      <Footer />
    </div>
  );
};

export default HomePage;