import React from 'react';

interface CourseCardProps {
    title: string;
    topics: string[];
    borderColor: string;
}

const CourseCard: React.FC<CourseCardProps> = ({ title, topics, borderColor }) => {
    return (
        <div className="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 border-t-4" style={{ borderColor }}>
            <h3 className="text-2xl font-bold text-slate-800 mb-4">{title}</h3>
            <ul className="space-y-3">
                {topics.map((topic, index) => (
                    <li key={index} className="flex items-start">
                        <svg className="flex-shrink-0 h-5 w-5 text-blue-500 mt-1 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
                        </svg>
                        <span className="text-slate-600">{topic}</span>
                    </li>
                ))}
            </ul>
        </div>
    );
};

const SpecialCategoryCard: React.FC<{title: string; description: string}> = ({title, description}) => (
    <div className="bg-blue-50 p-6 rounded-lg border border-blue-200">
        <h4 className="font-bold text-blue-800 text-lg">{title}</h4>
        <p className="text-slate-700 mt-1">{description}</p>
    </div>
);


const CoursesSection: React.FC = () => {
    const kualitatifTopics = ["Dasar-dasar Penelitian Kualitatif", "Teknik Pengumpulan Data Kualitatif", "Analisis Data Kualitatif (Nvivo)"];
    const kuantitatifTopics = ["Desain Eksperimental, Korelasional, dan Survei", "Pengembangan Instrumen Skala", "Statistik Deskriptif dan Inferensial (SPSS, AMOS)"];
    const rndTopics = ["Langkah-langkah Penelitian Pengembangan", "Uji Validitas Produk/Model", "Teknik Pengujian Efektivitas"];

    return (
        <section id="courses" className="py-20 bg-gray-50">
            <div className="container mx-auto px-4 sm:px-6 lg:px-8">
                <div className="text-center mb-16">
                    <h2 className="text-3xl lg:text-4xl font-extrabold text-slate-900">Pusat Kursus & Materi</h2>
                    <p className="mt-4 text-lg text-slate-600 max-w-3xl mx-auto">
                        Selami lebih dalam setiap metodologi dengan materi yang terstruktur dan mudah dipahami.
                    </p>
                </div>
                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
                    <CourseCard title="Metodologi Kualitatif" topics={kualitatifTopics} borderColor="#4285F4" />
                    <CourseCard title="Metodologi Kuantitatif" topics={kuantitatifTopics} borderColor="#34A853" />
                    <CourseCard title="Metodologi R&D" topics={rndTopics} borderColor="#FBBC05" />
                </div>
                
                <div className="mt-16">
                    <h3 className="text-2xl font-bold text-center text-slate-800 mb-8">Sumber Daya Tambahan</h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
                        <SpecialCategoryCard title="Pusat Instrumen Ukur" description="Repository instrumen penelitian yang siap pakai atau untuk diadaptasi sesuai kebutuhan Anda." />
                        <SpecialCategoryCard title="Panduan Software Analisis" description="Tutorial langkah-demi-langkah untuk software populer seperti SPSS, AMOS, R, Nvivo, dan lainnya." />
                    </div>
                </div>
            </div>
        </section>
    );
};

export default CoursesSection;