import { prisma } from '@/lib/prisma';
import Link from 'next/link';
import { Users, Target, ChevronRight } from 'lucide-react';

export const metadata = {
    title: 'Unit Kegiatan Khusus | HMF FPMIPA UPI',
    description: 'UKK Cakrawala dan UKK Khauf - Unit Kegiatan Khusus di bawah naungan HMF FPMIPA UPI.',
};

export const revalidate = 60;

const UKK_LIST = [
    { slug: 'cakrawala', displayName: 'UKK Cakrawala', color: 'from-blue-500 to-indigo-500', logoUrl: '/cakrawala.png' },
    { slug: 'khauf', displayName: 'UKK Khauf', color: 'from-blue-500 to-indigo-500', logoUrl: '/khauf.png' },
];

export default async function UKKIndexPage() {
    const ukkData = await Promise.all(
        UKK_LIST.map(async (u) => {
            const data = await prisma.uKK.findUnique({
                where: { slug: u.slug },
                include: { _count: { select: { anggota: true, proker: true } } }
            }).catch(() => null);
            return { ...u, data };
        })
    );

    return (
        <div data-theme="dark" className="min-h-screen bg-[#07090f] flex flex-col font-sans selection:bg-[#E63946] 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">
                            Unit Kegiatan
                        </span>
                        <span className="block text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black text-white/30 mt-2">
                            Khusus
                        </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 tracking-widest uppercase mb-12">
                        Otonom di bawah naungan HMF
                    </p>
                </div>

            </main>

            <section className="container px-4 md:px-8 mx-auto max-w-5xl relative z-10">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                    {ukkData.map((ukk) => (
                        <Link key={ukk.slug} href={`/ukk/${ukk.slug}`} className="group block h-full outline-none">
                            <div className="relative bg-white/5 backdrop-blur-xl rounded-[2rem] p-8 border border-white/10 shadow-[0_8px_32px_0_rgba(0,0,0,0.2)] hover:border-white/30 hover:shadow-[0_8px_40px_0_rgba(59,130,246,0.15)] transition-all duration-500 overflow-hidden flex flex-col h-full group-focus-visible:ring-4 group-focus-visible:ring-blue-500/50">
                                
                                {/* Top Color Bar */}
                                <div className={`absolute top-0 left-0 w-full h-1 bg-gradient-to-r ${ukk.color}`}></div>

                                {/* Ambient Hover Glow (inside card) */}
                                <div className={`absolute top-0 right-0 w-64 h-64 bg-gradient-to-br ${ukk.color} rounded-full blur-3xl opacity-0 group-hover:opacity-10 transition-opacity duration-700 pointer-events-none`}></div>

                                <div className="flex items-start justify-between mb-8 relative z-10">
                                    <div className="w-20 h-20 rounded-2xl bg-white/10 p-2 shadow-lg backdrop-blur-sm border border-white/20 flex items-center justify-center overflow-hidden">
                                        {/* eslint-disable-next-line @next/next/no-img-element */}
                                        <img src={ukk.logoUrl} alt={`Logo ${ukk.displayName}`} className="w-full h-full object-contain filter drop-shadow-md group-hover:scale-110 transition-transform duration-500" />
                                    </div>
                                    <div className="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-gray-400 group-hover:bg-blue-600 group-hover:text-white group-hover:border-blue-500 transition-all duration-300">
                                        <ChevronRight className="w-5 h-5 group-hover:translate-x-0.5 transition-transform duration-300" />
                                    </div>
                                </div>

                                <h2 className="text-3xl font-bold text-white mb-3 group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-blue-400 group-hover:to-indigo-400 transition-all relative z-10">
                                    {ukk.data?.nama || ukk.displayName}
                                </h2>
                                
                                <p className="text-gray-400 text-sm leading-relaxed line-clamp-3 mb-8 flex-grow font-medium relative z-10">
                                    {ukk.data?.deskripsi || 'Silakan klik untuk mengeksplorasi lebih jauh tentang sejarah, profil, dan pergerakan dari Unit Kegiatan Khusus ini.'}
                                </p>

                                {/* Divider */}
                                <div className="w-full h-px bg-gradient-to-r from-transparent via-white/10 to-transparent mb-6 relative z-10"></div>

                                <div className="flex items-center gap-6 text-xs text-gray-400 font-bold tracking-wider relative z-10">
                                    <span className="flex items-center gap-2 bg-white/5 px-3 py-1.5 rounded-full border border-white/10">
                                        <Users className="w-4 h-4 text-blue-400" />
                                        {ukk.data?._count.anggota ?? 0} ANGGOTA
                                    </span>
                                    <span className="flex items-center gap-2 bg-white/5 px-3 py-1.5 rounded-full border border-white/10">
                                        <Target className="w-4 h-4 text-orange-400" />
                                        {ukk.data?._count.proker ?? 0} PROGRAM
                                    </span>
                                </div>

                            </div>
                        </Link>
                    ))}
                </div>
            </section>
        </div>
    );
}