components/auth-modal.js

class AuthModal extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .modal-overlay {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 0, 0, 0.5);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 1000;
                }
                .modal-content {
                    background: white;
                    border-radius: 12px;
                    padding: 2rem;
                    width: 90%;
                    max-width: 400px;
                    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
                }
                .tab-buttons {
                    display: flex;
                    border-bottom: 1px solid #e5e7eb;
                    margin-bottom: 1.5rem;
                }
                .tab-button {
                    flex: 1;
                    padding: 0.75rem;
                    border: none;
                    background: none;
                    font-weight: 500;
                    cursor: pointer;
                    border-bottom: 2px solid transparent;
                }
                .tab-button.active {
                    color: #0ea5e9;
                    border-bottom-color: #0ea5e9;
                }
                .form-group {
                    margin-bottom: 1rem;
                }
                input {
                    width: 100%;
                    padding: 0.75rem;
                    border: 1px solid #d1d5db;
                    border-radius: 6px;
                    font-size: 0.875rem;
                }
                input:focus {
                    outline: none;
                    border-color: #0ea5e9;
                    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
                }
                .btn-primary {
                    width: 100%;
                    background: #0ea5e9;
                    color: white;
                    border: none;
                    padding: 0.75rem;
                    border-radius: 6px;
                    font-weight: 500;
                    cursor: pointer;
                }
                .btn-primary:hover {
                    background: #0284c7;
                }
                .close-btn {
                    position: absolute;
                    top: 1rem;
                    right: 1rem;
                    background: none;
                    border: none;
                    cursor: pointer;
                }
            </style>
            <div class="modal-overlay hidden">
                <div class="modal-content">
                    <button class="close-btn">
                        <i data-feather="x" class="w-5 h-5"></i>
                    </button>
                    
                    <div class="tab-buttons">
                        <button class="tab-button active" data-tab="login">Login</button>
                        <button class="tab-button" data-tab="signup">Sign Up</button>
                    </div>
                    
                    <form id="login-form" class="tab-content">
                        <div class="form-group">
                            <input type="email" placeholder="Email" required>
                        </div>
                        <div class="form-group">
                            <input type="password" placeholder="Password" required>
                        </div>
                        <button type="submit" class="btn-primary">Login</button>
                    </form>
                    
                    <form id="signup-form" class="tab-content hidden">
                        <div class="form-group">
                            <input type="text" placeholder="Full Name" required>
                        </div>
                        <div class="form-group">
                            <input type="email" placeholder="Email" required>
                        </div>
                        <div class="form-group">
                            <input type="password" placeholder="Password" required>
                        </div>
                        <button type="submit" class="btn-primary">Sign Up</button>
                    </form>
                </div>
            </div>
        `;
        
        this.bindEvents();
    }
    
    bindEvents() {
        const overlay = this.shadowRoot.querySelector('.modal-overlay');
        const closeBtn = this.shadowRoot.querySelector('.close-btn');
        const tabButtons = this.shadowRoot.querySelectorAll('.tab-button');
        const loginForm = this.shadowRoot.getElementById('login-form');
        const signupForm = this.shadowRoot.getElementById('signup-form');
        
        // Close modal
        closeBtn.addEventListener('click', () => this.hide());
        overlay.addEventListener('click', (e) => {
            if (e.target === overlay) this.hide();
        });
        
        // Tab switching
        tabButtons.forEach(btn => {
            btn.addEventListener('click', () => {
                tabButtons.forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
                
                if (btn.dataset.tab === 'login') {
                    loginForm.classList.remove('hidden');
                    signupForm.classList.add('hidden');
                } else {
                    loginForm.classList.add('hidden');
                    signupForm.classList.remove('hidden');
                }
            });
        });
        
        // Form submissions
        loginForm.addEventListener('submit', (e) => this.handleLogin(e));
        signupForm.addEventListener('submit', (e) => this.handleSignup(e));
    }
    
    show() {
        this.shadowRoot.querySelector('.modal-overlay').classList.remove('hidden');
    }
    
    hide() {
        this.shadowRoot.querySelector('.modal-overlay').classList.add('hidden');
    }
    
    handleLogin(e) {
        e.preventDefault();
        // Implement login logic
        this.hide();
    }
    
    handleSignup(e) {
        e.preventDefault();
        // Implement signup logic
        this.hide();
    }
}

customElements.define('auth-modal', AuthModal);