import { motion } from "framer-motion"
import { ArrowRight, ExternalLink } from "lucide-react"
import { Link } from "react-router-dom"
import { Button } from "@/components/ui/button"
import { FadeIn, GradientText } from "@/components/ui/magicui"
import { documentationResources } from "@/data/documentationResources"

export function DocumentationPreview() {
  return (
    <section id="documentation" className="relative py-24 md:py-32 overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-b from-background via-cyan-950/5 to-background" />
      <div className="absolute inset-0 grid-background opacity-30" />

      <div className="container relative z-10 px-4 md:px-6">
        <div className="text-center mb-12 md:mb-16">
          <FadeIn>
            <h2 className="text-3xl md:text-5xl font-bold mb-4">
              Documentation <GradientText>Stack</GradientText>
            </h2>
          </FadeIn>
          <FadeIn delay={0.1}>
            <p className="text-lg text-muted-foreground max-w-3xl mx-auto">
              We use these tools to build fast, clean documentation experiences.
            </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.15 + index * 0.1}>
              <motion.article
                whileHover={{ y: -4, scale: 1.01 }}
                transition={{ duration: 0.2 }}
                className="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"
              >
                <h3 className="text-lg font-semibold mb-3 text-cyan-400">
                  {resource.name}
                </h3>
                <p className="text-sm text-muted-foreground leading-relaxed mb-5">
                  {resource.description}
                </p>
                <a
                  href={resource.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
                >
                  Visit resource
                  <ExternalLink className="w-3.5 h-3.5" />
                </a>
              </motion.article>
            </FadeIn>
          ))}
        </div>

        <FadeIn delay={0.55}>
          <div className="mt-10 md:mt-12 text-center">
            <Button size="xl" variant="glow" asChild className="group">
              <Link to="/documentation">
                Open Documentation Page
                <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
              </Link>
            </Button>
          </div>
        </FadeIn>
      </div>
    </section>
  )
}
