{% load i18n %}
    <!-- 自动立案演示 -->
    <section class="auto-filing-section" id="auto-filing-flow">
        <div class="auto-filing-container">
            <div class="section-header reveal">
                <span class="section-tag">🏛️ {% trans "一键立案" %}</span>
                <h2 class="section-title">{% trans "自动立案 · OA 与法院双通道并行" %}</h2>
                <p class="section-desc">{% trans "Playwright 驱动，两套系统同时自动填写，效率翻倍" %}</p>
            </div>

            <!-- 双通道并排 -->
            <div class="filing-dual" id="filingDemo">
                <!-- 左：OA 立案 -->
                <div class="filing-channel" data-channel="oa">
                    <div class="channel-badge">🏢 OA {% trans "系统立案" %}</div>
                    <div class="filing-steps" id="filingStepsOa"></div>
                    <div class="browser-mockup">
                        <div class="browser-bar">
                            <div class="browser-dots"><span></span><span></span><span></span></div>
                            <div class="browser-url" id="filingUrlOa">https://oa.jctd.com/workflow/new</div>
                        </div>
                        <div class="browser-content">
                            <div class="filing-form-mock" id="filingFormOa"></div>
                            <div class="filing-status-bar" id="filingStatusBarOa">
                                <span>🤖</span>
                                <span id="filingStatusTextOa">{% trans "Playwright 自动化执行中..." %}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 右：一张网立案 -->
                <div class="filing-channel" data-channel="court">
                    <div class="channel-badge">🏛️ {% trans "法院一张网立案" %}</div>
                    <div class="filing-steps" id="filingStepsCourt"></div>
                    <div class="browser-mockup">
                        <div class="browser-bar">
                            <div class="browser-dots"><span></span><span></span><span></span></div>
                            <div class="browser-url" id="filingUrlCourt">https://zxfw.court.gov.cn/filing/new</div>
                        </div>
                        <div class="browser-content">
                            <div class="filing-form-mock" id="filingFormCourt"></div>
                            <div class="filing-status-bar" id="filingStatusBarCourt">
                                <span>🤖</span>
                                <span id="filingStatusTextCourt">{% trans "Playwright 自动化执行中..." %}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="filing-controls">
                <button class="flow-btn flow-btn-play" id="filingPlayBtn" onclick="startFilingAnimation()">
                    <span>▶</span> {% trans "播放演示" %}
                </button>
                <button class="flow-btn flow-btn-reset" id="filingResetBtn" onclick="resetFilingAnimation()">
                    <span>↺</span> {% trans "重置" %}
                </button>
            </div>
        </div>
    </section>