import Link from 'next/link';
import { Users, ArrowLeft } from 'lucide-react';

export const metadata = {
    title: 'Pengurus | HMF FPMIPA UPI',
    description: 'Informasi mengenai pengurus Himpunan Mahasiswa Fisika FPMIPA UPI.',
};

export default function PengurusPage() {
    return (
        <div data-theme="dark" className="min-h-screen bg-[#07090f] flex flex-col font-sans selection:bg-[#E63946] selection:text-white">
            {/* 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">
                    <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">
                    <div className="w-24 h-24 bg-white/5 backdrop-blur-xl border border-white/10 rounded-3xl flex items-center justify-center mx-auto mb-8 shadow-lg">
                        <Users className="w-10 h-10 text-blue-400" />
                    </div>

                    <h1 className="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">
                            Pengurus
                        </span>
                        <span className="block text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black text-white/30 mt-2">
                            HMF FPMIPA UPI
                        </span>
                    </h1>

                    <p className="text-gray-400 text-lg md:text-xl max-w-2xl text-center leading-relaxed font-light mb-8">
                        Informasi mengenai struktur kepengurusan Himpunan Mahasiswa Fisika FPMIPA UPI.
                    </p>

                    <div className="flex flex-wrap gap-3 justify-center">
                        <Link href="/kabinet" className="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-white text-[#0B1F3A] font-bold text-sm hover:bg-gray-100 transition-all shadow-xl">
                            Lihat Kabinet
                        </Link>
                        <Link href="/program-kerja" className="inline-flex items-center gap-2 px-6 py-3 rounded-full border border-white/15 bg-white/5 text-gray-200 font-bold text-sm hover:bg-white/10 transition-all">
                            Program Kerja
                        </Link>
                    </div>
                </div>
            </main>

            {/* Content */}
            <section className="container px-4 md:px-8 mx-auto relative z-10 -mt-10 pb-24">
                <div className="max-w-3xl mx-auto bg-white/5 backdrop-blur-xl rounded-[2rem] p-8 md:p-12 border border-white/10">
                    <p className="text-gray-300 leading-relaxed mb-6">
                        Halaman ini akan menampilkan struktur pengurus lengkap HMF FPMIPA UPI periode saat ini.
                        Untuk sementara, silakan akses informasi pengurus melalui halaman Kabinet.
                    </p>
                    <div className="flex flex-wrap gap-3">
                        <Link href="/kabinet" className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-blue-600/20 text-blue-400 border border-blue-500/30 font-semibold text-sm hover:bg-blue-600/30 transition-all">
                            <ArrowLeft className="w-4 h-4" />
                            Ke Halaman Kabinet
                        </Link>
                    </div>
                </div>
            </section>
        </div>
    );
}