components/tabs.js

class CustomTabs extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          margin-bottom: 1rem;
        }
        .tabs-container {
          display: flex;
          border-bottom: 2px solid #8B0000;
        }
        .tab {
          padding: 0.75rem 1.5rem;
          background: #0F0F0F;
          color: #7F7F7F;
          border: none;
          border-radius: 0.5rem 0.5rem 0 0;
          margin-right: 0.5rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s;
          display: flex;
          align-items: center;
        }
        .tab:hover {
          color: #FF0000;
        }
        .tab.active {
          background: #8B0000;
          color: white;
        }
        .tab i {
          margin-right: 0.5rem;
        }
        .tab-close {
          margin-left: 0.5rem;
          width: 16px;
          height: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          opacity: 0.7;
        }
        .tab-close:hover {
          background: rgba(255,255,255,0.2);
          opacity: 1;
        }
        .tab-content {
          display: none;
          padding: 1rem;
          background: #0F0F0F;
          border-radius: 0 0.5rem 0.5rem 0.5rem;
        }
        .tab-content.active {
          display: block;
        }
      </style>
      <div class="tabs-container">
        <button class="tab active" data-tab="browser">
          <i data-feather="compass"></i> Browser
        </button>
        <button class="tab" data-tab="settings">
          <i data-feather="settings"></i> Settings
        </button>
        <button class="tab" data-tab="privacy">
          <i data-feather="shield"></i> Privacy
        </button>
      </div>
      
      <div id="browser-content" class="tab-content active">
        <div class="flex mb-4">
          <input 
            type="text" 
            id="url-input" 
            class="flex-1 bg-black border border-blood rounded-l-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blood" 
            placeholder="Enter URL (e.g. https://example.com)"
          >
          <button id="go-button" class="bg-blood px-4 py-2 rounded-r-lg font-bold hover:bg-red-800">
            GO
          </button>
        </div>
      </div>
      
      <div id="settings-content" class="tab-content">
        <div class="space-y-4">
          <div class="flex items-center">
            <input type="checkbox" id="proxy-toggle" class="rounded bg-black border-blood text-blood">
            <label for="proxy-toggle" class="ml-2">Enable Proxy</label>
          </div>
          <div id="proxy-settings" class="hidden">
            <div class="mb-2">
              <label class="block text-sm mb-1">Proxy Server</label>
              <input type="text" id="proxy-server" class="w-full bg-black border border-blood rounded px-3 py-2 text-white">
            </div>
          </div>
        </div>
      </div>
      
      <div id="privacy-content" class="tab-content">
        <div class="space-y-3">
          <button id="clear-data" class="w-full bg-black hover:bg-blood border border-blood rounded px-4 py-2 flex items-center">
            <i data-feather="trash-2" class="mr-2"></i> Clear Browsing Data
          </button>
          <button id="toggle-vpn" class="w-full bg-black hover:bg-blood border border-blood rounded px-4 py-2 flex items-center">
            <i data-feather="lock" class="mr-2"></i> Toggle VPN
          </button>
        </div>
      </div>
    `;

    // Tab switching
    const tabs = this.shadowRoot.querySelectorAll('.tab');
    const contents = this.shadowRoot.querySelectorAll('.tab-content');
    
    tabs.forEach(tab => {
      tab.addEventListener('click', () => {
        tabs.forEach(t => t.classList.remove('active'));
        contents.forEach(c => c.classList.remove('active'));
        
        tab.classList.add('active');
        const tabId = tab.getAttribute('data-tab');
        this.shadowRoot.getElementById(`${tabId}-content`).classList.add('active');
        feather.replace();
      });
    });

    // Proxy toggle
    const proxyToggle = this.shadowRoot.getElementById('proxy-toggle');
    const proxySettings = this.shadowRoot.getElementById('proxy-settings');
    
    proxyToggle.addEventListener('change', () => {
      proxySettings.classList.toggle('hidden', !proxyToggle.checked);
    });

    // URL navigation
    const urlInput = this.shadowRoot.getElementById('url-input');
    const goButton = this.shadowRoot.getElementById('go-button');
    
    const handleNavigation = () => {
      const url = urlInput.value.trim();
      const useProxy = proxyToggle.checked;
      
      if (url) {
        this.dispatchEvent(new CustomEvent('navigate', {
          detail: { url, useProxy },
          bubbles: true,
          composed: true
        }));
      }
    };
    
    goButton.addEventListener('click', handleNavigation);
    urlInput.addEventListener('keypress', (e) => {
      if (e.key === 'Enter') handleNavigation();
    });

    feather.replace();
  }
}

customElements.define('custom-tabs', CustomTabs);