components/login-modal.js

class LoginModal extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .modal-overlay {
                    position: fixed;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: rgba(0, 0, 0, 0.8);
                    z-index: 50;
                    display: none;
                    align-items: center;
                    justify-content: center;
                    padding: 1rem;
                }
                
                .modal-content {
                    background: #1a1a1a;
                    border-radius: 1rem;
                    padding: 2rem;
                    border: 1px solid rgba(250, 204, 21, 0.3);
                    max-width: 400px;
                    width: 100%;
                    border: 1px solid rgba(251, 146, 60, 0.3);
                }
                
                .modal-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 1.5rem;
                }
                
                .modal-title {
                    font-size: 1.5rem;
                    font-weight: bold;
                    color: #f97316;
                    margin: 0;
                }
                
                .close-btn {
                    background: none;
                    border: none;
                    color: #9ca3af;
                    cursor: pointer;
                    padding: 0.5rem;
                    border-radius: 0.5rem;
                    transition: all 0.3s ease;
                }
                
                .close-btn:hover {
                    color: #f97316;
                    background: rgba(251, 146, 60, 0.1);
                }
                
                .form-group {
                    margin-bottom: 1rem;
                }
                
                .form-label {
                    display: block;
                    color: #9ca3af;
                    margin-bottom: 0.5rem;
                }
                
                .form-input {
                    width: 100%;
                    padding: 0.75rem 1rem;
                    background: #0f0f0f;
                    border: 1px solid rgba(42, 42, 42, 0.5);
                    border-radius: 0.5rem;
                    color: white;
                    border: 1px solid rgba(42, 42, 42, 0.5);
                    border-radius: 0.5rem;
                    transition: border-color 0.3s ease;
                }
                
                .form-input:focus {
                    outline: none;
                    border-color: #f97316;
                }
                
                .submit-btn {
                    width: 100%;
                    padding: 0.75rem 1.5rem;
                    background: linear-gradient(135deg, #eab308, #f97316);
                    color: black;
                    font-weight: bold;
                    border: none;
                    border-radius: 0.5rem;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    margin-top: 1rem;
                }
                
                .submit-btn:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 10px 20px rgba(251, 146, 60, 0.3);
                }
                
                .switch-form {
                    text-align: center;
                    margin-top: 1rem;
                    color: #9ca3af;
                }
                
                .switch-link {
                    color: #f97316;
                    text-decoration: none;
                    font-weight: 500;
                }
                
                .switch-link:hover {
                    color: #eab308;
                }
            </style>
            
            <div class="modal-overlay" id="loginModal">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title">Login to Your Account</h3>
                        <button class="close-btn" onclick="closeLoginModal()">
<i data-feather="x" class="w-6 h-6"></i>
                    </div>
                    <form onsubmit="handleLogin(event)">
                        <div class="form-group">
                            <label class="form-label">Email Address</label>
                            <input type="email" required class="form-input">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Password</label>
                            <input type="password" required class="form-input">
                        </div>
                        <button type="submit" class="submit-btn">Login to Account</button>
                    </form>
<div class="switch-form">
                        <span class="text-gray-400">Don't have an account? </span>
                        <a href="#" class="switch-link" onclick="closeLoginModal(); showRegistration(); return false;">Sign Up</a>
                    </div>
                </div>
            </div>
        `;
    }
}

customElements.define('login-modal', LoginModal);