components/redeem-form.js

class RedeemForm extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          font-family: inherit;
        }
        form {
          display: flex;
          flex-direction: column;
          gap: 1rem;
        }
        .form-group {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
        }
        label {
          font-size: 0.875rem;
          font-weight: 500;
          color: #d1d5db;
        }
        input, select {
          padding: 0.75rem;
          background: rgba(55, 65, 81, 0.5);
          border: 1px solid rgba(75, 85, 99, 0.5);
          border-radius: 0.5rem;
          color: white;
          font-size: 1rem;
          transition: all 0.3s;
        }
        input:focus, select:focus {
          outline: none;
          border-color: #ef4444;
          box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
        }
        button {
          background: linear-gradient(45deg, #ef4444, #dc2626);
          color: white;
          padding: 0.75rem 2rem;
          border: none;
          border-radius: 0.5rem;
          font-size: 1rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.3s;
          margin-top: 1rem;
        }
        button:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 25px rgba(239, 68, 68, 0.3);
        }
        button:active {
          transform: translateY(0);
        }
        .message {
          margin-top: 1rem;
          padding: 0.75rem;
          border-radius: 0.5rem;
          font-size: 0.875rem;
          display: none;
        }
        .message.success {
          background: rgba(34, 197, 94, 0.1);
          border: 1px solid rgba(34, 197, 94, 0.3);
          color: #22c55e;
        }
        .message.error {
          background: rgba(239, 68, 68, 0.1);
          border: 1px solid rgba(239, 68, 68, 0.3);
          color: #ef4444;
        }
      </style>
      <form id="redeemForm">
        <div class="form-group">
          <label for="code">Redemption Code</label>
          <input type="text" id="code" name="code" placeholder="XXXX-XXXX-XXXX" required>
        </div>
        <div class="form-group">
          <label for="paymentMethod">Payment Method</label>
          <select id="paymentMethod" name="paymentMethod" required>
            <option value="">Select method...</option>
            <option value="crypto">Cryptocurrency</option>
            <option value="cashapp">Cash App</option>
            <option value="paypal">PayPal</option>
            <option value="venmo">Venmo</option>
          </select>
        </div>
        <div class="form-group">
          <label for="walletAddress">Wallet Address / Phone Number</label>
          <input type="text" id="walletAddress" name="walletAddress" placeholder="Enter receiving address" required>
        </div>
        <button type="submit">Redeem Now</button>
        <div id="message" class="message"></div>
      </form>
    `;
    
    this.shadowRoot.getElementById('redeemForm').addEventListener('submit', (e) => {
      e.preventDefault();
      this.handleSubmit();
    });
  }
  
  handleSubmit() {
    const form = this.shadowRoot.getElementById('redeemForm');
    const formData = new FormData(form);
    const code = formData.get('code');
    const paymentMethod = formData.get('paymentMethod');
    const walletAddress = formData.get('walletAddress');
    const messageEl = this.shadowRoot.getElementById('message');
    
    // Simulate redemption process
    messageEl.style.display = 'block';
    messageEl.className = 'message success';
    messageEl.textContent = `✅ Processing ${paymentMethod} redemption for code ${code}...`;
    
    setTimeout(() => {
      if (code.length > 8 && walletAddress.length > 5) {
        messageEl.className = 'message success';
        messageEl.textContent = `🎉 Success! ${paymentMethod} payment sent to ${walletAddress}`;
        form.reset();
      } else {
        messageEl.className = 'message error';
        messageEl.textContent = '❌ Invalid code or address. Please try again.';
      }
    }, 1500);
  }
}

customElements.define('redeem-form', RedeemForm);