"use client";

import { motion } from "framer-motion";
import { BookOpen, Clock, ArrowRight, TrendingUp } from "lucide-react";
import Link from "next/link";

const articles = [
  {
    slug: "panduan-top-up-diamond-ml",
    title: "Panduan Lengkap Top Up Diamond Mobile Legends 2026",
    excerpt: "Cara top up diamond ML paling murah dan aman. Panduan step-by-step untuk semua metode pembayaran yang tersedia.",
    category: "Guide",
    readTime: "5 min",
    image: "https://vip-reseller.co.id/library/assets/images/product/ML_B-02.webp",
    date: "24 Apr 2026",
    featured: true,
  },
  {
    slug: "tips-joki-ranked-ml",
    title: "Tips Memilih Jasa Joki Ranked ML yang Terpercaya",
    excerpt: "Jangan asal pilih joki! Ini dia tips dan trik agar akun kamu aman saat menggunakan jasa joki ranking Mobile Legends.",
    category: "Tips",
    readTime: "4 min",
    image: "https://vip-reseller.co.id/library/assets/images/game/ml-joki-1-icon.png",
    date: "23 Apr 2026",
  },
  {
    slug: "review-honkai-star-rail",
    title: "Review Honkai: Star Rail — Worth Top Up atau Gratis Aja?",
    excerpt: "Analisis mendalam apakah worth it untuk spending di Honkai Star Rail. Breakdown banner, pity system, dan value per Rupiah.",
    category: "Review",
    readTime: "7 min",
    image: "https://vip-reseller.co.id/library/assets/images/product/honkai-star-nail.jpg",
    date: "22 Apr 2026",
  },
  {
    slug: "perbandingan-streaming-premium",
    title: "Netflix vs Disney+ vs Vidio — Mana yang Paling Worth?",
    excerpt: "Perbandingan lengkap harga, konten, dan fitur dari 3 layanan streaming terpopuler di Indonesia tahun 2026.",
    category: "Perbandingan",
    readTime: "6 min",
    image: "https://vip-reseller.co.id/library/assets/images/game/netflix.jpg",
    date: "21 Apr 2026",
  },
  {
    slug: "cara-aman-top-up-game",
    title: "5 Cara Aman Top Up Game Online Tanpa Kena Tipu",
    excerpt: "Waspada penipuan top up game! Pelajari cara membedakan website top up resmi dan abal-abal.",
    category: "Keamanan",
    readTime: "4 min",
    image: "https://vip-reseller.co.id/library/assets/images/game/valorant-new.jpg",
    date: "20 Apr 2026",
  },
  {
    slug: "update-free-fire-2026",
    title: "Update Free Fire April 2026 — Skin Baru & Event Spesial",
    excerpt: "Rangkuman update terbaru Free Fire bulan April 2026. Ada skin legendary baru, event top up bonus, dan kolaborasi menarik!",
    category: "News",
    readTime: "3 min",
    image: "https://vip-reseller.co.id/library/assets/images/product/free-fire.webp",
    date: "19 Apr 2026",
  },
  {
    slug: "cara-cek-player-id-semua-game",
    title: "Cara Cek Player ID & Server ID di Semua Game Populer",
    excerpt: "Panduan lengkap menemukan Player ID dan Server ID untuk Mobile Legends, Free Fire, Genshin Impact, PUBG, dan game lainnya.",
    category: "Guide",
    readTime: "5 min",
    image: "https://vip-reseller.co.id/library/assets/images/game/pubgm-a-icon.jpg",
    date: "18 Apr 2026",
  },
  {
    slug: "promo-top-up-april-2026",
    title: "Promo Top Up Spesial April 2026 — Cashback Hingga 10%!",
    excerpt: "Jangan lewatkan promo cashback spesial bulan April! Dapatkan bonus saldo untuk setiap top up di {process.env.NEXT_PUBLIC_APP_NAME}.",
    category: "Promo",
    readTime: "2 min",
    image: "https://vip-reseller.co.id/library/assets/images/product/genshin-impact.webp",
    date: "17 Apr 2026",
  },
  {
    slug: "top-5-game-terpopuler-2026",
    title: "Top 5 Game Mobile Terpopuler di Indonesia 2026",
    excerpt: "Daftar game mobile yang paling banyak dimainkan dan di-top up oleh gamer Indonesia. Apakah game favoritmu masuk daftar?",
    category: "News",
    readTime: "4 min",
    image: "https://vip-reseller.co.id/library/assets/images/game/Mobile-Legends-Bang-Bang.webp",
    date: "16 Apr 2026",
  },
];

