components/instructor-bios.js

class InstructorBios extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          padding: 5rem 1rem;
          background: linear-gradient(to bottom, #0F172A, #1E293B);
        }
        
        .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;
        }
        
        .instructors-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 2rem;
        }
        
        .instructor-card {
          background: rgba(30, 41, 59, 0.5);
          border: 1px solid #1E293B;
          border-radius: 10px;
          overflow: hidden;
          text-align: center;
          transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        .instructor-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;
        }
        
        .instructor-image {
          width: 100%;
          height: 250px;
          object-fit: cover;
        }
        
        .instructor-content {
          padding: 1.5rem;
        }
        
        .instructor-name {
          font-size: 1.25rem;
          margin-bottom: 0.25rem;
          color: #F8FAFC;
        }
        
        .instructor-title {
          color: #D4AF37;
          margin-bottom: 1rem;
          font-weight: 500;
        }
        
        .instructor-bio {
          color: #94A3B8;
          margin-bottom: 1rem;
          line-height: 1.6;
        }
        
        .instructor-credentials {
          display: flex;
          justify-content: center;
          gap: 0.5rem;
          flex-wrap: wrap;
        }
        
        .credential {
          background: rgba(212, 175, 55, 0.1);
          color: #D4AF37;
          padding: 0.25rem 0.75rem;
          border-radius: 20px;
          font-size: 0.75rem;
          font-weight: 500;
        }
      </style>
      
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">Meet Our Expert Instructors</h2>
          <p class="section-subtitle">Learn from the best in the industry with decades of sailing experience</p>
        </div>
        
        <div class="instructors-grid">
          <div class="instructor-card">
            <img src="http://static.photos/people/320x240/4" alt="Captain James Morrison" class="instructor-image">
            <div class="instructor-content">
              <h3 class="instructor-name">Captain James Morrison</h3>
              <div class="instructor-title">Chief Instructor</div>
              <p class="instructor-bio">
                Yachtmaster Instructor with 30+ years of offshore experience. 
                Specializes in advanced navigation and safety protocols.
              </p>
              <div class="instructor-credentials">
                <span class="credential">Yachtmaster</span>
                <span class="credential">RYA Instructor</span>
                <span class="credential">MCA Master 200</span>
              </div>
            </div>
          </div>
          
          <div class="instructor-card">
            <img src="http://static.photos/people/320x240/5" alt="Sarah Williams" class="instructor-image">
            <div class="instructor-content">
              <h3 class="instructor-name">Sarah Williams</h3>
              <div class="instructor-title">Navigation Specialist</div>
              <p class="instructor-bio">
                Electronics and navigation expert with a passion for teaching. 
                Makes complex concepts accessible to all students.
              </p>
              <div class="instructor-credentials">
                <span class="credential">Yachtmaster</span>
                <span class="credential">RYA Instructor</span>
                <span class="credential">Electronics Specialist</span>
              </div>
            </div>
          </div>
          
          <div class="instructor-card">
            <img src="http://static.photos/people/320x240/6" alt="Michael Torres" class="instructor-image">
            <div class="instructor-content">
              <h3 class="instructor-name">Michael Torres</h3>
              <div class="instructor-title">Practical Skills Coach</div>
              <p class="instructor-bio">
                Former America's Cup sailor with expertise in boat handling 
                and racing techniques. Brings competitive edge to training.
              </p>
              <div class="instructor-credentials">
                <span class="credential">Yachtmaster</span>
                <span class="credential">RYA Instructor</span>
                <span class="credential">America's Cup Veteran</span>
              </div>
            </div>
          </div>
          
          <div class="instructor-card">
            <img src="http://static.photos/people/320x240/7" alt="Emma Clarke" class="instructor-image">
            <div class="instructor-content">
              <h3 class="instructor-name">Emma Clarke</h3>
              <div class="instructor-title">Beginner Programs</div>
              <p class="instructor-bio">
                Specializes in building confidence in new sailors. 
                Patient and encouraging approach makes learning enjoyable.
              </p>
              <div class="instructor-credentials">
                <span class="credential">Yachtmaster</span>
                <span class="credential">RYA Instructor</span>
                <span class="credential">Women in Sailing Advocate</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    `;
  }
}

customElements.define('instructor-bios', InstructorBios);