<!DOCTYPE html>
<html lang="en" id="html-root" class="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Sign In — {{ $appName }}</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;800&display=swap" rel="stylesheet">
@vite(['resources/css/app.css','resources/js/app.js'])
<style>
  html,body{height:100%}
  body{display:grid;grid-template-columns:1fr 1fr;background:var(--background)}
  @media(max-width:768px){body{grid-template-columns:1fr}.l-hero{display:none!important}}

  /* ── Left hero — dark panel matching --foreground (#0a0a0a) ── */
  .l-hero{
    position:relative;overflow:hidden;
    display:flex;flex-direction:column;justify-content:space-between;
    padding:3rem;
    background:#0a0a0a;
  }
  .l-grid{
    position:absolute;inset:0;pointer-events:none;
    background-image:
      linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:36px 36px;
  }
  /* Soft ambient glow — neutral, no purple */
  .l-orb1{position:absolute;top:-100px;left:-100px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.04) 0%,transparent 60%);pointer-events:none}
  .l-orb2{position:absolute;bottom:-60px;right:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.03) 0%,transparent 60%);pointer-events:none}

  .l-content{position:relative;z-index:1}

  .l-logo{display:flex;align-items:center;gap:.75rem;margin-bottom:3.5rem}
  .l-logo-icon{
    width:36px;height:36px;border-radius:var(--radius);
    background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);
    display:flex;align-items:center;justify-content:center;
  }
  .l-logo-name{font-size:1rem;font-weight:700;color:#fff;letter-spacing:-.02em}

  .l-headline{font-size:2.25rem;font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1.15;margin:0 0 1.125rem}
  .l-headline .l-accent{color:rgba(255,255,255,.55)}
  .l-sub{font-size:.9rem;color:rgba(255,255,255,.45);line-height:1.7;max-width:320px;margin:0}

  .l-features{margin-top:2.5rem;display:flex;flex-direction:column;gap:.875rem}
  .l-feature{display:flex;align-items:center;gap:.75rem}
  .l-feature-dot{
    width:30px;height:30px;border-radius:8px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:.875rem;
  }
  .l-feature-txt{font-size:.825rem;color:rgba(255,255,255,.5)}
  .l-feature-txt strong{color:rgba(255,255,255,.8);font-weight:600}

  /* Quote card */
  .l-quote{
    position:relative;z-index:1;padding:1.125rem;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius);
  }
  .l-quote p{font-size:.825rem;color:rgba(255,255,255,.6);line-height:1.6;font-style:italic;margin:0}
  .l-quote-author{display:flex;align-items:center;gap:.625rem;margin-top:.75rem}
  .l-quote-av{
    width:28px;height:28px;border-radius:6px;
    background:rgba(255,255,255,.12);
    display:flex;align-items:center;justify-content:center;
    font-size:.72rem;font-weight:700;color:rgba(255,255,255,.8);
  }
  .l-quote-name{font-size:.78rem;font-weight:600;color:rgba(255,255,255,.7)}
  .l-quote-role{font-size:.7rem;color:rgba(255,255,255,.35)}

  /* ── Right form panel — fully CSS-variable driven ── */
  .l-panel{
    background:var(--background);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:3rem 2.5rem;position:relative;
  }
  /* Top border matching --border */
  .l-panel::before{
    content:'';position:absolute;top:0;left:0;right:0;height:1px;
    background:var(--border);
  }
  .l-box{width:100%;max-width:380px}

  /* Input with leading icon */
  .l-field{position:relative}
  .l-field-icon{position:absolute;left:.875rem;top:50%;transform:translateY(-50%);color:var(--muted-foreground);pointer-events:none}
  .l-field .input{padding-left:2.625rem}

  /* Submit — uses --primary (#171717) matching .btn-primary */
  .l-submit{
    width:100%;padding:.875rem;border-radius:var(--radius);border:none;cursor:pointer;
    background:var(--primary);color:var(--primary-foreground);
    font-size:.9375rem;font-weight:600;font-family:inherit;
    transition:opacity .15s;
  }
  .l-submit:hover{opacity:.9}

  /* Admin pill */
  .l-admin-pill{
    position:absolute;bottom:1.75rem;left:50%;transform:translateX(-50%);white-space:nowrap;
    display:inline-flex;align-items:center;gap:.375rem;
    padding:.35rem .875rem;border-radius:9999px;
    background:var(--card);border:1px solid var(--border);
    font-size:.75rem;color:var(--muted-foreground);text-decoration:none;
    transition:all .15s;
  }
  .l-admin-pill:hover{background:var(--muted);color:var(--foreground)}
</style>
</head>
<body>

