@php
    $h = 'font-display text-base font-semibold text-ink';
    $p = 'text-sm leading-relaxed text-ink-2';
    $li = 'text-sm leading-relaxed text-ink-2';
    $code = 'rounded bg-inset px-1.5 py-0.5 font-mono text-[12px] text-accent-text';
@endphp

<div class="space-y-3">
    <h3 class="{{ $h }}">What is Clusev?</h3>
    <p class="{{ $p }}">Clusev is a self-hosted control panel for managing a fleet of Linux servers from one dashboard —
        agentless, over SSH. It installs nothing on the target servers; it drives them directly (commands + files over
        SSH). The whole interface is security-first: 2FA, an encrypted SSH-credential vault and a complete audit log.</p>
</div>

<div class="space-y-3">
    <h3 class="{{ $h }}">First login</h3>
    <p class="{{ $p }}">After installation, sign in with the admin e-mail and the default password
        <code class="{{ $code }}">clusev</code> (the default e-mail is <code class="{{ $code }}">admin@clusev.local</code>
        unless another was set at install time). The panel <span class="text-ink">forces a password change immediately</span> —
        `clusev` is a known default and only valid until you change it. Change it right away on first login.</p>
</div>

<div class="space-y-3">
    <h3 class="{{ $h }}">Access: bare IP or a domain</h3>
    <ul class="ml-4 list-disc space-y-1.5">
        <li class="{{ $li }}"><span class="text-ink">No domain (bare IP):</span> reachable at
            <code class="{{ $code }}">http://&lt;server-ip&gt;</code> over plain HTTP. This address always stays reachable
            as a recovery path, even after a domain is configured.</li>
        <li class="{{ $li }}"><span class="text-ink">With a domain:</span> either built-in TLS (Let's Encrypt,
            automatic) or behind an external reverse proxy. See the "Domain, TLS &amp; reverse proxy" topic.</li>
    </ul>
</div>

<div class="space-y-3">
    <h3 class="{{ $h }}">Where to find things</h3>
    <ul class="ml-4 list-disc space-y-1.5">
        <li class="{{ $li }}"><span class="text-ink">Dashboard:</span> live fleet metrics.</li>
        <li class="{{ $li }}"><span class="text-ink">Servers / Services / Files:</span> server details, systemd services, SFTP file manager.</li>
        <li class="{{ $li }}"><span class="text-ink">Audit log:</span> who did what, when.</li>
        <li class="{{ $li }}"><span class="text-ink">Settings:</span> profile, security/2FA, users, sessions, e-mail.</li>
        <li class="{{ $li }}"><span class="text-ink">System:</span> domain, TLS &amp; restart. <span class="text-ink">Version:</span> updates. <span class="text-ink">Help:</span> this page.</li>
    </ul>
    <p class="{{ $p }}">Tip: <code class="{{ $code }}">Ctrl/⌘ K</code> opens the command search; <code class="{{ $code }}">g</code> + a letter jumps directly (e.g. <code class="{{ $code }}">g h</code> = Help).</p>
</div>