import Link from "next/link";
import { Globe2, Twitter, Facebook, Instagram, Rss } from "lucide-react";
import { CONTINENTS, CATEGORIES } from "@/lib/continents";

export default function Footer() {
  return (
    <footer className="bg-navy-900 border-t border-white/10 mt-16">

      {/* ── Main footer ───────────────────────────────────── */}
      <div className="max-w-screen-xl mx-auto px-4 py-12">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">

          {/* Brand */}
          <div>
            <div className="flex items-center gap-2 mb-4">
              <Globe2 className="w-6 h-6 text-brand-500" />
              <span className="text-white font-display font-bold text-xl">
                Mega<span className="text-brand-500">Blog</span>
              </span>
            </div>
            <p className="text-gray-400 text-sm leading-relaxed">
              Your global news destination. Covering sports, entertainment, technology, politics and breaking news from every corner of the world.
            </p>
            <div className="flex items-center gap-3 mt-5">
              {[Twitter, Facebook, Instagram, Rss].map((Icon, i) => (
                <a key={i} href="#" className="w-8 h-8 rounded-full bg-white/10 hover:bg-brand-500 flex items-center justify-center transition-colors">
                  <Icon className="w-4 h-4 text-white" />
                </a>
              ))}
            </div>
          </div>

          {/* Categories */}
          <div>
            <h3 className="text-white font-bold text-sm uppercase tracking-wider mb-4">Categories</h3>
            <ul className="space-y-2">
              {CATEGORIES.map(cat => (
                <li key={cat.slug}>
                  <Link href={`/category/${cat.slug}`}
                    className={`text-sm hover:text-white transition-colors ${cat.color}`}>
                    {cat.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Regions */}
          <div>
            <h3 className="text-white font-bold text-sm uppercase tracking-wider mb-4">Regions</h3>
            <ul className="space-y-2">
              {CONTINENTS.map(c => (
                <li key={c.slug}>
                  <Link href={`/${c.slug}`}
                    className="text-gray-400 hover:text-white text-sm transition-colors flex items-center gap-1.5">
                    <span>{c.emoji}</span> {c.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Countries quick links */}
          <div>
            <h3 className="text-white font-bold text-sm uppercase tracking-wider mb-4">Top Countries</h3>
            <ul className="space-y-2">
              {CONTINENTS.flatMap(c => c.countries).slice(0, 10).map(country => (
                <li key={country.slug}>
                  <Link href={`/${CONTINENTS.find(c => c.countries.some(co => co.slug === country.slug))?.slug}/${country.slug}`}
                    className="text-gray-400 hover:text-white text-sm transition-colors flex items-center gap-1.5">
                    <span>{country.flag}</span> {country.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

        </div>
      </div>

      {/* ── Bottom bar ────────────────────────────────────── */}
      <div className="border-t border-white/5">
        <div className="max-w-screen-xl mx-auto px-4 h-12 flex items-center justify-between">
          <p className="text-gray-500 text-xs">
            © {new Date().getFullYear()} MegaBlog. All rights reserved.
          </p>
          <div className="flex items-center gap-4 text-xs text-gray-500">
            <a href="#" className="hover:text-white transition-colors">Privacy Policy</a>
            <a href="#" className="hover:text-white transition-colors">Terms of Use</a>
            <a href="#" className="hover:text-white transition-colors">Contact</a>
          </div>
        </div>
      </div>

    </footer>
  );
}
