import { motion } from "framer-motion"
import { Github, Terminal, Sparkles, ArrowRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { GradientText, FadeIn } from "@/components/ui/magicui"
import { TopNav } from "@/components/layout/TopNav"

export function Hero() {
  return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
      {/* Gradient Orbs */}
      <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-cyan-500/20 rounded-full blur-3xl animate-pulse" />
      <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-teal-500/20 rounded-full blur-3xl animate-pulse delay-1000" />
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-cyan-500/10 rounded-full blur-3xl" />

      <TopNav />

      <div className="container relative z-10 px-4 md:px-6">
        <div className="flex flex-col items-center text-center space-y-8">
          {/* Badge */}
          <FadeIn delay={0.1}>
            <Badge variant="glow" className="px-4 py-1.5 text-sm">
              <Sparkles className="w-3.5 h-3.5 mr-1.5" />
              Context Ingestion for AI
            </Badge>
          </FadeIn>

          {/* Logo */}
          <FadeIn delay={0.2}>
            <motion.div
              initial={{ scale: 0.8, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              transition={{ duration: 0.6, delay: 0.3 }}
              className="relative"
            >
              <div className="absolute inset-0 bg-cyan-500/20 blur-2xl rounded-full scale-150" />
              <img
                src="/devour_logo.svg"
                alt="Devour Logo"
                className="relative w-24 h-24 sm:w-32 sm:h-32 md:w-40 md:h-40 drop-shadow-2xl"
              />
            </motion.div>
          </FadeIn>

          {/* Title */}
          <FadeIn delay={0.3}>
            <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight">
              <GradientText>Devour</GradientText>
            </h1>
          </FadeIn>

          {/* Subtitle */}
          <FadeIn delay={0.4}>
            <p className="text-lg sm:text-xl md:text-2xl text-muted-foreground max-w-2xl">
              Context Ingestion & Management for{" "}
              <span className="text-cyan-400">AI</span>
            </p>
          </FadeIn>

          {/* Description */}
          <FadeIn delay={0.5}>
            <p className="text-sm sm:text-base md:text-lg text-muted-foreground/80 max-w-3xl leading-relaxed px-4 sm:px-0">
              Scrape, index, and serve documentation from multiple sources.
              Feed structured, relevant context to AI models for generating
              accurate, fully working code.
            </p>
          </FadeIn>

          {/* CTA Buttons */}
          <FadeIn delay={0.6}>
            <div className="flex flex-col sm:flex-row gap-4 mt-4">
              <Button size="xl" variant="glow" className="group">
                <Terminal className="mr-2 h-4 w-4" />
                Get Started
                <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
              </Button>
              <Button size="xl" variant="outline" asChild>
                <a
                  href="https://github.com/yourorg/devour"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <Github className="mr-2 h-4 w-4" />
                  View on GitHub
                </a>
              </Button>
            </div>
          </FadeIn>

          {/* Quick Stats */}
          <FadeIn delay={0.7}>
            <div className="flex flex-wrap justify-center gap-8 mt-8 text-sm text-muted-foreground">
              <div className="flex items-center gap-2">
                <div className="w-2 h-2 rounded-full bg-cyan-500 animate-pulse" />
                <span>Multi-Source Scraping</span>
              </div>
              <div className="flex items-center gap-2">
                <div className="w-2 h-2 rounded-full bg-teal-500 animate-pulse" />
                <span>Vector Embeddings</span>
              </div>
              <div className="flex items-center gap-2">
                <div className="w-2 h-2 rounded-full bg-cyan-400 animate-pulse" />
                <span>MCP Integration</span>
              </div>
            </div>
          </FadeIn>

          {/* Terminal Preview */}
          <FadeIn delay={0.8}>
            <div className="w-full max-w-3xl mt-8 sm:mt-12">
              <div className="relative rounded-xl border border-white/10 bg-black/40 backdrop-blur-sm overflow-hidden">
                {/* Terminal Header */}
                <div className="flex items-center gap-2 px-3 sm:px-4 py-2 sm:py-3 border-b border-white/10 bg-white/5">
                  <div className="flex gap-1.5">
                    <div className="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-red-500/80" />
                    <div className="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-yellow-500/80" />
                    <div className="w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-green-500/80" />
                  </div>
                  <span className="text-xs text-muted-foreground ml-2">terminal</span>
                </div>
                {/* Terminal Content */}
                <div className="p-3 sm:p-4 font-mono text-xs sm:text-sm">
                  <div className="text-muted-foreground">$ devour get go http</div>
                  <div className="mt-1 sm:mt-2 text-cyan-400">
                    <span className="text-green-400">✓</span> Fetching Go net/http documentation...
                  </div>
                  <div className="mt-0.5 sm:mt-1 text-muted-foreground/80">
                    <span className="text-cyan-500">→</span> Indexing 47 documents
                  </div>
                  <div className="mt-0.5 sm:mt-1 text-muted-foreground/80">
                    <span className="text-cyan-500">→</span> Creating vector embeddings
                  </div>
                  <div className="mt-1 sm:mt-2 text-green-400">
                    Ready! Query with: devour query "How to create a server?"
                  </div>
                </div>
                {/* Glow Effect */}
                <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-cyan-500 to-transparent" />
              </div>
            </div>
          </FadeIn>
        </div>
      </div>

      {/* Scroll Indicator */}
      <motion.div
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 1.2, duration: 0.6 }}
        className="absolute bottom-8 left-1/2 -translate-x-1/2"
      >
        <motion.div
          animate={{ y: [0, 8, 0] }}
          transition={{ duration: 1.5, repeat: Infinity }}
          className="w-6 h-10 rounded-full border-2 border-muted-foreground/30 flex items-start justify-center p-1"
        >
          <div className="w-1.5 h-2.5 rounded-full bg-cyan-500" />
        </motion.div>
      </motion.div>
    </section>
  )
}
