import { Link, Github, Twitter, Heart } from 'lucide-react'

export default function Footer() {
  return (
    <footer className="relative border-t border-slate-800/50 bg-slate-950">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="grid md:grid-cols-4 gap-8 mb-8">
          <div className="md:col-span-2">
            <div className="flex items-center gap-2.5 mb-4">
              <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center">
                <Link className="w-4 h-4 text-white" />
              </div>
              <span className="text-lg font-bold">
                sh0rtl<span className="text-emerald-400">.ink</span>
              </span>
            </div>
            <p className="text-sm text-slate-500 max-w-sm leading-relaxed">
              The modern URL shortener built for speed, security, and insights.
              Create powerful short links with advanced tracking and protection.
            </p>
          </div>
          <div>
            <h4 className="text-sm font-semibold text-slate-200 mb-4">Product</h4>
            <ul className="space-y-3">
              <li><a href="#shorten" className="text-sm text-slate-500 hover:text-emerald-400 transition-colors">Shortener</a></li>
              <li><a href="#features" className="text-sm text-slate-500 hover:text-emerald-400 transition-colors">Features</a></li>
              <li><a href="#analytics" className="text-sm text-slate-500 hover:text-emerald-400 transition-colors">Analytics</a></li>
            </ul>
          </div>
          <div>
            <h4 className="text-sm font-semibold text-slate-200 mb-4">Company</h4>
            <ul className="space-y-3">
              <li><a href="/about" className="text-sm text-slate-500 hover:text-emerald-400 transition-colors">About</a></li>
              <li><a href="/contact" className="text-sm text-slate-500 hover:text-emerald-400 transition-colors">Contact</a></li>
              <li><a href="/privacy" className="text-sm text-slate-500 hover:text-emerald-400 transition-colors">Privacy</a></li>
              <li><a href="/terms" className="text-sm text-slate-500 hover:text-emerald-400 transition-colors">Terms</a></li>
            </ul>
          </div>
          <div>
            <h4 className="text-sm font-semibold text-slate-200 mb-4">Follow Us</h4>
            <ul className="space-y-3">
              <li><a href="https://github.com/sh0rtl-ink" className="text-sm text-slate-500 hover:text-emerald-400 transition-colors">GitHub</a></li>
              <li><a href="https://twitter.com/sh0rtl-ink" className="text-sm text-slate-500 hover:text-emerald-400 transition-colors">Twitter</a></li>
              <li><a href="https://instagram.com/sh0rtl-ink" className="text-sm text-slate-500 hover:text-emerald-400 transition-colors">Instagram</a></li>
            </ul>
          </div>
        </div>
        <div className="border-t border-slate-800/50 pt-8">
          <p className="text-sm text-slate-500">© {new Date().getFullYear()} sh0rtl.ink. All rights reserved.</p>
        </div>
      </div>
    </footer>
  )
}