<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Sovran_SystemsOS — First-Boot Setup</title>
  <link rel="stylesheet" href="/static/css/base.css" />
  <link rel="stylesheet" href="/static/css/buttons.css" />
  <link rel="stylesheet" href="/static/css/header.css" />
  <link rel="stylesheet" href="/static/css/layout.css" />
  <link rel="stylesheet" href="/static/css/tiles.css" />
  <link rel="stylesheet" href="/static/css/modals.css" />
  <link rel="stylesheet" href="/static/css/features.css" />
  <link rel="stylesheet" href="/static/css/onboarding.css" />
  <link rel="stylesheet" href="/static/css/support.css" />
  <link rel="stylesheet" href="/static/css/domain-setup.css" />
</head>
<body class="onboarding-body">

  <!-- Onboarding wizard container -->
  <div class="onboarding-shell">

    <!-- Progress bar -->
    <div class="onboarding-progress-bar" id="onboarding-progress-bar">
      <div class="onboarding-progress-fill" id="onboarding-progress-fill"></div>
    </div>

    <!-- Step indicators -->
    <div class="onboarding-steps-nav" id="onboarding-steps-nav">
      <span class="onboarding-step-dot" data-step="1">1</span>
      <span class="onboarding-step-connector"></span>
      <span class="onboarding-step-dot" data-step="2">2</span>
      <span class="onboarding-step-connector"></span>
      <span class="onboarding-step-dot" data-step="3">3</span>
      <span class="onboarding-step-connector"></span>
      <span class="onboarding-step-dot" data-step="4">4</span>
    </div>

    <!-- Step panels -->
    <div class="onboarding-panel-wrap">

      <!-- ── Migration Password Gate (pre-step) ── -->
      <div class="onboarding-panel" id="step-migration" style="display:none">
        <div class="onboarding-hero">
          <div class="onboarding-logo">🔐</div>
          <h1 class="onboarding-title">Your system has been migrated to Sovran_SystemsOS</h1>
          <p class="onboarding-subtitle">Important password update required</p>
        </div>
        <div class="onboarding-card">
          <p class="onboarding-body-text" style="text-align:center; margin-bottom:4px;">
            Your new login password is:
          </p>
          <div id="migration-password-value" style="font-family:monospace; font-size:1.35rem; font-weight:700; color:var(--text-primary); background:rgba(109, 191, 139, 0.10); border:1.5px solid rgba(109, 191, 139, 0.35); border-radius:8px; padding:14px 24px; letter-spacing:0.04em; text-align:center; word-break:break-all; margin-bottom:8px;">
            &nbsp;
          </div>
          <div style="padding:10px 14px; background-color:rgba(229, 165, 10, 0.1); border:1px solid rgba(229, 165, 10, 0.35); border-radius:8px; font-size:0.92rem; color:var(--yellow); line-height:1.55;">
            ⚠ Write this password down! You will need it to log in next time. This is also your Sovran Hub login password.
          </div>
          <div id="migration-password-status" class="onboarding-save-status" style="margin-top:8px;"></div>
        </div>
        <div class="onboarding-footer">
          <div></div>
          <button class="btn btn-primary" id="migration-password-continue">
            I've written it down — Continue →
          </button>
        </div>
      </div>

      <!-- ── Step 1: Welcome ── -->
      <div class="onboarding-panel" id="step-1">
        <div class="onboarding-hero">
          <div class="onboarding-logo">
            <img src="/static/logo-light.svg" alt="Sovran Systems" class="onboarding-logo-img" />
          </div>
          <h1 class="onboarding-title">Welcome to Sovran_SystemsOS!</h1>
          <p class="onboarding-subtitle">Be Digitally Sovereign</p>
        </div>
        <div class="onboarding-card">
          <p class="onboarding-body-text">
            Your system is installed and ready to configure. This wizard will guide
            you through the final setup steps so everything works perfectly.
          </p>
          <div class="onboarding-role-row" id="onboarding-role-row">
            <span class="onboarding-role-label">Your Role:</span>
            <span class="onboarding-role-badge" id="onboarding-role-badge">Loading…</span>
          </div>
          <p class="onboarding-body-text onboarding-body-text--dim">
            This setup only takes a few minutes. You can always revisit these
            settings from the main Hub dashboard.
          </p>
        </div>
        <div class="onboarding-footer">
          <div></div>
          <button class="btn btn-primary onboarding-btn-next" id="step-1-next">
            Let's Go →
          </button>
        </div>
      </div>

      <!-- ── Step 2: Timezone &amp; Locale ── -->
      <div class="onboarding-panel" id="step-2" style="display:none">
        <div class="onboarding-step-header">
          <span class="onboarding-step-icon">🌍</span>
          <h2 class="onboarding-step-title">Timezone &amp; Locale</h2>
          <p class="onboarding-step-desc">
            Select your timezone and preferred language so your system clock, logs,
            and services display the correct time and format.
          </p>
        </div>
        <div class="onboarding-card" id="step-2-body">
          <p class="onboarding-loading">Loading timezone data…</p>
        </div>
        <div id="step-2-status" class="onboarding-save-status"></div>
        <div class="onboarding-footer">
          <button class="btn btn-close-modal onboarding-btn-back" data-prev="1">← Back</button>
          <button class="btn btn-primary onboarding-btn-next" id="step-2-next">
            Save &amp; Continue →
          </button>
        </div>
      </div>

      <!-- ── Step 3: Domain Configuration ── -->
      <div class="onboarding-panel" id="step-3" style="display:none">
        <div class="onboarding-step-header">
          <span class="onboarding-step-icon">🌐</span>
          <h2 class="onboarding-step-title">Connect Your Services</h2>
          <p class="onboarding-step-desc">
            Sovran_SystemsOS walks you through getting your domain from <strong><a href="https://njal.la" target="_blank" style="color: var(--accent-color);">Njal.la</a></strong> and connecting your services.
            To make your services available outside your home, you’ll complete one router task: forward ports <strong>80</strong> and <strong>443</strong> to this computer.
          </p>
        </div>
        <div class="onboarding-card" id="step-3-body">
          <p class="onboarding-loading">Loading service information…</p>
        </div>
        <div id="step-3-status" class="onboarding-save-status"></div>
        <div class="onboarding-footer">
          <button class="btn btn-close-modal onboarding-btn-back" data-prev="2">← Back</button>
          <button class="btn btn-primary onboarding-btn-next" id="step-3-next">
            Save &amp; Continue →
          </button>
        </div>
      </div>

      <!-- ── Step 4: Complete ── -->
      <div class="onboarding-panel" id="step-4" style="display:none">
        <div class="onboarding-hero">
          <div class="onboarding-logo">✅</div>
          <h1 class="onboarding-title">Your Sovran_SystemsOS is Ready!</h1>
          <p class="onboarding-subtitle">Setup complete</p>
        </div>
        <div class="onboarding-card">
          <p class="onboarding-body-text">
            All configuration steps are done. Head to the main Hub dashboard to
            monitor your services, manage credentials, and make changes at any time.
          </p>
          <ul class="onboarding-checklist" id="onboarding-checklist">
            <li>✅ Timezone &amp; locale configured</li>
            <li>✅ Domain configuration saved</li>
          </ul>
        </div>
        <div class="onboarding-footer">
          <button class="btn btn-close-modal onboarding-btn-back" data-prev="3">← Back</button>
          <button class="btn btn-primary" id="step-4-finish">
            Go to Dashboard →
          </button>
        </div>
      </div>

    </div><!-- /panel-wrap -->
  </div><!-- /shell -->

  <script src="/static/js/domain-prereqs.js?v={{ asset_version }}"></script>
  <script src="/static/onboarding.js?v={{ onboarding_js_hash }}"></script>
</body>
</html>
