---
import { brand } from '../../lib/brand.mjs';

/**
 * The get-started CTA (PLAN.md §10, the `/` row), built around the trap in §10's
 * "installation path": a "Runic Gateway install" is two independent installs. The installer
 * binary sets up the shard side only and never contacts the website; the website is a
 * separate Docker deployment.
 *
 * That belongs on the homepage rather than being saved for the docs. It is the single
 * misunderstanding most likely to make an evaluator think the software is broken, it costs
 * two sentences to prevent, and §13 calls the installation path the priority of the whole
 * project. Saying it here is what makes the docs a confirmation rather than a surprise.
 *
 * The two halves are ordered site-first because that is the order they must be done in: the
 * shard side ends by pasting four values into the site's admin panel, which has to exist.
 *
 * Both "read the docs" links point at `/docs/` rather than at a page inside the journey.
 * Phases 7 and 8 write those pages and own their slugs; guessing one now would put a URL in
 * this file that nothing checks and that a later phase would have to remember to fix.
 */
---

<section class="page section start">
  <div class="panel start__panel">
    <p class="eyebrow">Getting started</p>
    <h2>An install is two installs</h2>
    <p class="start__lede prose">
      This trips up almost everyone once. The website and the game-side bridge are separate
      deployments on separate machines, and neither one installs the other. Doing them in
      order takes an evening.
    </p>

    <div class="start__halves">
      <div class="start__half">
        <h3><span class="start__num">1</span> The site</h3>
        <p>
          A Docker Compose deployment on whatever host serves your community — a small VPS is
          plenty. Pull the images, bring it up, create the first admin, then install a game
          module from the admin panel.
        </p>
      </div>

      <div class="start__half">
        <h3><span class="start__num">2</span> The game side</h3>
        <p>
          One binary, run on the machine the game server already lives on. It syncs the plugin,
          installs the sidecar as a service, and prints four values. You paste those into
          Admin → Shard, and the two halves find each other.
        </p>
      </div>
    </div>

    <div class="start__actions">
      <a class="btn btn--primary" href="/docs/">Read the install guide</a>
      <a class="btn btn--ghost" href={brand.giteaOrg} rel="noopener noreferrer">Browse the source</a>
      <a class="btn btn--ghost" href={brand.discordInvite} rel="noopener noreferrer">Ask on Discord</a>
    </div>
  </div>
</section>

<style>
  .start__panel {
    padding: clamp(1.5rem, 4vw, 2.75rem);
  }

  .start h2 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
  }

  .start__lede {
    margin: 0;
    color: var(--muted);
  }

  .start__halves {
    display: grid;
    gap: 1.5rem;
    margin-top: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  }

  .start__half h3 {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
  }

  .start__num {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    flex: none;
    border: 1px solid var(--gold-deep);
    border-radius: var(--radius-pill);
    color: var(--gold);
    font-family: var(--display);
    font-size: 0.92rem;
  }

  .start__half p {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
  }

  .start__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2.25rem;
  }
</style>