import { Link } from "react-router-dom";
import { Separator } from "@/components/ui/separator";

const footerLinks = {
  shop: [
    { label: "New Arrivals", to: "/products" },
    { label: "Best Sellers", to: "/products" },
    { label: "Sale", to: "/products" },
    { label: "Collections", to: "/products" },
  ],
  help: [
    { label: "Customer Service", to: "/" },
    { label: "Size Guide", to: "/" },
    { label: "Shipping & Returns", to: "/" },
    { label: "FAQ", to: "/" },
  ],
  about: [
    { label: "Our Story", to: "/" },
    { label: "Sustainability", to: "/" },
    { label: "Careers", to: "/" },
    { label: "Press", to: "/" },
  ],
};

export default function Footer() {
  return (
    <footer className="bg-stone-900 text-white">
      <div className="mx-auto max-w-7xl px-6 py-16">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-10">
          {/* Brand */}
          <div className="col-span-2 md:col-span-1">
            <h3 className="text-lg font-bold mb-4">StyleHaus</h3>
            <p className="text-sm text-stone-400 leading-relaxed">
              Discover curated collections of premium fashion, accessories, and lifestyle essentials crafted for the modern individual.
            </p>
          </div>

          {/* Shop */}
          <div>
            <h4 className="font-semibold text-sm mb-4 text-stone-300 uppercase tracking-wider">Shop</h4>
            <ul className="space-y-3">
              {footerLinks.shop.map((link) => (
                <li key={link.label}>
                  <Link to={link.to} className="text-sm text-stone-400 hover:text-white transition-colors">{link.label}</Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Help */}
          <div>
            <h4 className="font-semibold text-sm mb-4 text-stone-300 uppercase tracking-wider">Help</h4>
            <ul className="space-y-3">
              {footerLinks.help.map((link) => (
                <li key={link.label}>
                  <Link to={link.to} className="text-sm text-stone-400 hover:text-white transition-colors">{link.label}</Link>
                </li>
              ))}
            </ul>
          </div>

          {/* About */}
          <div>
            <h4 className="font-semibold text-sm mb-4 text-stone-300 uppercase tracking-wider">About</h4>
            <ul className="space-y-3">
              {footerLinks.about.map((link) => (
                <li key={link.label}>
                  <Link to={link.to} className="text-sm text-stone-400 hover:text-white transition-colors">{link.label}</Link>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <Separator className="my-10 bg-stone-800" />

        {/* Payment & Copyright */}
        <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
          <p className="text-xs text-stone-500">
            &copy; 2024 StyleHaus. All rights reserved.
          </p>
          <div className="flex items-center gap-3">
            {["Visa", "Mastercard", "Amex", "PayPal", "Apple Pay"].map((method) => (
              <span key={method} className="text-xs text-stone-500 bg-stone-800 px-2 py-1 rounded">
                {method}
              </span>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}