page PlatformShowcase {
  layout = "public"
  render = "hybrid"
  hydrate = "load"

  state active = "Admin"

  view {
    <main class="platform-showcase">
      <header>
        <span class="eyebrow">Reactive primitives</span>
        <h1>Reactive platform showcase</h1>
        <p>Switch a dynamic component and verify transition and portal rendering.</p>
      </header>
      <section class="showcase-card">
        <button type="button" @click='active = active === "Admin" ? "Guest" : "Admin"'>Switch component</button>
        <Transition name="fade">
          <Component is={active}>
            <section class="component-case" data-component-case="Admin"><strong>Administrator tools</strong><p>Manage users, permissions, and platform settings.</p></section>
            <section class="component-case" data-component-case="Guest"><strong>Guest dashboard</strong><p>Explore the public workspace and available resources.</p></section>
          </Component>
        </Transition>
      </section>
      <div id="showcase-modal" class="portal-target" aria-live="polite"></div>
      <Portal to="#showcase-modal"><p>Portaled content rendered in its target.</p></Portal>
    </main>
  }

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

    .platform-showcase header,
    .showcase-card,
    .component-case {
      display: grid;
      gap: 0.75rem;
    }

    .eyebrow {
      color: var(--wire-color-primary);
      font-weight: 700;
      text-transform: uppercase;
    }

    .showcase-card,
    .portal-target {
      padding: 1.25rem;
      border: 1px solid var(--wire-color-border);
      border-radius: var(--wire-radius-lg);
      background: var(--wire-color-surface);
    }

    .showcase-card button {
      width: fit-content;
      padding: 0.7rem 1rem;
      border: 0;
      border-radius: var(--wire-radius-md);
      background: var(--wire-color-primary);
      color: var(--wire-color-primary-contrast);
      cursor: pointer;
    }

    .fade-enter-active {
      animation: platform-fade 180ms ease-out;
    }

    @keyframes platform-fade {
      from { opacity: 0; transform: translateY(0.25rem); }
      to { opacity: 1; transform: translateY(0); }
    }
  }
}