import { motion } from "framer-motion"
import { ArrowLeft, ExternalLink } from "lucide-react"
import { Link } from "react-router-dom"
import { TopNav } from "@/components/layout/TopNav"
import { Footer } from "@/components/sections/Footer"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { FadeIn, GradientText } from "@/components/ui/magicui"
import { documentationResources } from "@/data/documentationResources"

export function DocumentationPage() {
  return (
    <div className="relative z-10">
      <section className="relative min-h-screen py-24 md:py-32 overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-b from-background via-cyan-950/10 to-background" />
        <div className="absolute inset-0 grid-background opacity-30" />
        <TopNav />

        <div className="container relative z-10 px-4 md:px-6 pt-20 md:pt-24">
          <div className="max-w-3xl mx-auto text-center mb-12 md:mb-16">
            <FadeIn>
              <Badge variant="glow" className="mb-4">
                Documentation
              </Badge>
            </FadeIn>
            <FadeIn delay={0.1}>
              <h1 className="text-3xl md:text-5xl font-bold mb-4">
                Devour Documentation <GradientText>Toolkit</GradientText>
              </h1>
            </FadeIn>
            <FadeIn delay={0.2}>
              <p className="text-lg text-muted-foreground">
                Three resources that power a modern docs stack for Devour.
              </p>
            </FadeIn>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6 max-w-6xl mx-auto">
            {documentationResources.map((resource, index) => (
              <FadeIn key={resource.name} delay={0.1 + index * 0.1}>
                <motion.article
                  whileHover={{ y: -6, scale: 1.01 }}
                  transition={{ duration: 0.2 }}
                  className="h-full p-6 md:p-7 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 flex flex-col"
                >
                  <p className="text-xs uppercase tracking-wide text-cyan-400/80 mb-3">
                    Resource {index + 1}
                  </p>
                  <h2 className="text-xl font-semibold mb-3 text-cyan-400">
                    {resource.name}
                  </h2>
                  <p className="text-sm text-muted-foreground leading-relaxed mb-6 flex-1">
                    {resource.description}
                  </p>

                  <Button asChild variant="outline" className="w-fit">
                    <a
                      href={resource.url}
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      Open
                      <ExternalLink className="ml-2 h-4 w-4" />
                    </a>
                  </Button>
                </motion.article>
              </FadeIn>
            ))}
          </div>

          <FadeIn delay={0.5}>
            <div className="mt-12 text-center">
              <Button size="lg" variant="glow" asChild>
                <Link to="/">
                  <ArrowLeft className="mr-2 h-4 w-4" />
                  Back to Home
                </Link>
              </Button>
            </div>
          </FadeIn>
        </div>
      </section>

      <Footer />
    </div>
  )
}
