<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo Login — Choose a project</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:22px 32px;border-bottom:1px solid #1e293b;display:flex;align-items:center;gap:12px;font-weight:700}
    header .badge{font-size:11px;font-weight:600;color:#fca5a5;background:#3f1d2b;border:1px solid #7f1d1d;padding:3px 9px;border-radius:999px}
    .wrap{max-width:840px;margin:0 auto;padding:28px 20px 60px}
    .wrap > p.sub{color:#94a3b8;margin:0 0 24px;font-size:14px}
    .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
    a.card{display:flex;align-items:center;gap:14px;background:#111a2e;border:1px solid #1e293b;border-radius:14px;padding:18px;text-decoration:none;color:#e2e8f0;transition:border-color .15s,transform .05s}
    a.card:hover{border-color:#3b82f6;transform:translateY(-1px)}
    a.card .dot{width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;flex:none}
    a.card .m .n{font-weight:700;font-size:15.5px} a.card .m .d{color:#64748b;font-size:12px}
    .empty{color:#94a3b8}
  </style>
</head>
<body>
  <header><i class="fas fa-bolt"></i> Demo Login <span class="badge">DEMO ONLY</span></header>
  <div class="wrap">
    <p class="sub">Choose a project. Each project has its own page with a normal login and one-click demo roles.</p>
    <div class="grid">
      @forelse($projects as $key => $p)
        <a class="card" href="{{ route('demo.project', $key) }}">
          <span class="dot" style="background:{{ $p['color'] ?? '#334155' }}"><i class="{{ $p['icon'] ?? 'fas fa-cube' }}"></i></span>
          <span class="m">
            <span class="n">{{ $p['label'] ?? $key }}</span>
            <span class="d">{{ $p['tagline'] ?? '' }}</span>
          </span>
        </a>
      @empty
        <div class="empty">No projects configured.</div>
      @endforelse
    </div>
  </div>
</body>
</html>
