import Link from 'next/link'
import { getArticles } from '@/lib/api'
import { ArrowRight } from 'lucide-react'
import { getImageUrl } from '@/lib/images'

export default async function BeritaSection() {
  let articles: any[] = []
  try {
    const res = await getArticles({ per_page: '3' })
    articles = res.data || []
  } catch { /* empty */ }

  if (articles.length === 0) {
    articles = [
      { id: 1, title: 'Selamat Datang di Portal Kabupaten Buton', slug: 'selamat-datang', excerpt: 'Portal resmi pemerintah Kabupaten Buton menyediakan informasi terkini seputar pemerintahan dan layanan publik.', published_at: new Date().toISOString(), category: { name: 'Umum' }, featured_image: null },
      { id: 2, title: 'Pemkab Buton Terus Berkomitmen Pembangunan Daerah', slug: 'komitmen-pembangunan', excerpt: 'Berbagai program pembangunan terus digalakan untuk meningkatkan kesejahteraan masyarakat Buton.', published_at: new Date().toISOString(), category: { name: 'Pemerintahan' }, featured_image: null },
      { id: 3, title: 'Festival Budaya Buton Akan Digelar Tahun Ini', slug: 'festival-budaya', excerpt: 'Festival tahunan yang menampilkan kearifan lokal dan kebudayaan masyarakat Kabupaten Buton.', published_at: new Date().toISOString(), category: { name: 'Budaya' }, featured_image: null },
    ]
  }

  return (
    <section className="py-16 bg-gray-50">
      <div className="max-w-7xl mx-auto px-4">
        <div className="flex items-end justify-between mb-8">
          <div>
            <div className="inline-flex items-center gap-2 bg-[#c8102e]/10 rounded-full px-3 py-1 mb-3">
              <span className="w-1.5 h-1.5 bg-[#c8102e] rounded-full" />
              <span className="text-xs text-[#c8102e] font-medium uppercase tracking-wider">Terbaru</span>
            </div>
            <h2 className="text-2xl sm:text-3xl font-display font-bold text-gray-800">Berita Terkini</h2>
            <p className="text-gray-500 text-sm mt-1">Informasi terbaru dari Pemerintah Kabupaten Buton</p>
          </div>
          <Link href="/berita" className="hidden sm:inline-flex items-center gap-1.5 text-[#1e3a5f] font-medium text-sm hover:text-[#c8102e] transition-colors">
            Lihat Semua
            <ArrowRight size={14} />
          </Link>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {articles.slice(0, 3).map((berita: any) => (
            <Link key={berita.id} href={`/berita/${berita.slug}`}
              className="bg-white rounded-2xl overflow-hidden hover-lift group">
              <div className="aspect-video bg-gray-200 relative overflow-hidden">
                {berita.featured_image ? (
                  <img src={getImageUrl(berita.featured_image) || berita.featured_image} alt={berita.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                ) : (
                  <div className="w-full h-full bg-gradient-to-br from-[#1e3a5f] to-[#152d4a] flex items-center justify-center">
                    <span className="text-4xl font-bold text-white/10">B</span>
                  </div>
                )}
                <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
                <span className="absolute top-3 left-3 bg-[#c8102e] text-white text-xs px-3 py-1 rounded-lg font-medium shadow-lg">
                  {berita.category?.name || 'Berita'}
                </span>
              </div>
              <div className="p-5">
                <h3 className="font-bold text-gray-800 group-hover:text-[#1e3a5f] transition-colors line-clamp-2 mb-2 font-display">
                  {berita.title}
                </h3>
                <p className="text-sm text-gray-500 line-clamp-2 mb-3">{berita.excerpt}</p>
                <p className="text-xs text-gray-400">
                  {new Date(berita.published_at).toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' })}
                </p>
              </div>
            </Link>
          ))}
        </div>

        <div className="mt-6 sm:hidden text-center">
          <Link href="/berita" className="inline-flex items-center gap-1.5 text-[#1e3a5f] font-medium text-sm">
            Lihat Semua Berita <ArrowRight size={14} />
          </Link>
        </div>
      </div>
    </section>
  )
}