import { motion } from "framer-motion"
import {
  Github,
  FileJson,
  Globe,
  FolderOpen,
  Brain,
  Search,
  RefreshCw,
  Plug,
  Database,
  BarChart3,
  Zap,
  Shield,
} from "lucide-react"
import { GradientText, FadeIn, StaggerContainer, StaggerItem } from "@/components/ui/magicui"

const features = [
  {
    icon: Github,
    title: "GitHub Repositories",
    description: "Clone and parse repos, extract README, docs, and code structure automatically.",
    color: "text-purple-400",
    bgColor: "bg-purple-500/10",
  },
  {
    icon: FileJson,
    title: "OpenAPI/Swagger",
    description: "Parse Swagger specs into structured endpoints with full API documentation.",
    color: "text-green-400",
    bgColor: "bg-green-500/10",
  },
  {
    icon: Globe,
    title: "Web Documentation",
    description: "Crawl documentation sites with Colly for comprehensive content extraction.",
    color: "text-blue-400",
    bgColor: "bg-blue-500/10",
  },
  {
    icon: FolderOpen,
    title: "Local Files",
    description: "Index your project's docs folder for local documentation management.",
    color: "text-orange-400",
    bgColor: "bg-orange-500/10",
  },
  {
    icon: Brain,
    title: "Vector Embeddings",
    description: "Semantic similarity search via OpenAI text-embedding-3-small/large models.",
    color: "text-cyan-400",
    bgColor: "bg-cyan-500/10",
  },
  {
    icon: Search,
    title: "Intelligent Indexing",
    description: "Metadata tracking with source, timestamp, and file type information.",
    color: "text-teal-400",
    bgColor: "bg-teal-500/10",
  },
  {
    icon: RefreshCw,
    title: "Auto Updates",
    description: "Configurable scheduler with content hash comparison for change detection.",
    color: "text-pink-400",
    bgColor: "bg-pink-500/10",
  },
  {
    icon: Plug,
    title: "MCP Integration",
    description: "Local stdio transport or remote HTTP/SSE for flexible deployment.",
    color: "text-indigo-400",
    bgColor: "bg-indigo-500/10",
  },
  {
    icon: Database,
    title: "Flexible Storage",
    description: "Organized storage for docs, vector embeddings, and metadata tracking.",
    color: "text-yellow-400",
    bgColor: "bg-yellow-500/10",
  },
  {
    icon: BarChart3,
    title: "Quality Scorecard",
    description: "Built-in code quality analysis with severity-based scoring system.",
    color: "text-red-400",
    bgColor: "bg-red-500/10",
  },
  {
    icon: Zap,
    title: "Fast & Efficient",
    description: "Parallel scraping workers with configurable concurrency and rate limiting.",
    color: "text-amber-400",
    bgColor: "bg-amber-500/10",
  },
  {
    icon: Shield,
    title: "Two Modes",
    description: "Local mode for single developers, remote mode for teams and multi-project.",
    color: "text-emerald-400",
    bgColor: "bg-emerald-500/10",
  },
]

export function Features() {
  return (
    <section id="features" className="relative py-24 md:py-32 overflow-hidden">
      {/* Background Elements */}
      <div className="absolute inset-0 grid-background opacity-50" />
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-cyan-500/5 rounded-full blur-3xl" />

      <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">
              Powerful <GradientText>Features</GradientText>
            </h2>
          </FadeIn>
          <FadeIn delay={0.1}>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Everything you need to manage context for AI-powered development
            </p>
          </FadeIn>
        </div>

        {/* Features Grid */}
        <StaggerContainer className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6" staggerDelay={0.05}>
          {features.map((feature, index) => (
            <StaggerItem key={index}>
              <motion.div
                whileHover={{ scale: 1.02, y: -4 }}
                transition={{ duration: 0.2 }}
                className="group relative h-full p-6 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"
              >
                {/* Glow Effect on Hover */}
                <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-cyan-500/0 via-cyan-500/5 to-teal-500/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

                {/* Icon */}
                <div className={`relative inline-flex p-3 rounded-lg ${feature.bgColor} mb-4`}>
                  <feature.icon className={`w-5 h-5 ${feature.color}`} />
                </div>

                {/* Content */}
                <h3 className="relative text-lg font-semibold mb-2 group-hover:text-cyan-400 transition-colors">
                  {feature.title}
                </h3>
                <p className="relative text-sm text-muted-foreground leading-relaxed">
                  {feature.description}
                </p>

                {/* Bottom Gradient Line */}
                <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-cyan-500/0 to-transparent group-hover:via-cyan-500/50 transition-all duration-300" />
              </motion.div>
            </StaggerItem>
          ))}
        </StaggerContainer>

        {/* Bottom CTA */}
        <FadeIn delay={0.4}>
          <div className="text-center mt-16">
            <p className="text-muted-foreground mb-4">
              Ready to supercharge your AI context?
            </p>
            <div className="inline-flex items-center gap-2 text-cyan-400 hover:text-cyan-300 transition-colors cursor-pointer group">
              <span>View all features</span>
              <motion.span
                initial={{ x: 0 }}
                whileHover={{ x: 4 }}
                className="inline-block"
              >
                →
              </motion.span>
            </div>
          </div>
        </FadeIn>
      </div>
    </section>
  )
}