import { Container } from "@/components/container";
import Link from "next/link";

export function Footer() {
  return (
    <footer className="bg-neutral-900 text-neutral-300 pt-16 pb-8">
      <Container>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">
          <div>
            <h3 className="text-white text-lg font-bold mb-6">WORLDWIDE SHOPPERS</h3>
            <p className="text-sm leading-relaxed mb-6">
              Your premier destination for discovering the best products from global marketplaces. We curate the finest deals so you don't have to.
            </p>
            <div className="p-4 bg-neutral-800 rounded-lg border border-neutral-700">
              <p className="text-xs font-medium text-neutral-400 uppercase mb-2">Affiliate Disclosure</p>
              <p className="text-xs leading-tight">
                WORLDWIDE SHOPPERS earns commissions from qualifying purchases made through our links. This helps us keep the site running at no extra cost to you.
              </p>
            </div>
          </div>

          <div>
            <h4 className="text-white font-bold mb-6">Quick Links</h4>
            <ul className="space-y-4 text-sm">
              <li><Link href="/" className="hover:text-orange-500 transition-colors">Home</Link></li>
              <li><Link href="/about" className="hover:text-orange-500 transition-colors">About Us</Link></li>
              <li><Link href="/contact" className="hover:text-orange-500 transition-colors">Contact</Link></li>
              <li><Link href="/privacy" className="hover:text-orange-500 transition-colors">Privacy Policy</Link></li>
            </ul>
          </div>

          <div>
            <h4 className="text-white font-bold mb-6">Categories</h4>
            <ul className="space-y-4 text-sm">
              <li><Link href="/category/electronics" className="hover:text-orange-500 transition-colors">Electronics</Link></li>
              <li><Link href="/category/fashion" className="hover:text-orange-500 transition-colors">Fashion</Link></li>
              <li><Link href="/category/home" className="hover:text-orange-500 transition-colors">Home & Living</Link></li>
              <li><Link href="/category/beauty" className="hover:text-orange-500 transition-colors">Beauty & Health</Link></li>
            </ul>
          </div>

          <div>
            <h4 className="text-white font-bold mb-6">Newsletter</h4>
            <p className="text-sm mb-4">Subscribe to get the latest deals delivered to your inbox.</p>
            <div className="flex gap-2">
              <input
                type="email"
                placeholder="Your email"
                className="bg-neutral-800 border-neutral-700 rounded px-4 py-2 text-sm w-full focus:outline-none focus:ring-1 focus:ring-orange-500"
              />
              <button className="bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded text-sm font-medium transition-colors">
                Join
              </button>
            </div>
          </div>
        </div>
        <div className="border-t border-neutral-800 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
          <p className="text-xs text-neutral-500">
            © {new Date().getFullYear()} WORLDWIDE SHOPPERS. All rights reserved.
          </p>
          <div className="flex gap-6">
            <span className="text-xs text-neutral-500">Visa</span>
            <span className="text-xs text-neutral-500">Mastercard</span>
            <span className="text-xs text-neutral-500">PayPal</span>
          </div>
        </div>
      </Container>
    </footer>
  );
}
