components/course-calendar.js

class CourseCalendar 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;
        }
        
        .calendar-container {
          background: rgba(30, 41, 59, 0.5);
          border: 1px solid #1E293B;
          border-radius: 10px;
          padding: 2rem;
        }
        
        .calendar-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 2rem;
        }
        
        .calendar-title {
          font-size: 1.5rem;
          color: #F8FAFC;
        }
        
        .calendar-nav {
          display: flex;
          gap: 1rem;
        }
        
        .nav-btn {
          background: transparent;
          border: 1px solid #334155;
          color: #CBD5E1;
          width: 36px;
          height: 36px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.3s ease;
        }
        
        .nav-btn:hover {
          background: #D4AF37;
          color: #0F172A;
          border-color: #D4AF37;
        }
        
        .calendar-grid {
          display: grid;
          grid-template-columns: repeat(7, 1fr);
          gap: 1px;
          background: #1E293B;
          border: 1px solid #1E293B;
          border-radius: 5px;
          overflow: hidden;
        }
        
        .calendar-day-header {
          background: rgba(212, 175, 55, 0.1);
          color: #D4AF37;
          text-align: center;
          padding: 0.75rem 0;
          font-weight: 600;
        }
        
        .calendar-day {
          background: rgba(30, 41, 59, 0.8);
          min-height: 100px;
          padding: 0.5rem;
          position: relative;
        }
        
        .calendar-day.other-month {
          background: rgba(15, 23, 42, 0.5);
          color: #475569;
        }
        
        .day-number {
          font-weight: 600;
          margin-bottom: 0.5rem;
        }
        
        .course-event {
          background: rgba(212, 175, 55, 0.2);
          color: #F8FAFC;
          padding: 0.25rem;
          border-radius: 3px;
          font-size: 0.75rem;
          margin-bottom: 0.25rem;
          cursor: pointer;
          transition: all 0.3s ease;
        }
        
        .course-event:hover {
          background: rgba(212, 175, 55, 0.3);
        }
        
        .booking-cta {
          text-align: center;
          margin-top: 3rem;
        }
        
        .btn-book {
          background: linear-gradient(45deg, #D4AF37, #F8FAFC);
          color: #0F172A;
          border: none;
          padding: 1rem 2rem;
          border-radius: 30px;
          font-weight: 600;
          font-size: 1.125rem;
          cursor: pointer;
          transition: all 0.3s ease;
        }
        
        .btn-book:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3);
        }
      </style>
      
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">2026 Course Calendar</h2>
          <p class="section-subtitle">Plan your sailing education with our comprehensive course schedule</p>
        </div>
        
        <div class="calendar-container">
          <div class="calendar-header">
            <h3 class="calendar-title">June 2026</h3>
            <div class="calendar-nav">
              <button class="nav-btn">
                <i data-feather="chevron-left"></i>
              </button>
              <button class="nav-btn">
                <i data-feather="chevron-right"></i>
              </button>
            </div>
          </div>
          
          <div class="calendar-grid">
            <div class="calendar-day-header">Sun</div>
            <div class="calendar-day-header">Mon</div>
            <div class="calendar-day-header">Tue</div>
            <div class="calendar-day-header">Wed</div>
            <div class="calendar-day-header">Thu</div>
            <div class="calendar-day-header">Fri</div>
            <div class="calendar-day-header">Sat</div>
            
            <!-- Previous month days -->
            <div class="calendar-day other-month">
              <div class="day-number">26</div>
            </div>
            <div class="calendar-day other-month">
              <div class="day-number">27</div>
            </div>
            <div class="calendar-day other-month">
              <div class="day-number">28</div>
            </div>
            <div class="calendar-day other-month">
              <div class="day-number">29</div>
            </div>
            <div class="calendar-day other-month">
              <div class="day-number">30</div>
            </div>
            <div class="calendar-day other-month">
              <div class="day-number">31</div>
            </div>
            
            <!-- Current month days -->
            <div class="calendar-day">
              <div class="day-number">1</div>
            </div>
            <div class="calendar-day">
              <div class="day-number">2</div>
              <div class="course-event">Day Skipper</div>
            </div>
            <div class="calendar-day">
              <div class="day-number">3</div>
              <div class="course-event">Day Skipper</div>
            </div>
            <div class="calendar-day">
              <div class="day-number">4</div>
              <div class="course-event">Day Skipper</div>
            </div>
            <div class="calendar-day">
              <div class="day-number">5</div>
              <div class="course-event">Day Skipper</div>
            </div>
            <div class="calendar-day">
              <div class="day-number">6</div>
              <div class="course-event">Day Skipper</div>
            </div>
            <div class="calendar-day">
              <div class="day-number">7</div>
            </div>
            
            <div class="calendar-day">
              <div class="day-number">8</div>
            </div>
            <div class="calendar-day">
              <div class="day-number">9</div>
              <div class="course-event">Coastal Skipper</div>
            </div>
            <div class="calendar-day">
              <div class="day-number">10</div>
              <div class="course-event">Coastal Skipper</div>
            </div>
            <div class="calendar-day">
              <div class="day-number">11</div>
              <div class="course-event">Coastal Skipper</div>
            </div>
            <div class="calendar-day">
              <div class="day-number">12</div>
              <div class="course-event">Coastal Skipper</div>
            </div>
            <div class="calendar-day">
              <div class="day-number">13</div>
              <div class="course-event">Coastal Skipper</div>
            </div>
            <div class="calendar-day">
              <div class="day-number">14</div>
            </div>
            
            <div class="calendar-day">
              <div class="day-number">15</div>
            </div>
            <div class="calendar-day">
              <div class="day-number">16</div>
              <div class="course-event">Powerboat Level 2</div>
            </div>
            <div class="calendar-day">
              <div class="day-number">17</div>
              <div class="course-event">Powerboat Level 2</div>
            </div>
            <div class="calendar-day">
              <div class="day-number">18</div>
            </div>
            <div class="calendar-day">
              <div class="day-number">19</div>
            </div>
            <div class="calendar-day">
              <div class="day-number">20</div>
            </div>
            <div class="calendar-day">
              <div class="day-number">21</div>
            </div>
            
            <div class="calendar-day">
              <div class="day-number">22</div>
            </div>
            <div class="calendar-day">
              <div class="day-number">23</div>
              <div class="course-event">Yachtmaster</div>
            </div>
            <div class="calendar-day">
              <div class="day-number">24</div>
              <div class="course-event">Yachtmaster</div>
            </div>
            <div class="calendar-day">
              <div class="day-number">25</div>
              <div class="course-event">Yachtmaster</div>
            </div>
            <div class="calendar-day">
              <div class="day-number">26</div>
              <div class="course-event">Yachtmaster</div>
            </div>
            <div class="calendar-day">
              <div class="day-number">27</div>
              <div class="course-event">Yachtmaster</div>
            </div>
            <div class="calendar-day">
              <div class="day-number">28</div>
            </div>
            
            <div class="calendar-day">
              <div class="day-number">29</div>
            </div>
            <div class="calendar-day">
              <div class="day-number">30</div>
            </div>
          </div>
          
          <div class="booking-cta">
            <button class="btn-book">Book Your Course Now</button>
          </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]') });
    });
  }
}

customElements.define('course-calendar', CourseCalendar);