<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Click Client Portal | Login</title>
    <link rel="icon" type="image/png" href="assets/img/click-logo.png">
    <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=DM+Sans:wght@400;500;700&family=Sora:wght@400;600;700&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
    <link href="assets/css/theme.css" rel="stylesheet">
</head>
<body>
    <main class="auth-shell d-flex align-items-center">
        <div class="container auth-stage py-4 py-lg-5">
            <div class="row g-4 align-items-center">
                <div class="col-lg-6">
                    <section class="auth-panel h-100">
                        <div class="brand-chip mb-4">
                            <i class="bi bi-broadcast-pin"></i>
                            SMS traffic visibility portal
                        </div>
                        <img src="assets/images/click-logo.png" alt="Click Mobile" class="brand-logo mb-4">
                        <h1 class="display-6 fw-semibold mb-3">Monitor delivery traffic with a cleaner client experience.</h1>
                        <p class="fs-5 opacity-75 mb-4">
                            A branded front door for clients to review sent SMS, delivery status, route activity, and campaign health in one place.
                        </p>

                        <div class="hero-graphic mb-4">
                            <span class="signal-dot" style="top: 18%; left: 14%;"></span>
                            <span class="signal-dot" style="top: 30%; left: 66%;"></span>
                            <span class="signal-dot" style="top: 72%; left: 28%;"></span>
                            <span class="signal-dot" style="top: 62%; left: 78%;"></span>
                            <span class="signal-line" style="top: 21%; left: 17%; width: 52%; transform: rotate(8deg);"></span>
                            <span class="signal-line" style="top: 34%; left: 45%; width: 29%; transform: rotate(35deg);"></span>
                            <span class="signal-line" style="top: 69%; left: 31%; width: 45%; transform: rotate(-8deg);"></span>
                            <span class="message-pill" style="top: 18%; right: 12%;">OTP sent in 2.1s</span>
                            <span class="message-pill" style="left: 10%; bottom: 16%;">98.4% delivered</span>
                            <span class="message-pill" style="top: 48%; left: 38%;">Bridge active</span>
                        </div>

                        <div class="row g-3">
                            <div class="col-sm-4">
                                <div class="auth-metric">
                                    <div class="auth-metric-label mb-1">Live routes</div>
                                    <div class="auth-metric-value h4 mb-0">24+</div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="auth-metric">
                                    <div class="auth-metric-label mb-1">Messages today</div>
                                    <div class="auth-metric-value h4 mb-0">186k</div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="auth-metric">
                                    <div class="auth-metric-label mb-1">Delivery rate</div>
                                    <div class="auth-metric-value h4 mb-0">98.4%</div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>

                <div class="col-lg-5 offset-lg-1">
                    <section class="glass-card">
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <div>
                                <div class="text-uppercase small fw-semibold text-primary mb-2">Client Portal</div>
                                <h2 class="h3 mb-1">Welcome back</h2>
                                <p class="text-secondary mb-0">Sign in to review SMS traffic and delivery logs.</p>
                            </div>
                            <span class="badge text-bg-light rounded-pill px-3 py-2">Bootstrap 5</span>
                        </div>

                        <form class="needs-validation" novalidate action="clientlogin" method="POST">
                            <div class="mb-3">
                                <label for="companyEmail" class="form-label fw-semibold">Email</label>
                                <input type="email" class="form-control" id="companyEmail" placeholder="client@click-mobile.com" value="ops@click-mobile.com" autocomplete="">
                            </div>

                            <div class="mb-3">
                                <label for="password" class="form-label fw-semibold">Password</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-white border-end-0 rounded-start-4">
                                        <i class="bi bi-shield-lock"></i>
                                    </span>
                                    <input type="password" class="form-control border-start-0 rounded-end-4" id="password" placeholder="Enter password" autocomplete="current-password">
                                </div>
                            </div>

                            <div class="d-flex align-items-center justify-content-between mb-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="rememberMe" checked>
                                    <label class="form-check-label" for="rememberMe">
                                        Keep me signed in
                                    </label>
                                </div>
                                <a href="#" class="text-decoration-none fw-semibold">Forgot password?</a>
                            </div>

                            <div class="d-grid gap-3">
                                <a href="sms-traffic.html" class="btn btn-click">Sign in to portal</a>
                                <button type="button" class="btn btn-ghost">Request account access</button>
                            </div>
                        </form>

                        <div class="row g-3 mt-4">
                            <div class="col-sm-6">
                                <div class="p-3 rounded-4 bg-body-tertiary h-100">
                                    <div class="muted-label mb-2">Portal features</div>
                                    <div class="fw-semibold">Sent SMS logs, status breakdown, search filters, and route insights.</div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="p-3 rounded-4 bg-body-tertiary h-100">
                                    <div class="muted-label mb-2">Support window</div>
                                    <div class="fw-semibold">Mon to Fri, 08:00 to 18:00 CAT</div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
