class PaymentMethods extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .payment-container {
          background: white;
          border-radius: 0.5rem;
          padding: 1.5rem;
          box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .payment-method {
          display: flex;
          align-items: center;
          padding: 1rem;
          border: 1px solid #E5E7EB;
          border-radius: 0.375rem;
          margin-bottom: 1rem;
          cursor: pointer;
          transition: all 0.2s;
        }
        .payment-method:hover {
          border-color: #4F46E5;
        }
        .payment-method.selected {
          border-color: #4F46E5;
          background: #EEF2FF;
        }
        .payment-icon {
          width: 40px;
          height: 40px;
          object-fit: contain;
          margin-left: 1rem;
        }
        .payment-details {
          flex: 1;
        }
        .payment-title {
          font-weight: 600;
          margin-bottom: 0.25rem;
        }
        .payment-desc {
          color: #6B7280;
          font-size: 0.875rem;
        }
      </style>
      <div class="payment-container">
        <h2 class="text-xl font-bold mb-4">طرق الدفع</h2>
        
        <div class="payment-method selected">
          <img src="https://via.placeholder.com/40" alt="بطاقة ائتمان" class="payment-icon">
          <div class="payment-details">
            <div class="payment-title">بطاقة ائتمان / مدى</div>
            <div class="payment-desc">ادخل تفاصيل بطاقتك الائتمانية</div>
          </div>
          <i data-feather="check-circle" width="20" height="20" color="#4F46E5"></i>
        </div>

        <div class="payment-method">
          <img src="https://via.placeholder.com/40" alt="الدفع عند الاستلام" class="payment-icon">
          <div class="payment-details">
            <div class="payment-title">الدفع عند الاستلام</div>
            <div class="payment-desc">ادفع عند استلام طلبك</div>
          </div>
          <i data-feather="circle" width="20" height="20" color="#D1D5DB"></i>
        </div>

        <div class="payment-method">
          <img src="https://via.placeholder.com/40" alt="محفظة إلكترونية" class="payment-icon">
          <div class="payment-details">
            <div class="payment-title">محفظة إلكترونية</div>
            <div class="payment-desc">فودافون كاش - أورنج موني</div>
          </div>
          <i data-feather="circle" width="20" height="20" color="#D1D5DB"></i>
        </div>
      </div>
    `;
  }
}
customElements.define('payment-methods', PaymentMethods);