document.addEventListener('DOMContentLoaded', () => {
    const caseList = document.getElementById('caseList');

    // Cust_db.js의 데이터를 화면에 그리는 함수
    function renderCases(filter = 'all') {
        caseList.innerHTML = '';
        const filteredData = filter === 'all' ? CASE_DATA : CASE_DATA.filter(item => item.category === filter);

        filteredData.forEach(item => {
            const card = document.createElement('div');
            card.className = 'case-card animate-fade-in';
            card.innerHTML = `
                <div class="h-48 bg-slate-200 overflow-hidden">
                    <img src="${item.img}" class="w-full h-full object-cover" alt="체험사진">
                </div>
                <div class="p-6">
                    <span class="badge ${item.category === 'pain' ? 'bg-red-100 text-red-600' : 'bg-blue-100 text-blue-600'} mb-3 inline-block">
                        ${item.categoryName}
                    </span>
                    <h3 class="text-xl font-bold mb-2">${item.title}</h3>
                    <p class="text-slate-600 text-sm mb-4 line-clamp-3">${item.desc}</p>
                    <div class="flex items-center text-xs text-slate-400">
                        <span class="font-bold text-slate-900 mr-2">${item.userName}님</span> | <span class="ml-2">${item.date}</span>
                    </div>
                </div>
            `;
            caseList.appendChild(card);
        });
    }

    renderCases();

    // 필터 기능
    document.querySelectorAll('.filter-btn').forEach(btn => {
        btn.addEventListener('click', (e) => {
            document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
            e.target.classList.add('active');
            renderCases(e.target.dataset.filter);
        });
    });
});