WRNexusJS/packages/ui/components/AuthSplitLayout.wrn

component AuthSplitLayout {
  props {
    size: string = "default"
    color: string = "primary"
    eyebrow: string = "Secure identity"
    title: string = "Welcome back"
    description: string = ""
    brand: string = "Police Management System"
    features: unknown[] = []
    class: string = ""
  }

  view {
    <main
      class="wire-auth-split wire-next--color-{color} wire-next--size-{size} {class}"
    >
      <section
        class="wire-auth-split__content"
      >
        <div
          class="wire-auth-split__brand"
        >
          <span
            class="icon-[lucide--shield-check]"
            aria-hidden="true"
          >
          </span>
          <span><strong>{brand}</strong><small>Unified identity and access</small></span>
        </div>
        <div
          class="wire-auth-split__message"
        >
          <span
            class="wire-auth-split__eyebrow"
          >
            {eyebrow}
          </span>
          <h1>{title}</h1>
          {#if description}
            <p>{description}</p>
          {/if}
          <div
            class="wire-auth-split__features"
          >
            {#each features as item}
              <article>
                <span
                  class="{item.icon || 'icon-[lucide--check-circle-2]'}"
                  aria-hidden="true"
                >
                </span>
                <span><strong>{item.label}</strong>
                  {#if item.description}
                    <small>{item.description}</small>
                  {/if}
                </span>
              </article>
            {/each}
          </div>
          <slot
            name="aside-extra"
          />
        </div>
        <small
          class="wire-auth-split__legal"
        >
          Authorised access only · Activity may be monitored and audited.
        </small>
      </section>
      <section
        class="wire-auth-split__form"
      >
        <div
          class="wire-auth-split__form-inner"
        >
          <slot
            name="form"
          />
        </div>
      </section>
    </main>
  }

  style {
    /* Shared authentication shell and forms */
    .wire-auth-split {
      display: grid;
      width: 100%;
      height: 100dvh;
      min-height: 0;
      overflow: hidden;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      color: var(--wire-color-text);
      background: var(--wire-color-bg);
    }

    .wire-auth-split__content,
    .wire-auth-split__form {
      min-width: 0;
      padding: clamp(1.5rem, 5vw, 5rem);
    }

    .wire-auth-split__content {
      display: flex;
      height: 100dvh;
      min-height: 0;
      overflow: hidden;
      justify-content: space-between;
      flex-direction: column;
      background:
        radial-gradient(
          circle at 15% 15%,
          color-mix(in srgb, var(--wire-color-primary) 22%, transparent),
          transparent 34%
        ),
        linear-gradient(145deg, var(--wire-color-surface-2), var(--wire-color-bg));
      border-right: 1px solid var(--wire-color-border);
    }

    .wire-auth-split__brand {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .wire-auth-split__brand > span:first-child {
      width: 2.5rem;
      height: 2.5rem;
      color: var(--wire-color-primary);
    }

    .wire-auth-split__brand > span:last-child {
      display: grid;
    }

    .wire-auth-split__brand strong {
      font-size: 0.875rem;
      font-weight: 650;
    }

    .wire-auth-split__brand small,
    .wire-auth-split__legal {
      color: var(--wire-color-muted);
      font-size: 0.65rem;
    }

    .wire-auth-split__message {
      width: min(100%, 36rem);
      margin-block: 3rem;
    }

    .wire-auth-split__eyebrow {
      color: var(--wire-color-primary);
      font-size: 0.7rem;
      font-weight: 650;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

    .wire-auth-split__message h1 {
      max-width: 14ch;
      margin: 0.65rem 0 0;
      font-size: clamp(2rem, 4vw, 3.75rem);
      font-weight: 650;
      letter-spacing: -0.045em;
      line-height: 1.08;
    }

    .wire-auth-split__message > p {
      max-width: 34rem;
      margin: 1rem 0 0;
      color: var(--wire-color-muted);
      font-size: 0.875rem;
      line-height: 1.7;
    }

    .wire-auth-split__features {
      display: grid;
      margin-top: 2rem;
      gap: 1rem;
    }

    .wire-auth-split__features article {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
    }

    .wire-auth-split__features article > span:first-child {
      width: 1.1rem;
      height: 1.1rem;
      margin-top: 0.1rem;
      flex: none;
      color: var(--wire-color-primary);
    }

    .wire-auth-split__features article > span:last-child {
      display: grid;
    }

    .wire-auth-split__features strong {
      font-size: 0.75rem;
      font-weight: 600;
    }

    .wire-auth-split__features small {
      margin-top: 0.15rem;
      color: var(--wire-color-muted);
      font-size: 0.68rem;
    }

    .wire-auth-split__form {
      display: grid;
      height: 100dvh;
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      place-items: center;
      background: var(--wire-color-surface);
    }

    .wire-auth-split__form-inner {
      width: min(100%, 30rem);
    }

    @media (max-width: 800px) {
    .wire-auth-split {
        height: auto;
        min-height: 100dvh;
        overflow: visible;
        grid-template-columns: 1fr;
      }
    .wire-auth-split__content {
        height: auto;
        min-height: auto;
        overflow: visible;
        padding-bottom: 2rem;
        border-right: 0;
        border-bottom: 1px solid var(--wire-color-border);
      }
    .wire-auth-split__message {
        margin-block: 2rem 0;
      }
    .wire-auth-split__message h1 {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
      }
    .wire-auth-split__features,
      .wire-auth-split__legal {
        display: none;
      }
    .wire-auth-split__form {
        height: auto;
        min-height: auto;
        overflow: visible;
        padding-block: 2.5rem;
        place-items: start center;
      }
    }
  }
}