<!-- 授权页左侧品牌区：深海军蓝安全控制台风格 -->
<template>
  <section class="login-left-view" aria-label="LLMGuardX 品牌介绍">
    <div class="hud-bg"></div>
    <div class="hud-grid"></div>
    <div class="hud-glow glow-a"></div>
    <div class="hud-glow glow-b"></div>
    <span class="frame-line frame-top"></span>
    <span class="frame-line frame-left"></span>
    <span class="frame-line frame-right"></span>
    <span class="frame-line frame-bottom"></span>

    <div class="eyebrow">
      <span class="eyebrow-dot"></span>
      <span>LLM SECURITY &amp; GOVERNANCE</span>
    </div>

    <div class="text-wrap">
      <h1>
        <span>{{ $t('login.leftView.headlineMain') }}</span>
        <strong>{{ $t('login.leftView.headlineAccent') }}</strong>
      </h1>
      <p>{{ $t('login.leftView.subTitle') }}</p>
    </div>

    <div class="radar-wrap" aria-hidden="true">
      <span class="radar-ring ring-1"></span>
      <span class="radar-ring ring-2"></span>
      <span class="radar-ring ring-3"></span>
      <span class="radar-sweep"></span>
      <span class="signal signal-a"></span>
      <span class="signal signal-b"></span>
      <span class="signal signal-c"></span>
      <div class="radar-core"><ArtLogo size="48" /></div>
    </div>

    <div class="hud-tagline">
      <span class="tag-dot"></span>
      <span>SECURE LLM GATEWAY</span>
      <i>//</i>
      <span>{{ $t('login.tagline') }}</span>
    </div>
  </section>
</template>

<script setup lang="ts">
  defineProps<{ hideContent?: boolean }>()
</script>

<style lang="scss" scoped>
  $accent: #42dce8;
  $green: #19d8bd;

  .login-left-view {
    position: relative;
    box-sizing: border-box;
    width: 54.5vw;
    height: 100%;
    min-height: 620px;
    overflow: hidden;
    color: #ecfaff;
    background: #041a29;
  }

  .hud-bg,
  .hud-grid,
  .hud-glow,
  .frame-line {
    position: absolute;
    pointer-events: none;
  }

  .hud-bg {
    inset: 0;
    background:
      radial-gradient(620px 500px at 50% 30%, rgb(20 132 162 / 12%), transparent 72%),
      linear-gradient(135deg, #062438 0%, #031927 58%, #031420 100%);
  }

  .hud-grid {
    inset: 0;
    opacity: 0.42;
    background-image:
      linear-gradient(rgb(71 205 221 / 7%) 1px, transparent 1px),
      linear-gradient(90deg, rgb(71 205 221 / 7%) 1px, transparent 1px);
    background-size: 66px 66px;
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }

  .hud-glow {
    border-radius: 50%;
    filter: blur(86px);
  }

  .glow-a {
    top: 12%;
    right: 6%;
    width: 360px;
    height: 360px;
    background: rgb(31 201 218 / 8%);
  }

  .glow-b {
    bottom: -12%;
    left: 18%;
    width: 420px;
    height: 420px;
    background: rgb(22 119 170 / 11%);
  }

  .frame-line {
    z-index: 2;
    background: rgb(68 202 219 / 12%);
  }

  .frame-top,
  .frame-bottom {
    right: 7%;
    left: 6.5%;
    height: 1px;
  }

  .frame-left,
  .frame-right {
    top: 7%;
    bottom: 6.5%;
    width: 1px;
  }

  .frame-top { top: 7%; }
  .frame-bottom { bottom: 6.5%; }
  .frame-left { left: 6.5%; }
  .frame-right { right: 7%; }

  .eyebrow {
    position: absolute;
    top: 15.5%;
    left: 21%;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: $accent;
  }

  .eyebrow-dot,
  .tag-dot,
  .signal {
    display: block;
    width: 6px;
    height: 6px;
    background: $accent;
    border-radius: 50%;
    box-shadow: 0 0 10px $accent;
  }

  .text-wrap {
    position: absolute;
    top: 21%;
    left: 21%;
    z-index: 3;
    max-width: 610px;
    animation: reveal 0.65s ease-out both;

    h1 {
      display: flex;
      flex-direction: column;
      margin: 0;
      font-size: clamp(42px, 3.55vw, 68px);
      font-weight: 760;
      line-height: 1.14;
      letter-spacing: -0.04em;
      color: #effcff;
    }

    strong {
      font-weight: inherit;
      color: $accent;
      text-shadow: 0 0 34px rgb(66 220 232 / 13%);
    }

    p {
      max-width: 570px;
      margin-top: 24px;
      font-size: 15px;
      line-height: 2;
      letter-spacing: 0.04em;
      color: rgb(153 205 224 / 82%);
    }
  }

  .radar-wrap {
    position: absolute;
    bottom: 8.5%;
    left: 36%;
    z-index: 3;
    width: 280px;
    height: 280px;
  }

  .radar-ring,
  .radar-sweep,
  .radar-core,
  .signal {
    position: absolute;
  }

  .radar-ring {
    border: 1px solid rgb(70 207 222 / 11%);
    border-radius: 50%;
  }

  .ring-1 { inset: 0; }
  .ring-2 { inset: 14%; }
  .ring-3 { inset: 29%; }

  .radar-sweep {
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 10deg, rgb(64 218 230 / 13%), transparent 22%);
    mask-image: radial-gradient(circle, #000 0 68%, transparent 72%);
    animation: spin 8s linear infinite;
  }

  .radar-core {
    inset: 36%;
    display: grid;
    place-items: center;
    border: 1px solid rgb(66 220 232 / 38%);
    border-radius: 24%;
    filter: drop-shadow(0 0 16px rgb(66 220 232 / 30%));
    transform: rotate(45deg);

    :deep(*) { transform: rotate(-45deg); }
  }

  .signal { animation: pulse 2.6s ease-in-out infinite; }
  .signal-a { top: 10%; left: 24%; }
  .signal-b { right: 5%; bottom: 33%; animation-delay: -0.8s; }
  .signal-c { bottom: 5%; left: 17%; animation-delay: -1.6s; }

  .hud-tagline {
    position: absolute;
    bottom: 3.6%;
    left: 21%;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: rgb(113 191 211 / 68%);

    .tag-dot { width: 5px; height: 5px; background: $green; box-shadow: 0 0 9px $green; }
    i { font-style: normal; color: rgb(66 220 232 / 28%); }
  }

  @media (width <= 1500px) {
    .eyebrow,
    .text-wrap,
    .hud-tagline { left: 15%; }
    .radar-wrap { left: 33%; width: 240px; height: 240px; }
  }

  @media (width <= 1180px) {
    .login-left-view { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .radar-sweep,
    .signal,
    .text-wrap { animation: none; }
  }

  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes pulse { 50% { opacity: 0.25; transform: scale(0.75); } }
  @keyframes reveal {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>
