<h3 class="text-lg font-semibold text-[var(--text-primary)] mb-4">Theme Customisation</h3>

<div class="space-y-4 text-sm text-[var(--text-secondary)]">
  <p>
    Open <strong>Settings</strong> (<kbd class="kbd">Ctrl+,</kbd>) and scroll to the Appearance
    section to customise your theme.
  </p>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Built-in Themes</h4>
    <ul class="space-y-1">
      <li>• <strong>Default Dark</strong> — the classic dark Hikari look</li>
      <li>• <strong>Default Light</strong> — a bright, clean light theme</li>
      <li>• <strong>High Contrast</strong> — maximum contrast for accessibility</li>
    </ul>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Community Presets</h4>
    <ul class="space-y-1 columns-2">
      <li>• Dracula</li>
      <li>• Catppuccin Mocha</li>
      <li>• Catppuccin Latte</li>
      <li>• Nord</li>
      <li>• Solarized Dark</li>
      <li>• Solarized Light</li>
      <li>• Gruvbox Dark</li>
      <li>• Gruvbox Light</li>
      <li>• Rosé Pine</li>
      <li>• Rosé Pine Dawn</li>
    </ul>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Custom Colours</h4>
    <p>
      Select <strong>Custom</strong> from the theme dropdown to set individual colours for each UI element:
    </p>
    <ul class="space-y-1 mt-2">
      <li>• Text: primary, secondary, and tertiary levels</li>
      <li>• Backgrounds: primary, secondary, and header</li>
      <li>• Border colour</li>
      <li>• Accent and pink highlight colours</li>
      <li>• Trans flag stripe colours</li>
    </ul>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Custom Fonts</h4>
    <p>
      Upload a <code class="code">.ttf</code> or <code class="code">.otf</code> font file to apply a custom
      UI font across the entire app.
    </p>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Background Image</h4>
    <p>
      Set a custom background image that renders behind the chat area. Adjust opacity to keep it
      subtle.
    </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);
  }

  code.code {
    font-family: monospace;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 0.05rem 0.3rem;
    color: var(--text-primary);
  }
</style>
