"use client";

import React, { useState, useEffect } from "react";
import { motion } from "framer-motion";
import {
  Github,
  MessageSquare,
  Shield,
  Code2,
  Rocket,
  Users,
  Heart,
  ArrowRight,
  ExternalLink,
  Lock,
  Terminal,
  Sparkles,
} from "lucide-react";

export default function HomePage() {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  const features = [
    {
      icon: Heart,
      title: "Open Source First",
      description:
        "We love the open source community and all our projects are completely open source for everyone to use and contribute.",
    },
    {
      icon: Users,
      title: "Growing Community",
      description:
        "Join our thriving community full of beginners and pros. Learn, collaborate, and grow together.",
    },
    {
      icon: Shield,
      title: "Cybersecurity & Dev",
      description:
        "Building tools for developers and cybersecurity enthusiasts. Security-first approach to everything we create.",
    },
  ];

  const values = [
    {
      icon: Rocket,
      title: "For Startups",
      description:
        "Empowering startups with the tools and community they need to succeed",
    },
    {
      icon: Code2,
      title: "Developer Tools",
      description:
        "Creating powerful, intuitive tools that make developers' lives easier",
    },
    {
      icon: Lock,
      title: "Security Focused",
      description:
        "Building with security in mind from day one, every single time",
    },
  ];

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

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

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-purple-950 to-slate-950 text-white">
      {/* Animated background */}
      <div className="fixed inset-0 opacity-20">
        <div
          className="absolute inset-0"
          style={{
            backgroundImage: `radial-gradient(circle at 2px 2px, rgb(168, 85, 247) 1px, transparent 0)`,
            backgroundSize: "50px 50px",
          }}
        />
      </div>

      {/* Gradient orbs */}
      <div className="fixed inset-0 overflow-hidden pointer-events-none">
        <motion.div
          className="absolute top-1/4 -left-1/4 w-96 h-96 bg-purple-500/30 rounded-full blur-3xl"
          animate={{
            scale: [1, 1.2, 1],
            opacity: [0.3, 0.5, 0.3],
          }}
          transition={{
            duration: 8,
            repeat: Infinity,
          }}
        />
        <motion.div
          className="absolute bottom-1/4 -right-1/4 w-96 h-96 bg-blue-500/30 rounded-full blur-3xl"
          animate={{
            scale: [1.2, 1, 1.2],
            opacity: [0.3, 0.5, 0.3],
          }}
          transition={{
            duration: 8,
            repeat: Infinity,
            delay: 1,
          }}
        />
      </div>

      {/* Navigation */}
      <motion.nav
        initial={{ y: -100 }}
        animate={{ y: 0 }}
        className="relative z-10 px-6 py-6 flex justify-between items-center max-w-7xl mx-auto"
      >
        <motion.div className="flex items-center" whileHover={{ scale: 1.05 }}>
          <img src="orus.svg" alt="Logo" className="h-4" />
        </motion.div>

        <div className="flex gap-6 items-center">
          {["Community", "Projects", "About"].map((item, i) => (
            <motion.a
              key={item}
              href={`#${item.toLowerCase()}`}
              className="text-slate-300 hover:text-white transition-colors hidden md:block"
              initial={{ opacity: 0, y: -20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: i * 0.1 }}
              whileHover={{ y: -2 }}
            >
              {item}
            </motion.a>
          ))}
          <motion.a
            href="https://discord.gg/HFRsNxfCqT"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2 px-4 py-2 bg-purple-500 hover:bg-purple-600 rounded-lg font-semibold transition-colors text-sm"
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
          >
            <MessageSquare className="w-4 h-4" />
            Join Discord
          </motion.a>
        </div>
      </motion.nav>

      {/* Hero Section */}
      <motion.section
        className="relative z-10 px-6 py-20 lg:py-32 max-w-7xl mx-auto"
        variants={containerVariants}
        initial="hidden"
        animate="visible"
      >
        <div className="text-center max-w-4xl mx-auto">
          <motion.div variants={itemVariants} className="mb-6">
            <span className="inline-flex items-center gap-2 px-4 py-2 bg-purple-500/10 border border-purple-500/20 rounded-full text-purple-400 text-sm">
              <Sparkles className="w-4 h-4" />
              Cybersecurity & Development Organization
            </span>
          </motion.div>

          <motion.h1
            variants={itemVariants}
            className="text-5xl lg:text-7xl font-bold mb-6"
          >
            <span className="bg-gradient-to-r from-white via-purple-200 to-blue-200 bg-clip-text text-transparent">
              Hello, World!
            </span>
          </motion.h1>

          <motion.p
            variants={itemVariants}
            className="text-xl lg:text-2xl text-slate-300 mb-4 leading-relaxed"
          >
            Welcome to{" "}
            <span className="text-purple-400 font-semibold">ORUS</span>, a
            cybersecurity & dev organization,
          </motion.p>

          <motion.p
            variants={itemVariants}
            className="text-2xl lg:text-3xl font-bold text-white mb-12"
          >
            Simply for developers.
          </motion.p>

          <motion.div
            variants={itemVariants}
            className="flex flex-col sm:flex-row gap-4 justify-center"
          >
            <motion.a
              href="https://github.com/orus-dev"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 rounded-lg font-semibold text-lg transition-all shadow-lg shadow-purple-500/50"
              whileHover={{
                scale: 1.05,
                boxShadow: "0 20px 50px rgba(168, 85, 247, 0.4)",
              }}
              whileTap={{ scale: 0.95 }}
            >
              <Github className="w-5 h-5" />
              View Our Projects
              <ArrowRight className="w-5 h-5" />
            </motion.a>

            <motion.a
              href="https://discord.gg/HFRsNxfCqT"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center justify-center gap-2 px-8 py-4 border-2 border-purple-500 hover:bg-purple-500/10 rounded-lg font-semibold text-lg transition-all"
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
            >
              <MessageSquare className="w-5 h-5" />
              Join Community
            </motion.a>
          </motion.div>
        </div>
      </motion.section>

      {/* Features Section */}
      <motion.section
        className="relative z-10 px-6 py-20 max-w-7xl mx-auto"
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true }}
        variants={containerVariants}
      >
        <div className="grid md:grid-cols-3 gap-8">
          {features.map((feature, i) => (
            <motion.div
              key={i}
              variants={itemVariants}
              whileHover={{ y: -8 }}
              className="relative group"
            >
              <div className="absolute inset-0 bg-gradient-to-r from-purple-500/20 to-blue-500/20 rounded-2xl blur-xl group-hover:blur-2xl transition-all" />
              <div className="relative bg-slate-900/50 backdrop-blur border border-slate-700 hover:border-purple-500/50 rounded-2xl p-8 transition-all h-full">
                <div className="inline-flex items-center justify-center w-14 h-14 bg-purple-500/10 rounded-xl mb-6">
                  <feature.icon className="w-7 h-7 text-purple-400" />
                </div>

                <h3 className="text-2xl font-semibold mb-3 group-hover:text-purple-400 transition-colors">
                  {feature.title}
                </h3>

                <p className="text-slate-400 leading-relaxed">
                  {feature.description}
                </p>
              </div>
            </motion.div>
          ))}
        </div>
      </motion.section>

      {/* What We Do Section */}
      <motion.section
        className="relative z-10 px-6 py-20 max-w-7xl mx-auto"
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true }}
        variants={containerVariants}
      >
        <motion.div variants={itemVariants} className="text-center mb-16">
          <h2 className="text-4xl lg:text-5xl font-bold mb-4 bg-gradient-to-r from-white to-purple-200 bg-clip-text text-transparent">
            Empowering Startups
          </h2>
          <p className="text-slate-400 text-lg max-w-2xl mx-auto">
            ORUS is an organization dedicated to supporting startups with
            cutting-edge tools, security expertise, and a collaborative
            community
          </p>
        </motion.div>

        <div className="grid md:grid-cols-3 gap-6">
          {values.map((value, i) => (
            <motion.div
              key={i}
              variants={itemVariants}
              className="bg-slate-900/30 backdrop-blur border border-slate-800 hover:border-purple-500/30 rounded-xl p-6 transition-all"
            >
              <value.icon className="w-10 h-10 text-purple-400 mb-4" />
              <h4 className="text-xl font-semibold mb-2">{value.title}</h4>
              <p className="text-slate-400">{value.description}</p>
            </motion.div>
          ))}
        </div>
      </motion.section>

      {/* CTA Section */}
      <motion.section
        className="relative z-10 px-6 py-20 max-w-5xl mx-auto"
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true }}
        variants={containerVariants}
      >
        <motion.div
          variants={itemVariants}
          className="relative overflow-hidden bg-gradient-to-r from-purple-500/10 to-blue-500/10 backdrop-blur border border-purple-500/20 rounded-3xl p-12 text-center"
        >
          <div className="absolute inset-0 bg-gradient-to-r from-purple-500/5 to-blue-500/5" />

          <div className="relative">
            <h2 className="text-3xl lg:text-4xl font-bold mb-4">
              Ready to Join ORUS?
            </h2>
            <p className="text-slate-300 text-lg mb-8 max-w-2xl mx-auto">
              Whether you're a beginner or a pro, there's a place for you in our
              community. Let's build something amazing together.
            </p>

            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <motion.a
                href="https://discord.gg/HFRsNxfCqT"
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-purple-500 hover:bg-purple-600 rounded-lg font-semibold text-lg transition-colors"
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
              >
                <MessageSquare className="w-5 h-5" />
                Join Discord Community
              </motion.a>

              <motion.a
                href="https://github.com/orus-dev"
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center justify-center gap-2 px-8 py-4 border border-slate-600 hover:border-slate-400 rounded-lg font-semibold text-lg transition-colors"
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
              >
                <Github className="w-5 h-5" />
                Explore on GitHub
              </motion.a>
            </div>
          </div>
        </motion.div>
      </motion.section>

      {/* Footer */}
      <footer className="relative z-10 px-6 py-12 border-t border-slate-800/50 mt-20">
        <div className="max-w-7xl mx-auto">
          <div className="flex flex-col md:flex-row justify-between items-center gap-6">
            <img src="orus.svg" alt="Logo" className="h-4" />

            <div className="text-slate-400 text-center">
              © 2025 ORUS. Open source for everyone. Built with 💜 for
              developers.
            </div>

            <div className="flex gap-6">
              <motion.a
                href="https://github.com/orus-dev"
                target="_blank"
                rel="noopener noreferrer"
                className="text-slate-400 hover:text-purple-400 transition-colors"
                whileHover={{ scale: 1.2, rotate: 5 }}
              >
                <Github className="w-6 h-6" />
              </motion.a>
              <motion.a
                href="https://discord.gg/HFRsNxfCqT"
                target="_blank"
                rel="noopener noreferrer"
                className="text-slate-400 hover:text-purple-400 transition-colors"
                whileHover={{ scale: 1.2, rotate: -5 }}
              >
                <MessageSquare className="w-6 h-6" />
              </motion.a>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}