components/course-filter.js

class CourseFilter extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .filter-controls {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 0.75rem;
                    margin-bottom: 2rem;
                    justify-content: center;
                }
                
                .filter-btn {
                    padding: 0.5rem 1.25rem;
                    border-radius: 9999px;
                    border: 1px solid rgba(255, 255, 255, 0.2);
                    background: transparent;
                    color: rgba(255, 255, 255, 0.8);
                    cursor: pointer;
                    transition: all 0.3s ease;
                }
                
                .filter-btn:hover, .filter-btn.active {
                    background: linear-gradient(90deg, #4f46e5, #ec4899);
                    color: white;
                    border-color: transparent;
                }
                
                .courses-grid {
                    display: grid;
                    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
                    gap: 1.5rem;
                }
                
                .course-card {
                    background: rgba(30, 41, 59, 0.7);
                    border-radius: 16px;
                    overflow: hidden;
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    transition: all 0.3s ease;
                }
                
                .course-card:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
                }
                
                .course-image {
                    width: 100%;
                    height: 160px;
                    object-fit: cover;
                }
                
                .course-content {
                    padding: 1.5rem;
                }
                
                .course-category {
                    display: inline-block;
                    padding: 0.25rem 0.75rem;
                    border-radius: 9999px;
                    font-size: 0.75rem;
                    font-weight: 600;
                    margin-bottom: 0.75rem;
                }
                
                .web-dev {
                    background: rgba(79, 70, 229, 0.2);
                    color: #4f46e5;
                }
                
                .ai {
                    background: rgba(236, 72, 153, 0.2);
                    color: #ec4899;
                }
                
                .python {
                    background: rgba(16, 185, 129, 0.2);
                    color: #10b981;
                }
                
                .mobile {
                    background: rgba(245, 158, 11, 0.2);
                    color: #f59e0b;
                }
                
                .course-title {
                    font-size: 1.125rem;
                    font-weight: 600;
                    margin-bottom: 0.5rem;
                    color: white;
                }
                
                .course-desc {
                    color: rgba(255, 255, 255, 0.7);
                    font-size: 0.875rem;
                    margin-bottom: 1rem;
                    line-height: 1.5;
                }
                
                .course-footer {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                
                .course-price {
                    font-weight: 700;
                    color: white;
                }
                
                .course-duration {
                    display: flex;
                    align-items: center;
                    gap: 0.25rem;
                    font-size: 0.875rem;
                    color: rgba(255, 255, 255, 0.7);
                }
                
                .course-duration i {
                    width: 14px;
                    height: 14px;
                }
                
                .no-courses {
                    grid-column: 1 / -1;
                    text-align: center;
                    padding: 2rem;
                    color: rgba(255, 255, 255, 0.7);
                }
            </style>
            
            <div class="filter-controls">
                <button class="filter-btn active" data-filter="all">All Courses</button>
                <button class="filter-btn" data-filter="web">Web Development</button>
                <button class="filter-btn" data-filter="ai">AI & Machine Learning</button>
                <button class="filter-btn" data-filter="python">Python</button>
                <button class="filter-btn" data-filter="mobile">Mobile Development</button>
            </