{% extends "base.html" %}
{% block title %}关于我们 — {{ brand_name }}{% endblock %}
{% block content %}
<div class="space-y-6">
  <section class="bg-white border border-gray-100 rounded-xl p-5">
    <div class="max-w-3xl">
      <p class="text-[12px] font-semibold text-rose-600 uppercase tracking-wide mb-2">{{ brand_title }}</p>
      <h1 class="text-[20px] font-semibold text-gray-900 mb-3">关于我们</h1>
      <p class="text-[13px] leading-6 text-gray-600">
        浑象是面向 AI 时代的安全能力评测基座，用于管理挑战靶场、运行实例、追踪团队进度与沉淀评测数据，帮助安全研究者和 AI Agent 生态更高效地构建、验证和复现攻防任务。
      </p>
      <div class="mt-4 flex flex-wrap gap-2 text-[12px]">
        <span class="px-2.5 py-1 rounded-full bg-gray-100 text-gray-700">Dynamic Flag</span>
        <span class="px-2.5 py-1 rounded-full bg-gray-100 text-gray-700">Multi-team isolation</span>
        <span class="px-2.5 py-1 rounded-full bg-gray-100 text-gray-700">Web UI / API / MCP</span>
        <span class="px-2.5 py-1 rounded-full bg-gray-100 text-gray-700">Challenge store</span>
        <span class="px-2.5 py-1 rounded-full bg-gray-100 text-gray-700">Competition analytics</span>
      </div>
    </div>
  </section>

  <section>
    <div class="flex items-center justify-between mb-3 px-1">
      <div>
        <h2 class="text-[15px] font-semibold text-gray-900">开源仓库</h2>
        <p class="text-[12px] text-gray-500 mt-1">平台代码与公开靶场内容托管在 GitHub。</p>
      </div>
    </div>
    <div class="grid gap-3 md:grid-cols-2">
      <a href="https://github.com/wgpsec/benchmark-platform" target="_blank" class="block bg-white border border-gray-100 rounded-xl p-4 hover:border-gray-200 hover:shadow-sm transition-all">
        <div class="flex items-start justify-between gap-3">
          <div>
            <h3 class="text-[14px] font-semibold text-gray-900">{{ brand_title }}</h3>
            <p class="text-[12px] leading-5 text-gray-500 mt-1">{{ brand_subtitle }} — Web 管理平台与评测基础设施。</p>
          </div>
          <span class="text-[11px] text-blue-600 whitespace-nowrap">GitHub</span>
        </div>
        <p class="text-[11px] text-gray-400 mt-3 break-all">https://github.com/wgpsec/benchmark-platform</p>
      </a>
      <a href="https://github.com/wgpsec/benchmark-challenges" target="_blank" class="block bg-white border border-gray-100 rounded-xl p-4 hover:border-gray-200 hover:shadow-sm transition-all">
        <div class="flex items-start justify-between gap-3">
          <div>
            <h3 class="text-[14px] font-semibold text-gray-900">benchmark-challenges</h3>
            <p class="text-[12px] leading-5 text-gray-500 mt-1">公开靶场题目、挑战规范与复现实验内容。</p>
          </div>
          <span class="text-[11px] text-blue-600 whitespace-nowrap">GitHub</span>
        </div>
        <p class="text-[11px] text-gray-400 mt-3 break-all">https://github.com/wgpsec/benchmark-challenges</p>
      </a>
    </div>
  </section>

  <section>
    <div class="flex items-center justify-between mb-4">
      <div class="flex items-center gap-2.5">
        <div class="w-6 h-6 rounded-md bg-gradient-to-br from-gray-900 to-gray-700 flex items-center justify-center">
          <svg class="w-3.5 h-3.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" /></svg>
        </div>
        <h2 class="text-[15px] font-semibold text-gray-900">WgpSec Agentic Ecosystem</h2>
      </div>
      <span class="text-[10px] font-medium text-gray-400 uppercase tracking-wider">Architecture</span>
    </div>

    <p class="text-[12px] text-gray-600 leading-relaxed mb-4">WgpSec Agentic Ecosystem 将 AI 安全评测的完整生命周期拆分为知识沉淀、服务化、自主执行、效果评估四层，由各组件协同实现从知识到攻防验证的全自动化闭环。</p>

    <!-- Pipeline Flow -->
    <div class="relative bg-gradient-to-r from-gray-50/80 via-gray-50/40 to-gray-50/80 rounded-lg border border-gray-100/80 p-4 mb-4">
      <div class="grid grid-cols-4 gap-0 items-center">
        <!-- Node: AboutSecurity -->
        <div class="flex flex-col items-center">
          <a href="https://github.com/wgpsec/AboutSecurity" target="_blank" class="group relative w-full max-w-[130px]">
            <div class="flex flex-col items-center gap-1.5 p-2.5 rounded-lg border border-emerald-200/60 bg-gradient-to-b from-emerald-50 to-white hover:border-emerald-300 hover:shadow-sm transition-all">
              <div class="w-8 h-8 rounded-lg bg-emerald-100 flex items-center justify-center">
                <svg class="w-4 h-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" /></svg>
              </div>
              <span class="text-[11px] font-semibold text-gray-800">AboutSecurity</span>
              <span class="text-[9px] text-gray-400">知识库</span>
            </div>
          </a>
        </div>
        <!-- Node: context1337 -->
        <div class="flex flex-col items-center">
          <a href="https://github.com/wgpsec/context1337" target="_blank" class="group relative w-full max-w-[130px]">
            <div class="flex flex-col items-center gap-1.5 p-2.5 rounded-lg border border-violet-200/60 bg-gradient-to-b from-violet-50 to-white hover:border-violet-300 hover:shadow-sm transition-all">
              <div class="w-8 h-8 rounded-lg bg-violet-100 flex items-center justify-center">
                <svg class="w-4 h-4 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z" /></svg>
              </div>
              <span class="text-[11px] font-semibold text-gray-800">context1337</span>
              <span class="text-[9px] text-gray-400">MCP 服务</span>
            </div>
          </a>
        </div>
        <!-- Node: tchkiller (highlighted) -->
        <div class="flex flex-col items-center">
          <a href="https://github.com/wgpsec/tchkiller" target="_blank" class="group relative w-full max-w-[130px]">
            <div class="flex flex-col items-center gap-1.5 p-2.5 rounded-lg border border-orange-200/60 bg-gradient-to-b from-orange-50 to-white hover:border-orange-300 hover:shadow-sm transition-all">
              <div class="w-8 h-8 rounded-lg bg-orange-100 flex items-center justify-center">
                <svg class="w-4 h-4 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
              </div>
              <span class="text-[11px] font-semibold text-gray-800">tchkiller</span>
              <span class="text-[9px] text-gray-400">渗透 Agent</span>
            </div>
          </a>
        </div>
        <!-- Node: benchmark-platform (current, highlighted) -->
        <div class="flex flex-col items-center">
          <a href="https://github.com/wgpsec/benchmark-platform" target="_blank" class="group relative w-full max-w-[130px]">
            <div class="flex flex-col items-center gap-1.5 p-2.5 rounded-lg border-2 border-blue-300/80 bg-gradient-to-b from-blue-50 to-white shadow-sm hover:shadow-md hover:border-blue-400 transition-all ring-2 ring-blue-100/50">
              <div class="absolute -top-1.5 -right-1.5 w-3 h-3 bg-blue-500 rounded-full animate-pulse"></div>
              <div class="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center">
                <svg class="w-4 h-4 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" /></svg>
              </div>
              <span class="text-[11px] font-bold text-gray-900">benchmark</span>
              <span class="text-[9px] text-blue-500 font-medium">评估平台</span>
            </div>
          </a>
        </div>
      </div>
      <!-- Flow arrows -->
      <div class="absolute inset-0 pointer-events-none" style="top: 50%; transform: translateY(-50%);">
        <div class="grid grid-cols-4 gap-0 h-0 items-center px-4">
          <div class="flex justify-end pr-0"><svg class="w-4 h-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /></svg></div>
          <div class="flex justify-end pr-0"><svg class="w-4 h-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /></svg></div>
          <div class="flex justify-end pr-0"><svg class="w-4 h-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /></svg></div>
          <div></div>
        </div>
      </div>
    </div>

    <!-- Pipeline stages -->
    <div class="grid grid-cols-4 gap-2 mb-4">
      <div class="flex items-center gap-2 px-3 py-2 rounded-lg bg-gray-50/80 border border-gray-100/80">
        <div class="w-1.5 h-1.5 rounded-full bg-emerald-400"></div>
        <span class="text-[10px] text-gray-600 font-medium">Knowledge</span>
      </div>
      <div class="flex items-center gap-2 px-3 py-2 rounded-lg bg-gray-50/80 border border-gray-100/80">
        <div class="w-1.5 h-1.5 rounded-full bg-violet-400"></div>
        <span class="text-[10px] text-gray-600 font-medium">Service</span>
      </div>
      <div class="flex items-center gap-2 px-3 py-2 rounded-lg bg-gray-50/80 border border-gray-100/80">
        <div class="w-1.5 h-1.5 rounded-full bg-orange-400"></div>
        <span class="text-[10px] text-gray-600 font-medium">Execution</span>
      </div>
      <div class="flex items-center gap-2 px-3 py-2 rounded-lg bg-gray-50/80 border border-gray-100/80">
        <div class="w-1.5 h-1.5 rounded-full bg-blue-400"></div>
        <span class="text-[10px] text-gray-600 font-medium">Evaluation</span>
      </div>
    </div>

    <!-- PoJun callout -->
    <div class="flex items-center gap-3 px-4 py-3 rounded-lg bg-gradient-to-r from-gray-50 to-white border border-gray-100/80 mb-4">
      <div class="w-7 h-7 rounded-lg bg-gray-900 flex items-center justify-center flex-shrink-0">
        <svg class="w-3.5 h-3.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" /></svg>
      </div>
      <div>
        <span class="text-[11px] font-semibold text-gray-800">PoJun</span>
        <span class="text-[10px] text-gray-400 ml-2">通用 AI 求解引擎 — 驱动 tchkiller 的决策与执行（私有）</span>
      </div>
    </div>

    <!-- Footer -->
    <div class="pt-3 border-t border-gray-100/80 flex items-center gap-2">
      <svg class="w-3 h-3 text-gray-300 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /></svg>
      <p class="text-[10px] text-gray-400 leading-relaxed">Knowledge → MCP Service → Agent Execution → Benchmark Evaluation — fully automated security assessment pipeline</p>
    </div>
  </section>

  <section class="bg-white border border-gray-100 rounded-xl p-5">
    <div class="flex items-start justify-between gap-4">
      <div>
        <h2 class="text-[15px] font-semibold text-gray-900">联系交流</h2>
        <p class="text-[12px] leading-5 text-gray-500 mt-2">如需定制化部署、赛事支持或合作交流，可通过以下方式联系。</p>
        <a href="https://www.wgpsec.org/" target="_blank" class="inline-block text-[12px] text-blue-600 hover:text-blue-700 mt-3">www.wgpsec.org</a>
        <a href="mailto:D2hwakH7BS5E@protonmail.com" class="block text-[12px] text-blue-600 hover:text-blue-700 mt-2">D2hwakH7BS5E@protonmail.com</a>
      </div>
      <img src="/static/images/wgpsec-wechat-qrcode.png" alt="WgpSec 公众号二维码" class="w-28 h-28 rounded-lg border border-gray-100 object-cover">
    </div>
  </section>
</div>
{% endblock %}