"use client";
import Image from "next/image";
import Link from "next/link";
import { CalendarDays } from "lucide-react";

const categories = [
  "Destination",
  "Food & Drink",
  "News",
  "Photo",
  "Tak Berkategori",
  "Travel Ideas",
  "Video",
];

const tags = [
  "AI",
  "arus balik",
  "arus mudik",
  "Backpacker",
  "Budi Zulkifli",
  "drama Korea",
  "Food",
  "Indonesia",
  "Jin BTS",
  "jurnalis",
  "Kakorlantas",
  "konser",
  "Korea Utara",
  "Lebaran 2025",
  "Media Hub",
  "mudik",
  "musik AI",
  "Piala Usia U-17 2025",
  "Polri",
  "Resident Playbook",
  "The Astronaut",
  "Tips",
  "Tol Cipali",
  "Tol Japek",
  "Trip Plan",
];

const recentNews = [
  {
    id: 1,
    title:
      "Jin BTS Jadi Special Guest Konser Coldplay di Korea, Bawakan Lagu My Universe dan The Astronaut",
    date: "21 APRIL 2025",
    image: "/coldplay.png",
  },
  {
    id: 2,
    title:
      "Kehadiran Media Hub Polri Jadi Jawaban atas Kebutuhan Jurnalis Masa Kini",
    date: "16 APRIL 2025",
    image: "/mediahub-1.jpg",
  },
];

export default function Footer() {
  return (
    <footer className="bg-[#293132] text-gray-300 text-sm">
      <div className="max-w-7xl mx-auto px-6 py-12 grid grid-cols-1 md:grid-cols-4 gap-8">
        {/* Logo & About */}
        <div>
          <h2 className="text-2xl font-bold">
            <span className="text-white">travel</span>
            <span className="text-teal-400">news</span>
          </h2>
          <p className="mt-3 text-gray-400 leading-relaxed">
            We bring you the best Premium WordPress Themes that perfect for
            news, magazine, personal blog, etc.
          </p>
          <Link
            href="#"
            className="mt-3 inline-block text-teal-400 hover:underline"
          >
            Read more
          </Link>
        </div>

        {/* Categories */}
        <div>
          <h3 className="text-white font-semibold mb-3">Categories</h3>
          <ul className="space-y-2">
            {categories.map((cat, i) => (
              <li key={i}>
                <Link href="#" className="hover:text-teal-400">
                  {cat}
                </Link>
              </li>
            ))}
          </ul>
        </div>

        {/* Tags */}
        <div>
          <h3 className="text-white font-semibold mb-3">Tags</h3>
          <div className="flex flex-wrap gap-2">
            {tags.map((tag, i) => (
              <span
                key={i}
                className="bg-gray-700 hover:bg-teal-500 hover:text-white text-gray-300 text-xs px-2 py-1 rounded cursor-pointer"
              >
                {tag}
              </span>
            ))}
          </div>
        </div>

        {/* Recent News */}
        <div>
          <h3 className="text-white font-semibold mb-3">Recent News</h3>
          <ul className="space-y-4">
            {recentNews.map((news) => (
              <li key={news.id} className="flex gap-3">
                <Image
                  src={news.image}
                  alt={news.title}
                  width={80}
                  height={60}
                  className="object-cover rounded"
                />
                <div>
                  <Link
                    href="#"
                    className="text-gray-200 font-medium hover:text-teal-400 text-sm leading-snug"
                  >
                    {news.title}
                  </Link>
                  <div className="flex items-center text-xs text-gray-400 gap-1 mt-1">
                    <CalendarDays size={12} />
                    {news.date}
                  </div>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </div>

      {/* Bottom Bar */}
      <div className="border-t bg-[#474044] border-gray-700 py-4 px-6 flex flex-col md:flex-row items-center justify-between text-xs text-gray-400">
        <p>
          © 2025 <span className="text-teal-400">JNews</span> - Premium
          WordPress news & magazine theme by{" "}
          <Link href="#" className="hover:underline">
            Jegtheme
          </Link>
          .
        </p>
        <div className="flex gap-4 mt-2 md:mt-0">
          <Link href="#">
            <i className="fab fa-facebook"></i>
          </Link>
          <Link href="#">
            <i className="fab fa-twitter"></i>
          </Link>
          <Link href="#">
            <i className="fab fa-google-plus-g"></i>
          </Link>
          <Link href="#">
            <i className="fab fa-pinterest"></i>
          </Link>
          <Link href="#">
            <i className="fab fa-rss"></i>
          </Link>
        </div>
      </div>
    </footer>
  );
}