import React from 'react';
import Link from 'next/link';
import { BookOpen, Zap, Link as LinkIcon, FolderOpen, ArrowRight } from 'lucide-react';

export const metadata = {
    title: 'Konten HMF | HMF FPMIPA UPI',
    description: 'Kumpulan Konten dan Produk Digital dari Himpunan Mahasiswa Fisika FPMIPA UPI',
};

const kontenList = [
    {
        id: 'kinetik',
        slug: 'kinetik',
        name: 'KINETIK',
        desc: 'Majalah Fisika yang memuat berbagai artikel, berita, karya mahasiswa, dan liputan seputar dunia fisika dan sains.',
        icon: Zap,
        color: 'text-blue-400',
        bgColor: 'bg-blue-500/10',
        borderColor: 'border-blue-500/20',
        hoverColor: 'group-hover:text-blue-300',
        bgGlow: 'bg-blue-500/10'
    },
    {
        id: 'bearr',
        slug: 'bearr',
        name: 'BEARR',
        desc: 'Bank Soal dan Referensi. Kumpulan arsip soal ujian, kuis, dan materi referensi untuk membantu mahasiswa Fisika dalam perkuliahan.',
        icon: BookOpen,
        color: 'text-blue-400',
        bgColor: 'bg-blue-500/10',
        borderColor: 'border-blue-500/20',
        hoverColor: 'group-hover:text-blue-300',
        bgGlow: 'bg-blue-500/10'
    },
    {
        id: 'link-shortener',
        slug: 'link-shortener',
        name: 'LASER (Link Shortener)',
        desc: 'Layanan penyingkat tautan (URL Shortener) resmi HMF FPMIPA UPI untuk mempermudah berbagi tautan kegiatan dan dokumen.',
        icon: LinkIcon,
        color: 'text-blue-400',
        bgColor: 'bg-blue-500/10',
        borderColor: 'border-blue-500/20',
        hoverColor: 'group-hover:text-blue-300',
        bgGlow: 'bg-blue-500/10'
    }
];

export default function KontenIndexPage() {
    return (
        <div data-theme="dark" className="min-h-screen bg-[#07090f] flex flex-col font-sans selection:bg-[#2563EB] selection:text-white pb-24">
            
            {/* Hero Section */}
            <main className="w-full min-h-[60vh] pt-32 pb-32 bg-[#07090f] overflow-hidden relative flex flex-col items-center justify-center">
                {/* Background: bg-hero.png + dark overlay */}
                <div className="absolute inset-0 z-0">
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img src="/bg-hero.png" alt="" className="w-full h-full object-cover object-center" />
                    {/* Dark overlay */}
                    <div className="absolute inset-0 bg-[#07090f]/82"></div>
                </div>

                {/* Bottom Fade Gradient for blending */}
                <div className="absolute bottom-0 left-0 w-full h-40 bg-gradient-to-t from-[#07090f] to-transparent z-10 pointer-events-none"></div>

                {/* Subtle grid */}
                <div className="absolute inset-0 z-[1] pointer-events-none">
                    <div className="absolute inset-0 opacity-[0.04]" style={{backgroundImage: 'linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px)', backgroundSize: '60px 60px'}}></div>
                </div>

                <div className="container px-4 md:px-8 relative z-20 w-full flex flex-col items-center text-center">

                    <h1 className="animate-in fade-in slide-in-from-bottom-6 duration-700 delay-100 font-sans leading-[1.05] tracking-tight mb-6">
                        <span className="block text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black text-white">
                            Karya & Layanan
                        </span>
                        <span className="block text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black text-white/30 mt-2">
                            Digital
                        </span>
                    </h1>

                    <p className="animate-in fade-in slide-in-from-bottom-8 duration-700 delay-200 text-gray-400 text-lg md:text-xl font-light max-w-3xl leading-relaxed mb-4">
                        Jelajahi berbagai macam konten, majalah, bank soal, dan layanan digital yang dipersembahkan oleh Himpunan Mahasiswa Fisika FPMIPA UPI.
                    </p>
                </div>

            </main>

            {/* List Konten */}
            <section className="container px-4 md:px-8 mx-auto relative z-10">
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {kontenList.map((item) => {
                        const Icon = item.icon;
                        return (
                            <Link 
                                key={item.id} 
                                href={`/konten/${item.slug}`}
                                className="group relative bg-white/5 backdrop-blur-xl border border-white/10 rounded-[2rem] p-8 hover:shadow-[0_8px_32px_0_rgba(0,0,0,0.3)] hover:border-white/30 hover:-translate-y-2 transition-all duration-500 flex flex-col gap-6 overflow-hidden h-full"
                            >
                                {/* Background glow hover */}
                                <div className={`absolute -bottom-20 -right-20 w-64 h-64 ${item.bgGlow} rounded-full blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none`}></div>

                                <div className="relative z-10 flex-1 flex flex-col">
                                    <div className="flex items-center gap-4 mb-6">
                                        <div className={`w-14 h-14 rounded-2xl flex items-center justify-center shadow-[0_4px_16px_rgba(0,0,0,0.2)] bg-white/10 border border-white/20 text-white ${item.bgColor} ${item.borderColor} transition-colors duration-300`}>
                                            <Icon className={`w-7 h-7 ${item.color}`} />
                                        </div>
                                        <div>
                                            <h3 className={`text-2xl font-bold leading-tight text-white ${item.hoverColor} transition-colors`}>
                                                {item.name}
                                            </h3>
                                        </div>
                                    </div>

                                    <p className="text-gray-300 leading-relaxed text-base font-medium flex-1">
                                        {item.desc}
                                    </p>

                                    <div className="mt-8 flex items-center gap-2 text-sm font-bold text-white group-hover:gap-3 transition-all">
                                        Buka Konten <ArrowRight className="w-4 h-4" />
                                    </div>
                                </div>
                            </Link>
                        );
                    })}
                </div>
            </section>
        </div>
    );
}
