components/course-explorer.js

class CourseExplorer extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          padding: 5rem 1rem;
          background: #0F172A;
        }
        
        .container {
          max-width: 1200px;
          margin: 0 auto;
        }
        
        .section-header {
          text-align: center;
          margin-bottom: 3rem;
        }
        
        .section-title {
          font-size: 2.5rem;
          margin-bottom: 1rem;
          color: #F8FAFC;
        }
        
        .section-subtitle {
          color: #94A3B8;
          max-width: 600px;
          margin: 0 auto;
          line-height: 1.6;
        }
        
        .filters {
          display: flex;
          justify-content: center;
          gap: 1rem;
          margin-bottom: 2rem;
          flex-wrap: wrap;
        }
        
        .filter-btn {
          background: transparent;
          border: 1px solid #334155;
          color: #CBD5E1;
          padding: 0.5rem 1.5rem;
          border-radius: 30px;
          cursor: pointer;
          transition: all 0.3s ease;
        }
        
        .filter-btn.active, .filter-btn:hover {
          background: #D4AF37;
          color: #0F172A;
          border-color: #D4AF37;
        }
        
        .courses-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
          gap: 2rem;
        }
        
        .course-card {
          background: rgba(30, 41, 59, 0.5);
          border: 1px solid #1E293B;
          border-radius: 10px;
          overflow: hidden;
          transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        .course-card:hover {
          transform: translateY(-10px);
          box-shadow: 0 20px 25px -5px rgba(212, 175, 55, 0.2), 0 10px 10px -5px rgba(212, 175, 55, 0.1);
          border-color: #D4AF37;
        }
        
        .course-image {
          width: 100%;
          height: 200px;
          object-fit: cover;
        }
        
        .course-content {
          padding: 1.5rem;
        }
        
        .course-title {
          font-size: 1.25rem;
          margin-bottom: 0.5rem;
          color: #F8FAFC;
        }
        
        .course-description {
          color: #94A3B8;
          margin-bottom: 1rem;
          line-height: 1.6;
        }
        
        .course-meta {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 1rem;
        }
        
        .course-price {
          font-weight: 600;
          color: #D4AF37;
        }
        
        .course-duration {
          color: #94A3B8;
          font-size: 0.875rem;
        }
        
        .course-link {
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          color: #D4AF37;
          text-decoration: none;
          font-weight: 500;
          margin-top: 1rem;
        }
        
        .course-link:hover {
          text-decoration: underline;
        }
      </style>
      
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">Explore Our Courses</h2>
          <p class="section-subtitle">From beginner to expert, we offer comprehensive RYA training programs to master the sea</p>
        </div>
        
        <div class="filters">
          <button class="filter-btn active" data-filter="all">All Courses</button>
          <button class="filter-btn" data-filter="practical">Practical</button>
          <button class="filter-btn" data-filter="theory">Theory</button>
          <button class="filter-btn" data-filter="powerboat">Powerboat</button>
          <button class="filter-btn" data-filter="mile">Mile Builders</button>
        </div>
        
        <div class="courses-grid">
          <div class="course-card">
            <img src="http://static.photos/nature/320x240/1" alt="Day Skipper Course" class="course-image">
            <div class="course-content">
              <h3 class="course-title">Day Skipper</h3>
              <p class="course-description">Perfect for beginners wanting to gain confidence in coastal sailing</p>
              <div class="course-meta">
                <span class="course-price">£495</span>
                <span class="course-duration">5 Days</span>
              </div>
              <a href="#" class="course-link">
                <span>Learn More</span>
                <i data-feather="arrow-right"></i>
              </a>
            </div>
          </div>
          
          <div class="course-card">
            <img src="http://static.photos/nature/320x240/2" alt="Coastal Skipper Course" class="course-image">
            <div class="course-content">
              <h3 class="course-title">Coastal Skipper</h3>
              <p class="course-description">Advanced navigation and yacht handling in challenging conditions</p>
              <div class="course-meta">
                <span class="course-price">£695</span>
                <span class="course-duration">5 Days</span>
              </div>
              <a href="#" class="course-link">
                <span>Learn More</span>
                <i data-feather="arrow-right"></i>
              </a>
            </div>
          </div>
          
          <div class="course-card">
            <img src="http://static.photos/nature/320x240/3" alt="Yachtmaster Course" class="course-image">
            <div class="course-content">
              <h3 class="course-title">Yachtmaster Coastal</h3>
              <p class="course-description">Professional qualification for experienced sailors</p>
              <div class="course-meta">
                <span class="course-price">£895</span>
                <span class="course-duration">5 Days</span>
              </div>
              <a href="#" class="course-link">
                <span>Learn More</span>
                <i data-feather="arrow-right"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    `;
    
    // Initialize feather icons
    import('https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js').then(() => {
      feather.replace({ icons: this.shadowRoot.querySelectorAll('[data-feather]') });
    });
    
    // Add filter functionality
    this.shadowRoot.querySelectorAll('.filter-btn').forEach(button => {
      button.addEventListener('click', () => {
        // Remove active class from all buttons
        this.shadowRoot.querySelectorAll('.filter-btn').forEach(btn => {
          btn.classList.remove('active');
        });
        
        // Add active class to clicked button
        button.classList.add('active');
        
        // In a real implementation, you would filter courses here
      });
    });
  }
}

customElements.define('course-explorer', CourseExplorer);