<%- include('../partials/head') %>
<div class="auth-shell modern-auth">
  <section class="auth-visual">
    <div class="visual-grid"></div>
    <div class="visual-orb orb-a"></div><div class="visual-orb orb-b"></div>
    <div class="visual-content">
      <div class="brand brand-light"><div class="brand-mark"><span>S</span></div><div><strong>Symlink</strong><span>Attendance OS</span></div></div>
      <div class="hero-copy">
        <div class="eyebrow"><span class="pulse-dot"></span> Modern workday tracking</div>
        <h1>Your workday,<br><em>beautifully clear.</em></h1>
        <p>Clock in, take lunch or multiple breaks, and stay focused. Every activity is securely recorded with server time.</p>
      </div>
      <div class="login-graphic" aria-hidden="true">
        <div class="graphic-top"><span>Today's workspace</span><strong>Live</strong></div>
        <div class="graphic-body">
          <div class="graphic-ring"><div><small>Working</small><strong>04:28</strong><span>hours today</span></div></div>
          <div class="graphic-stats">
            <div><span class="g-icon blue">↗</span><p><strong>09:42</strong><small>Clock in</small></p></div>
            <div><span class="g-icon amber">◴</span><p><strong>42m</strong><small>Lunch</small></p></div>
            <div><span class="g-icon green">✓</span><p><strong>2</strong><small>Breaks</small></p></div>
          </div>
        </div>
      </div>
      <div class="trust-row"><span>● Secure server time</span><span>● Desktop focused</span><span>● Real-time reports</span></div>
    </div>
  </section>
  <section class="auth-panel">
    <div class="auth-card">
      <div class="mobile-brand"><div class="brand-mark">S</div><strong>Symlink Attendance</strong></div>
      <div class="signin-icon">↗</div>
      <p class="kicker">Welcome back</p>
      <h2>Sign in to your workspace</h2>
      <p class="muted">Your daily attendance starts here.</p>
      <% if (error) { %><div class="alert danger"><%= error %></div><% } %>
      <% if (success) { %><div class="alert success"><%= success %></div><% } %>
      <form method="post" action="/login" class="form-stack">
        <label>Email address<div class="input-wrap"><span>@</span><input type="email" name="email" autocomplete="email" required placeholder="you@symlinktech.com"></div></label>
        <label>Password<div class="input-wrap"><span>⌁</span><input type="password" name="password" autocomplete="current-password" required placeholder="Enter your password"></div></label>
        <button class="btn btn-primary btn-lg signin-btn" type="submit"><span>Sign in</span><b>→</b></button>
      </form>
      <div class="auth-footer">New employee? <a href="/register">Register once</a> with your company email.</div>
    </div>
  </section>
</div>
</body></html>