const categoryColors: Record<string, string> = {
  Guide: "bg-blue-500/20 text-blue-400",
  Tips: "bg-green-500/20 text-green-400",
  Review: "bg-purple-500/20 text-purple-400",
  Perbandingan: "bg-cyan-500/20 text-cyan-400",
  Keamanan: "bg-red-500/20 text-red-400",
  News: "bg-orange-500/20 text-orange-400",
  Promo: "bg-yellow-500/20 text-yellow-400",
};

export default function ArticleSection() {
  const featured = articles[0];
  const rest = articles.slice(1);

  return (
    <section className="mt-16">
      {/* Header */}
      <div className="flex items-center justify-between mb-8">
        <div className="flex items-center gap-2.5">
          <div className="w-8 h-8 rounded-lg bg-blue-500/20 flex items-center justify-center">
            <BookOpen className="text-blue-400" size={18} />
          </div>
          <div>
            <h2 className="font-heading text-xl md:text-2xl font-bold text-white uppercase tracking-wide">Artikel & Tips</h2>
            <p className="text-sm text-muted">Tips, panduan, dan berita gaming terbaru</p>
          </div>
        </div>
        <Link href="/article" className="hidden md:flex items-center gap-1 text-xs text-primary hover:text-primary-hover font-medium transition-colors">
          Semua Artikel <ArrowRight size={14} />
        </Link>
      </div>

      {/* Featured Article */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.5 }}
        className="mb-6"
      >
        <Link
          href={`/article/${featured.slug}`}
          className="group block bg-dark-surface rounded-2xl border border-dark-border overflow-hidden hover:border-primary/30 transition-all duration-300 hover:shadow-glow-sm"
        >
          <div className="grid grid-cols-1 md:grid-cols-2 gap-0">
            <div className="relative aspect-[16/10] md:aspect-auto overflow-hidden bg-dark-surface2">
              <img
                src={featured.image}
                alt={featured.title}
                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                loading="lazy"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-dark-surface via-transparent to-transparent opacity-60 md:bg-gradient-to-r" />
              <div className="absolute top-3 left-3 flex items-center gap-2">
                <span className={`px-2 py-1 rounded-lg text-[10px] font-bold ${categoryColors[featured.category]}`}>
                  {featured.category}
                </span>
                <span className="px-2 py-1 rounded-lg text-[10px] font-bold bg-primary/20 text-primary flex items-center gap-1">
                  <TrendingUp size={10} /> Featured
                </span>
              </div>
            </div>
            <div className="p-6 md:p-8 flex flex-col justify-center">
              <h3 className="text-lg md:text-xl font-bold text-white group-hover:text-primary transition-colors leading-tight mb-3">
                {featured.title}
              </h3>
              <p className="text-sm text-muted leading-relaxed mb-4">
                {featured.excerpt}
              </p>
              <div className="flex items-center gap-4 text-xs text-muted">
                <span className="flex items-center gap-1"><Clock size={12} /> {featured.readTime}</span>
                <span>{featured.date}</span>
              </div>
            </div>
          </div>
        </Link>
      </motion.div>

      {/* Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        {rest.map((article, i) => (
          <motion.article
            key={article.slug}
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, margin: "-50px" }}
            transition={{ delay: i * 0.06, duration: 0.4 }}
          >
            <Link
              href={`/article/${article.slug}`}
              className="group block h-full bg-dark-surface rounded-2xl border border-dark-border overflow-hidden hover:border-primary/30 transition-all duration-300 hover:shadow-glow-sm hover:-translate-y-1"
            >
              {/* Thumbnail */}
              <div className="relative aspect-[16/10] overflow-hidden bg-dark-surface2">
                <img
                  src={article.image}
                  alt={article.title}
                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                  loading="lazy"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-dark-surface via-transparent to-transparent opacity-80" />
                <span className={`absolute top-3 left-3 px-2 py-1 rounded-lg text-[10px] font-bold ${categoryColors[article.category] || "bg-primary/20 text-primary"}`}>
                  {article.category}
                </span>
              </div>

              {/* Content */}
              <div className="p-4">
                <h3 className="text-sm font-bold text-white group-hover:text-primary transition-colors line-clamp-2 leading-tight mb-2">
                  {article.title}
                </h3>
                <p className="text-xs text-muted line-clamp-2 leading-relaxed mb-3">
                  {article.excerpt}
                </p>
                <div className="flex items-center justify-between text-[10px] text-muted pt-2 border-t border-dark-border/50">
                  <div className="flex items-center gap-1">
                    <Clock size={10} />
                    {article.readTime}
                  </div>
                  <span>{article.date}</span>
                </div>
              </div>
            </Link>
          </motion.article>
        ))}
      </div>

      {/* Mobile CTA */}
      <div className="md:hidden text-center mt-6">
        <Link href="/article" className="inline-flex items-center gap-1 text-xs text-primary font-medium">
          Lihat Semua Artikel <ArrowRight size={14} />
        </Link>
      </div>
    </section>
  );
}