---
import { site } from "../data/site";
const { launcher } = site;
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{site.name} — join the server</title>
    <meta name="description" content={`${site.name}: ${site.tagline}`} />
    <link rel="icon" type="image/png" href="/logo.png" />
  </head>
  <body>
    <main>
      <header class="hero">
        <img class="logo" src="/logo.png" alt={`${site.name} logo`} width="128" height="128" />
        <h1>{site.name}</h1>
        <p class="tagline">{site.tagline}</p>
        <p class="addr">
          <span class="addr-label">Server</span>
          <code id="server-addr">{site.serverAddress}</code>
          <button class="copy" data-copy={site.serverAddress} type="button">Copy</button>
        </p>
      </header>

      <ol class="steps">
        <li>
          <h2><span class="num">1</span> Download the launcher</h2>
          <p>Grab <strong>{launcher.name}</strong> for your system.</p>
          <div class="downloads">
            {launcher.downloads.map((d) => (
              <a class="dl" href={`${launcher.base}/${d.file}`}>
                <span class="dl-os">{d.os}</span>
                <span class="dl-hint">{d.hint}</span>
              </a>
            ))}
          </div>
        </li>

        <li>
          <h2><span class="num">2</span> Add your account</h2>
          <p>In the launcher, add an <strong>authlib-injector</strong> account using this URL:</p>
          <p>
            <code>{site.authlibUrl}</code>
            <button class="copy" data-copy={site.authlibUrl} type="button">Copy</button>
          </p>
          <p>
            Need credentials? Register at <a href={site.authUrl}>{site.authUrl}</a>, then log in
            with that username and password.
          </p>
          <p class="note">
            Offline party? Download and trust the
            <a href={site.caCertUrl}>local CA certificate</a> so the game-file
            mirror works over HTTPS.
          </p>
        </li>

        <li>
          <h2><span class="num">3</span> Import the modpack</h2>
          <p>Add a new instance from this packwiz URL:</p>
          <p>
            <code>{site.packwizUrl}</code>
            <button class="copy" data-copy={site.packwizUrl} type="button">Copy</button>
          </p>
        </li>

        <li>
          <h2><span class="num">4</span> Connect</h2>
          <p>Launch the instance, add a server, and join:</p>
          <p>
            <code>{site.serverAddress}</code>
            <button class="copy" data-copy={site.serverAddress} type="button">Copy</button>
          </p>
        </li>
      </ol>

      <footer>
        <p>{site.name} · {site.baseDomain}</p>
      </footer>
    </main>

    <script>
      // Copy-to-clipboard for every [data-copy] button.
      document.querySelectorAll<HTMLButtonElement>("button.copy").forEach((btn) => {
        btn.addEventListener("click", async () => {
          const text = btn.dataset.copy ?? "";
          try {
            await navigator.clipboard.writeText(text);
            const prev = btn.textContent;
            btn.textContent = "Copied";
            setTimeout(() => (btn.textContent = prev), 1200);
          } catch {
            btn.textContent = "Copy failed";
          }
        });
      });
    </script>

    <style>
      :root {
        --stone: #7a7a7a;
        --bg: #f4f4f2;
        --card: #ffffff;
        --ink: #1c1c1c;
        --muted: #6b6b6b;
        --line: #e2e2df;
        --accent: #4f7942;
      }
      * { box-sizing: border-box; }
      html { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
      body {
        margin: 0;
        background: var(--bg);
        color: var(--ink);
        line-height: 1.55;
      }
      main {
        max-width: 720px;
        margin: 0 auto;
        padding: 3rem 1.25rem 4rem;
      }
      .hero { text-align: center; margin-bottom: 2.5rem; }
      .logo {
        image-rendering: pixelated;
        border-radius: 12px;
        margin-bottom: 0.5rem;
      }
      h1 { font-size: 2.4rem; margin: 0.25rem 0 0; letter-spacing: -0.5px; }
      .tagline { color: var(--muted); margin: 0.25rem 0 1.25rem; }
      .addr {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
        justify-content: center;
      }
      .addr-label {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--muted);
      }
      code {
        background: #ededea;
        border: 1px solid var(--line);
        border-radius: 6px;
        padding: 0.2rem 0.5rem;
        font-size: 0.95rem;
        word-break: break-all;
      }
      .copy {
        border: 1px solid var(--line);
        background: var(--card);
        border-radius: 6px;
        padding: 0.2rem 0.6rem;
        font-size: 0.8rem;
        cursor: pointer;
      }
      .copy:hover { border-color: var(--stone); }
      .steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
      .steps > li {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 1.25rem 1.5rem;
      }
      .steps h2 { font-size: 1.2rem; margin: 0 0 0.5rem; display: flex; align-items: center; gap: 0.6rem; }
      .num {
        display: inline-grid;
        place-items: center;
        width: 1.7rem;
        height: 1.7rem;
        background: var(--accent);
        color: #fff;
        border-radius: 6px;
        font-size: 0.95rem;
      }
      .steps p { margin: 0.4rem 0; }
      .downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin-top: 0.75rem; }
      .dl {
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: var(--ink);
        background: var(--bg);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 0.8rem 1rem;
      }
      .dl:hover { border-color: var(--accent); }
      .dl-os { font-weight: 600; }
      .dl-hint { font-size: 0.8rem; color: var(--muted); }
      footer { text-align: center; color: var(--muted); font-size: 0.85rem; margin-top: 2.5rem; }
      a { color: var(--accent); }
    </style>
  </body>
</html>
