{# Plan 47 — first-time explainer for the invites page.
   Auto-shown on first visit, dismissed via localStorage
   (HERO_DISMISSED_KEY in invites.js). Pure presentation: state
   (showHero / dismissHero) lives on the Alpine root. #}
<div
  x-show="showHero"
  x-cloak
  class="rounded-lg border border-cmdop-900/40 bg-cmdop-900/10 p-5"
>
  <div class="flex items-start gap-4">
    <div class="flex-shrink-0 w-10 h-10 rounded-full bg-cmdop-900/40 flex items-center justify-center">
      <i data-lucide="mail-plus" class="w-5 h-5 text-cmdop-400"></i>
    </div>
    <div class="flex-1">
      <h2 class="text-base font-semibold text-white">How invitations work</h2>
      <ol class="mt-2 space-y-1 text-sm text-ink-400 list-decimal list-inside">
        <li>You pick an email and role, click <b class="text-ink-200">Create invitation</b>.</li>
        <li>The relay returns a <b class="text-ink-200">one-shot URL</b> you copy and send via Slack / chat / in-person.</li>
        <li>Your teammate opens it once, sets a password, joins this fleet.</li>
        <li>You can revoke any URL until it's used.</li>
      </ol>
      <p class="mt-3 text-xs text-ink-500">
        Designed for self-hosted setups without email: no SMTP, no inbound port for the teammate, just one URL.
      </p>
    </div>
    <button
      @click="dismissHero()"
      class="flex-shrink-0 text-xs text-ink-500 hover:text-ink-300 px-2 py-1 rounded"
    >Dismiss</button>
  </div>
</div>