<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ $project['label'] ?? $projectKey }} — Login</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
  <style>
    *{box-sizing:border-box} body{margin:0;font-family:'Segoe UI',system-ui,sans-serif;background:#0b1220;color:#e2e8f0;min-height:100vh}
    header{padding:20px 32px;border-bottom:1px solid #1e293b;display:flex;align-items:center;justify-content:space-between}
    header .p{display:flex;align-items:center;gap:12px}
    header .p .dot{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:19px}
    header .p .t{font-weight:700;font-size:16px} header .p .s{color:#94a3b8;font-size:12.5px}
    header .badge{font-size:11px;font-weight:600;color:#fca5a5;background:#3f1d2b;border:1px solid #7f1d1d;padding:3px 9px;border-radius:999px}
    a.back{color:#94a3b8;text-decoration:none;font-size:13px;margin-right:14px}
    .wrap{max-width:880px;margin:0 auto;padding:30px 20px 60px}
    .normal{background:#111a2e;border:1px solid #1e293b;border-radius:14px;padding:20px;margin-bottom:26px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
    .normal .txt .n{font-weight:700;font-size:15px} .normal .txt .d{color:#94a3b8;font-size:13px}
    .normal a.login{background:#2563eb;color:#fff;text-decoration:none;border-radius:9px;padding:11px 22px;font-weight:600;white-space:nowrap}
    .normal a.login:hover{background:#1d4ed8}
    .or{display:flex;align-items:center;gap:12px;color:#475569;font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 18px}
    .or::before,.or::after{content:'';flex:1;height:1px;background:#1e293b}
    .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
    a.card{display:flex;align-items:center;gap:12px;background:#111a2e;border:1px solid #1e293b;border-radius:12px;padding:13px 15px;text-decoration:none;color:#e2e8f0;transition:border-color .15s,transform .05s}
    a.card:hover{border-color:#3b82f6;transform:translateY(-1px)}
    a.card .ic{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
    a.card .m{min-width:0} a.card .m .n{font-weight:600;font-size:14.5px} a.card .m .d{color:#64748b;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .empty{color:#94a3b8}
  </style>
</head>
<body>
  <header>
    <div class="p">
      <span class="dot" style="background:{{ $project['color'] ?? '#334155' }}"><i class="{{ $project['icon'] ?? 'fas fa-cube' }}"></i></span>
      <div>
        <div class="t">{{ $project['label'] ?? $projectKey }}</div>
        <div class="s">{{ $project['tagline'] ?? '' }}</div>
      </div>
    </div>
    <div>
      <a class="back" href="{{ route('demo.index') }}"><i class="fas fa-arrow-left"></i> Projects</a>
      <span class="badge">DEMO</span>
    </div>
  </header>

  <div class="wrap">
    <div class="normal">
      <div class="txt">
        <div class="n"><i class="fas fa-right-to-bracket"></i> Normal login</div>
        <div class="d">Sign in with a real username &amp; password.</div>
      </div>
      <a class="login" href="{{ url('login') }}">Go to login</a>
    </div>

    <div class="or">or open a demo role</div>

    @if(empty($roles))
      <div class="empty">No demo roles configured for the "{{ $vertical }}" vertical.</div>
    @else
      <div class="grid">
        @foreach($roles as $r)
          <a class="card" href="{{ route('demo.login', ['project' => $projectKey, 'role' => $r['key']]) }}">
            <span class="ic" style="background:{{ $r['color'] ?? '#334155' }}"><i class="fas {{ $r['icon'] ?? 'fa-user' }}"></i></span>
            <span class="m">
              <span class="n">{{ $r['label'] }}</span>
              <span class="d">{{ $r['desc'] ?? '' }}</span>
            </span>
          </a>
        @endforeach
      </div>
    @endif
  </div>
</body>
</html>
