components/features.js

class CustomFeatures extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          padding: 6rem 2rem;
          background-color: white;
        }
        .features-container {
          max-width: 1280px;
          margin: 0 auto;
        }
        .section-header {
          text-align: center;
          margin-bottom: 4rem;
        }
        .section-header h2 {
          font-size: 2.25rem;
          font-weight: 800;
          color: #1f2937;
          margin-bottom: 1rem;
        }
        .section-header p {
          color: #6b7280;
          max-width: 600px;
          margin: 0 auto;
        }
        .features-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 2rem;
        }
        .feature-card {
          background-color: #f9fafb;
          border-radius: 1rem;
          padding: 2rem;
          transition: all 0.3s ease;
          border: 1px solid #e5e7eb;
        }
        .feature-icon {
          width: 3rem;
          height: 3rem;
          background-color: #e0e7ff;
          border-radius: 0.75rem;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 1.5rem;
          color: #4f46e5;
        }
        .feature-title {
          font-size: 1.25rem;
          font-weight: 600;
          color: #1f2937;
          margin-bottom: 1rem;
        }
        .feature-description {
          color: #6b7280;
          line-height: 1.6;
        }
      </style>
      <div class="features-container" id="features">
        <div class="section-header">
          <h2>🎸 Vibe Features 🎹</h2>
          <p>Turn your dev flow into a sick beat drop - these features hit different</p>
        </div>
<div class="features-grid">
          <div class="feature-card">
            <div class="feature-icon">
              <i data-feather="codepen"></i>
            </div>
            <h3 class="feature-title">🎧 Sync Mode</h3>
            <p class="feature-description">
              Drop into the code studio with your squad - real-time sync like a perfectly timed drop.
            </p>
</div>
          <div class="feature-card">
            <div class="feature-icon">
              <i data-feather="music"></i>
            </div>
            <h3 class="feature-title">🎵 Dev Playlists</h3>
            <p class="feature-description">
              Lofi hip-hop beats to code to - the perfect soundtrack for your next masterpiece.
            </p>
</div>
          <div class="feature-card">
            <div class="feature-icon">
              <i data-feather="git-branch"></i>
            </div>
            <h3 class="feature-title">🌊 Flow Control</h3>
            <p class="feature-description">
              Ride the git wave with our visual flow - merge conflicts? More like dance-offs.
            </p>
</div>
          <div class="feature-card">
            <div class="feature-icon">
              <i data-feather="cast"></i>
            </div>
            <h3 class="feature-title">🎤 Live Streaming</h3>
            <p class="feature-description">
              Go live with your code - let the world watch you create magic in real-time.
            </p>
</div>
          <div class="feature-card">
            <div class="feature-icon">
              <i data-feather="cpu"></i>
            </div>
            <h3 class="feature-title">🤖 AI DJ</h3>
            <p class="feature-description">
              Your coding partner drops sick suggestions and keeps the bugs away like a bouncer.
            </p>
</div>
          <div class="feature-card">
            <div class="feature-icon">
              <i data-feather="trending-up"></i>
            </div>
            <h3 class="feature-title">📊 Vibe Metrics</h3>
            <p class="feature-description">
              Track your flow state and code velocity - see how your dev game levels up.
            </p>
</div>
        </div>
      </div>
    `;
  }
}
customElements.define('custom-features', CustomFeatures);