import React from 'react';

const CheckIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
        <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
    </svg>
);

const OfferingCard: React.FC<{ title: string; children: React.ReactNode; users: string }> = ({ title, children, users }) => (
    <div className="bg-white rounded-lg shadow-md p-6 border-l-4 border-blue-600">
        <div className="flex items-start gap-4">
            <div className="flex-shrink-0">
                <CheckIcon />
            </div>
            <div>
                <h3 className="text-xl font-bold text-slate-800">{title}</h3>
                <p className="mt-2 text-slate-600">{children}</p>
                <div className="mt-4">
                    <span className="text-sm font-semibold text-slate-500">Target Pengguna:</span>
                    <p className="text-sm text-slate-700 font-medium">{users}</p>
                </div>
            </div>
        </div>
    </div>
);

const Offerings: React.FC = () => {
    return (
        <section className="py-20 bg-white">
            <div className="container mx-auto px-4 sm:px-6 lg:px-8">
                <div className="text-center mb-12">
                    <h2 className="text-3xl lg:text-4xl font-extrabold text-slate-900">Apa yang Kami Tawarkan</h2>
                    <p className="mt-4 text-lg text-slate-600 max-w-2xl mx-auto">
                        Sumber daya lengkap untuk mendukung setiap tahap penelitian Anda.
                    </p>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <OfferingCard title="Instrumen Pengukuran Penelitian" users="Peneliti, Dosen, Mahasiswa">
                        Akses berbagai materi dan contoh instrumen ukur yang valid dan reliabel untuk berbagai jenis riset.
                    </OfferingCard>
                    <OfferingCard title="Panduan Analisis Data Komprehensif" users="Peneliti, Dosen, Mahasiswa">
                        Teknik analisis data kualitatif (Nvivo), kuantitatif (SPSS, AMOS, R), dan panduan interpretasi hasil.
                    </OfferingCard>
                    <OfferingCard title="Inovasi dan Tren Riset Terkini" users="Peneliti, Dosen">
                        Informasi terbaru seputar metodologi mutakhir, perangkat lunak analisis, dan studi kasus inovatif.
                    </OfferingCard>
                </div>
            </div>
        </section>
    );
};

export default Offerings;