class CustomPartSelector extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
        }
        .category {
          margin-bottom: 1.5rem;
        }
        .category-title {
          font-weight: 600;
          color: #3a86ff;
          margin-bottom: 0.75rem;
          display: flex;
          align-items: center;
          cursor: pointer;
        }
        .category-icon {
          margin-right: 0.5rem;
        }
        .parts-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
          gap: 0.75rem;
        }
        .part-card {
          background: rgba(45, 55, 72, 0.7);
          border-radius: 0.5rem;
          padding: 0.75rem;
          text-align: center;
          cursor: pointer;
          border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .part-image {
          width: 100%;
          height: 80px;
          background-color: #2d3748;
          border-radius: 0.25rem;
          margin-bottom: 0.5rem;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #a0aec0;
        }
        .part-name {
          font-size: 0.875rem;
          font-weight: 500;
        }
        .search-box {
          width: 100%;
          margin-bottom: 1.5rem;
          position: relative;
        }
        .search-input {
          width: 100%;
          padding: 0.75rem 1rem 0.75rem 2.5rem;
          background: rgba(45, 55, 72, 0.7);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 0.5rem;
          color: white;
          outline: none;
        }
        .search-icon {
          position: absolute;
          left: 1rem;
          top: 50%;
          transform: translateY(-50%);
          color: #a0aec0;
        }
      </style>
      <div class="part-selector">
        <div class="search-box">
          <i data-feather="search" class="search-icon"></i>
          <input type="text" class="search-input" placeholder="Search parts...">
        </div>
        
        <div class="category">
          <div class="category-title">
            <i data-feather="cpu" class="category-icon"></i> Heads
          </div>
          <div class="parts-grid">
            <div class="part-card">
              <div class="part-image"><i data-feather="cpu"></i></div>
              <div class="part-name">Standard Head</div>
            </div>
            <div class="part-card">
              <div class="part-image"><i data-feather="eye"></i></div>
              <div class="part-name">Sensor Head</div>
            </div>
            <div class="part-card">
              <div class="part-image"><i data-feather="shield"></i></div>
              <div class="part-name">Armored Head</div>
            </div>
          </div>
        </div>
        
        <div class="category">
          <div class="category-title">
            <i data-feather="user" class="category-icon"></i> Torsos
          </div>
          <div class="parts-grid">
            <div class="part-card">
              <div class="part-image"><i data-feather="box"></i></div>
              <div class="part-name">Basic Torso</div>
            </div>
            <div class="part-card">
              <div class="part-image"><i data-feather="battery"></i></div>
              <div class="part-name">Power Core</div>
            </div>
            <div class="part-card">
              <div class="part-image"><i data-feather="layers"></i></div>
              <div class="part-name">Modular Frame</div>
            </div>
          </div>
        </div>
        
        <div class="category">
          <div class="category-title">
            <i data-feather="arm" class="category-icon"></i> Arms
          </div>
          <div class="parts-grid">
            <div class="part-card">
              <div class="part-image"><i data-feather="tool"></i></div>
              <div class="part-name">Gripper</div>
            </div>
            <div class="part-card">
              <div class="part-image"><i data-feather="zap"></i></div>
              <div class="part-name">Plasma Cutter</div>
            </div>
            <div class="part-card">
              <div class="part-image"><i data-feather="target"></i></div>
              <div class="part-name">Railgun</div>
            </div>
          </div>
        </div>
        
        <div class="category">
          <div class="category-title">
            <i data-feather="leg" class="category-icon"></i> Legs
          </div>
          <div class="parts-grid">
            <div class="part-card">
              <div class="part-image"><i data-feather="chevrons-right"></i></div>
              <div class="part-name">Bipedal</div>
            </div>
            <div class="part-card">
              <div class="part-image"><i data-feather="octagon"></i></div>
              <div class="part-name">Quadruped</div>
            </div>
            <div class="part-card">
              <div class="part-image"><i data-feather="rotate-cw"></i></div>
              <div class="part-name">Wheeled</div>
            </div>
          </div>
        </div>
      </div>
    `;
    feather.replace();
  }
}
customElements.define('custom-part-selector', CustomPartSelector);