import { motion } from "framer-motion"
import { Download, Terminal, Copy, Check, ArrowRight } from "lucide-react"
import { GradientText, FadeIn } from "@/components/ui/magicui"
import { Button } from "@/components/ui/button"
import { useState } from "react"

const steps = [
  {
    number: "01",
    title: "Install",
    description: "Install Devour using Go",
    command: "go install github.com/yourorg/devour/cmd/devour@latest",
  },
  {
    number: "02",
    title: "Initialize",
    description: "Create a configuration file",
    command: "devour init",
  },
  {
    number: "03",
    title: "Get Docs",
    description: "Fetch documentation",
    command: "devour get go http",
  },
  {
    number: "04",
    title: "Query",
    description: "Search your documentation",
    command: 'devour query "How to create a server?"',
  },
]

export function QuickStart() {
  const [copiedStep, setCopiedStep] = useState<number | null>(null)

  const copyToClipboard = async (text: string, stepIndex: number) => {
    await navigator.clipboard.writeText(text)
    setCopiedStep(stepIndex)
    setTimeout(() => setCopiedStep(null), 2000)
  }

  return (
    <section id="quickstart" className="relative py-24 md:py-32 overflow-hidden">
      {/* Background */}
      <div className="absolute inset-0 grid-background opacity-30" />
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-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">
              Quick <GradientText>Start</GradientText>
            </h2>
          </FadeIn>
          <FadeIn delay={0.1}>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Get up and running in minutes with just a few commands
            </p>
          </FadeIn>
        </div>

        {/* Steps */}
        <div className="max-w-4xl mx-auto">
          <div className="grid gap-4 sm:gap-6">
            {steps.map((step, index) => (
              <FadeIn key={index} delay={0.1 + index * 0.1}>
                <motion.div
                  whileHover={{ scale: 1.01 }}
                  className="group relative flex flex-col lg:flex-row lg:items-center gap-4 p-4 sm: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"
                >
                  {/* Step Number */}
                  <div className="flex-shrink-0 w-12 h-12 sm:w-16 sm:h-16 flex items-center justify-center rounded-xl bg-gradient-to-br from-cyan-500/20 to-teal-500/20 border border-cyan-500/30">
                    <span className="text-lg sm:text-2xl font-bold text-cyan-400">{step.number}</span>
                  </div>

                  {/* Content */}
                  <div className="flex-1">
                    <h3 className="text-lg font-semibold mb-1 group-hover:text-cyan-400 transition-colors">
                      {step.title}
                    </h3>
                    <p className="text-sm text-muted-foreground mb-3">
                      {step.description}
                    </p>

                    {/* Command */}
                    <div className="relative flex items-center gap-2 p-2 sm:p-3 rounded-lg bg-black/40 border border-white/10 font-mono text-xs sm:text-sm">
                      <Terminal className="w-3 h-3 sm:w-4 sm:h-4 text-cyan-400 flex-shrink-0" />
                      <code className="flex-1 text-muted-foreground overflow-x-auto">
                        <span className="text-green-400">$</span> {step.command}
                      </code>
                      <button
                        onClick={() => copyToClipboard(step.command, index)}
                        className="flex-shrink-0 p-1.5 rounded hover:bg-white/10 transition-colors"
                      >
                        {copiedStep === index ? (
                          <Check className="w-3 h-3 sm:w-4 sm:h-4 text-green-400" />
                        ) : (
                          <Copy className="w-3 h-3 sm:w-4 sm:h-4 text-muted-foreground hover:text-foreground" />
                        )}
                      </button>
                    </div>
                  </div>

                  {/* Arrow (except last) */}
                  {index < steps.length - 1 && (
                    <div className="hidden lg:flex absolute -bottom-4 sm:-bottom-6 left-1/2 -translate-x-1/2 z-10">
                      <ArrowRight className="w-3 h-3 sm:w-4 sm:h-4 text-cyan-500/50 rotate-90" />
                    </div>
                  )}
                </motion.div>
              </FadeIn>
            ))}
          </div>
        </div>

        {/* Prerequisites */}
        <FadeIn delay={0.5}>
          <div className="mt-16 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">
              <h4 className="font-semibold">Prerequisites</h4>
              <div className="flex flex-wrap justify-center gap-4 text-sm text-muted-foreground">
                <div className="flex items-center gap-2">
                  <div className="w-2 h-2 rounded-full bg-cyan-500" />
                  <span>Go 1.22+</span>
                </div>
                <div className="flex items-center gap-2">
                  <div className="w-2 h-2 rounded-full bg-teal-500" />
                  <span>OpenAI API key</span>
                </div>
              </div>
            </div>
          </div>
        </FadeIn>

        {/* CTA */}
        <FadeIn delay={0.6}>
          <div className="mt-12 text-center">
            <Button size="xl" variant="glow" className="group">
              <Download className="mr-2 h-4 w-4" />
              Install Devour
              <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
            </Button>
          </div>
        </FadeIn>
      </div>
    </section>
  )
}