```javascript
class CustomSolarAffiliateForm extends HTMLElement {
  constructor() {
    super();
    this.currentStep = 1;
    this.totalSteps = 3;
    this.formData = {
      company_id: '',
      affiliate_type: 'REFERRAL_PARTNER',
      affiliate_tier: 'BRONZE',
      commission_rate: 5,
      referral_code: '',
      total_referrals: 0,
      successful_referrals: 0,
      total_earnings: '',
      pending_earnings: '',
      average_conversion_rate: 0,
      traffic_sources: [],
      marketing_channels: [],
      content_types: [],
      target_audience: [],
      marketing_materials_access: false,
      performance_bonus_eligible: false,
      custom_promo_codes: [],
      commission_structure: 'percentage',
      payment_method: '',
      payment_frequency: 'monthly',
      tax_id: '',
      marketing_support_level: 'basic',
      training_completed: false,
      certification_level: 0,
      preferred_communication: [],
    };
  }

  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.render();
  }

  handleInputChange(e) {
    const { name, value, type, checked } = e.target;
    if (type === 'checkbox') {
      this.formData[name] = checked;
    } else {
      this.formData[name] = value;
    }
    this.render();
  }

  handleArrayChange(name, value) {
    const currentArray = this.formData[name];
    const newArray = currentArray.includes(value)
      ? currentArray.filter(item => item !== value)
      : [...currentArray, value];
    this.formData[name] = newArray;
    this.render();
  }

  nextStep() {
    if (this.currentStep < this.totalSteps) {
      this.currentStep++;
      this.render();
    }
  }

  prevStep() {
    if (this.currentStep > 1) {
      this.currentStep--;
      this.render();
    }
  }

  renderStep1() {
    return `
      <div class="space-y-4">
        <h3 class="text-lg font-semibold">Informações Básicas do Afiliado</h3>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label class="text-sm font-medium text-gray-700">Tipo de Afiliado *</label>
            <select
              name="affiliate_type"
              value="${this.formData.affiliate_type}"
              onchange="this.getRootNode().host.handleInputChange(event)"
              class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
            >
              <option value="REFERRAL_PARTNER">Parceiro de Referência</option>
              <option value="INFLUENCER">Influenciador</option>
              <option value="INDUSTRY_EXPERT">Especialista da Indústria</option>
              <option value="YOUTUBE_CREATOR">Criador de Conteúdo (YouTube)</option>
              <option value="BLOGGER">Blogueiro</option>
              <option value="CONSULTANT">Consultor</option>
              <option value="RETAILER">Revendedor</option>
            </select>
          </div>

          <div>
            <label class="text-sm font-medium text-gray-700">Nível do Afiliado</label>
            <select
              name="affiliate_tier"
              value="${this.formData.affiliate_tier}"
              onchange="this.getRootNode().host.handleInputChange(event)"
              class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
            >
              <option value="BRONZE">Bronze</option>
              <option value="SILVER">Prata</option>
              <option value="GOLD">Ouro</option>
              <option value="PLATINUM">Platina</option>
              <option value="ELITE">Elite</option>
            </select>
          </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label class="text-sm font-medium text-gray-700">Taxa de Comissão (%)</label>
            <input
              type="number"
              name="commission_rate"
              value="${this.formData.commission_rate}"
              onchange="this.getRootNode().host.handleInputChange(event)"
              min="0"
              max="50"
              class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
            />
          </div>

          <div>
            <label class="text-sm font-medium text-gray-700">Código de Referência</label>
            <input
              type="text"
              name="referral_code"
              value="${this.formData.referral_code}"
              onchange="this.getRootNode().host.handleInputChange(event)"
              placeholder="ex: SOLARPARTNER123"
              class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
            />
          </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div>
            <label class="text-sm font-medium text-gray-700">Total de Referências</label>
            <input
              type="number"
              name="total_referrals"
              value="${this.formData.total_referrals}"
              onchange="this.getRootNode().host.handleInputChange(event)"
              class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
            />
          </div>

          <div>
            <label class="text-sm font-medium text-gray-700">Referências Bem-sucedidas</label>
            <input
              type="number"
              name="successful_referrals"
              value="${this.formData.successful_referrals}"
              onchange="this.getRootNode().host.handleInputChange(event)"
              class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
            />
          </div>

          <div>
            <label class="text-sm font-medium text-gray-700">Taxa de Conversão Média (%)</label>
            <input
              type="number"
              name="average_conversion_rate"
              value="${this.formData.average_conversion_rate}"
              onchange="this.getRootNode().host.handleInputChange(event)"
              min="0"
              max="100"
              class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
            />
          </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label class="text-sm font-medium text-gray-700">Ganhos Totais</label>
            <input
              type="text"
              name="total_earnings"
              value="${this.formData.total_earnings}"
              onchange="this.getRootNode().host.handleInputChange(event)"
              placeholder="ex: 5000.00"
              class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
            />
          </div>

          <div>
            <label class="text-sm font-medium text-gray-700">Ganhos Pendentes</label>
            <input
              type="text"
              name="pending_earnings"
              value="${this.formData.pending_earnings}"
              onchange="this.getRootNode().host.handleInputChange(event)"
              placeholder="ex: 500.00"
              class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
            />
          </div>
        </div>
      </div>
    `;
  }

  renderStep2() {
    return `
      <div class="space-y-4">
        <h3 class="text-lg font-semibold">Marketing e Estratégia de Conteúdo</h3>
        
        <div>
          <label class="text-sm font-medium text-gray-700">Fontes de Tráfego</label>
          <div class="mt-1 space-y-2">
            ${['organic', 'social', 'paid', 'email', 'referral', 'direct'].map(source => `
              <div key="${source}" class="flex items-center">
                <input
                  id="source-${source}"
                  name="traffic_sources"
                  type="checkbox"
                  ${this.formData.traffic_sources.includes(source) ? 'checked' : ''}
                  onchange="this.getRootNode().host.handleArrayChange('traffic_sources', '${source}')"
                  class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                />
                <label for="source-${source}" class="ml-2 block text-sm text-gray-900 capitalize">
                  ${source === 'organic' ? 'Orgânico' : 
                    source === 'social' ? 'Redes Sociais' : 
                    source === 'paid' ? 'Pago' : 
                    source === 'email' ? 'Email' : 
                    source === 'referral' ? 'Referência' : 'Direto'}
                </label>
              </div>
            `).join('')}
          </div>
        </div>

        <div>
          <label class="text-sm font-medium text-gray-700">Canais de Marketing</label>
          <div class="mt-1 space-y-2">
            ${['facebook', 'instagram', 'linkedin', 'youtube', 'tiktok', 'twitter', 'whatsapp', 'blog'].map(channel => `
              <div key="${channel}" class="flex items-center">
                <input
                  id="channel-${channel}"
                  name="marketing_channels"
                  type="checkbox"
                  ${this.formData.marketing_channels.includes(channel) ? 'checked' : ''}
                  onchange="this.getRootNode().host.handleArrayChange('marketing_channels', '${channel}')"
                  class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                />
                <label for="channel-${channel}" class="ml-2 block text-sm text-gray-900 capitalize">
                  ${channel}
                </label>
              </div>
            `).join('')}
          </div>
        </div>

        <div>
          <label class="text-sm font-medium text-gray-700">Tipos de Conteúdo</label>
          <div class="mt-1 space-y-2">
            ${['blog', 'video', 'testimonial', 'comparison', 'review', 'tutorial', 'case_study'].map(content => `
              <div key="${content}" class="flex items-center">
                <input
                  id="content-${content}"
                  name="content_types"
                  type="checkbox"
                  ${this.formData.content