// Home page. Route: / (a trailing `index` segment is dropped from the route).
//
// SSR-first: the body is server-rendered. Interactivity comes from components —
// `.wrn` files under app/components, rendered on the server and hydrated in the
// browser. Mount one with data-component="<name>" and pass props as attributes.
page Home {
  layout = "public"

  seo {
    title = "Home"
    description = "Welcome to the WrNexus basic app, an SSR-first framework demo."
  }

  view {
    <h1>{t:home.title}</h1>
    <p>{t:home.intro}</p>

    <!-- Tailwind utility classes (flex layout + spacing) style the page; the
         mount divs are replaced by each component's server-rendered HTML. -->
    <div class="flex flex-wrap items-center gap-3 my-4">
      <div data-component="counter" start="0" label="Count"></div>
      <!-- The label is localized: `{t:key}` in a prop is resolved per-request. -->
      <div data-component="counter" start="10" label="{t:nav.dashboard}"></div>
    </div>

    <!-- This box is styled entirely with theme tokens (var(--wire-*)), so it
         restyles instantly when the theme changes. -->
    <div class="themed-box">
      This box uses theme tokens. Current theme controls its colors.
      <button type="button" data-wire-theme-toggle class="theme-toggle">Toggle theme</button>
    </div>

    <p><a class="text-red-600 hover:underline" href="/about">About</a></p>
    <p><a class="hover:underline" href="/language-tools">Language server playground</a></p>
  }

  style {
    .themed-box {
      background: var(--wire-color-surface);
      color: var(--wire-color-text);
      border: 1px solid var(--wire-color-border);
      border-radius: var(--wire-radius);
      padding: 1rem;
      margin: 1rem 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
    .theme-toggle {
      background: var(--wire-color-primary);
      color: var(--wire-color-primary-contrast);
      border: 0;
      border-radius: var(--wire-radius-sm);
      padding: 0.5rem 0.9rem;
      cursor: pointer;
    }
  }
}