<section id="portfolio" class="py-20 bg-white">
    <div class="container mx-auto px-4">
        <div class="text-center mb-16" data-aos="fade-up">
            <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">My Portfolio</h2>
            <div class="w-20 h-1 bg-blue-600 mx-auto"></div>
        </div>

        <!-- Filter Buttons -->
        <div class="flex justify-center mb-12 flex-wrap" data-aos="fade-up">
            <button class="filter-btn px-4 py-2 mx-2 mb-2 rounded-full bg-blue-600 text-white" data-filter="all">All</button>
            <button class="filter-btn px-4 py-2 mx-2 mb-2 rounded-full bg-gray-200 hover:bg-blue-600 hover:text-white transition" data-filter="web">Web Development</button>
            <button class="filter-btn px-4 py-2 mx-2 mb-2 rounded-full bg-gray-200 hover:bg-blue-600 hover:text-white transition" data-filter="design">UI/UX Design</button>
            <button class="filter-btn px-4 py-2 mx-2 mb-2 rounded-full bg-gray-200 hover:bg-blue-600 hover:text-white transition" data-filter="mobile">Mobile Apps</button>
        </div>

        <!-- Portfolio Items -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Item 1 -->
            <div class="portfolio-item web" data-aos="fade-up" data-category="web">
                <div class="relative overflow-hidden rounded-lg shadow-md hover:shadow-xl transition">
                    <img src="{{ asset('images/portfolio/web1.jpg') }}" alt="Web Project" class="w-full h-64 object-cover">
                    <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 hover:opacity-100 transition">
                        <div class="text-center p-4">
                            <h3 class="text-white text-xl font-bold mb-2">E-commerce Website</h3>
                            <p class="text-gray-300 mb-4">Laravel & Vue.js implementation</p>
                            <a href="#" class="text-blue-400 hover:text-blue-300">View Project</a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Item 2 -->
            <div class="portfolio-item design" data-aos="fade-up" data-category="design">
                <div class="relative overflow-hidden rounded-lg shadow-md hover:shadow-xl transition">
                    <img src="{{ asset('images/portfolio/design1.jpg') }}" alt="Design Project" class="w-full h-64 object-cover">
                    <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 hover:opacity-100 transition">
                        <div class="text-center p-4">
                            <h3 class="text-white text-xl font-bold mb-2">Dashboard UI</h3>
                            <p class="text-gray-300 mb-4">Figma Design</p>
                            <a href="#" class="text-blue-400 hover:text-blue-300">View Project</a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Add more portfolio items following the same pattern -->
        </div>
    </div>
</section>

@push('scripts')
<script>
    // Portfolio Filtering
    document.addEventListener('DOMContentLoaded', function() {
        const filterButtons = document.querySelectorAll('.filter-btn');
        const portfolioItems = document.querySelectorAll('.portfolio-item');

        filterButtons.forEach(button => {
            button.addEventListener('click', function() {
                // Update active button
                filterButtons.forEach(btn => {
                    btn.classList.remove('bg-blue-600', 'text-white');
                    btn.classList.add('bg-gray-200');
                });
                this.classList.add('bg-blue-600', 'text-white');
                this.classList.remove('bg-gray-200');

                // Filter items
                const filterValue = this.getAttribute('data-filter');
                portfolioItems.forEach(item => {
                    if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {
                        item.style.display = 'block';
                    } else {
                        item.style.display = 'none';
                    }
                });
            });
        });
    });
</script>
@endpush