// Wire UI showcase. Route: /ui. Every element below is a server-rendered
// component from @wrnexus/ui (auto-discovered), styled by theme tokens.
page UI {
  layout = "public"

  seo {
    title = "Wire UI"
    description = "Built-in Wire UI components and layout primitives."
  }

  view {
    <h1>Wire UI components</h1>

    <div data-component="stack" gap="5">
      <div data-component="alert" variant="info" title="Server-rendered" message="These components render on the server and ship no JS unless they are interactive."></div>

      <div data-component="card">
        <div data-component="stack" gap="3">
          <strong>Buttons</strong>
          <div data-component="hstack" gap="3">
            <div data-component="button" variant="primary" label="Primary"></div>
            <div data-component="button" variant="default" label="Default"></div>
            <div data-component="button" variant="danger" label="Danger"></div>
            <div data-component="button" variant="ghost" label="Ghost"></div>
          </div>
        </div>
      </div>

      <div data-component="grid" cols="3" gap="4">
        <div data-component="card">
          <strong>Badges</strong>
          <div data-component="hstack" gap="2">
            <div data-component="badge" variant="success" label="Live"></div>
            <div data-component="badge" variant="warning" label="Beta"></div>
            <div data-component="badge" variant="danger" label="Off"></div>
          </div>
        </div>
        <div data-component="card">
          <strong>Input</strong>
          <div data-component="input" placeholder="Type here..."></div>
        </div>
        <div data-component="card">
          <strong>Spinner</strong>
          <div data-component="spinner"></div>
        </div>
      </div>

      <div data-component="divider"></div>

      <div data-component="card">
        <div data-component="stack" gap="3">
          <strong>More components</strong>
          <div data-component="hstack" gap="3">
            <div data-component="tag" label="default"></div>
            <div data-component="tag" variant="primary" label="primary"></div>
            <div data-component="tag" variant="success" label="success"></div>
            <div data-component="tag" variant="danger" label="danger"></div>
          </div>
          <div data-component="select" name="fruit">
            <option>Apple</option>
            <option>Banana</option>
            <option>Cherry</option>
          </div>
          <div data-component="switch" name="notify" label="Email notifications"></div>
          <div data-component="radio" name="plan" value="pro" label="Pro plan"></div>
          <div data-component="progress" value="65"></div>
          <div data-component="skeleton" width="60%" height="1.2rem"></div>
          <p>Hover this <div data-component="tooltip" text="I am a CSS tooltip"><strong>tooltip trigger</strong></div>.</p>
          <div data-component="table">
            <thead><tr><th>Name</th><th>Role</th></tr></thead>
            <tbody><tr><td>Ada</td><td>Admin</td></tr><tr><td>Grace</td><td>Editor</td></tr></tbody>
          </div>
        </div>
      </div>

      <div data-component="divider"></div>

      <div data-component="disclosure" summary="How do I override component styles?">
        Four ways, least to most control: change a theme token, redefine a
        <code>.wire-*</code> class in your CSS, pass a <code>class</code> prop, or run
        <code>wrnexus eject &lt;name&gt;</code> to copy the component into app/components.
      </div>
    </div>
  }
}