components/fleet-showcase.js

class FleetShowcase 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;
        }
        
        .fleet-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 2rem;
        }
        
        .fleet-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);
        }
        
        .fleet-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;
        }
        
        .fleet-image {
          width: 100%;
          height: 200px;
          object-fit: cover;
        }
        
        .fleet-content {
          padding: 1.5rem;
        }
        
        .fleet-title {
          font-size: 1.25rem;
          margin-bottom: 0.5rem;
          color: #F8FAFC;
        }
        
        .fleet-specs {
          display: flex;
          justify-content: space-between;
          color: #94A3B8;
          margin: 1rem 0;
          padding: 0.75rem 0;
          border-top: 1px solid #1E293B;
          border-bottom: 1px solid #1E293B;
        }
        
        .spec-item {
          text-align: center;
        }
        
        .spec-value {
          font-weight: 600;
          color: #D4AF37;
        }
        
        .spec-label {
          font-size: 0.875rem;
        }
        
        .fleet-description {
          color: #94A3B8;
          margin-bottom: 1rem;
          line-height: 1.6;
        }
        
        .fleet-link {
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          color: #D4AF37;
          text-decoration: none;
          font-weight: 500;
        }
        
        .fleet-link:hover {
          text-decoration: underline;
        }
      </style>
      
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">Our Immaculate Fleet</h2>
          <p class="section-subtitle">Experience sailing in our premium yachts, meticulously maintained for your safety and comfort</p>
        </div>
        
        <div class="fleet-grid">
          <div class="fleet-card">
            <img src="http://static.photos/nature/320x240/7" alt="Jeanneau Sun Odyssey 490" class="fleet-image">
            <div class="fleet-content">
              <h3 class="fleet-title">Jeanneau Sun Odyssey 490</h3>
              <p class="fleet-description">Perfect for offshore adventures with spacious cockpit and comfortable cabins</p>
              
              <div class="fleet-specs">
                <div class="spec-item">
                  <div class="spec-value">49ft</div>
                  <div class="spec-label">Length</div>
                </div>
                <div class="spec-item">
                  <div class="spec-value">4</div>
                  <div class="spec-label">Cabins</div>
                </div>
                <div class="spec-item">
                  <div class="spec-value">10</div>
                  <div class="spec-label">Berths</div>
                </div>
              </div>
              
              <a href="#" class="fleet-link">
                <span>View Details</span>
                <i data-feather="arrow-right"></i>
              </a>
            </div>
          </div>
          
          <div class="fleet-card">
            <img src="http://static.photos/nature/320x240/8" alt="Beneteau Oceanis 46.1" class="fleet-image">
            <div class="fleet-content">
              <h3 class="fleet-title">Beneteau Oceanis 46.1</h3>
              <p class="fleet-description">Modern design with exceptional performance and comfort for coastal cruising</p>
              
              <div class="fleet-specs">
                <div class="spec-item">
                  <div class="spec-value">46ft</div>
                  <div class="spec-label">Length</div>
                </div>
                <div class="spec-item">
                  <div class="spec-value">3</div>
                  <div class="spec-label">Cabins</div>
                </div>
                <div class="spec-item">
                  <div class="spec-value">8</div>
                  <div class="spec-label">Berths</div>
                </div>
              </div>
              
              <a href="#" class="fleet-link">
                <span>View Details</span>
                <i data-feather="arrow-right"></i>
              </a>
            </div>
          </div>
          
          <div class="fleet-card">
            <img src="http://static.photos/nature/320x240/9" alt="Dufour 405 Grand Large" class="fleet-image">
            <div class="fleet-content">
              <h3 class="fleet-title">Dufour 405 Grand Large</h3>
              <p class="fleet-description">Elegant yacht with spacious interior and excellent sailing characteristics</p>
              
              <div class="fleet-specs">
                <div class="spec-item">
                  <div class="spec-value">40ft</div>
                  <div class="spec-label">Length</div>
                </div>
                <div class="spec-item">
                  <div class="spec-value">2</div>
                  <div class="spec-label">Cabins</div>
                </div>
                <div class="spec-item">
                  <div class="spec-value">6</div>
                  <div class="spec-label">Berths</div>
                </div>
              </div>
              
              <a href="#" class="fleet-link">
                <span>View Details</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]') });
    });
  }
}

customElements.define('fleet-showcase', FleetShowcase);