import React from "react";

const Footer = () => {
  return (
    <footer className="bg-secondary text-white py-20 mt-auto border-t border-white/5">
      <div className="container mx-auto px-6">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
          <div className="col-span-1 md:col-span-2">
            <h2 className="text-3xl font-bold font-outfit mb-6 text-primary">
              TableReserve
            </h2>
            <p className="text-gray-400 text-lg max-w-sm mb-8">
              Redefining the way you experience fine dining. Book your favorite
              tables across the globe with just a few clicks.
            </p>
          </div>
          <div>
            <h4 className="text-xl font-bold font-outfit mb-6">Quick Links</h4>
            <ul className="space-y-4 text-gray-400">
              <li>
                <a href="/" className="hover:text-primary transition-colors">
                  Find Restaurants
                </a>
              </li>
              <li>
                <a
                  href="/login"
                  className="hover:text-primary transition-colors"
                >
                  Sign In
                </a>
              </li>
              <li>
                <a
                  href="/owner"
                  className="hover:text-primary transition-colors"
                >
                  Restaurant Owner
                </a>
              </li>
              <li>
                <a href="#" className="hover:text-primary transition-colors">
                  Our Story
                </a>
              </li>
            </ul>
          </div>
          <div>
            <h4 className="text-xl font-bold font-outfit mb-6">Follow Us</h4>
            <div className="flex gap-4">
              {/* Placeholders for social icons */}
              <div className="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-primary transition-all cursor-pointer">
                In
              </div>
              <div className="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-primary transition-all cursor-pointer">
                Tw
              </div>
              <div className="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-primary transition-all cursor-pointer">
                Fb
              </div>
            </div>
          </div>
        </div>
        <div className="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-gray-500 text-sm">
          <p>© 2026 TableReserve. All rights reserved.</p>
          <div className="flex gap-8">
            <a href="#" className="hover:text-white transition-colors">
              Terms of Service
            </a>
            <a href="#" className="hover:text-white transition-colors">
              Privacy Policy
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;
