import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { MapPin, Clock, Phone, Mail, Instagram, Facebook, Twitter } from "lucide-react";

export default function Footer() {
  return (
    <footer className="bg-stone-950 text-stone-300 py-16 border-t border-stone-800">
      <div className="mx-auto max-w-7xl px-6">
        <div className="grid md:grid-cols-2 gap-12">
          <div>
            <div className="text-xl font-semibold tracking-widest uppercase text-white mb-6">Aurum</div>
            <div className="space-y-3 text-sm">
              <div className="flex items-start gap-3"><MapPin className="h-4 w-4 mt-0.5 text-amber-500" /><span>42 Golden Lane, Mayfair, London W1K 3AB</span></div>
              <div className="flex items-center gap-3"><Clock className="h-4 w-4 text-amber-500" /><span>Tue–Sat 6:00 PM – 11:00 PM</span></div>
              <div className="flex items-center gap-3"><Phone className="h-4 w-4 text-amber-500" /><span>+44 20 7946 0123</span></div>
              <div className="flex items-center gap-3"><Mail className="h-4 w-4 text-amber-500" /><span>reservations@aurum.com</span></div>
            </div>
          </div>
          <div className="flex flex-col items-start md:items-end justify-between">
            <div className="flex gap-4">
              {[Instagram, Facebook, Twitter].map((Icon, i) => (
                <a key={i} href="#" className="text-stone-400 hover:text-amber-400 transition-colors"><Icon className="h-5 w-5" /></a>
              ))}
            </div>
            <Button asChild className="mt-6 rounded-none bg-amber-700 hover:bg-amber-600 text-white tracking-widest uppercase text-xs px-8 active:scale-[0.98]">
              <Link to="/reservations">Book a Table</Link>
            </Button>
          </div>
        </div>
        <div className="mt-12 pt-8 border-t border-stone-800 text-center text-sm text-stone-500">© 2026 Aurum. All rights reserved.</div>
      </div>
    </footer>
  );
}