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

export default function SejarahPage({ campus, content }) {
    const theme = campus?.theme || {};
    // Destrukturisasi semua properti dari objek 'content', termasuk 'extraParagraphs'
    const { title, subtitle, openingParagraph, imageUrl, milestones, extraParagraphs, pullQuote } = content;

    // Varian animasi stagger untuk kartu milestone
    const containerVariants = {
        hidden: { opacity: 0 },
        visible: {
            opacity: 1,
            transition: { staggerChildren: 0.15, delayChildren: 0.2 }
        }
    };

    const itemVariants = {
        hidden: { opacity: 0, y: 30, scale: 0.95 },
        visible: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.5, ease: 'easeOut' } }
    };

    // Style untuk background berpola halus
    const backgroundPatternStyle = {
        backgroundImage: 'url("data:image/svg+xml,%3Csvg width=\'6\' height=\'6\' viewBox=\'0 0 6 6\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23e2e8f0\' fill-opacity=\'0.4\' fill-rule=\'evenodd\'%3E%3Cpath d=\'M5 0h1L0 6V5zM6 5v1H5z\'/%3E%3C/g%3E%3C/svg%3E")',
        backgroundRepeat: 'repeat',
    };

    return (
        <LandingLayout campus={campus} title={title || "Sejarah Kampus"}>
            <Head title={title || "Sejarah Kampus"} />

            {/* Header Halaman */}
            <header className={`relative py-24 sm:py-32 bg-gradient-to-r ${theme.gradientFrom} ${theme.gradientTo} overflow-hidden`}>
                <div className="absolute inset-0 bg-black/30"></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">
                        {title}
                    </motion.h1>
                    {subtitle && (
                        <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">
                            {subtitle}
                        </motion.p>
                    )}
                </div>
            </header>

            {/* Konten Utama dengan Background Berpola */}
            <div className="relative py-16 sm:py-24" style={backgroundPatternStyle}>
                <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">

                    {/* Bagian Pembuka (Gambar dan Paragraf Pembuka) */}
                    {(imageUrl || openingParagraph) && ( // Tampilkan bagian ini hanya jika ada gambar atau paragraf pembuka
                        <div className="grid grid-cols-1 lg:grid-cols-5 gap-12 items-center mb-12 md:mb-16">
                            {imageUrl && ( // Tampilkan gambar hanya jika ada imageUrl
                                <motion.div
                                    initial={{ opacity: 0, scale: 0.9, rotate: -5 }} whileInView={{ opacity: 1, scale: 1, rotate: 0 }} viewport={{ once: true }} transition={{ duration: 0.7 }}
                                    className="lg:col-span-2 relative"
                                >
                                    <div className={`absolute -inset-4 rounded-full bg-gradient-to-br ${theme.gradientFrom} ${theme.gradientTo} opacity-20 blur-xl`}></div>
                                    <img src={imageUrl} alt={`Ilustrasi ${title}`} className="relative rounded-xl shadow-2xl object-cover w-full h-full aspect-[5/4]" />
                                </motion.div>
                            )}
                            <motion.div
                                initial={{ opacity: 0, x: imageUrl ? 50 : 0 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ duration: 0.7, delay: 0.2 }}
                                className={imageUrl ? "lg:col-span-3" : "lg:col-span-5 text-center"} // Atur span jika tidak ada gambar
                            >
                                <FontAwesomeIcon icon={faLandmark} className={`text-4xl mb-4 ${theme.textColor || 'text-blue-600'}`} />
                                {openingParagraph && <p className="text-xl text-gray-700 leading-relaxed">{openingParagraph}</p>}
                            </motion.div>
                        </div>
                    )}

                    {/* Paragraf Tambahan (extraParagraphs) */}
                    {extraParagraphs && extraParagraphs.length > 0 && (
                        <motion.div
                            initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, amount: 0.1 }} transition={{ duration: 0.6 }}
                            className="space-y-6 text-lg text-gray-700 leading-relaxed mb-12 md:mb-16"
                        >
                            {extraParagraphs.map((paragraph, index) => (
                                <p key={`extra-p-${index}`}>{paragraph}</p>
                            ))}
                        </motion.div>
                    )}

                    {/* Grid Kartu Milestone */}
                    {milestones && milestones.length > 0 && (
                        <>
                            <motion.h2
                                initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, amount: 0.1 }} transition={{ duration: 0.6, delay: 0.1 }}
                                className="text-3xl sm:text-4xl font-bold text-gray-800 text-center mb-10 mt-16"
                            >
                                Jejak Langkah Penting
                            </motion.h2>
                            <motion.div
                                variants={containerVariants} initial="hidden" whileInView="visible" viewport={{ once: true, amount: 0.1 }}
                                className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-20 md:mb-28"
                            >
                                {milestones.map((item, index) => (
                                    <motion.div key={index} variants={itemVariants}
                                        className="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 p-8 border-l-4 border-blue-500 flex items-start space-x-6"
                                    >
                                        {/* Ikon Milestone */}
                                        <div className={`flex-shrink-0 w-12 h-12 rounded-full ${theme.primary || 'bg-blue-600'} text-white flex items-center justify-center shadow-md`}>
                                            <FontAwesomeIcon icon={faCalendarAlt} className="text-xl" />
                                        </div>
                                        {/* Konten Milestone */}
                                        <div>
                                            <p className={`text-sm font-semibold uppercase tracking-wider ${theme.textColor || 'text-blue-600'}`}>{item.year}</p>
                                            <h3 className="text-xl font-bold text-gray-800 mt-1">{item.title}</h3>
                                            <p className="mt-2 text-gray-600">{item.description}</p>
                                        </div>
                                    </motion.div>
                                ))}
                            </motion.div>
                        </>
                    )}

                    {/* Blockquote */}
                    {pullQuote && (
                        <motion.div initial={{ opacity: 0, scale: 0.9 }} whileInView={{ opacity: 1, scale: 1 }} viewport={{ once: true }} transition={{ duration: 0.6 }}
                            className="text-center">
                            <blockquote className={`relative max-w-3xl mx-auto p-8 rounded-lg bg-gradient-to-r ${theme.gradientFrom} ${theme.gradientTo} shadow-xl text-white`}>
                                <FontAwesomeIcon icon={faQuoteLeft} className="absolute top-4 left-4 text-6xl opacity-20" />
                                <p className="text-2xl italic font-medium z-10 relative">"{pullQuote}"</p>
                            </blockquote>
                        </motion.div>
                    )}
                </div>
            </div>
        </LandingLayout>
    );
}