{{-- ══ Left dark hero ══ --}}
<div class="l-hero">
  <div class="l-grid"></div>
  <div class="l-orb1"></div>
  <div class="l-orb2"></div>

  <div class="l-content">
    <div class="l-logo">
      <div class="l-logo-icon">
        <svg width="16" height="16" fill="none" stroke="rgba(255,255,255,.8)" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
        </svg>
      </div>
      <span class="l-logo-name">{{ $appName }}</span>
    </div>

    <h1 class="l-headline">Your licenses,<br><span class="l-accent">always in control.</span></h1>
    <p class="l-sub">Manage all your software licenses, activations, and downloads from one powerful dashboard.</p>

    <div class="l-features">
      @foreach([
        ['🔑','<strong>Instant activation</strong> across all installations'],
        ['⬇️','<strong>One-click downloads</strong> for every product'],
        ['🛡️','<strong>HMAC-secured</strong> license validation'],
        ['🔔','<strong>Expiry alerts</strong> before you lose access'],
      ] as [$icon, $text])
      <div class="l-feature">
        <div class="l-feature-dot">{{ $icon }}</div>
        <p class="l-feature-txt">{!! $text !!}</p>
      </div>
      @endforeach
    </div>
  </div>

  <div class="l-quote">
    <p>"{{ $appName }} saved us hours every month. Activating modules across client sites is now instant."</p>
    <div class="l-quote-author">
      <div class="l-quote-av">JD</div>
      <div>
        <div class="l-quote-name">Jane Developer</div>
        <div class="l-quote-role">Full-stack Developer, Acme Corp</div>
      </div>
    </div>
  </div>
</div>

{{-- ══ Right form panel ══ --}}
<div class="l-panel">
  <div class="l-box">

    {{-- Header --}}
    <div style="margin-bottom:2rem;text-align:center">
      <h2 style="font-size:1.625rem;font-weight:800;color:var(--foreground);letter-spacing:-.025em;margin:0 0 .4rem">
        Welcome back 👋
      </h2>
      <p style="font-size:.875rem;color:var(--muted-foreground);margin:0">
        Sign in to manage your licenses and downloads.
      </p>
    </div>

    {{-- Errors / status --}}
    @if($errors->any())
    <div class="flash-err" style="margin-bottom:1rem">
      <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
      </svg>
      {{ $errors->first() }}
    </div>
    @endif
    @if(session('status'))
    <div class="flash-ok" style="margin-bottom:1rem">{{ session('status') }}</div>
    @endif

    <form method="POST" action="{{ route('login') }}">
      @csrf

      {{-- Email --}}
      <div style="margin-bottom:.875rem">
        <label style="font-size:.75rem;font-weight:600;color:var(--muted-foreground);
          text-transform:uppercase;letter-spacing:.06em;margin-bottom:.45rem">
          Email
        </label>
        <div class="l-field">
          <svg class="l-field-icon" width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
          </svg>
          <input type="email" name="email" class="input" value="{{ old('email') }}"
            placeholder="you@example.com" required autofocus autocomplete="email">
        </div>
      </div>

      {{-- Password --}}
      <div style="margin-bottom:1rem">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:.45rem">
          <label style="font-size:.75rem;font-weight:600;color:var(--muted-foreground);
            text-transform:uppercase;letter-spacing:.06em;margin:0">
            Password
          </label>
          @if(Route::has('password.request'))
          <a href="{{ route('password.request') }}"
            style="font-size:.8rem;font-weight:500;color:var(--muted-foreground);text-decoration:none;transition:color .15s"
            onmouseover="this.style.color='var(--foreground)'" onmouseout="this.style.color='var(--muted-foreground)'">
            Forgot password?
          </a>
          @endif
        </div>
        <div class="l-field">
          <svg class="l-field-icon" width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
          </svg>
          <input type="password" name="password" class="input"
            placeholder="••••••••••" required autocomplete="current-password">
        </div>
      </div>

      {{-- Remember me --}}
      <div style="display:flex;align-items:center;margin-bottom:1.375rem">
        <label style="display:flex;align-items:center;gap:.5rem;font-size:.875rem;
          color:var(--muted-foreground);cursor:pointer;margin:0;font-weight:400">
          <input type="checkbox" name="remember" value="1"
            style="width:15px;height:15px;accent-color:var(--foreground);cursor:pointer">
          Keep me signed in
        </label>
      </div>

      <button type="submit" class="l-submit">Sign In</button>
    </form>

    @if(Route::has('register'))
    <p style="text-align:center;font-size:.8125rem;color:var(--muted-foreground);margin-top:1.25rem">
      Don't have an account?
      <a href="{{ route('register') }}"
        style="color:var(--foreground);font-weight:600;text-decoration:none;border-bottom:1px solid var(--border)">
        Create one free
      </a>
    </p>
    @endif

  </div>

  <a href="{{ route('admin.login') }}" class="l-admin-pill">
    <svg width="11" height="11" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
        d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
    </svg>
    Admin Login
  </a>
</div>

</body>
</html>
