<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ModMount | Sign In</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="login.css">
</head>

<body>
    <div class="login-layout">
        <!-- Left Sidebar -->
        <aside class="login-sidebar">
            <div class="sidebar-top">
                <a href="/" class="sidebar-logo">
                    <img src="assets/LOGOss.svg" alt="ModMount" class="sidebar-logo-img">
                </a>
            </div>

            <div class="sidebar-middle">
                <a href="/" class="back-link">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="m15 18-6-6 6-6"/>
                    </svg>
                    <span>Back to<br>website</span>
                </a>
            </div>

            <div class="sidebar-bottom">
                <div class="lang-selector">
                    <span class="lang-flag">🇬🇧</span>
                    <span class="lang-label">En</span>
                </div>
                <button class="sidebar-chat-btn" aria-label="Open Chat">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
                        <path d="M2.25 4.5A2.25 2.25 0 0 1 4.5 2.25h15A2.25 2.25 0 0 1 21.75 4.5v11.25A2.25 2.25 0 0 1 19.5 18h-4.99L12 21.75 9.49 18H4.5A2.25 2.25 0 0 1 2.25 15.75V4.5Z"/>
                    </svg>
                </button>
            </div>
        </aside>

        <!-- Main Content -->
        <main class="login-main">
            <div class="login-card">
                <div class="login-logo">
                    <img src="assets/logo-dark-2.svg" alt="ModMount">
                </div>

                <h1 class="login-heading">Sign in</h1>

                <form class="login-form" id="login-form">
                    <div class="input-group">
                        <input type="email" id="email" name="email" placeholder="Email" required>
                    </div>

                    <div class="input-group password-group">
                        <input type="password" id="password" name="password" placeholder="Password" required>
                        <button type="button" class="toggle-password" id="toggle-password">Show</button>
                    </div>

                    <button type="submit" class="btn-signin">Sign in</button>
                </form>

                <div class="login-links">
                    <a href="#">Open account</a>
                    <span class="link-divider">|</span>
                    <a href="#">Forgot password</a>
                </div>

                <div class="risk-warning">
                    <p><strong>Risk warning</strong><br>
                        CFDs are complex instruments and come with a high risk of losing money
                        rapidly due to leverage. You should consider whether you can afford to
                        take the high risk of losing your money</p>
                </div>
            </div>
        </main>
    </div>

    <script>
        const toggleBtn = document.getElementById('toggle-password');
        const passwordInput = document.getElementById('password');

        toggleBtn.addEventListener('click', () => {
            const isPassword = passwordInput.type === 'password';
            passwordInput.type = isPassword ? 'text' : 'password';
            toggleBtn.textContent = isPassword ? 'Hide' : 'Show';
        });

        document.getElementById('login-form').addEventListener('submit', (e) => {
            e.preventDefault();
            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;
            console.log('Captured:', { email, password });
        });
    </script>
</body>

</html>
