// Real page for checking compiler, formatter, LSP navigation, rename, and reactivity.
page LanguageTools {
  layout = "public"

  state count: number = 0
  state message: string = "The shared language server is active."

  computed doubled: number = count * 2

  seo {
    title = "WRN language tools"
    description = "Interactive WRN page used to verify editor and compiler features."
    canonical = "/language-tools"
  }

  functions {
    function increment() {
      count++
      message = `Renaming count updates all ${count} references safely.`
    }

    function reset() {
      count = 0
      message = "State reset. Try hover, definition, references, and rename in your editor."
    }
  }

  view {
    <main class="language-tools">
      <header>
        <span class="eyebrow">Editor-neutral WRN tooling</span>
        <h1>Language server playground</h1>
        <p>{message}</p>
      </header>

      <section aria-labelledby="counter-heading" class="demo-card">
        <h2 id="counter-heading">Reactive Data symbol test</h2>
        <p aria-live="polite">Count: {count}; computed double: {doubled}</p>
        <div class="actions">
          <button type="button" @click="increment()">Increment</button>
          <button type="button" class="secondary" @click="reset()">Reset</button>
        </div>
      </section>

      <section aria-labelledby="features-heading" class="demo-card">
        <h2 id="features-heading">Features exercised by this file</h2>
        <ul>
          <li>Compiler and accessibility diagnostics</li>
          <li>Canonical formatting and completion</li>
          <li>Hover, symbols, definition, references, and rename</li>
          <li>Typed state, computed values, and browser events</li>
        </ul>
      </section>
    </main>
  }

  style {
    .language-tools {
      display: grid;
      max-width: 58rem;
      gap: 1.25rem;
      margin: 3rem auto;
    }

    .language-tools header,
    .demo-card {
      display: grid;
      gap: 0.75rem;
    }

    .eyebrow {
      color: var(--wrn-color-primary);
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .demo-card {
      padding: 1.25rem;
      border: 1px solid var(--wrn-color-border);
      border-radius: var(--wrn-radius-lg);
      background: var(--wrn-color-surface);
    }

    .actions {
      display: flex;
      gap: 0.75rem;
    }

    .actions button {
      padding: 0.65rem 1rem;
      border: 1px solid var(--wrn-color-primary);
      border-radius: var(--wrn-radius-md);
      background: var(--wrn-color-primary);
      color: var(--wrn-color-primary-contrast);
      cursor: pointer;
    }

    .actions .secondary {
      background: transparent;
      color: var(--wrn-color-primary);
    }
  }
}