import { motion } from "framer-motion"
import { 
  Code, 
  Terminal, 
  Cpu, 
  BookOpen, 
  Atom, 
  Heart, 
  Rocket, 
  Cloud, 
  Coffee,
  Leaf,
  Container
} from "lucide-react"
import { GradientText, FadeIn, StaggerContainer, StaggerItem } from "@/components/ui/magicui"

const languages = [
  {
    name: "Go",
    alias: "golang",
    icon: Cpu,
    color: "text-cyan-500",
    bgColor: "bg-cyan-500/10",
    docs: "pkg.go.dev",
  },
  {
    name: "Python",
    alias: "py",
    icon: Terminal,
    color: "text-green-500",
    bgColor: "bg-green-500/10",
    docs: "docs.python.org",
  },
  {
    name: "Rust",
    alias: "rust",
    icon: Code,
    color: "text-orange-500",
    bgColor: "bg-orange-500/10",
    docs: "docs.rs",
  },
  {
    name: "TypeScript",
    alias: "ts",
    icon: BookOpen,
    color: "text-blue-500",
    bgColor: "bg-blue-500/10",
    docs: "typescriptlang.org",
  },
  {
    name: "React",
    alias: "react",
    icon: Atom,
    color: "text-cyan-500",
    bgColor: "bg-cyan-500/10",
    docs: "react.dev",
  },
  {
    name: "Vue",
    alias: "vue",
    icon: Heart,
    color: "text-green-500",
    bgColor: "bg-green-500/10",
    docs: "vuejs.org",
  },
  {
    name: "Nuxt",
    alias: "nuxt",
    icon: Leaf,
    color: "text-teal-500",
    bgColor: "bg-teal-500/10",
    docs: "nuxt.com",
  },
  {
    name: "Docker",
    alias: "docker",
    icon: Container,
    color: "text-blue-500",
    bgColor: "bg-blue-500/10",
    docs: "docs.docker.com",
  },
  {
    name: "Java",
    alias: "java",
    icon: Coffee,
    color: "text-red-500",
    bgColor: "bg-red-500/10",
    docs: "docs.oracle.com",
  },
  {
    name: "Spring",
    alias: "spring",
    icon: Leaf,
    color: "text-green-600",
    bgColor: "bg-green-600/10",
    docs: "docs.spring.io",
  },
  {
    name: "Astro",
    alias: "astro",
    icon: Rocket,
    color: "text-purple-500",
    bgColor: "bg-purple-500/10",
    docs: "docs.astro.build",
  },
  {
    name: "Cloudflare",
    alias: "cf",
    icon: Cloud,
    color: "text-orange-500",
    bgColor: "bg-orange-500/10",
    docs: "developers.cloudflare.com",
  },
]

export function Languages() {
  return (
    <section id="languages" className="relative py-24 md:py-32 overflow-hidden">
      {/* Background */}
      <div className="absolute inset-0 bg-gradient-to-b from-background via-cyan-950/5 to-background" />

      <div className="container relative z-10 px-4 md:px-6">
        {/* Section Header */}
        <div className="text-center mb-16">
          <FadeIn>
            <h2 className="text-3xl md:text-5xl font-bold mb-4">
              Supported <GradientText>Languages</GradientText>
            </h2>
          </FadeIn>
          <FadeIn delay={0.1}>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Quick access to documentation for popular languages and frameworks
            </p>
          </FadeIn>
        </div>

        {/* Languages Grid */}
        <StaggerContainer 
          className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-3 sm:gap-4"
          staggerDelay={0.05}
        >
          {languages.map((lang, index) => (
            <StaggerItem key={index}>
              <motion.div
                whileHover={{ scale: 1.05, y: -4 }}
                transition={{ duration: 0.2 }}
                className="group relative p-4 rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm hover:border-cyan-500/30 hover:bg-white/[0.07] transition-all duration-300 cursor-pointer"
              >
                {/* Icon */}
                <div className={`flex items-center justify-center mb-3 p-3 rounded-lg ${lang.bgColor}`}>
                  <lang.icon className={`w-6 h-6 ${lang.color}`} />
                </div>

                {/* Name */}
                <h3 className="font-semibold mb-1 group-hover:text-cyan-400 transition-colors">
                  {lang.name}
                </h3>

                {/* Alias */}
                <p className="text-xs text-muted-foreground">
                  <span className="font-mono bg-white/10 px-1.5 py-0.5 rounded">
                    devour get {lang.alias.toLowerCase()}
                  </span>
                </p>

                {/* Gradient Line on Hover */}
                <div className={`absolute bottom-0 left-0 right-0 h-0.5 bg-gradient-to-r ${lang.color} opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-b-xl`} />
              </motion.div>
            </StaggerItem>
          ))}
        </StaggerContainer>

        {/* Usage Example */}
        <FadeIn delay={0.4}>
          <div className="mt-12 text-center">
            <div className="inline-flex flex-col items-center gap-4 p-6 rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm">
              <p className="text-sm text-muted-foreground">Quick usage example:</p>
              <div className="flex flex-wrap justify-center gap-2 font-mono text-sm">
                <span className="text-muted-foreground">$</span>
                <span className="text-cyan-400">devour</span>
                <span className="text-white">get</span>
                <span className="text-green-400">go</span>
                <span className="text-white">http</span>
              </div>
              <p className="text-xs text-muted-foreground">
                Fetches Go net/http package documentation
              </p>
            </div>
          </div>
        </FadeIn>

        {/* More Info */}
        <FadeIn delay={0.5}>
          <div className="mt-8 text-center">
            <p className="text-sm text-muted-foreground">
              More languages and frameworks are being added regularly.
              <br />
              <span className="text-cyan-400">Request a new source</span> on GitHub.
            </p>
          </div>
        </FadeIn>
      </div>
    </section>
  )
}