<?php
// app/Views/auth/login.php
$dir = (lang()==='ar') ? 'rtl' : 'ltr';
$tab = $_GET['tab'] ?? 'login';
$f   = flash('auth');

// ترجمات الصفحة حسب اللغة الحالية
$lg = lang();
$ui = [
  'ar' => [
    'choose_role'   => 'اختر دورك',
    'owner_lbl'     => 'مالك',   'driver_lbl' => 'سائق',  'officer_lbl' => 'ضابط',
    'demo_title'    => '🔐 حسابات تجريبية — اضغط للدخول مباشرة',
    'demo_owner'    => '👤 مالك',  'demo_driver' => '🚗 سائق', 'demo_officer' => '👮 ضابط',
    'no_account'    => 'ليس لديك حساب؟',
    'have_account'  => 'لديك حساب؟',
    'back_home'     => '← العودة للصفحة الرئيسية',
    'role_hint_owner'   => '👤 كمالك ستتمكن من إضافة سياراتك، رفع الوثائق، وتوليد أكواد دعوة للسائقين.',
    'role_hint_driver'  => '🚗 كسائق ستسجّل حسابك ثم تدخل كود الدعوة من المالك لترتبط بسيارته.',
    'role_hint_officer' => '👮 كضابط ستتمكن من التحقق من أي سيارة عبر مسح QR أو البحث برقم اللوحة.',
    'left_title'    => 'Vehicle Verify',
    'left_sub'      => 'نظام متكامل للتحقق الرقمي من المركبات<br>وإدارة الوثائق والسائقين',
    'rp_owner_t'    => 'صاحب المركبة',
    'rp_owner_d'    => 'يدير سياراته • يولّد أكواد للسائقين • يرفع الوثائق',
    'rp_driver_t'   => 'السائق',
    'rp_driver_d'   => 'يسجّل حسابه • يدخل كود الدعوة • يرتبط بالسيارة فوراً',
    'rp_officer_t'  => 'ضابط المرور',
    'rp_officer_d'  => 'يمسح QR أو يبحث باللوحة • يتحقق من الوثائق',
  ],
  'en' => [
    'choose_role'   => 'Choose your role',
    'owner_lbl'     => 'Owner',  'driver_lbl' => 'Driver', 'officer_lbl' => 'Officer',
    'demo_title'    => '🔐 Demo accounts — click to auto-fill',
    'demo_owner'    => '👤 Owner', 'demo_driver' => '🚗 Driver', 'demo_officer' => '👮 Officer',
    'no_account'    => "Don't have an account?",
    'have_account'  => 'Already have an account?',
    'back_home'     => '← Back to home',
    'role_hint_owner'   => '👤 As owner you can add vehicles, upload docs, and invite drivers.',
    'role_hint_driver'  => '🚗 As driver you register then enter the invite code to link to a vehicle.',
    'role_hint_officer' => '👮 As officer you can verify any vehicle by QR scan or plate search.',
    'left_title'    => 'Vehicle Verify',
    'left_sub'      => 'Complete digital vehicle verification<br>and driver document management',
    'rp_owner_t'    => 'Vehicle Owner',
    'rp_owner_d'    => 'Manage vehicles • Invite drivers • Upload documents',
    'rp_driver_t'   => 'Driver',
    'rp_driver_d'   => 'Register • Enter invite code • Link to vehicle instantly',
    'rp_officer_t'  => 'Traffic Officer',
    'rp_officer_d'  => 'Scan QR or search plate • Verify all documents',
  ],
  'fr' => [
    'choose_role'   => 'Choisissez votre rôle',
    'owner_lbl'     => 'Propriétaire', 'driver_lbl' => 'Conducteur', 'officer_lbl' => 'Agent',
    'demo_title'    => '🔐 Comptes de démo — cliquez pour remplir',
    'demo_owner'    => '👤 Propriétaire', 'demo_driver' => '🚗 Conducteur', 'demo_officer' => '👮 Agent',
    'no_account'    => "Pas encore de compte ?",
    'have_account'  => 'Déjà un compte ?',
    'back_home'     => '← Retour à l\'accueil',
    'role_hint_owner'   => '👤 En tant que propriétaire, vous pouvez gérer vos véhicules et inviter des conducteurs.',
    'role_hint_driver'  => '🚗 En tant que conducteur, inscrivez-vous puis entrez le code d\'invitation.',
    'role_hint_officer' => '👮 En tant qu\'agent, vous pouvez vérifier tout véhicule par QR ou plaque.',
    'left_title'    => 'Vehicle Verify',
    'left_sub'      => 'Vérification numérique complète des véhicules<br>et gestion des documents',
    'rp_owner_t'    => 'Propriétaire',
    'rp_owner_d'    => 'Gérer les véhicules • Inviter des conducteurs • Documents',
    'rp_driver_t'   => 'Conducteur',
    'rp_driver_d'   => 'S\'inscrire • Code d\'invitation • Lier le véhicule',
    'rp_officer_t'  => 'Agent de police',
    'rp_officer_d'  => 'Scanner QR ou chercher par plaque • Vérifier les documents',
  ],
];
$u = $ui[$lg] ?? $ui['ar'];
?>
<!DOCTYPE html>
<html lang="<?= e($lg) ?>" dir="<?= $dir ?>" data-theme="<?= theme() ?>">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= t('app_name') ?></title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&family=Sora:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="<?= BASE_URL ?>/css/main.css">
<style>
/* ─── AUTH LAYOUT ─────────────────────────────────── */
.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* LEFT: branding */
.auth-left {
  background: linear-gradient(160deg, #0f2140 0%, #1a3a70 60%, #112060 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 48px 40px; position: relative; overflow: hidden;
}
.auth-left::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size: 50px 50px;
}
.auth-glow { position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; }
.glow-1 { width:300px;height:300px;background:rgba(26,86,219,.3);top:-80px;right:-80px; }
.glow-2 { width:200px;height:200px;background:rgba(245,166,35,.15);bottom:40px;left:20px; }

