<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>About Gerbil</title>
    <style>
      body {
        font-family:
          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        margin: 0;
        padding: 20px;
        background: #f5f5f5;
        color: #333;
        line-height: 1.6;
      }

      .container {
        max-width: 400px;
        margin: 0 auto;
        background: white;
        padding: 30px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        text-align: center;
      }
      h1 {
        margin: 0 0 20px 0;
        color: #2c3e50;
        font-size: 24px;
      }
      .version-info {
        text-align: left;
        background: #f8f9fa;
        padding: 15px;
        border-radius: 4px;
        margin: 20px 0;
        font-family: 'Monaco', 'Menlo', monospace;
        font-size: 12px;
        line-height: 1.4;
      }
      .github-link {
        color: #0366d6;
        text-decoration: none;
        font-weight: 500;
      }
      .github-link:hover {
        text-decoration: underline;
      }
      .buttons {
        margin-top: 20px;
        display: flex;
        gap: 10px;
        justify-content: center;
      }
      button {
        padding: 8px 16px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background: white;
        cursor: pointer;
        font-size: 14px;
      }
      button:hover {
        background: #f0f0f0;
      }
      .primary {
        background: #228be6;
        color: white;
        border-color: #228be6;
      }
      .primary:hover {
        background: #1c7ed6;
      }

      /* Dark mode styles - moved to end to ensure proper override */
      @media (prefers-color-scheme: dark) {
        body {
          background: #1a1a1a !important;
          color: #e0e0e0 !important;
        }
        .container {
          background: #2d2d2d !important;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
        }
        h1 {
          color: #ffffff !important;
        }
        .version-info {
          background: #3a3a3a !important;
          color: #e0e0e0 !important;
        }
        .github-link {
          color: #58a6ff !important;
        }
        .github-link:hover {
          color: #79c0ff !important;
        }
        button {
          background: #3a3a3a !important;
          border-color: #555 !important;
          color: #e0e0e0 !important;
        }
        button:hover {
          background: #4a4a4a !important;
        }
        .primary {
          background: #228be6 !important;
          border-color: #228be6 !important;
          color: white !important;
        }
        .primary:hover {
          background: #1c7ed6 !important;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Gerbil</h1>
      <div class="version-info" id="version-info">
        <!-- Version information will be injected here -->
      </div>
      <p>
        <a href="#" class="github-link" onclick="openGitHub()">
          View on GitHub →
        </a>
      </p>
      <div class="buttons">
        <button class="primary" onclick="closeDialog()">Close</button>
      </div>
    </div>

    <script>
      function setVersionInfo(info) {
        document.getElementById('version-info').innerHTML = info.replace(
          /\n/g,
          '<br>'
        );
      }

      function openGitHub() {
        // Send IPC message directly since this is a simple modal
        if (window.electronAPI && window.electronAPI.app) {
          window.electronAPI.app.openExternal(
            'https://github.com/lone-cloud/gerbil'
          );
        }
      }

      function closeDialog() {
        window.close();
      }

      // Handle keyboard shortcuts
      document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
          closeDialog();
        }
      });
    </script>
  </body>
</html>
