import { Usb } from "lucide-react"
import { Button } from "@/components/ui/button"

export function Footer() {
  return (
    <footer className="bg-black text-white py-20">
      <div className="container px-4">
        <div className="max-w-6xl mx-auto">
          <div className="grid md:grid-cols-2 gap-12 items-center pb-12 border-b border-white/10">
            <div className="space-y-6">
              <div className="flex items-center gap-3">
                <Usb className="w-8 h-8" />
                <span className="font-mono text-2xl tracking-wider">ALLTOR.NET</span>
              </div>
              <p className="text-white/70 text-lg leading-relaxed">
                Building the alternative internet. Distributed. Democratic. Free.
              </p>
            </div>

            <div className="space-y-6">
              <h3 className="text-2xl font-bold text-balance">Ready to break free?</h3>
              <Button size="lg" className="bg-white text-black hover:bg-white/90 text-lg px-8">
                Join the Movement
              </Button>
            </div>
          </div>

          <div className="pt-12 grid sm:grid-cols-3 gap-8">
            <div>
              <h4 className="font-bold mb-4">Learn</h4>
              <ul className="space-y-2 text-white/70">
                <li>
                  <a href="#" className="hover:text-white transition-colors">
                    Documentation
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-white transition-colors">
                    Whitepaper
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-white transition-colors">
                    Technical Specs
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-white transition-colors">
                    FAQ
                  </a>
                </li>
              </ul>
            </div>

            <div>
              <h4 className="font-bold mb-4">Community</h4>
              <ul className="space-y-2 text-white/70">
                <li>
                  <a href="#" className="hover:text-white transition-colors">
                    Forum
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-white transition-colors">
                    Chat
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-white transition-colors">
                    Events
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-white transition-colors">
                    Contribute
                  </a>
                </li>
              </ul>
            </div>

            <div>
              <h4 className="font-bold mb-4">Connect</h4>
              <ul className="space-y-2 text-white/70">
                <li>
                  <a href="#" className="hover:text-white transition-colors">
                    Mastodon
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-white transition-colors">
                    Matrix
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-white transition-colors">
                    Newsletter
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-white transition-colors">
                    Contact
                  </a>
                </li>
              </ul>
            </div>
          </div>

          <div className="pt-12 mt-12 border-t border-white/10 text-center text-white/50 text-sm">
            <p>Built by the community, for the community. No corporation. No venture capital. Just humans.</p>
          </div>
        </div>
      </div>
    </footer>
  )
}