components/why-us.js

class WhyUs extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          padding: 5rem 1rem;
          background: linear-gradient(to bottom, #1E293B, #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;
        }
        
        .comparison-table {
          width: 100%;
          border-collapse: collapse;
          background: rgba(30, 41, 59, 0.5);
          border: 1px solid #1E293B;
          border-radius: 10px;
          overflow: hidden;
        }
        
        .table-header {
          background: rgba(212, 175, 55, 0.1);
          color: #D4AF37;
        }
        
        .table-cell {
          padding: 1.5rem;
          text-align: center;
          border-bottom: 1px solid #1E293B;
        }
        
        .table-cell:first-child {
          text-align: left;
        }
        
        .competitor-name {
          font-weight: 600;
          color: #F8FAFC;
        }
        
        .feature-name {
          font-weight: 500;
          color: #CBD5E1;
        }
        
        .check-mark {
          color: #10B981;
          font-weight: 600;
        }
        
        .cross-mark {
          color: #EF4444;
        }
        
        .cta-row {
          text-align: center;
          padding: 2rem;
        }
        
        .btn-cta {
          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-cta: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">Why Choose Commodore Yachting?</h2>
          <p class="section-subtitle">See how we compare against other sailing schools in the Solent</p>
        </div>
        
        <table class="comparison-table">
          <thead>
            <tr class="table-header">
              <th class="table-cell">Features</th>
              <th class="table-cell">Commodore Yachting</th>
              <th class="table-cell">Competitor A</th>
              <th class="table-cell">Competitor B</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="table-cell feature-name">RYA Accredited Courses</td>
              <td class="table-cell check-mark">✓</td>
              <td class="table-cell check-mark">✓</td>
              <td class="table-cell check-mark">✓</td>
            </tr>
            <tr>
              <td class="table-cell feature-name">Expert Instructors</td>
              <td class="table-cell check-mark">✓</td>
              <td class="table-cell check-mark">✓</td>
              <td class="table-cell cross-mark">✗</td>
            </tr>
            <tr>
              <td class="table-cell feature-name">Modern Fleet</td>
              <td class="table-cell check-mark">✓</td>
              <td class="table-cell cross-mark">✗</td>
              <td class="table-cell check-mark">✓</td>
            </tr>
            <tr>
              <td class="table-cell feature-name">Safety Record</td>
              <td class="table-cell check-mark">✓</td>
              <td class="table-cell cross-mark">✗</td>
              <td class="table-cell check-mark">✓</td>
            </tr>
            <tr>
              <td class="table-cell feature-name">5-Star Reviews</td>
              <td class="table-cell check-mark">✓</td>
              <td class="table-cell cross-mark">✗</td>
              <td class="table-cell cross-mark">✗</td>
            </tr>
            <tr>
              <td class="table-cell feature-name">Flexible Scheduling</td>
              <td class="table-cell check-mark">✓</td>
              <td class="table-cell check-mark">✓</td>
              <td class="table-cell cross-mark">✗</td>
            </tr>
            <tr>
              <td class="table-cell feature-name">Comprehensive Gear</td>
              <td class="table-cell check-mark">✓</td>
              <td class="table-cell cross-mark">✗</td>
              <td class="table-cell cross-mark">✗</td>
            </tr>
            <tr>
              <td class="table-cell feature-name">Personalized Learning</td>
              <td class="table-cell check-mark">✓</td>
              <td class="table-cell cross-mark">✗</td>
              <td class="table-cell cross-mark">✗</td>
            </tr>
          </tbody>
        </table>
        
        <div class="cta-row">
          <button class="btn-cta">Book Your Course Today</button>
        </div>
      </div>
    `;
  }
}

customElements.define('why-us', WhyUs);