components/auth-modal.js

class AuthModal extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .modal {
                    position: fixed;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: rgba(0, 0, 0, 0.8);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 1000;
                    opacity: 0;
                    pointer-events: none;
                    transition: opacity 0.3s ease;
                }
                
                .modal.active {
                    opacity: 1;
                    pointer-events: all;
                }
                
                .modal-content {
                    background: var(--secondary-black);
                    border-radius: var(--border-radius);
                    padding: 2rem;
                    width: 90%;
                    max-width: 400px;
                    box-shadow: var(--shadow-dark);
                    transform: translateY(20px);
                    transition: transform 0.3s ease;
                }
                
                .modal.active .modal-content {
                    transform: translateY(0);
                }
                
                .modal-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 1.5rem;
                }
                
                .modal-title {
                    font-size: 1.5rem;
                    font-weight: 600;
                    color: var(--text-white);
                }
                
                .close-btn {
                    background: none;
                    border: none;
                    color: var(--text-gray);
                    font-size: 1.5rem;
                    cursor: pointer;
                }
                
                .auth-form {
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;
                }
                
                .form-group {
                    display: flex;
                    flex-direction: column;
                    gap: 0.5rem;
                }
                
                .form-label {
                    font-size: 0.875rem;
                    color: var(--text-gray);
                }
                
                .form-input {
                    padding: 0.75rem;
                    border-radius: 6px;
                    border: 1px solid var(--tertiary-black);
                    background: var(--primary-black);
                    color: var(--text-white);
                }
                
                .submit-btn {
                    background: var(--primary-pink);
                    color: white;
                    padding: 0.75rem;
                    border: none;
                    border-radius: 6px;
                    font-weight: 600;
                    cursor: pointer;
                    margin-top: 1rem;
                    transition: var(--transition);
                }
                
                .submit-btn:hover {
                    background: var(--secondary-pink);
                }
                
                .auth-switch {
                    text-align: center;
                    margin-top: 1rem;
                    color: var(--text-gray);
                    font-size: 0.875rem;
                }
                
                .auth-switch-btn {
                    color: var(--primary-pink);
                    background: none;
                    border: none;
                    cursor: pointer;
                }
            </style>
            
            <div class="modal" id="auth-modal">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title" id="modal-title">Sign In</h3>
                        <button class="close-btn" id="close-modal">&times;</button>
                    </div>
                    <form class="auth-form" id="auth-form">
                        <div class="form-group">
                            <label class="form-label">Email</label>
                            <input type="email" class="form-input" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Password</label>
                            <input type="password" class="form-input" required>
                        </div>
                        <button type="submit" class="submit-btn">Continue</button>
                    </form>
                    <div class="auth-switch">
                        <span id="switch-text">Don't have an account?</span>
                        <button class="auth-switch-btn" id="switch-btn">Sign up</button>
                    </div>
                </div>
            </div>
        `;
        
        this.shadowRoot.getElementById('close-modal').addEventListener('click', () => {
            this.hide();
        });
        
        this.shadowRoot.getElementById('switch-btn').addEventListener('click', () => {
            this.toggleAuthMode();
        });
    }
    
    show() {
        this.shadowRoot.getElementById('auth-modal').classList.add('active');
    }
    
    hide() {
        this.shadowRoot.getElementById('auth-modal').classList.remove('active');
    }
    
    toggleAuthMode() {
        const title = this.shadowRoot.getElementById('modal-title');
        const submitBtn = this.shadowRoot.querySelector('.submit-btn');
        const switchText = this.shadowRoot.getElementById('switch-text');
        const switchBtn = this.shadowRoot.getElementById('switch-btn');
        
        if (title.textContent === 'Sign In') {
            title.textContent = 'Sign Up';
            submitBtn.textContent = 'Create Account';
            switchText.textContent = 'Already have an account?';
            switchBtn.textContent = 'Sign in';
        } else {
            title.textContent = 'Sign In';
            submitBtn.textContent = 'Continue';
            switchText.textContent = 'Don\'t have an account?';
            switchBtn.textContent = 'Sign up';
        }
    }
}

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