import { Link } from 'react-router-dom'

export default function Footer() {
  return (
    <footer className="bg-slate-900 border-t border-slate-800 mt-auto">
      <div className="max-w-7xl mx-auto px-6 py-12">
        <div className="flex flex-col md:flex-row gap-10 md:gap-16">
          <div className="shrink-0">
            <Link to="/" className="flex items-center gap-2.5 mb-3">
              <img src="/logo.png" alt="" className="h-6 w-6" aria-hidden="true" />
              <span className="font-semibold text-slate-100 tracking-tight">
                net<span className="text-sky-400">Ork</span>
              </span>
            </Link>
            <p className="text-sm text-slate-500">Self-hosted network orchestration</p>
          </div>

          <div className="grid grid-cols-3 gap-10 flex-1 text-sm">
            <div>
              <p className="font-medium text-slate-400 mb-3">Links</p>
              <ul className="space-y-2">
                <li><Link to="/features" className="text-slate-500 hover:text-slate-100 transition-colors">Features</Link></li>
                <li><Link to="/drivers" className="text-slate-500 hover:text-slate-100 transition-colors">Drivers</Link></li>
                <li><Link to="/plugins" className="text-slate-500 hover:text-slate-100 transition-colors">Plugins</Link></li>
              </ul>
            </div>
            <div>
              <p className="font-medium text-slate-400 mb-3">Resources</p>
              <ul className="space-y-2">
                <li><Link to="/docs/getting-started" className="text-slate-500 hover:text-slate-100 transition-colors">Getting Started</Link></li>
                <li><Link to="/docs/architecture" className="text-slate-500 hover:text-slate-100 transition-colors">Architecture</Link></li>
                <li><span className="text-slate-600">Changelog</span></li>
              </ul>
            </div>
            <div>
              <p className="font-medium text-slate-400 mb-3">Legal</p>
              <ul className="space-y-2">
                <li><span className="text-slate-600">MIT License</span></li>
                <li><span className="text-slate-600">Privacy (none collected)</span></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </footer>
  )
}