// Sub-komponen untuk setiap kartu agar lebih rapi
const FeatureCard = ({ imageUrl, title, description, linkText }) => {
    return (
        <div className="bg-white rounded-lg shadow-xl overflow-hidden transform hover:-translate-y-2 transition-transform duration-300">
            <img className="w-full h-56 object-cover" src={imageUrl} alt={title} />
            <div className="p-6">
                <h3 className="text-2xl font-bold text-gray-800 mb-2">{title}</h3>
                <p className="text-gray-600 mb-4">{description}</p>
                <a href="#" className="font-semibold text-blue-600 hover:text-blue-800">
                    {linkText} &rarr;
                </a>
            </div>
        </div>
    );
};

export default function Features() {
    return (
        <section className="bg-gray-50 py-20">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="text-center mb-12">
                    <h2 className="text-3xl font-extrabold text-gray-900 sm:text-4xl">
                        Informasi Akademik
                    </h2>
                    <p className="mt-4 text-lg text-gray-500">
                        Temukan semua informasi yang Anda butuhkan di sini.
                    </p>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <FeatureCard
                        imageUrl="https://picsum.photos/seed/biaya-kuliah/400/300"
                        title="Biaya Kuliah"
                        description="Dapatkan rincian lengkap mengenai biaya pendidikan dan skema pembayaran yang tersedia."
                        linkText="Lihat Rincian"
                    />
                    <FeatureCard
                        imageUrl="https://picsum.photos/seed/galeri-kampus/400/300"
                        title="Galeri Kampus"
                        description="Lihat berbagai fasilitas modern dan kegiatan mahasiswa yang ada di lingkungan kampus kami."
                        linkText="Jelajahi Galeri"
                    />
                    <FeatureCard
                        imageUrl="https://picsum.photos/seed/berita-kampus/400/300"
                        title="Berita Terbaru"
                        description="Ikuti terus perkembangan dan berita terkini seputar prestasi dan acara di kampus kami."
                        linkText="Baca Berita"
                    />
                </div>
            </div>
        </section>
    );
}