import { Link } from "react-router-dom";
import { Flame, Mail, Phone, MapPin } from "lucide-react";

const Footer = () => {
  return (
    <footer className="bg-[#141414] border-t border-[#333]">
      <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10">
          {/* Brand */}
          <div className="sm:col-span-2 lg:col-span-1">
            <Link to="/" className="flex items-center gap-2 mb-4">
              <Flame className="w-7 h-7 text-[#d35400]" />
              <div className="flex flex-col leading-none">
                <span className="font-oswald text-xl font-bold text-white tracking-wider uppercase">
                  GrillMaster
                </span>
                <span className="font-oswald text-[10px] font-light text-[#d35400] tracking-[0.3em] uppercase">
                  Pro
                </span>
              </div>
            </Link>
            <p className="font-inter text-sm text-[#888] leading-relaxed mb-6 max-w-xs">
              Premium outdoor cooking equipment for enthusiasts and professional
              pitmasters. Quality you can trust since 2010.
            </p>
            <div className="flex gap-3">
              {["Facebook", "Instagram", "YouTube", "X"].map((social) => (
                <a
                  key={social}
                  href="#"
                  className="w-9 h-9 rounded bg-[#2b2b2b] border border-[#444] flex items-center justify-center text-[#888] hover:text-[#d35400] hover:border-[#d35400] transition-all text-xs font-oswald font-bold"
                  aria-label={social}
                >
                  {social[0]}
                </a>
              ))}
            </div>
          </div>

          {/* Shop */}
          <div>
            <h4 className="font-oswald text-base font-bold text-white uppercase tracking-wider mb-5">
              Shop
            </h4>
            <ul className="space-y-3">
              {[
                { label: "All Products", to: "/products" },
                { label: "Ceramic Grills", to: "/products?category=ceramic-grills" },
                { label: "Gas & Charcoal BBQs", to: "/products?category=gas-charcoal-bbqs" },
                { label: "Smoker Boxes", to: "/products?category=smoker-boxes" },
                { label: "Premium Knives", to: "/products?category=premium-knives" },
                { label: "Cast Iron Cookware", to: "/products?category=cast-iron-cookware" },
                { label: "Wood & Charcoal", to: "/products?category=wood-charcoal" },
              ].map((link) => (
                <li key={link.label}>
                  <Link
                    to={link.to}
                    className="font-inter text-sm text-[#888] hover:text-[#d35400] transition-colors"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Customer Service */}
          <div>
            <h4 className="font-oswald text-base font-bold text-white uppercase tracking-wider mb-5">
              Customer Service
            </h4>
            <ul className="space-y-3">
              <li>
                <span className="font-inter text-sm text-[#888] block">Shipping & Delivery</span>
                <span className="font-inter text-xs text-[#555]">Heavy-item & white-glove options</span>
              </li>
              <li>
                <span className="font-inter text-sm text-[#888] block">Assembly Services</span>
                <span className="font-inter text-xs text-[#555]">Professional setup available</span>
              </li>
              <li>
                <span className="font-inter text-sm text-[#888] block">Warranty Information</span>
                <span className="font-inter text-xs text-[#555]">Official manufacturer warranty</span>
              </li>
              <li>
                <span className="font-inter text-sm text-[#888] block">Refund & Return Policy</span>
                <span className="font-inter text-xs text-[#555]">30-day return window</span>
              </li>
              <li>
                <Link to="/privacy" className="font-inter text-sm text-[#888] hover:text-[#d35400] transition-colors">Privacy Policy</Link>
              </li>
              <li>
                <Link to="/terms" className="font-inter text-sm text-[#888] hover:text-[#d35400] transition-colors">Terms of Service</Link>
              </li>
              <li>
                <Link to="/about" className="font-inter text-sm text-[#888] hover:text-[#d35400] transition-colors">About Us</Link>
              </li>
              <li>
                <Link to="/contact" className="font-inter text-sm text-[#888] hover:text-[#d35400] transition-colors">Contact Us</Link>
              </li>
            </ul>
          </div>

          {/* Contact */}
          <div>
            <h4 className="font-oswald text-base font-bold text-white uppercase tracking-wider mb-5">
              Contact Us
            </h4>
            <ul className="space-y-4">
              <li className="flex items-start gap-3">
                <MapPin className="w-5 h-5 text-[#d35400] shrink-0 mt-0.5" />
                <div>
                  <p className="font-inter text-sm text-[#b0b0b0]">GrillMaster Pro Showroom</p>
                  <p className="font-inter text-sm text-[#888]">1250 Firewood Lane, Austin, TX 78701</p>
                </div>
              </li>
              <li className="flex items-center gap-3">
                <Phone className="w-5 h-5 text-[#d35400] shrink-0" />
                <a href="tel:+18005551234" className="font-inter text-sm text-[#b0b0b0] hover:text-[#d35400] transition-colors">
                  1-800-555-1234
                </a>
              </li>
              <li className="flex items-center gap-3">
                <Mail className="w-5 h-5 text-[#d35400] shrink-0" />
                <a href="mailto:support@grillmasterpro.com" className="font-inter text-sm text-[#b0b0b0] hover:text-[#d35400] transition-colors">
                  support@grillmasterpro.com
                </a>
              </li>
            </ul>

            <div className="mt-6">
              <h5 className="font-oswald text-sm font-bold text-white uppercase tracking-wider mb-3">
                Newsletter
              </h5>
              <div className="flex gap-2">
                <input
                  type="email"
                  placeholder="Your email"
                  className="flex-1 bg-[#2b2b2b] border border-[#444] rounded px-3 py-2 text-sm text-white placeholder:text-[#666] focus:outline-none focus:border-[#d35400] transition-colors"
                />
                <button className="bg-[#d35400] hover:bg-[#e67e22] text-white font-oswald text-xs font-semibold uppercase tracking-wider px-4 py-2 rounded transition-colors shrink-0">
                  Join
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Bottom Bar */}
      <div className="border-t border-[#2b2b2b]">
        <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-5">
          <div className="flex flex-col sm:flex-row items-center justify-between gap-3">
            <p className="font-inter text-xs text-[#666]">
              © 2026 GrillMaster Pro. All rights reserved.
            </p>
            <div className="flex items-center gap-4">
              <Link to="/privacy" className="font-inter text-xs text-[#666] hover:text-[#d35400] transition-colors">Privacy Policy</Link>
              <Link to="/terms" className="font-inter text-xs text-[#666] hover:text-[#d35400] transition-colors">Terms of Service</Link>
              <Link to="/terms" className="font-inter text-xs text-[#666] hover:text-[#d35400] transition-colors">Refund Policy</Link>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;