.auth-left-content { position:relative;z-index:1;text-align:center; }
.auth-left-logo {
  width:72px;height:72px;background:var(--accent);border-radius:20px;
  display:flex;align-items:center;justify-content:center;font-size:36px;
  margin:0 auto 20px;box-shadow:0 8px 32px rgba(26,86,219,.5);
  animation: floatLogo 4s ease-in-out infinite;
}
@keyframes floatLogo { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.auth-left-title { font-size:28px;font-weight:900;color:#fff;margin-bottom:8px; }
.auth-left-sub   { font-size:14px;color:rgba(255,255,255,.55);margin-bottom:44px;line-height:1.75; }

.role-paths { display:flex;flex-direction:column;gap:12px;width:100%;max-width:320px; }
.role-path {
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:15px 18px;
  display:flex;align-items:center;gap:14px;transition:all .25s;
}
.role-path:hover { background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25); }
.role-path-icon { width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0; }
.rp-owner   .role-path-icon { background:rgba(26,86,219,.3); }
.rp-driver  .role-path-icon { background:rgba(16,185,129,.3); }
.rp-officer .role-path-icon { background:rgba(245,158,11,.3); }
.role-path-title { font-size:13.5px;font-weight:800;color:#fff; }
.role-path-desc  { font-size:11px;color:rgba(255,255,255,.5);margin-top:2px; }

/* RIGHT: form */
.auth-right {
  background:var(--bg-primary);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:32px 24px; overflow-y:auto;
}
.auth-card-new {
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:22px;box-shadow:var(--shadow-lg);
  padding:36px 32px;width:100%;max-width:440px;
  animation:fadeSlideUp .4s ease both;
}

/* Logo / back link */
.auth-logo-link {
  display:flex;align-items:center;gap:12px;
  text-decoration:none;margin-bottom:24px;
}
.auth-logo-icon {
  width:46px;height:46px;background:var(--accent);
  border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:22px;box-shadow:0 4px 16px rgba(26,86,219,.35);
  flex-shrink:0;transition:transform .2s;
}
.auth-logo-link:hover .auth-logo-icon { transform:scale(1.08); }
.auth-logo-name { font-size:18px;font-weight:900;color:var(--text-primary); }
.auth-logo-sub  { font-size:11px;color:var(--text-muted);display:block;margin-top:1px; }

/* Tabs */
.auth-tabs {
  display:flex;background:var(--bg-primary);
  border-radius:10px;padding:4px;margin-bottom:22px;
  border:1.5px solid var(--border);
}
.auth-tab {
  flex:1;padding:10px;text-align:center;
  border-radius:8px;font-size:14px;font-weight:700;
  cursor:pointer;transition:all .22s;
  color:var(--text-muted);border:none;
  background:transparent;font-family:inherit;
}
.auth-tab.active { background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(26,86,219,.3); }

/* Demo accounts */
.demo-box {
  margin-top:18px;
  background:var(--bg-primary);border:1.5px solid var(--border);
  border-radius:12px;overflow:hidden;
}
.demo-box-title {
  padding:9px 14px;font-size:11.5px;font-weight:700;
  color:var(--text-muted);border-bottom:1px solid var(--border);
  background:var(--bg-secondary);
}
.demo-accounts { display:flex;flex-direction:column;gap:0; }
.demo-btn {
  width:100%;text-align:start;padding:11px 14px;
  background:transparent;border:none;border-bottom:1px solid var(--border);
  color:var(--text-primary);font-size:13px;cursor:pointer;
  display:flex;align-items:center;gap:10px;
  transition:background .18s;font-family:inherit;
}
.demo-btn:last-child { border-bottom:none; }
.demo-btn:hover { background:var(--accent-light); }
.demo-btn strong { font-size:12px;font-weight:700;color:var(--text-secondary);min-width:70px; }
.demo-btn code   { font-size:12px;color:var(--text-muted);font-family:monospace; }
.demo-badge {
  margin-inline-start:auto;font-size:10px;font-weight:700;
  padding:2px 8px;border-radius:20px;background:var(--accent-light);
  color:var(--accent);white-space:nowrap;
}

/* Role picker */
.role-pick-card {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:12px 8px;border-radius:10px;
  border:2px solid var(--border);background:var(--bg-primary);
  cursor:pointer;transition:all .2s;gap:4px;
}
.role-pick-card:hover   { border-color:var(--accent);background:var(--accent-light); }
.role-pick-card.selected { border-color:var(--accent);background:var(--accent-light);box-shadow:0 0 0 3px rgba(26,86,219,.15); }

/* Controls (top-right) */
.auth-controls {
  position:fixed;top:14px;right:14px;
  display:flex;gap:8px;z-index:300;
}
[dir="rtl"] .auth-controls { right:auto;left:14px; }

/* ── Responsive ──────────────────────── */
@media (max-width:820px) {
  .auth-page { grid-template-columns:1fr; }
  .auth-left  { display:none; }
  .auth-right { padding:20px 14px; min-height:100vh; }
  .auth-card-new { padding:24px 18px;border-radius:16px; }
}
@media (max-width:400px) {
  .auth-card-new { padding:20px 14px; }
}
</style>
</head>
<body>

<!-- ── Controls (language + theme) ───────────────────────── -->
<div class="auth-controls">
  <div class="toggle-group">
    <?php foreach(['ar','en','fr'] as $l): ?>
    <a href="<?= BASE_URL ?>/lang.php?set=<?= $l ?>&back=<?= urlencode(BASE_URL.'/index.php') ?>"
       class="toggle-btn <?= $lg===$l?'active':'' ?>">
      <?= $l==='ar'?'ع':strtoupper($l) ?>
    </a>
    <?php endforeach; ?>
  </div>
  <?php $thm=theme(); ?>
  <a href="<?= BASE_URL ?>/theme.php?set=<?= $thm==='dark'?'light':'dark' ?>&back=<?= urlencode(BASE_URL.'/index.php') ?>"
     class="btn btn-icon"><?= $thm==='dark'?'☀️':'🌙' ?></a>
</div>

<div class="auth-page">

  <!-- ══ LEFT: branding ══ -->
  <div class="auth-left">
    <div class="auth-glow glow-1"></div>
    <div class="auth-glow glow-2"></div>
    <div class="auth-left-content">
      <a href="<?= BASE_URL ?>/home.php" style="text-decoration:none">
        <div class="auth-left-logo" style="background:linear-gradient(135deg,#1a56db 0%,#0f3fa8 100%);border-radius:16px;width:64px;height:64px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(26,86,219,0.4)">
          <svg width="36" height="36" viewBox="0 0 26 26" fill="none">
            <path d="M13 2L4 6V13C4 18 8.2 22.5 13 24C17.8 22.5 22 18 22 13V6L13 2Z" fill="rgba(255,255,255,0.15)" stroke="rgba(255,255,255,0.5)" stroke-width="1.5"/>
            <path d="M9 13L11.5 15.5L17 10" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
      </a>
      <div class="auth-left-title"><?= $u['left_title'] ?></div>
      <p class="auth-left-sub"><?= $u['left_sub'] ?></p>
      <div class="role-paths">
        <div class="role-path rp-owner">
          <div class="role-path-icon">👤</div>
          <div>
            <div class="role-path-title"><?= $u['rp_owner_t'] ?></div>
            <div class="role-path-desc"><?= $u['rp_owner_d'] ?></div>
          </div>
        </div>
        <div class="role-path rp-driver">
          <div class="role-path-icon">🚗</div>
          <div>
            <div class="role-path-title"><?= $u['rp_driver_t'] ?></div>
            <div class="role-path-desc"><?= $u['rp_driver_d'] ?></div>
          </div>
        </div>
        <div class="role-path rp-officer">
          <div class="role-path-icon">👮</div>
          <div>
            <div class="role-path-title"><?= $u['rp_officer_t'] ?></div>
            <div class="role-path-desc"><?= $u['rp_officer_d'] ?></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ══ RIGHT: form ══ -->
  <div class="auth-right">
    <div class="auth-card-new">

      <!-- Logo / back -->
      <a class="auth-logo-link" href="<?= BASE_URL ?>/home.php">
        <div class="auth-logo-icon" style="background:linear-gradient(135deg,#1a56db 0%,#0f3fa8 100%);border-radius:10px;display:flex;align-items:center;justify-content:center;width:36px;height:36px">
          <svg width="22" height="22" viewBox="0 0 26 26" fill="none">
            <path d="M13 2L4 6V13C4 18 8.2 22.5 13 24C17.8 22.5 22 18 22 13V6L13 2Z" fill="rgba(255,255,255,0.15)" stroke="rgba(255,255,255,0.5)" stroke-width="1.5"/>
            <path d="M9 13L11.5 15.5L17 10" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <div>
          <div class="auth-logo-name">Vehicle<span style="color:#1a56db">Verify</span> <span style="font-size:11px;opacity:0.5">DZ</span></div>
          <span class="auth-logo-sub"><?= $u['back_home'] ?></span>
        </div>
      </a>

      <!-- ── TABS ── -->
      <div class="auth-tabs" role="tablist">
        <button class="auth-tab <?= $tab==='login'?'active':'' ?>"
                id="tabLogin" role="tab"
                onclick="switchTab('login')"><?= t('login') ?></button>
        <button class="auth-tab <?= $tab==='register'?'active':'' ?>"
                id="tabRegister" role="tab"
                onclick="switchTab('register')"><?= t('register') ?></button>
      </div>

      <!-- Flash -->
      <?php if($f): ?>
      <div class="alert alert-<?= $f['type']==='success'?'success':'danger' ?>">
        <?= e($f['msg']) ?>
      </div>
      <?php endif; ?>

      <!-- ══ LOGIN FORM ══ -->
      <div id="loginPanel" role="tabpanel" <?= $tab!=='login'?'style="display:none"':'' ?>>
        <form method="POST" action="<?= BASE_URL ?>/auth.php?action=login" id="loginFormEl">
          <?= csrfField() ?>
          <div class="form-group">
            <label class="form-label"><?= t('email') ?></label>
            <input type="email" name="email" id="loginEmail"
                   class="form-control" placeholder="example@email.com" required
                   autocomplete="email">
          </div>
          <div class="form-group" style="margin-bottom:20px">
            <label class="form-label"><?= t('password') ?></label>
            <input type="password" name="password" id="loginPassword"
                   class="form-control" placeholder="••••••••" required
                   autocomplete="current-password">
          </div>
          <button type="submit" class="btn btn-primary"
                  style="width:100%;padding:13px;font-size:15px;font-weight:700">
            <?= t('login_btn') ?>
          </button>
        </form>

        <!-- ══ Demo accounts ══ -->
        <div class="demo-box">
          <div class="demo-box-title"><?= $u['demo_title'] ?></div>
          <div class="demo-accounts">
            <button type="button" class="demo-btn"
                    onclick="fillLogin('owner@demo.com','demo123')">
              <span><?= $u['demo_owner'] ?></span>
              <strong>owner@demo.com</strong>
              <code>demo123</code>
              <span class="demo-badge"><?= $u['owner_lbl'] ?></span>
            </button>
            <button type="button" class="demo-btn"
                    onclick="fillLogin('driver@demo.com','demo123')">
              <span><?= $u['demo_driver'] ?></span>
              <strong>driver@demo.com</strong>
              <code>demo123</code>
              <span class="demo-badge"><?= $u['driver_lbl'] ?></span>
            </button>
            <button type="button" class="demo-btn"
                    onclick="fillLogin('officer@demo.com','demo123')">
              <span><?= $u['demo_officer'] ?></span>
              <strong>officer@demo.com</strong>
              <code>demo123</code>
              <span class="demo-badge"><?= $u['officer_lbl'] ?></span>
            </button>
          </div>
        </div>

        <p style="margin-top:16px;text-align:center;font-size:13px;color:var(--text-muted)">
          <?= $u['no_account'] ?>
          <a href="#" onclick="switchTab('register');return false;"
             style="color:var(--accent);font-weight:700;margin-inline-start:4px"><?= t('register') ?></a>
        </p>
      </div>

      <!-- ══ REGISTER FORM ══ -->
      <div id="registerPanel" role="tabpanel" <?= $tab!=='register'?'style="display:none"':'' ?>>

        <!-- Role picker -->
        <div style="margin-bottom:18px">
          <label class="form-label"><?= $u['choose_role'] ?></label>
          <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px">
            <?php
            $roles = [
              'owner'   => ['icon'=>'👤','label'=>$u['owner_lbl']],
              'driver'  => ['icon'=>'🚗','label'=>$u['driver_lbl']],
              'officer' => ['icon'=>'👮','label'=>$u['officer_lbl']],
            ];
            foreach($roles as $rkey => $rval): ?>
            <div class="role-pick-card <?= $rkey==='driver'?'selected':'' ?>"
                 id="rcard-<?= $rkey ?>"
                 onclick="selectRole('<?= $rkey ?>')">
              <span style="font-size:26px"><?= $rval['icon'] ?></span>
              <span style="font-size:12px;font-weight:700;margin-top:4px"><?= $rval['label'] ?></span>
            </div>
            <?php endforeach; ?>
          </div>
          <div id="roleHint"
               style="margin-top:10px;padding:10px 12px;border-radius:8px;font-size:12px;
                      background:var(--accent-light);color:var(--accent);
                      border:1px solid rgba(26,86,219,.2);display:none;line-height:1.6"></div>
        </div>

        <form method="POST" action="<?= BASE_URL ?>/auth.php?action=register">
          <?= csrfField() ?>
          <input type="hidden" name="role" id="roleInput" value="driver">

          <div class="form-group">
            <label class="form-label"><?= t('full_name') ?> *</label>
            <input type="text" name="name" class="form-control"
                   placeholder="<?= t('full_name') ?>" required autocomplete="name">
          </div>
          <div class="form-row" style="margin-bottom:0">
            <div class="form-group">
              <label class="form-label"><?= t('email') ?> *</label>
              <input type="email" name="email" class="form-control"
                     placeholder="example@email.com" required autocomplete="email">
            </div>
            <div class="form-group">
              <label class="form-label"><?= t('phone') ?></label>
              <input type="tel" name="phone" class="form-control"
                     placeholder="0600000000" autocomplete="tel">
            </div>
          </div>
          <div class="form-row" style="margin-bottom:20px">
            <div class="form-group">
              <label class="form-label"><?= t('password') ?> *</label>
              <input type="password" name="password" class="form-control"
                     placeholder="••••••••" required autocomplete="new-password">
            </div>
            <div class="form-group">
              <label class="form-label"><?= t('confirm_password') ?></label>
              <input type="password" name="confirm" class="form-control"
                     placeholder="••••••••" autocomplete="new-password">
            </div>
          </div>
          <button type="submit" class="btn btn-primary"
                  style="width:100%;padding:13px;font-size:15px;font-weight:700">
            <?= t('register_btn') ?>
          </button>
        </form>

        <p style="margin-top:16px;text-align:center;font-size:13px;color:var(--text-muted)">
          <?= $u['have_account'] ?>
          <a href="#" onclick="switchTab('login');return false;"
             style="color:var(--accent);font-weight:700;margin-inline-start:4px"><?= t('login') ?></a>
        </p>
      </div>

    </div><!-- /auth-card-new -->
  </div><!-- /auth-right -->
</div><!-- /auth-page -->

<script>
// ── Role hints (from PHP, no language issues) ─────────────
var roleHints = {
  owner:   <?= json_encode($u['role_hint_owner']) ?>,
  driver:  <?= json_encode($u['role_hint_driver']) ?>,
  officer: <?= json_encode($u['role_hint_officer']) ?>
};

// ── Tab switcher ──────────────────────────────────────────
function switchTab(tab) {
  var isLogin = (tab === 'login');

  // panels
  document.getElementById('loginPanel').style.display    = isLogin ? 'block' : 'none';
  document.getElementById('registerPanel').style.display = isLogin ? 'none'  : 'block';

  // tab buttons
  document.getElementById('tabLogin').classList.toggle('active',    isLogin);
  document.getElementById('tabRegister').classList.toggle('active', !isLogin);

  // scroll to top of card on mobile
  var card = document.querySelector('.auth-card-new');
  if (card) card.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}

// ── Demo accounts auto-fill ───────────────────────────────
function fillLogin(email, password) {
  document.getElementById('loginEmail').value    = email;
  document.getElementById('loginPassword').value = password;

  // Visual feedback: briefly highlight inputs
  ['loginEmail','loginPassword'].forEach(function(id) {
    var el = document.getElementById(id);
    el.style.transition = 'border-color .3s, background .3s';
    el.style.borderColor = 'var(--success)';
    el.style.background  = 'var(--success-bg)';
    setTimeout(function() {
      el.style.borderColor = '';
      el.style.background  = '';
    }, 1200);
  });

  // Submit automatically after short delay
  setTimeout(function() {
    document.getElementById('loginFormEl').submit();
  }, 400);
}

// ── Role selector ─────────────────────────────────────────
function selectRole(role) {
  document.getElementById('roleInput').value = role;

  // update card styles
  document.querySelectorAll('.role-pick-card').forEach(function(c) {
    c.classList.remove('selected');
  });
  var card = document.getElementById('rcard-' + role);
  if (card) card.classList.add('selected');

  // show hint
  var hint = document.getElementById('roleHint');
  hint.style.display = 'block';
  hint.textContent   = roleHints[role] || '';
}

// ── Init ──────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', function() {
  // Show hint for default selected role (driver)
  selectRole('driver');
});
</script>
</body>
</html>
