script.js

document.addEventListener('DOMContentLoaded', () => {
    const grid = document.getElementById('opinions-grid');
    const filterButtons = document.querySelectorAll('.filter-btn');

    // Simulating an API Response with Mock Data tailored to VTC
    // In a real scenario, this would be a fetch() call to a backend or Google Places API
    const mockData = [
        {
            id: 1,
            author: "David Chen",
            avatarSeed: "david",
            rating: 5,
            date: "2 days ago",
            source: "Student Forum",
            sentiment: "positive",
            text: "The practical workshops at VTC are unmatched. I learned more in 3 months here than I did in a year of theory at university."
        },
        {
            id: 2,
            author: "Sarah Jenkins",
            avatarSeed: "sarah",
            rating: 4,
            date: "1 week ago",
            source: "Google Review",
            sentiment: "positive",
            text: "Great facilities and helpful instructors. The equipment is very modern and industry standard."
        },
        {
            id: 3,
            author: "Michael Wong",
            avatarSeed: "michael",
            rating: 2,
            date: "2 weeks ago",
            source: "LinkedIn",
            sentiment: "critical",
            text: "The curriculum is a bit outdated. Some of the software we are learning hasn't been used in the industry for 5 years."
        },
        {
            id: 4,
            author: "Emily Davis",
            avatarSeed: "emily",
            rating: 5,
            date: "3 weeks ago",
            source: "Course Report",
            sentiment: "positive",
            text: "Got hired immediately after graduation. The career services team really helped polish my resume."
        },
        {
            id: 5,
            author: "Tom Li",
            avatarSeed: "tom",
            rating: 3,
            date: "1 month ago",
            source: "Yelp",
            sentiment: "critical",
            text: "The administration can be quite slow. It took forever to get my certificate processed."
        },
        {
            id: 6,
            author: "Jessica Ho",
            avatarSeed: "jessica",
            rating: 4,
            date: "1 month ago",
            source: "Twitter",
            sentiment: "positive",
            text: "Love the flexibility of the part-time courses. Fits perfectly with my work schedule."
        },
        {
            id: 7,
            author: "Ryan Gosling",
            avatarSeed: "ryan",
            rating: 5,
            date: "2 months ago",
            source: "Facebook",
            sentiment: "positive",
            text: "Best decision for my career switch. The instructors are actual industry veterans."
        },
        {
            id: 8,
            author: "Anna Smith",
            avatarSeed: "anna",
            rating: 1,
            date: "2 months ago",
            source: "Google Review",
            sentiment: "critical",
            text: "Class sizes are too big. Hard to get one-on-one time with the teacher when you are stuck."
        },
        {
            id: 9,
            author: "Chris Evans",
            avatarSeed: "chris",
            rating: 5,
            date: "3 months ago",
            source: "School Portal",
            sentiment: "positive",
            text: "Excellent value for money. The resources available to students are top notch."
        }
    ];

    // Function to render cards
    function renderOpinions(filter = 'all') {
        grid.innerHTML = ''; // Clear existing

        const filteredData = filter === 'all' 
            ? mockData 
            : mockData.filter(item => item.sentiment === filter);

        if (filteredData.length === 0) {
            grid.innerHTML = `
                <div class="col-span-full text-center py-12">
                    <i data-feather="slash" class="w-12 h-12 mx-auto text-slate-300 mb-4"></i>
                    <p class="text-slate-500">No opinions found for this filter.</p>
                </div>
            `;
            feather.replace();
            return;
        }

        filteredData.forEach((opinion, index) => {
            const card = document.createElement('opinion-card');
            // Pass data using JSON string to the component
            card.setAttribute('data', JSON.stringify(opinion));
            // Add staggered animation delay
            card.style.animationDelay = `${index * 100}ms`;
            card.classList.add('animate-fade-in-up');
            grid.appendChild(card);
        });
        
        // Re-initialize icons for new content
        feather.replace();
    }

    // Initialize Render
    setTimeout(() => {
        renderOpinions();
    }, 1000); // Fake network delay

    // Event Listeners for Filters
    filterButtons.forEach(btn => {
        btn.addEventListener('click', (e) => {
            // Update UI styles
            filterButtons.forEach(b => {
                b.classList.remove('bg-slate-900', 'text-white');
                b.classList.add('bg-white', 'text-slate-600');
            });
            e.target.classList.remove('bg-white', 'text-slate-600');
            e.target.classList.add('bg-slate-900', 'text-white');

            // Filter Logic
            const filterType = e.target.id.replace('filter-', '');
            renderOpinions(filterType);
        });
    });
});