import LandingLayout from '@/Layouts/LandingLayout';
import { motion } from 'framer-motion';
import { Head } from '@inertiajs/react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSitemap, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';

export default function StrukturOrganisasiPage({ campus, content }) {
    // Ambil tema dari props campus, sediakan fallback default
    const theme = campus?.theme || {
        gradientFrom: 'from-gray-700',
        gradientTo: 'to-gray-900',
    };

    const pageTitle = content?.title || "Struktur Organisasi";
    const imageUrl = content?.imageUrl;

    return (
        <LandingLayout campus={campus} 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>
                </div>
            </header>

             {/* Konten Utama */}
             <div className="bg-slate-50 py-16 sm:py-24">
                <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
                    
                    {/* Cek apakah imageUrl ada */}
                    {imageUrl ? (
                        <motion.div
                            initial={{ opacity: 0, y: 30 }}
                            whileInView={{ opacity: 1, y: 0 }}
                            viewport={{ once: true, amount: 0.2 }}
                            transition={{ duration: 0.6 }}
                            className="bg-white p-4 sm:p-8 rounded-xl shadow-2xl border border-gray-200"
                        >
                            <img
                                src={imageUrl}
                                alt={`Struktur Organisasi ${campus.name}`}
                                className="w-full h-auto object-contain rounded-lg"
                                // Sembunyikan jika gambar gagal dimuat
                                onError={(e) => e.currentTarget.style.display = 'none'} 
                            />
                        </motion.div>
                    ) : (
                        // Tampilan fallback jika gambar tidak ada
                        <motion.div
                            initial={{ opacity: 0, scale: 0.9 }}
                            animate={{ opacity: 1, scale: 1 }}
                            className="flex flex-col items-center justify-center text-center p-12 bg-white rounded-lg shadow-lg text-gray-500"
                        >
                            <FontAwesomeIcon icon={faExclamationTriangle} className="text-5xl mb-4" />
                            <h2 className="text-2xl font-semibold text-gray-700">Konten Belum Tersedia</h2>
                            <p className="mt-2">Halaman struktur organisasi untuk kampus ini sedang dalam pembaruan.</p>
                        </motion.div>
                    )}

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