{{define "title"}}{{.Room.Name}}{{end}}

{{define "main"}}
<div class="space-y-8">

  <section class="rounded-3xl bg-[color:var(--card)] p-6 sm:p-8 shadow-pete border-2 border-[color:var(--ink)]/10">
    <div class="flex flex-wrap items-start justify-between gap-4">
      <div class="min-w-0">
        <h1 class="font-display text-3xl sm:text-4xl font-bold">Welcome in 🎲</h1>
        <p class="mt-2 max-w-xl text-[color:var(--ink)]/70">
          Real euros, from the same wallet as everything else. Chips are one euro each,
          and whatever you don't spend goes straight back when you cash out.
        </p>
      </div>
      <div class="hidden shrink-0 sm:flex items-end gap-1.5" aria-hidden="true">
        <span class="cs-stack" data-chip="5"></span>
        <span class="cs-stack" data-chip="100" style="--stack:3"></span>
        <span class="cs-stack" data-chip="25" style="--stack:2"></span>
      </div>
    </div>
  </section>

  {{template "_chipbar" .}}

  <section>
    <h2 class="font-display text-2xl font-bold mb-4">The tables</h2>
    <div class="grid gap-4 sm:grid-cols-2">

      <a href="/games/blackjack"
         class="group rounded-3xl bg-[color:var(--card)] p-6 shadow-pete border-2 border-[color:var(--ink)]/10 hover:-translate-y-0.5 hover:shadow-pete-lg transition">
        <div class="flex items-center gap-3">
          <span class="grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-[color:var(--accent)]/25 text-2xl">🃏</span>
          <div class="min-w-0">
            <h3 class="font-display text-xl font-bold">Blackjack</h3>
            <p class="text-sm text-[color:var(--ink)]/60">Six decks, blackjack pays 3:2.</p>
          </div>
          <span class="ml-auto shrink-0 rounded-full bg-theme-gaming px-3 py-1 text-xs font-bold uppercase tracking-wider text-white">Open</span>
        </div>
        <p class="mt-4 text-sm text-[color:var(--ink)]/70">
          The dealer stands on 17 and hits a soft one. House takes {{.RakePct}}% of what you win,
          and nothing at all when you lose or push.
        </p>
      </a>

      <a href="/games/hangman"
         class="group rounded-3xl bg-[color:var(--card)] p-6 shadow-pete border-2 border-[color:var(--ink)]/10 hover:-translate-y-0.5 hover:shadow-pete-lg transition">
        <div class="flex items-center gap-3">
          <span class="grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-[color:var(--accent)]/25 text-2xl">🪢</span>
          <div class="min-w-0">
            <h3 class="font-display text-xl font-bold">Hangman</h3>
            <p class="text-sm text-[color:var(--ink)]/60">Guess the phrase, keep the multiple.</p>
          </div>
          <span class="ml-auto shrink-0 rounded-full bg-theme-gaming px-3 py-1 text-xs font-bold uppercase tracking-wider text-white">Open</span>
        </div>
        <p class="mt-4 text-sm text-[color:var(--ink)]/70">
          Short phrases pay up to 2.6×. You get {{.MaxWrong}} lives, and every wrong guess
          takes a tenth off what a win is worth.
        </p>
      </a>

      <a href="/games/solitaire"
         class="group rounded-3xl bg-[color:var(--card)] p-6 shadow-pete border-2 border-[color:var(--ink)]/10 hover:-translate-y-0.5 hover:shadow-pete-lg transition">
        <div class="flex items-center gap-3">
          <span class="grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-[color:var(--accent)]/25 text-2xl">🂡</span>
          <div class="min-w-0">
            <h3 class="font-display text-xl font-bold">Solitaire</h3>
            <p class="text-sm text-[color:var(--ink)]/60">Buy the deck, win it back a card at a time.</p>
          </div>
          <span class="ml-auto shrink-0 rounded-full bg-theme-gaming px-3 py-1 text-xs font-bold uppercase tracking-wider text-white">Open</span>
        </div>
        <p class="mt-4 text-sm text-[color:var(--ink)]/70">
          Vegas rules. Your stake buys the deck and doesn't come back — every card you
          get home pays a slice of it in. Cash the board whenever you like.
        </p>
      </a>

      {{range .Soon}}
      <div class="rounded-3xl bg-[color:var(--card)]/60 p-6 shadow-pete border-2 border-dashed border-[color:var(--ink)]/15">
        <div class="flex items-center gap-3">
          <span class="grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-[color:var(--ink)]/5 text-2xl grayscale">{{.Emoji}}</span>
          <div class="min-w-0">
            <h3 class="font-display text-xl font-bold text-[color:var(--ink)]/50">{{.Name}}</h3>
            <p class="text-sm text-[color:var(--ink)]/40">{{.Blurb}}</p>
          </div>
          <span class="ml-auto shrink-0 rounded-full border-2 border-[color:var(--ink)]/10 px-3 py-1 text-xs font-bold uppercase tracking-wider text-[color:var(--ink)]/40">Soon</span>
        </div>
      </div>
      {{end}}

    </div>
  </section>

  <section class="rounded-3xl bg-[color:var(--card)] p-6 shadow-pete border-2 border-[color:var(--ink)]/10">
    <h2 class="font-display text-xl font-bold mb-2">House rules</h2>
    <ul class="space-y-1.5 text-sm text-[color:var(--ink)]/70">
      <li>· A chip is a euro. Nothing is worth more here than it is out there.</li>
      <li>· You can have {{.Cap}} chips in front of you at most. That's the limit for one sitting.</li>
      <li>· The house takes {{.RakePct}}% of your winnings. Never your stake: a push hands your bet straight back.</li>
      <li>· Walk away for half an hour and the house cashes you out for you, so your euros never sit in limbo.</li>
      <li>· Every hand is logged with the seed it was dealt from, so any hand can be dealt again exactly as it fell.</li>
    </ul>
  </section>

</div>
{{end}}

{{define "scripts"}}<script src="/static/js/games.js" defer></script>{{end}}