import Link from "next/link";
import { CreditCard, Mail, Phone, ShieldCheck } from "lucide-react";
import { brand } from "@/lib/brand";

const legal = [
  ["terms-of-use", "Terms"],
  ["privacy-policy", "Privacy"],
  ["service-agreement", "Service Agreement"],
  ["refund-policy", "Refund Policy"],
  ["aml-kyc", "AML/KYC"],
  ["risk-disclosure", "Risk Disclosure"],
  ["affiliate-disclosure", "Affiliate Disclosure"],
  ["storage-custodian-disclaimer", "Storage Disclaimer"],
  ["cookie-policy", "Cookie Policy"]
];

export function Footer() {
  return (
    <footer className="relative overflow-hidden bg-[#111111] text-white">
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_12%_0%,rgba(212,175,55,0.14),transparent_26%),linear-gradient(180deg,rgba(255,255,255,0.04),transparent_36%)]" />
      <div className="relative border-y border-[#D4AF37]/30 bg-[#1c1c1c]">
        <div className="container-grid grid gap-3 py-4 text-sm font-black md:grid-cols-3">
          <div className="flex items-center gap-3 rounded border border-white/10 bg-white/[0.03] px-3 py-2"><ShieldCheck className="text-[#D4AF37]" size={20} /> Secure checkout</div>
          <div className="flex items-center gap-3 rounded border border-white/10 bg-white/[0.03] px-3 py-2"><CreditCard className="text-[#D4AF37]" size={20} /> Payment options available</div>
          <div className="flex items-center gap-3 rounded border border-white/10 bg-white/[0.03] px-3 py-2"><Phone className="text-[#D4AF37]" size={20} /> Support: (800) 000-0000</div>
        </div>
      </div>
      <div className="container-grid relative grid gap-8 py-12 lg:grid-cols-[1.15fr_2.2fr]">
        <div className="rounded-lg border border-white/10 bg-white/[0.04] p-5 shadow-[0_18px_40px_rgba(0,0,0,0.18)]">
          <div className="text-2xl font-black text-[#D4AF37]">{brand.name}</div>
          <p className="mt-3 max-w-xl text-sm leading-6 text-white/70">
            Elit Gold/Silver Exchange provides online bullion product browsing, secure checkout, manual price management, and fulfillment coordination. This website does not provide trading, brokerage, custodial, vault operation, financial advisory, legal, or tax services.
          </p>
          <div className="mt-4 grid gap-2 border-t border-white/10 pt-4 text-sm text-white/75">
            <span className="flex items-center gap-2"><Mail size={16} /> {brand.supportEmail}</span>
            <span className="flex items-center gap-2"><Phone size={16} /> (800) 000-0000</span>
            <span>{brand.supportHours}</span>
          </div>
        </div>
        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-5">
          <div>
            <h3 className="border-b border-[#D4AF37]/35 pb-2 text-sm font-black uppercase tracking-[0.12em] text-[#D4AF37]">Shop</h3>
            <div className="mt-3 grid gap-2 text-sm text-white/70">
              <Link className="hover:text-[#D4AF37]" href="/products">All Products</Link>
              <Link className="hover:text-[#D4AF37]" href="/products?type=BAR">Bars</Link>
              <Link className="hover:text-[#D4AF37]" href="/products?type=COIN">Coins</Link>
              <Link className="hover:text-[#D4AF37]" href="/products?type=ROUND">Rounds</Link>
            </div>
          </div>
          <div>
            <h3 className="border-b border-[#D4AF37]/35 pb-2 text-sm font-black uppercase tracking-[0.12em] text-[#D4AF37]">Gold</h3>
            <div className="mt-3 grid gap-2 text-sm text-white/70">
              <Link className="hover:text-[#D4AF37]" href="/gold">Gold Products</Link>
              <Link className="hover:text-[#D4AF37]" href="/gold?type=BAR">Gold Bars</Link>
              <Link className="hover:text-[#D4AF37]" href="/gold?type=COIN">Gold Coins</Link>
              <Link className="hover:text-[#D4AF37]" href="/products?search=1%20oz%20Gold">1 oz Gold</Link>
            </div>
          </div>
          <div>
            <h3 className="border-b border-[#D4AF37]/35 pb-2 text-sm font-black uppercase tracking-[0.12em] text-[#D4AF37]">Silver</h3>
            <div className="mt-3 grid gap-2 text-sm text-white/70">
              <Link className="hover:text-[#D4AF37]" href="/silver">Silver Products</Link>
              <Link className="hover:text-[#D4AF37]" href="/silver?type=BAR">Silver Bars</Link>
              <Link className="hover:text-[#D4AF37]" href="/silver?type=COIN">Silver Coins</Link>
              <Link className="hover:text-[#D4AF37]" href="/products?search=10%20oz%20Silver">10 oz Silver</Link>
            </div>
          </div>
          <div>
            <h3 className="border-b border-[#D4AF37]/35 pb-2 text-sm font-black uppercase tracking-[0.12em] text-[#D4AF37]">Services</h3>
            <div className="mt-3 grid gap-2 text-sm text-white/70">
              <Link className="hover:text-[#D4AF37]" href="/sell-back">Sell-Back</Link>
              <Link className="hover:text-[#D4AF37]" href="/ira-trust">IRA / Trust</Link>
              <Link className="hover:text-[#D4AF37]" href="/vault-storage">Vault Storage</Link>
              <Link className="hover:text-[#D4AF37]" href="/service-fees">Service Fees</Link>
            </div>
          </div>
          <div>
            <h3 className="border-b border-[#D4AF37]/35 pb-2 text-sm font-black uppercase tracking-[0.12em] text-[#D4AF37]">Support</h3>
            <div className="mt-3 grid gap-2 text-sm text-white/70">
              <Link className="hover:text-[#D4AF37]" href="/faq">FAQ</Link>
              <Link className="hover:text-[#D4AF37]" href="/support">Support</Link>
              <Link className="hover:text-[#D4AF37]" href="/contact">Contact</Link>
              {legal.slice(0, 4).map(([slug, label]) => <Link className="hover:text-[#D4AF37]" key={slug} href={`/legal/${slug}`}>{label}</Link>)}
            </div>
          </div>
        </div>
      </div>
      <div className="relative border-t border-white/10 bg-[#1c1c1c]">
        <div className="container-grid flex flex-wrap items-center justify-between gap-3 py-4 text-xs text-white/60">
          <span>Copyright {new Date().getFullYear()} {brand.name}. All rights reserved.</span>
          <span>Prices may change without notice. This website does not provide trading or investment advice.</span>
        </div>
      </div>
    </footer>
  );
}