// Reactive directives demo. Route: /reactive
//
// No client island file is needed — the generic reactive runtime
// (/__wrnexus/reactive.js) hydrates the [data-scope] that `state` compiles to.
// `count` becomes a signal; `{expr}` text interpolation and `@click` bind to it.
page Reactive {
  layout = "public"

  // Seeds the reactive scope. The compiler wraps the view in
  // <div data-scope="count: 0">, which the runtime hydrates.
  state count = 0

  seo {
    title = "Reactive"
    description = "Directive-driven reactivity bound to signals"
  }

  view {
    <h1>Reactive directives</h1>

    <div class="card">
      <p>Count is <strong>{count}</strong>, doubled is <strong>{count * 2}</strong>.</p>
      <button @click="count++">increment</button>
      <button @click="count = 0">reset</button>
    </div>

    <p><a href="/">Home</a> · <a href="/about">About</a></p>
  }
}