import { prisma } from '@/lib/prisma';
import { Trophy } from 'lucide-react';
import PrestasiClientGrid from '@/components/public/prestasi-client-grid';

export const metadata = {
    title: 'Prestasi | HMF FPMIPA UPI',
    description: 'Pencapaian dan prestasi membanggakan dari mahasiswa dan himpunan Fisika FPMIPA UPI.',
};

export const revalidate = 60;

export default async function PrestasiPage() {
    const prestasi = await prisma.prestasi.findMany({
        orderBy: { createdAt: 'desc' },
    }).catch(() => []);

    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">
                <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" />
                    <div className="absolute inset-0 bg-[#07090f]/82"></div>
                </div>

                <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>

                <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">
                            Prestasi <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-500">HMF</span>
                        </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">
                        Deretan pencapaian gemilang dari fisikawan muda FPMIPA UPI.
                    </p>
                </div>
            </main>

            <section className="container px-4 md:px-8 mx-auto relative z-10">
                {prestasi.length === 0 ? (
                    <div className="text-center py-20 bg-white/5 rounded-3xl border border-dashed border-white/20 backdrop-blur-md">
                        <Trophy className="w-10 h-10 text-gray-500 mx-auto mb-4" />
                        <p className="text-gray-400 font-medium">Belum ada prestasi yang dipublikasikan.</p>
                    </div>
                ) : (
                    <PrestasiClientGrid prestasi={prestasi} />
                )}
            </section>
        </div>
    );
}