<h3 class="text-lg font-semibold text-[var(--text-primary)] mb-4">Model & API Configuration</h3>

<div class="space-y-4 text-sm text-[var(--text-secondary)]">
  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">API Key</h4>
    <p>
      Enter your Anthropic API key in Settings (<kbd class="kbd">Ctrl+,</kbd>). The key is stored
      locally on your device and used only to authenticate requests to the Anthropic API.
    </p>
    <p class="mt-2">
      Get your API key at <strong>console.anthropic.com</strong>.
    </p>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Model Selection</h4>
    <p class="mb-2">Choose from available Claude models:</p>
    <ul class="space-y-1.5">
      <li>
        <strong>claude-opus-4-6</strong> — most capable, highest quality; best for complex tasks
      </li>
      <li>
        <strong>claude-sonnet-4-6</strong> — balanced speed and quality
        <span class="text-[var(--accent-primary)]">(recommended)</span>
      </li>
      <li>
        <strong>claude-haiku-4-5</strong> — fastest and most cost-efficient; good for quick tasks
      </li>
    </ul>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Custom Instructions</h4>
    <p>
      Add persistent instructions in Settings that are prepended to every conversation. Use this to
      set coding preferences, project conventions, or communication style.
    </p>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">MCP Servers</h4>
    <p>
      Model Context Protocol (MCP) servers extend Hikari's capabilities with external tools and data
      sources — databases, APIs, version control systems, and more.
    </p>
    <p class="mt-2">
      Open <strong>MCP Servers</strong> from the menu to add and manage server configurations. Each server
      is defined with a command and optional arguments.
    </p>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Permission Mode</h4>
    <p>
      Controls how Hikari asks for tool use permissions. Choose between asking every time,
      auto-approving trusted tools, or running in a more restricted mode.
    </p>
  </div>
</div>

<style>
  kbd.kbd {
    display: inline-block;
    padding: 0.1rem 0.35rem;
    font-size: 0.75rem;
    font-family: monospace;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-primary);
  }
</style>
