import { motion } from "framer-motion"
import { GradientText, FadeIn, StaggerContainer, StaggerItem } from "@/components/ui/magicui"

const languages = [
  {
    name: "Go",
    alias: "golang",
    icon: "🐹",
    color: "from-cyan-400 to-cyan-600",
    docs: "pkg.go.dev",
  },
  {
    name: "Python",
    alias: "py",
    icon: "🐍",
    color: "from-yellow-400 to-green-500",
    docs: "docs.python.org",
  },
  {
    name: "Rust",
    alias: "rust",
    icon: "🦀",
    color: "from-orange-400 to-red-500",
    docs: "docs.rs",
  },
  {
    name: "TypeScript",
    alias: "ts",
    icon: "📘",
    color: "from-blue-400 to-blue-600",
    docs: "typescriptlang.org",
  },
  {
    name: "React",
    alias: "react",
    icon: "⚛️",
    color: "from-cyan-400 to-purple-500",
    docs: "react.dev",
  },
  {
    name: "Vue",
    alias: "vue",
    icon: "💚",
    color: "from-green-400 to-emerald-500",
    docs: "vuejs.org",
  },
  {
    name: "Nuxt",
    alias: "nuxt",
    icon: "💚",
    color: "from-green-400 to-teal-500",
    docs: "nuxt.com",
  },
  {
    name: "Docker",
    alias: "docker",
    icon: "🐳",
    color: "from-blue-400 to-cyan-500",
    docs: "docs.docker.com",
  },
  {
    name: "Java",
    alias: "java",
    icon: "☕",
    color: "from-red-400 to-orange-500",
    docs: "docs.oracle.com",
  },
  {
    name: "Spring",
    alias: "spring",
    icon: "🍃",
    color: "from-green-500 to-green-600",
    docs: "docs.spring.io",
  },
  {
    name: "Astro",
    alias: "astro",
    icon: "🚀",
    color: "from-purple-400 to-pink-500",
    docs: "docs.astro.build",
  },
  {
    name: "Cloudflare",
    alias: "cf",
    icon: "☁️",
    color: "from-orange-400 to-yellow-500",
    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 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 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="text-3xl mb-3">{lang.icon}</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>
  )
}