---
import { wagerSnapshot } from './pikurn-snapshots'
const snapshot = wagerSnapshot(0, 0)
---

<pikurn-wagers aria-label='Two-bet strategy laboratory'>
  <header>
    <h3>Strategy explorer</h3>
    <p>
      Set the two uncertain bets. Then wager everything on certain greens and nothing on certain
      reds.
    </p>
  </header>
  <div class='wager-presets' aria-label='Example strategies'>
    <button type='button' data-preset='average' disabled>Maximum average</button>
    <button type='button' data-preset='restricted' disabled>First-bet-only hedge</button>
    <button type='button' data-preset='guarantee' disabled>Guarantee $200</button>
  </div>
  <div class='wager-controls'>
    <label
      >First bet, X <output data-first>$0</output>
      <input
        aria-label='First wager in dollars'
        data-x
        type='range'
        min='0'
        max='100'
        step='1'
        value='0'
        disabled
      />
    </label>
    <label
      >Bet after first green, Y <output data-second>$0</output>
      <input
        aria-label='Wager after first green in dollars'
        data-y
        type='range'
        min='0'
        max='100'
        step='1'
        value='0'
        disabled
      />
    </label>
  </div>
  <p class='wager-budget' data-budget>After a green, you have $100 available for the second bet.</p>
  <p class='wager-scroll-hint'>↔ Scroll each chart sideways to see its full range.</p>
  <div class='wager-figures'>
    <figure>
      <figcaption>Every runout has probability ⅓</figcaption>
      <div class='chart-scroll' tabindex='0' role='region' aria-label='Terminal bankroll chart'>
        <svg
          viewBox='0 0 440 265'
          role='img'
          aria-label='Terminal bankroll for each of three runouts'
          data-bars
          set:html={snapshot.bars}
        />
      </div>
    </figure>
    <figure>
      <figcaption>Average versus guarantee</figcaption>
      <div
        class='chart-scroll'
        tabindex='0'
        role='region'
        aria-label='Average versus guarantee chart'
      >
        <svg
          viewBox='0 0 440 265'
          role='img'
          aria-label='Expected terminal bankroll versus guaranteed terminal bankroll'
          data-frontier
          set:html={snapshot.frontier}
        />
      </div>
      <p class='wager-legend'>
        <span class='frontier-key'>━</span> Best average at each guaranteed floor. <span
          class='point-key'>●</span
        > Your strategy.
      </p>
    </figure>
  </div>
  <p class='wager-summary' aria-live='polite' data-summary>
    Expected final bankroll: $233.33. Guaranteed final bankroll: $100.
  </p>
  <p data-comparison>The maximum-average strategy can finish at $100, $200, or $400.</p>
  <noscript
    >The two policies are shown in the table below. Enable JavaScript to change the wagers and
    explore their trade-off.</noscript
  >
</pikurn-wagers>

<script>
  import './wager-lab'
</script>

<style is:global>
  pikurn-wagers > header {
    background: transparent;
    border: 0;
    padding: 0;
  }
  pikurn-wagers {
    container-name: pikurn-wagers;
    container-type: inline-size;
    display: block;
    margin: 1rem 0;
    padding: clamp(1rem, 2vw, 1.4rem);
    border: 1px solid var(--wow-border);
    background: var(--wow-back-alt);
    border-radius: 0.65rem;
    color: var(--wow-text);
    font-size: 0.9rem;
  }
  pikurn-wagers h3 {
    margin: 0 0 0.5rem;
    font-size: 1.3rem;
  }
  pikurn-wagers p {
    margin: 0.5rem 0;
  }
  pikurn-wagers .wager-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
  }
  pikurn-wagers button {
    font: inherit;
    font-size: 0.85rem;
    padding: 0.45rem 0.7rem;
    min-height: 40px;
    color: var(--wow-text);
    background: var(--wow-back);
    border: 1px solid var(--wow-border);
    border-radius: 0.3rem;
    cursor: pointer;
  }
  pikurn-wagers button[aria-pressed='true'] {
    outline: 2px solid var(--wow-link);
    outline-offset: 2px;
  }
  pikurn-wagers .wager-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  pikurn-wagers label {
    display: block;
    min-width: 0;
    font-weight: bold;
  }
  pikurn-wagers output {
    float: right;
    color: var(--wow-link);
  }
  pikurn-wagers input {
    display: block;
    width: 100%;
    margin: 0.35rem 0;
    min-height: 40px;
    accent-color: var(--wow-link);
  }
  pikurn-wagers .wager-budget,
  pikurn-wagers .wager-legend {
    font-size: 0.8rem;
  }
  pikurn-wagers .wager-figures {
    display: grid;
    grid-template-columns: minmax(0, 25rem);
    gap: 1rem;
    justify-content: center;
    margin: 1rem 0;
  }
  pikurn-wagers .wager-scroll-hint {
    display: none;
    font-size: 0.8rem;
  }
  @container pikurn-wagers (max-width: 359px) {
    pikurn-wagers .wager-scroll-hint {
      display: block;
    }
  }
  pikurn-wagers figure {
    display: block;
    min-width: 0;
    margin: 0;
    padding: 0;
  }
  pikurn-wagers figcaption {
    font-size: 0.85rem;
    font-weight: bold;
    padding: 0 0 0.6rem;
  }
  pikurn-wagers svg {
    width: 100%;
    height: auto;
    overflow: visible;
  }
  pikurn-wagers .chart-scroll {
    max-width: 100%;
    overflow-x: auto;
    outline-offset: 3px;
  }
  pikurn-wagers .chart-scroll:focus-visible {
    outline: 2px solid var(--wow-text);
  }
  pikurn-wagers .chart-scroll svg {
    min-width: 360px;
  }
  pikurn-wagers svg text {
    fill: currentColor;
    font-family: inherit;
    font-size: 17px;
  }
  pikurn-wagers .frontier-key {
    color: var(--wow-link);
  }
  pikurn-wagers .point-key {
    color: var(--wow-text);
  }
  pikurn-wagers .wager-summary {
    font-weight: bold;
    padding-top: 0.7rem;
    border-top: 1px solid var(--wow-border);
  }
  @container pikurn-wagers (max-width: 35rem) {
    pikurn-wagers .wager-controls {
      grid-template-columns: 1fr;
    }
  }
  @container pikurn-wagers (min-width: 49.5rem) {
    pikurn-wagers figcaption {
      min-height: 3.3em;
    }
    pikurn-wagers .wager-figures {
      grid-template-columns: repeat(2, minmax(24rem, 25rem));
    }
  }
</style>