import React from 'react';
import Link from 'next/link';
import { Newspaper, ImageIcon, Trophy, Mic2, FileText, Award } from 'lucide-react';

export const metadata = {
    title: 'Media | HMF FPMIPA UPI',
    description: 'Jelajahi seluruh dokumentasi, program, dan publikasi resmi dari HMF FPMIPA UPI.',
};

export default function MediaIndexPage() {
    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">
                            Eksplorasi Media
                        </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="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 seluruh dokumentasi, program, dan publikasi resmi. Fitur-fitur andalan yang membantu Anda mengakses informasi lebih cepat dari sebelumnya.
                    </p>
                </div>
            </main>

            {/* Media Grid Display - Dark Glassmorphism */}
            <section className="container px-4 md:px-8 mx-auto relative z-10">
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6 max-w-6xl mx-auto">
                    
                    {/* 1. Berita HMF (Span 2) */}
                    <Link href="/berita" className="md:col-span-2 bg-white/[0.03] border border-white/10 rounded-[1.5rem] p-6 md:p-8 hover:bg-white/[0.06] hover:border-white/20 hover:-translate-y-1 transition-all group flex flex-col justify-start relative text-left">
                        <div className="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center mb-6">
                            <Newspaper className="w-5 h-5 text-blue-400" />
                        </div>
                        <h3 className="text-xl font-bold text-white mb-2 tracking-tight">Berita HMF</h3>
                        <p className="text-gray-400 text-sm max-w-sm">Berita terkini, liputan, dan press release seputar kegiatan yang telah sukses dilaksanakan.</p>
                    </Link>

                    {/* 2. Galeri (Span 1) */}
                    <Link href="/galeri" className="md:col-span-1 bg-white/[0.03] border border-white/10 rounded-[1.5rem] p-6 md:p-8 hover:bg-white/[0.06] hover:border-white/20 hover:-translate-y-1 transition-all group flex flex-col justify-start text-left">
                        <div className="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center mb-6">
                            <ImageIcon className="w-5 h-5 text-blue-400" />
                        </div>
                        <h3 className="text-xl font-bold text-white mb-2 tracking-tight">Galeri Karya</h3>
                        <p className="text-gray-400 text-sm">Dokumentasi visual dan arsip kegiatan kebersamaan seluruh warga HMF.</p>
                    </Link>

                    {/* 3. Prestasi (Span 1) */}
                    <Link href="/prestasi" className="md:col-span-1 bg-white/[0.03] border border-white/10 rounded-[1.5rem] p-6 md:p-8 hover:bg-white/[0.06] hover:border-white/20 hover:-translate-y-1 transition-all group flex flex-col justify-start text-left">
                        <div className="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center mb-6">
                            <Trophy className="w-5 h-5 text-blue-400" />
                        </div>
                        <h3 className="text-xl font-bold text-white mb-2 tracking-tight">Prestasi</h3>
                        <p className="text-gray-400 text-sm">Deretan prestasi gemilang mahasiswa fisika di kancah nasional maupun internasional.</p>
                    </Link>

                    {/* 4. Rangers Talk (Span 2) */}
                    <Link href="/rangers-talk" className="md:col-span-2 bg-white/[0.03] border border-white/10 rounded-[1.5rem] p-6 md:p-8 hover:bg-white/[0.06] hover:border-white/20 hover:-translate-y-1 transition-all group flex flex-col justify-start relative text-left">
                        <div className="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center mb-6">
                            <Mic2 className="w-5 h-5 text-blue-400" />
                        </div>
                        <h3 className="text-xl font-bold text-white mb-2 tracking-tight">Rangers Talk</h3>
                        <p className="text-gray-400 text-sm max-w-md">Podcast dan obrolan asyik seputar dunia fisika, kampus, dan pengalaman inspiratif langsung dari ahlinya.</p>
                    </Link>

                    {/* 5. Laporan Keuangan (Span 2) */}
                    <Link href="/laporan-keuangan" className="md:col-span-2 bg-white/[0.03] border border-white/10 rounded-[1.5rem] p-6 md:p-8 hover:bg-white/[0.06] hover:border-white/20 hover:-translate-y-1 transition-all group flex flex-col justify-start relative text-left">
                        <div className="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center mb-6">
                            <FileText className="w-5 h-5 text-blue-400" />
                        </div>
                        <h3 className="text-xl font-bold text-white mb-2 tracking-tight">Laporan Keuangan</h3>
                        <p className="text-gray-400 text-sm max-w-sm">Transparansi dan akuntabilitas keuangan organisasi kepada seluruh civitas akademika.</p>
                    </Link>

                    {/* 6. Awardee PH (Span 1) */}
                    <Link href="/awardee" className="md:col-span-1 bg-white/[0.03] border border-white/10 rounded-[1.5rem] p-6 md:p-8 hover:bg-white/[0.06] hover:border-white/20 hover:-translate-y-1 transition-all group flex flex-col justify-start text-left">
                        <div className="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center mb-6">
                            <Award className="w-5 h-5 text-blue-400" />
                        </div>
                        <h3 className="text-xl font-bold text-white mb-2 tracking-tight">Awardee PH</h3>
                        <p className="text-gray-400 text-sm">Penghargaan untuk pengurus paling berdedikasi.</p>
                    </Link>

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