{% load i18n %}
    <!-- Tech Stack Section -->
    <section class="tech-stack" id="tech">
        <div class="section-header reveal">
            <span class="section-tag">🛠 {% trans "技术栈" %}</span>
            <h2 class="section-title">{% trans "现代化技术架构" %}</h2>
            <p class="section-desc">{% trans "基于成熟稳定的技术栈构建，确保系统可靠性与可扩展性" %}</p>
        </div>

        <!-- 技术栈分类展示 -->
        <div class="tech-categories">
            <!-- 后端核心 -->
            <div class="tech-category reveal">
                <div class="tech-category-header">
                    <span class="tech-category-icon">⚙️</span>
                    <span class="tech-category-title">{% trans "后端核心" %}</span>
                </div>
                <div class="tech-category-items">
                    <div class="tech-item-card">
                        <div class="tech-item-icon" style="background: rgba(55, 118, 171, 0.15); color: #3776AB;">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm-.5 4.5c.69 0 1.25.56 1.25 1.25S12.19 7 11.5 7s-1.25-.56-1.25-1.25.56-1.25 1.25-1.25zm3 0c.69 0 1.25.56 1.25 1.25S15.19 7 14.5 7s-1.25-.56-1.25-1.25.56-1.25 1.25-1.25zM8 8h8c1.1 0 2 .9 2 2v6c0 1.1-.9 2-2 2h-1v2l-3-2H8c-1.1 0-2-.9-2-2v-6c0-1.1.9-2 2-2z"/></svg>
                        </div>
                        <div class="tech-item-info">
                            <span class="tech-item-name">Python 3.12</span>
                            <span class="tech-item-desc">{% trans "高性能运行时" %}</span>
                        </div>
                    </div>
                    <div class="tech-item-card">
                        <div class="tech-item-icon" style="background: rgba(9, 180, 100, 0.15); color: #09B464;">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M11.146 0h3.924v18.166c-2.013.382-3.491.535-5.096.535-4.791 0-7.288-2.166-7.288-6.32 0-4.002 2.65-6.6 6.753-6.6.637 0 1.121.05 1.707.203V0zm0 9.143a3.894 3.894 0 00-1.325-.204c-1.988 0-3.134 1.223-3.134 3.365 0 2.09 1.096 3.236 3.109 3.236.433 0 .79-.025 1.35-.102V9.143zM21.314 6.06v9.098c0 3.134-.229 4.638-.917 5.937-.637 1.249-1.478 2.039-3.211 2.905l-3.644-1.733c1.733-.815 2.574-1.53 3.109-2.625.56-1.121.739-2.421.739-5.835V6.059h3.924zM17.39.021h3.924v4.026H17.39V.021z"/></svg>
                        </div>
                        <div class="tech-item-info">
                            <span class="tech-item-name">Django 6.0</span>
                            <span class="tech-item-desc">Web {% trans "框架" %}</span>
                        </div>
                    </div>
                    <div class="tech-item-card">
                        <div class="tech-item-icon" style="background: rgba(99, 102, 241, 0.15); color: #6366f1;">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
                        </div>
                        <div class="tech-item-info">
                            <span class="tech-item-name">Django Ninja</span>
                            <span class="tech-item-desc">{% trans "高性能 API" %}</span>
                        </div>
                    </div>
                    <div class="tech-item-card">
                        <div class="tech-item-icon" style="background: rgba(6, 182, 212, 0.15); color: #06b6d4;">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v6m0 6v10M1 12h6m6 0h10"/></svg>
                        </div>
                        <div class="tech-item-info">
                            <span class="tech-item-name">Django-Q2</span>
                            <span class="tech-item-desc">{% trans "异步任务队列" %}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- AI & 自动化 -->
            <div class="tech-category reveal">
                <div class="tech-category-header">
                    <span class="tech-category-icon">🤖</span>
                    <span class="tech-category-title">AI & {% trans "自动化" %}</span>
                </div>
                <div class="tech-category-items">
                    <div class="tech-item-card">
                        <div class="tech-item-icon" style="background: rgba(16, 185, 129, 0.15); color: #10b981;">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
                        </div>
                        <div class="tech-item-info">
                            <span class="tech-item-name">OpenAI SDK</span>
                            <span class="tech-item-desc">{% trans "兼容式 LLM 接入" %}</span>
                        </div>
                    </div>
                    <div class="tech-item-card">
                        <div class="tech-item-icon" style="background: rgba(244, 114, 182, 0.15); color: #f472b6;">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 9h6v6H9z"/></svg>
                        </div>
                        <div class="tech-item-info">
                            <span class="tech-item-name">Playwright</span>
                            <span class="tech-item-desc">{% trans "浏览器自动化" %}</span>
                        </div>
                    </div>
                    <div class="tech-item-card">
                        <div class="tech-item-icon" style="background: rgba(251, 191, 36, 0.15); color: #fbbf24;">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3l1.912 5.813a2 2 0 001.275 1.275L21 12l-5.813 1.912a2 2 0 00-1.275 1.275L12 21l-1.912-5.813a2 2 0 00-1.275-1.275L3 12l5.813-1.912a2 2 0 001.275-1.275L12 3z"/></svg>
                        </div>
                        <div class="tech-item-info">
                            <span class="tech-item-name">RapidOCR</span>
                            <span class="tech-item-desc">{% trans "文字识别" %}</span>
                        </div>
                    </div>
                    <div class="tech-item-card">
                        <div class="tech-item-icon" style="background: rgba(139, 92, 246, 0.15); color: #8b5cf6;">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/></svg>
                        </div>
                        <div class="tech-item-info">
                            <span class="tech-item-name">Flow State Machine</span>
                            <span class="tech-item-desc">{% trans "会话流程编排" %}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 数据 & 通信 -->
            <div class="tech-category reveal">
                <div class="tech-category-header">
                    <span class="tech-category-icon">💾</span>
                    <span class="tech-category-title">{% trans "数据 & 通信" %}</span>
                </div>
                <div class="tech-category-items">
                    <div class="tech-item-card">
                        <div class="tech-item-icon" style="background: rgba(0, 150, 199, 0.15); color: #0096c7;">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
                        </div>
                        <div class="tech-item-info">
                            <span class="tech-item-name">SQLite</span>
                            <span class="tech-item-desc">{% trans "轻量级数据库" %}</span>
                        </div>
                    </div>
                    <div class="tech-item-card">
                        <div class="tech-item-icon" style="background: rgba(139, 92, 246, 0.15); color: #8b5cf6;">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 2v4m0 12v4M2 12h4m12 0h4"/><path d="M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83"/></svg>
                        </div>
                        <div class="tech-item-info">
                            <span class="tech-item-name">{% trans "向量数据库" %}</span>
                            <span class="tech-item-desc">RAG {% trans "检索增强" %} <span style="color: var(--accent); font-size: 0.7rem;">{% trans "规划中" %}</span></span>
                        </div>
                    </div>
                    <div class="tech-item-card">
                        <div class="tech-item-icon" style="background: rgba(59, 130, 246, 0.15); color: #3b82f6;">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><path d="M22 6l-10 7L2 6"/></svg>
                        </div>
                        <div class="tech-item-info">
                            <span class="tech-item-name">Channels</span>
                            <span class="tech-item-desc">WebSocket {% trans "实时通信" %}</span>
                        </div>
                    </div>
                    <div class="tech-item-card">
                        <div class="tech-item-icon" style="background: rgba(34, 197, 94, 0.15); color: #22c55e;">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
                        </div>
                        <div class="tech-item-info">
                            <span class="tech-item-name">{% trans "飞书 API" %}</span>
                            <span class="tech-item-desc">{% trans "消息通知集成" %}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 架构亮点 -->
        <div class="arch-highlights reveal">
            <div class="arch-highlight-item">
                <div class="arch-highlight-number">4</div>
                <div class="arch-highlight-label">{% trans "层架构设计" %}</div>
                <div class="arch-highlight-desc">API / Service / Admin / Model</div>
            </div>
            <div class="arch-highlight-item">
                <div class="arch-highlight-number">100%</div>
                <div class="arch-highlight-label">{% trans "类型注解覆盖" %}</div>
                <div class="arch-highlight-desc">MyPy {% trans "严格模式" %}</div>
            </div>
            <div class="arch-highlight-item">
                <div class="arch-highlight-number">DI</div>
                <div class="arch-highlight-label">{% trans "依赖注入" %}</div>
                <div class="arch-highlight-desc">ServiceLocator {% trans "模式" %}</div>
            </div>
            <div class="arch-highlight-item">
                <div class="arch-highlight-number">CI/CD</div>
                <div class="arch-highlight-label">{% trans "自动化部署" %}</div>
                <div class="arch-highlight-desc">GitHub Actions</div>
            </div>
        </div>
    </section>