import LandingLayout from '@/Layouts/LandingLayout';
import { motion } from 'framer-motion';
import { Head } from '@inertiajs/react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
// Import semua ikon solid yang mungkin digunakan
import * as SolidIcons from '@fortawesome/free-solid-svg-icons';

// Gabungkan ikon
const allIcons = { ...SolidIcons };

// --- MODIFIKASI UTAMA DI SINI ---
// Definisikan ikon seragam yang ingin Anda gunakan.
// Menggunakan faGraduationCap (Topi Toga) yang lebih relevan dengan perkuliahan.
const DEFAULT_ICON = SolidIcons.faGraduationCap; 

// Helper function untuk mendapatkan ikon yang sudah diseragamkan
const getIcon = () => {
    // Fungsi ini diubah agar selalu mengembalikan ikon default yang seragam.
    return DEFAULT_ICON; 
};
// --- AKHIR MODIFIKASI UTAMA ---

export default function SistemPerkuliahanPage({ campus, content }) {
    // Ambil tema dari props campus
    const theme = campus?.theme || {
        gradientFrom: 'from-gray-700',
        gradientTo: 'to-gray-900',
        primary: 'bg-gray-600',
        textColor: 'text-gray-600',
    };

    const pageTitle = content?.title || "Sistem Perkuliahan";
    const pageDescription = content?.description || "Informasi belum tersedia.";
    const features = content?.features || [];

    // Varian animasi untuk kontainer (stagger)
    const containerVariants = {
        hidden: { opacity: 0 },
        visible: {
            opacity: 1,
            transition: { staggerChildren: 0.1, delayChildren: 0.2 }
        }
    };

    // Varian animasi untuk setiap kartu
    const cardVariants = {
        hidden: { opacity: 0, y: 30, scale: 0.95 },
        visible: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.5, ease: 'easeOut' } }
    };

    // Style background berpola halus
    const backgroundPatternStyle = {
        backgroundImage: 'radial-gradient(circle at 1px 1px, #e2e8f0 0.5px, transparent 0)',
        backgroundSize: '20px 20px',
    };

    return (
        <LandingLayout campus={campus} title={pageTitle}>
            <Head title={pageTitle} />

            {/* Header Halaman Dinamis Sesuai Tema */}
            <header className={`relative py-24 sm:py-32 bg-gradient-to-r ${theme.gradientFrom} ${theme.gradientTo} overflow-hidden`}>
                <div className="absolute inset-0 opacity-10 mix-blend-overlay">
                    <svg className="absolute right-0 bottom-0 transform translate-x-1/2 translate-y-1/2 lg:translate-x-1/3" width="800" height="800" fill="none" viewBox="0 0 800 800">
                        <circle cx="400" cy="400" r="400" stroke="white" strokeWidth="0.5" />
                        <circle cx="400" cy="400" r="300" stroke="white" strokeWidth="0.5" strokeDasharray="2 4"/>
                    </svg>
                </div>
                <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                    <motion.h1 initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}
                        className="text-4xl sm:text-6xl font-extrabold text-white tracking-tight drop-shadow-lg">
                        {pageTitle}
                    </motion.h1>
                    <motion.p initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: 0.2 }}
                        className="mt-4 text-xl text-gray-200 max-w-3xl mx-auto drop-shadow-md">
                        {pageDescription}
                    </motion.p>
                </div>
            </header>

            {/* Konten Utama - Grid Kartu Fitur */}
            <div className="relative py-16 sm:py-24" style={backgroundPatternStyle}>
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    
                    {features.length > 0 ? (
                        <motion.div
                            variants={containerVariants}
                            initial="hidden"
                            whileInView="visible"
                            viewport={{ once: true, amount: 0.1 }}
                            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8" // 4 kolom di layar besar
                        >
                            {features.map((item, index) => (
                                <motion.div
                                    key={index}
                                    variants={cardVariants}
                                    className="group bg-white rounded-xl shadow-lg flex flex-col items-center text-center p-8 transition-all duration-300 hover:shadow-2xl hover:-translate-y-2"
                                >
                                    {/* Ikon Fitur (Menggunakan Ikon Topi Toga Seragam) */}
                                    <motion.div
                                        className={`flex-shrink-0 w-20 h-20 rounded-full ${theme.primary} text-white flex items-center justify-center shadow-lg transition-all duration-300 group-hover:scale-110`}
                                        whileHover={{ rotate: 15 }} // Animasi ikon saat di-hover
                                    >
                                        {/* Memanggil getIcon() tanpa parameter, selalu mengembalikan ikon seragam */}
                                        <FontAwesomeIcon icon={getIcon()} className="text-3xl" />
                                    </motion.div>
                                    
                                    {/* Konten Teks Kartu */}
                                    <h3 className="mt-6 text-xl font-bold text-gray-800">{item.name}</h3>
                                    <p className="mt-2 text-gray-600 text-sm leading-relaxed flex-grow">
                                        {item.description}
                                    </p>
                                </motion.div>
                            ))}
                        </motion.div>
                    ) : (
                        // Tampilan fallback jika tidak ada data
                        <motion.div
                            initial={{ opacity: 0 }} animate={{ opacity: 1 }}
                            className="flex flex-col items-center justify-center text-center p-12 bg-white rounded-lg shadow-lg text-gray-500"
                        >
                            <FontAwesomeIcon icon={SolidIcons.faSchool} className="text-5xl mb-4" />
                            <h2 className="text-2xl font-semibold text-gray-700">Informasi Belum Tersedia</h2>
                            <p className="mt-2">Detail sistem perkuliahan untuk kampus ini sedang dalam pembaruan.</p>
                        </motion.div>
                    )}

                </div>
            </div>
        </LandingLayout>
    );
}