{% load i18n %}
    <!-- 法院短信自动处理流程演示 -->
    <section class="sms-flow-section" id="sms-flow">
        <div class="sms-flow-container">
            <div class="section-header reveal">
                <span class="section-tag">⚡ {% trans "自动化演示" %}</span>
                <h2 class="section-title">{% trans "法院短信智能处理流程" %}</h2>
                <p class="section-desc">{% trans "从收到短信到文书归档，全程自动化处理，7×24 小时无人值守" %}</p>
            </div>

            <div class="flow-demo" id="flowDemo">
                <!-- 左侧：手机模拟器 -->
                <div class="flow-left">
                    <div class="phone-mockup" id="phoneMockup">
                        <div class="phone-notch"></div>
                        <div class="phone-screen">
                            <div class="phone-status-bar">
                                <span>中国移动</span>
                                <span>10:24</span>
                                <span>📶</span>
                            </div>
                            <div class="sms-notification" id="smsNotification">
                                <div class="sms-header">
                                    <div class="sms-icon">📩</div>
                                    <div>
                                        <div class="sms-sender">{% trans "浦东法院" %}</div>
                                        <div class="sms-time">{% trans "刚刚" %}</div>
                                    </div>
                                </div>
                                <div class="sms-content">
                                    【浦东法院】张某诉李某民间借贷纠纷一案，现有法律文书送达：<span class="sms-link">https://ssfw...</span>
                                </div>
                            </div>
                            <div class="sms-notification" id="smsForward" style="background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.3);">
                                <div class="sms-header">
                                    <div class="sms-icon" style="background: linear-gradient(135deg, #fbbf24, #f59e0b);">📤</div>
                                    <div>
                                        <div class="sms-sender">{% trans "快捷指令" %}</div>
                                        <div class="sms-time">{% trans "刚刚" %}</div>
                                    </div>
                                </div>
                                <div class="sms-content">
                                    {% trans "正在转发至法穿AI..." %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 中间：转发说明卡片 + 箭头 -->
                <div class="forward-section" id="forwardSection">
                    <div class="forward-card" id="forwardCard">
                        <div class="forward-card-icon">📱</div>
                        <div class="forward-card-title">{% trans "自动转发" %}</div>
                        <div class="forward-card-desc">iOS {% trans "快捷指令" %}<br>Android SMS Forwarder</div>
                    </div>
                    <!-- 连接箭头 -->
                    <div class="flow-arrow" id="flowArrow1">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                    </div>
                </div>

                <!-- 右侧：处理流程 + 结果卡片 -->
                <div class="flow-right">
                <div class="flow-center">
                    <!-- 流程标题 -->
                    <div class="flow-center-title">
                        <div class="flow-center-title-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
                        </div>
                        <span class="flow-center-title-text">{% trans "法穿AI 智能处理" %}</span>
                        <span class="flow-center-title-sub">{% trans "7×24 自动化" %}</span>
                    </div>

                    <!-- 处理节点网格 -->
                    <div class="process-grid">
                        <div class="process-node" id="processReceive">
                            <div class="process-node-icon receive">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
                        </div>
                        <div class="process-node-content">
                            <div class="process-node-title">{% trans "接收短信" %}</div>
                        </div>
                        <div class="process-node-status">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="20 6 9 17 4 12"/></svg>
                        </div>
                    </div>
                    <div class="process-node" id="processParse">
                        <div class="process-node-icon parse">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                        </div>
                        <div class="process-node-content">
                            <div class="process-node-title">{% trans "解析链接" %}</div>
                        </div>
                        <div class="process-node-status">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="20 6 9 17 4 12"/></svg>
                        </div>
                    </div>
                    <div class="process-node" id="processDownload">
                        <div class="process-node-icon download">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                        </div>
                        <div class="process-node-content">
                            <div class="process-node-title">{% trans "下载文书" %}</div>
                        </div>
                        <div class="process-node-status">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="20 6 9 17 4 12"/></svg>
                        </div>
                    </div>
                    <div class="process-node" id="processMatch">
                        <div class="process-node-icon match">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>
                        </div>
                        <div class="process-node-content">
                            <div class="process-node-title">{% trans "匹配案件" %}</div>
                        </div>
                        <div class="process-node-status">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="20 6 9 17 4 12"/></svg>
                        </div>
                    </div>
                    <div class="process-node" id="processRename">
                        <div class="process-node-icon rename">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
                        </div>
                        <div class="process-node-content">
                            <div class="process-node-title">{% trans "重命名归档" %}</div>
                        </div>
                        <div class="process-node-status">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="20 6 9 17 4 12"/></svg>
                        </div>
                    </div>
                    <div class="process-node" id="processAnalyze">
                        <div class="process-node-icon analyze">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>
                        </div>
                        <div class="process-node-content">
                            <div class="process-node-title">{% trans "智能分析" %}</div>
                        </div>
                        <div class="process-node-status">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="20 6 9 17 4 12"/></svg>
                        </div>
                    </div>
                    <div class="process-node" id="processNotify" style="grid-column: span 2;">
                        <div class="process-node-icon notify">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
                        </div>
                        <div class="process-node-content">
                            <div class="process-node-title">{% trans "推送通知给律师（飞书/Telegram）" %}</div>
                        </div>
                        <div class="process-node-status">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="20 6 9 17 4 12"/></svg>
                        </div>
                    </div>
                </div>
            </div>

                    <!-- 结果展示卡片 -->
                    <div class="result-cards" id="resultCards">
                        <div class="result-card success" id="resultBind">
                            <div class="result-icon">📁</div>
                            <div class="result-title">{% trans "文书已归档" %}</div>
                            <div class="result-desc">{% trans "自动绑定至案件" %}</div>
                        </div>
                        <div class="result-card success" id="resultRename">
                            <div class="result-icon">✏️</div>
                            <div class="result-title">{% trans "已重命名" %}</div>
                            <div class="result-desc">{% trans "传票（张某诉李某…）.pdf" %}</div>
                        </div>
                        <div class="result-card warning" id="resultReminder">
                            <div class="result-icon">⏰</div>
                            <div class="result-title">{% trans "开庭提醒" %}</div>
                            <div class="result-desc">2026-02-15 09:30</div>
                        </div>
                        <div class="result-card alert" id="resultAlert">
                            <div class="result-icon">⚠️</div>
                            <div class="result-title">{% trans "费用异常" %}</div>
                            <div class="result-desc">{% trans "受理费计算有误，立即联系书记员" %}</div>
                        </div>
                    </div>
                </div>
            </div>

        <!-- 流程步骤指示器 -->
        <div class="flow-steps" id="flowSteps">
            <div class="flow-step" data-step="1">
                <span class="flow-step-num">1</span>
                <span>{% trans "收到短信" %}</span>
            </div>
            <div class="flow-step" data-step="2">
                <span class="flow-step-num">2</span>
                    <span>{% trans "自动转发" %}</span>
                </div>
                <div class="flow-step" data-step="3">
                    <span class="flow-step-num">3</span>
                    <span>{% trans "解析链接" %}</span>
                </div>
                <div class="flow-step" data-step="4">
                    <span class="flow-step-num">4</span>
                    <span>{% trans "下载文书" %}</span>
                </div>
                <div class="flow-step" data-step="5">
                    <span class="flow-step-num">5</span>
                    <span>{% trans "归档绑定" %}</span>
                </div>
                <div class="flow-step" data-step="6">
                    <span class="flow-step-num">6</span>
                    <span>{% trans "智能提醒" %}</span>
                </div>
            </div>

            <!-- 控制按钮 -->
            <div class="flow-controls">
                <button class="flow-btn flow-btn-play" id="flowPlayBtn" onclick="startFlowAnimation()">
                    <span>▶</span> {% trans "播放演示" %}
                </button>
                <button class="flow-btn flow-btn-reset" id="flowResetBtn" onclick="resetFlowAnimation()">
                    <span>↺</span> {% trans "重置" %}
                </button>
            </div>
        </div>
    </section>