import { Github, Twitter, Book, Heart } from "lucide-react"
import { FadeIn } from "@/components/ui/magicui"

const links = {
  product: [
    { label: "Features", href: "#features" },
    { label: "Quick Start", href: "#quickstart" },
    { label: "Languages", href: "#languages" },
    { label: "Architecture", href: "#architecture" },
  ],
  resources: [
    { label: "Documentation", href: "/documentation" },
    { label: "API Reference", href: "#" },
    { label: "Examples", href: "#" },
    { label: "Changelog", href: "#" },
  ],
  community: [
    { label: "GitHub", href: "https://github.com/yourorg/devour" },
    { label: "Discord", href: "#" },
    { label: "Twitter", href: "#" },
    { label: "Contributing", href: "#" },
  ],
}

export function Footer() {
  return (
    <footer className="relative border-t border-white/10 bg-black/20">
      {/* Background */}
      <div className="absolute inset-0 grid-background opacity-20" />

      <div className="container relative z-10 px-4 md:px-6 py-8 sm:py-12 md:py-16">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6 lg:gap-8 lg:gap-12">
          {/* Brand */}
          <div className="lg:col-span-2">
            <FadeIn>
              <div className="flex items-center gap-3 mb-4">
                <img
                  src="/devour_logo.svg"
                  alt="Devour Logo"
                  className="w-10 h-10"
                />
                <span className="text-xl font-bold">Devour</span>
              </div>
              <p className="text-sm text-muted-foreground mb-6 max-w-xs">
                Context ingestion and management for AI. Feed structured, relevant 
                context to AI models for generating accurate, fully working code.
              </p>
              <div className="flex gap-4">
                <a
                  href="https://github.com/yourorg/devour"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="p-2 rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 hover:border-cyan-500/30 transition-all"
                >
                  <Github className="w-5 h-5" />
                </a>
                <a
                  href="#"
                  className="p-2 rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 hover:border-cyan-500/30 transition-all"
                >
                  <Twitter className="w-5 h-5" />
                </a>
                <a
                  href="#"
                  className="p-2 rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 hover:border-cyan-500/30 transition-all"
                >
                  <Book className="w-5 h-5" />
                </a>
              </div>
            </FadeIn>
          </div>

          {/* Product Links */}
          <div>
            <FadeIn delay={0.1}>
              <h4 className="font-semibold mb-4 text-cyan-400">Product</h4>
              <ul className="space-y-3">
                {links.product.map((link, i) => (
                  <li key={i}>
                    <a
                      href={link.href}
                      className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                    >
                      {link.label}
                    </a>
                  </li>
                ))}
              </ul>
            </FadeIn>
          </div>

          {/* Resources Links */}
          <div>
            <FadeIn delay={0.2}>
              <h4 className="font-semibold mb-4 text-cyan-400">Resources</h4>
              <ul className="space-y-3">
                {links.resources.map((link, i) => (
                  <li key={i}>
                    <a
                      href={link.href}
                      className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                    >
                      {link.label}
                    </a>
                  </li>
                ))}
              </ul>
            </FadeIn>
          </div>

          {/* Community Links */}
          <div>
            <FadeIn delay={0.3}>
              <h4 className="font-semibold mb-4 text-cyan-400">Community</h4>
              <ul className="space-y-3">
                {links.community.map((link, i) => (
                  <li key={i}>
                    <a
                      href={link.href}
                      target={link.href.startsWith("http") ? "_blank" : undefined}
                      rel={link.href.startsWith("http") ? "noopener noreferrer" : undefined}
                      className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                    >
                      {link.label}
                    </a>
                  </li>
                ))}
              </ul>
            </FadeIn>
          </div>
        </div>

        {/* Bottom Bar */}
        <FadeIn delay={0.4}>
          <div className="mt-12 pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-4">
            <p className="text-sm text-muted-foreground">
              © {new Date().getFullYear()} Devour. MIT License.
            </p>
            <p className="text-sm text-muted-foreground flex items-center gap-1">
              Built with <Heart className="w-4 h-4 text-red-400 fill-red-400" /> for better AI context
            </p>
          </div>
        </FadeIn>
      </div>

      {/* Gradient Line */}
      <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-cyan-500/50 to-transparent" />
    </footer>
  )
}
