{% extends "base.html" %}

{% block title %}{{ t('pricing') if t('pricing') else '收费' }}{% endblock %}

{% block content %}
<!-- <section class="hero">
    <div class="container">
        <h2>{{ t('pricing') if t('pricing') else '收费方案' }}</h2>
        <p>{{ t('pricing_description') if t('pricing_description') else '透明合理的收费结构，助力您的投资成功' }}</p>
    </div>
</section> -->

<section class="commission-table">
    <div class="container">
        <div class="section-title">
            <h2>{{ t('commission_rates') if t('commission_rates') else '佣金费率' }}</h2>
            <p>{{ t('commission_rates_desc') if t('commission_rates_desc') else '透明公开的交易费用，助力您的投资决策' }}</p>
        </div>

        <div class="tabs-container">
            <div class="tabs">
                <button class="tab-button active" data-tab="stocks">{{ t('stocks') if t('stocks') else '股票、ETF和权证'
                    }}</button>
                <!-- <button class="tab-button" data-tab="options">{{ t('options') if t('options') else '期权' }}</button>
                <button class="tab-button" data-tab="futures">{{ t('futures') if t('futures') else '期货' }}</button>
                <button class="tab-button" data-tab="funds">{{ t('funds') if t('funds') else '基金' }}</button> -->
                <button class="tab-button" data-tab="other">{{ t('other_products') if t('other_products') else '更多'
                    }}</button>
            </div>

            <div class="tab-content">
                <!-- Stocks Tab -->
                <div id="stocks" class="tab-pane active">
                    <div class="table-container">
                        <table class="commission-rates-table">
                            <thead>
                                <tr>
                                    <th>{{ t('market') if t('market') else '市场' }}</th>
                                    <th>{{ t('product_type') if t('product_type') else '产品类型' }}</th>
                                    <th>{{ t('commission_rate') if t('commission_rate') else '佣金费率' }}</th>
                                    <th>{{ t('minimum_fee') if t('minimum_fee') else '最低收费' }}</th>
                                    <th>{{ t('additional_fees') if t('additional_fees') else '其他费用' }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>港股 (港币)</td>
                                    <td>股票交易</td>
                                    <td>0.125% <br>最低HK$70</td>
                                    <td>0</td>
                                    <td>电子交易平台</td>
                                </tr>
                                <tr>
                                    <td>美股 (美元)</td>
                                    <td>股票交易</td>
                                    <td>US$ 0.0049/股<br>最低US$0.99/订单</US1>
                                    </td>
                                    <td>US$ 0.005/股<br>最低US$1.00/订单 </td>
                                    <td>电子交易平台</td>
                                </tr>
                                <!-- <tr>
                                    <td>A股</td>
                                    <td>股票交易</td>
                                    <td>0.03%</td>
                                    <td>¥ 5.00</td>
                                    <td>印花税: 0.1%</td>
                                </tr>
                                <tr>
                                    <td>日本</td>
                                    <td>股票交易</td>
                                    <td>0.20%</td>
                                    <td>¥ 100</td>
                                    <td>交易所费: 0.003%</td>
                                </tr> -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Options Tab -->
                <div id="options" class="tab-pane">
                    <div class="table-container">
                        <table class="commission-rates-table">
                            <thead>
                                <tr>
                                    <th>{{ t('market') if t('market') else '市场' }}</th>
                                    <th>{{ t('product_type') if t('product_type') else '产品类型' }}</th>
                                    <th>{{ t('commission_rate') if t('commission_rate') else '佣金费率' }}</th>
                                    <th>{{ t('minimum_fee') if t('minimum_fee') else '最低收费' }}</th>
                                    <th>{{ t('additional_fees') if t('additional_fees') else '其他费用' }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td rowspan="3">港股</td>
                                    <td>股票期权（标准）</td>
                                    <td>HK$ 15/张</td>
                                    <td>HK$ 30</td>
                                    <td>交易征费: 0.0027%<br>证监会征费: 0.00015%<br>结算费: HK$ 0.5/张</td>
                                </tr>
                                <tr>
                                    <td>股票期权（大宗交易）</td>
                                    <td>HK$ 10/张</td>
                                    <td>HK$ 100</td>
                                    <td>交易征费: 0.0027%<br>证监会征费: 0.00015%</td>
                                </tr>
                                <tr>
                                    <td>指数期权</td>
                                    <td>HK$ 12/张</td>
                                    <td>HK$ 25</td>
                                    <td>交易征费: 0.0027%<br>证监会征费: 0.00015%</td>
                                </tr>
                                <tr>
                                    <td rowspan="4">美股</td>
                                    <td>股票期权（标准合约）</td>
                                    <td>US$ 0.65/合约</td>
                                    <td>US$ 1.00</td>
                                    <td>SEC Fee: 0.0000229%<br>FINRA TAF: US$ 0.000145/股</td>
                                </tr>
                                <tr>
                                    <td>股票期权（大宗交易）</td>
                                    <td>US$ 0.50/合约</td>
                                    <td>US$ 1.00</td>
                                    <td>SEC Fee: 0.0000229%<br>FINRA TAF: US$ 0.000145/股</td>
                                </tr>
                                <tr>
                                    <td>指数期权（标准）</td>
                                    <td>US$ 1.50/合约</td>
                                    <td>US$ 1.00</td>
                                    <td>交易所费用: US$ 0.15/合约<br>清算费: US$ 0.05/合约</td>
                                </tr>
                                <tr>
                                    <td>指数期权（迷你）</td>
                                    <td>US$ 0.75/合约</td>
                                    <td>US$ 1.00</td>
                                    <td>交易所费用: US$ 0.10/合约<br>清算费: US$ 0.03/合约</td>
                                </tr>
                                <tr>
                                    <td rowspan="2">A股</td>
                                    <td>上证50ETF期权</td>
                                    <td>¥ 5/张</td>
                                    <td>¥ 10</td>
                                    <td>经手费: ¥ 0.3/张<br>结算费: ¥ 0.3/张</td>
                                </tr>
                                <tr>
                                    <td>沪深300期权</td>
                                    <td>¥ 8/张</td>
                                    <td>¥ 15</td>
                                    <td>经手费: ¥ 0.5/张<br>结算费: ¥ 0.5/张</td>
                                </tr>
                                <tr>
                                    <td>新加坡</td>
                                    <td>新华A50指数期权</td>
                                    <td>US$ 2.00/合约</td>
                                    <td>US$ 5.00</td>
                                    <td>交易所费用: US$ 0.25/合约<br>清算费: US$ 0.10/合约</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="volume-discounts">
                        <h4>成交量折扣计划</h4>
                        <div class="discount-grid">
                            <div class="discount-tier">
                                <h5>美股期权</h5>
                                <p>月交易量 1-999 合约: US$ 0.65/合约</p>
                                <p>月交易量 1,000-4,999 合约: US$ 0.55/合约</p>
                                <p>月交易量 5,000-9,999 合约: US$ 0.45/合约</p>
                                <p>月交易量 10,000+ 合约: US$ 0.35/合约</p>
                            </div>
                            <div class="discount-tier">
                                <h5>港股期权</h5>
                                <p>月交易量 1-499 张: HK$ 15/张</p>
                                <p>月交易量 500-1,999 张: HK$ 12/张</p>
                                <p>月交易量 2,000-4,999 张: HK$ 10/张</p>
                                <p>月交易量 5,000+ 张: HK$ 8/张</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Futures Tab -->
                <div id="futures" class="tab-pane">
                    <div class="table-container">
                        <table class="commission-rates-table">
                            <thead>
                                <tr>
                                    <th>{{ t('market') if t('market') else '市场' }}</th>
                                    <th>{{ t('product_type') if t('product_type') else '产品类型' }}</th>
                                    <th>{{ t('commission_rate') if t('commission_rate') else '佣金费率' }}</th>
                                    <th>{{ t('minimum_fee') if t('minimum_fee') else '最低收费' }}</th>
                                    <th>{{ t('additional_fees') if t('additional_fees') else '其他费用' }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>港股</td>
                                    <td>期货交易</td>
                                    <td>HK$ 10/张</td>
                                    <td>HK$ 50</td>
                                    <td>证监会征费: 0.00015%</td>
                                </tr>
                                <tr>
                                    <td>美股</td>
                                    <td>指数期货</td>
                                    <td>US$ 2.50/合约</td>
                                    <td>US$ 1.00</td>
                                    <td>NFA Fee: US$ 0.02/合约</td>
                                </tr>
                                <tr>
                                    <td>商品期货</td>
                                    <td>黄金期货</td>
                                    <td>US$ 5.00/合约</td>
                                    <td>US$ 10.00</td>
                                    <td>交易所费用: US$ 1.50/合约</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Funds Tab -->
                <div id="funds" class="tab-pane">
                    <div class="table-container">
                        <table class="commission-rates-table">
                            <thead>
                                <tr>
                                    <th>{{ t('market') if t('market') else '市场' }}</th>
                                    <th>{{ t('product_type') if t('product_type') else '产品类型' }}</th>
                                    <th>{{ t('commission_rate') if t('commission_rate') else '佣金费率' }}</th>
                                    <th>{{ t('minimum_fee') if t('minimum_fee') else '最低收费' }}</th>
                                    <th>{{ t('additional_fees') if t('additional_fees') else '其他费用' }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>港股</td>
                                    <td>互惠基金</td>
                                    <td>0.50%</td>
                                    <td>HK$ 100</td>
                                    <td>托管费: 0.15%/年</td>
                                </tr>
                                <tr>
                                    <td>美股</td>
                                    <td>ETF基金</td>
                                    <td>US$ 0.005/股</td>
                                    <td>US$ 1.00</td>
                                    <td>SEC Fee: 0.0000229%</td>
                                </tr>
                                <tr>
                                    <td>债券基金</td>
                                    <td>固定收益</td>
                                    <td>0.25%</td>
                                    <td>US$ 25.00</td>
                                    <td>管理费: 0.10%/年</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Other Products Tab -->
                <div id="other" class="tab-pane">
                    <div class="table-container">
                        <table class="commission-rates-table">
                            <li style="font-size: 1.2em; text-align: center;"><a href="javascript:void(0);"
                                    onclick="showPdfModal()">了解详情</a></li>
                            <!-- <thead>
                                <tr>
                                    <th>{{ t('market') if t('market') else '市场' }}</th>
                                    <th>{{ t('product_type') if t('product_type') else '产品类型' }}</th>
                                    <th>{{ t('commission_rate') if t('commission_rate') else '佣金费率' }}</th>
                                    <th>{{ t('minimum_fee') if t('minimum_fee') else '最低收费' }}</th>
                                    <th>{{ t('additional_fees') if t('additional_fees') else '其他费用' }}</th>
                                </tr>
                            </thead> -->
                            <!-- <tbody>
                                <tr>
                                    <td>加密货币</td>
                                    <td>现货交易</td>
                                    <td>0.10%</td>
                                    <td>US$ 1.00</td>
                                    <td>网络费用: 可变</td>
                                </tr>
                                <tr>
                                    <td>外汇</td>
                                    <td>主要货币对</td>
                                    <td>0.08%</td>
                                    <td>US$ 10.00</td>
                                    <td>隔夜利息: 可变</td>
                                </tr>
                                <tr>
                                    <td>结构性产品</td>
                                    <td>牛熊证</td>
                                    <td>0.20%</td>
                                    <td>HK$ 50</td>
                                    <td>行使费: 0.003%</td>
                                </tr>
                            </tbody> -->
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- <div class="table-notes">
            <p>* {{ t('commission_note') if t('commission_note') else '以上费率仅供参考，实际费用可能因市场情况而变化。详细费用请参考最新费率表。' }}</p>
        </div> -->
    </div>
</section>

<section class="services">
    <!-- <div class="container">
        <div class="section-title">
            <h2>{{ t('pricing_plans') if t('pricing_plans') else '收费标准' }}</h2>
            <p>{{ t('choose_plan') if t('choose_plan') else '选择适合您的投资方案' }}</p>
        </div>

        <div class="feature-grid">
            <div class="feature">
                <div class="feature-icon">💰</div>
                <h3>{{ t('basic_plan') if t('basic_plan') else '基础套餐' }}</h3>
                <p>{{ t('basic_plan_desc') if t('basic_plan_desc') else '适合初级投资者的入门套餐' }}</p>
                <div class="price">¥299/月</div>
                <ul class="plan-features">
                    <li>{{ t('feature1') if t('feature1') else '基础行情数据' }}</li>
                    <li>{{ t('feature2') if t('feature2') else '5次免费交易' }}</li>
                    <li>{{ t('feature3') if t('feature3') else '基础分析工具' }}</li>
                </ul>
                <a href="{{ url_for('contact') }}" class="btn">{{ t('get_started') if t('get_started') else '立即开通'
                    }}</a>
            </div>

            <div class="feature">
                <div class="feature-icon">💎</div>
                <h3>{{ t('pro_plan') if t('pro_plan') else '专业套餐' }}</h3>
                <p>{{ t('pro_plan_desc') if t('pro_plan_desc') else '适合活跃交易者的专业套餐' }}</p>
                <div class="price">¥899/月</div>
                <ul class="plan-features">
                    <li>{{ t('feature4') if t('feature4') else '高级行情数据' }}</li>
                    <li>{{ t('feature5') if t('feature5') else '无限次交易' }}</li>
                    <li>{{ t('feature6') if t('feature6') else '专业分析工具' }}</li>
                    <li>{{ t('feature7') if t('feature7') else '实时市场警报' }}</li>
                </ul>
                <a href="{{ url_for('contact') }}" class="btn">{{ t('get_started') if t('get_started') else '立即开通'
                    }}</a>
            </div>

            <div class="feature">
                <div class="feature-icon">🏆</div>
                <h3>{{ t('vip_plan') if t('vip_plan') else 'VIP套餐' }}</h3>
                <p>{{ t('vip_plan_desc') if t('vip_plan_desc') else '适合机构投资者的尊贵套餐' }}</p>
                <div class="price">¥2999/月</div>
                <ul class="plan-features">
                    <li>{{ t('feature8') if t('feature8') else '全市场行情数据' }}</li>
                    <li>{{ t('feature9') if t('feature9') else '专属客户经理' }}</li>
                    <li>{{ t('feature10') if t('feature10') else '高级分析工具套件' }}</li>
                    <li>{{ t('feature11') if t('feature11') else '个性化投资策略' }}</li>
                    <li>{{ t('feature12') if t('feature12') else '优先客服支持' }}</li>
                </ul>
                <a href="{{ url_for('contact') }}" class="btn">{{ t('get_started') if t('get_started') else '立即开通'
                    }}</a>
            </div>
        </div>
    </div> -->
</section>

<section class="features">
    <div class="container">
        <div class="section-title">
            <h2>{{ t('why_choose_our_pricing') if t('why_choose_our_pricing') else '为什么选择我们的收费方案' }}</h2>
        </div>
        <div class="feature-grid">
            <div class="feature">
                <h3>{{ t('transparent_pricing') if t('transparent_pricing') else '透明收费' }}</h3>
                <p>{{ t('transparent_pricing_desc') if t('transparent_pricing_desc') else '无隐藏费用，所有收费项目清晰明了' }}</p>
            </div>
            <div class="feature">
                <h3>{{ t('value_for_money') if t('value_for_money') else '物超所值' }}</h3>
                <p>{{ t('value_for_money_desc') if t('value_for_money_desc') else '提供远超价格的优质服务和工具' }}</p>
            </div>
            <div class="feature">
                <h3>{{ t('flexible_plans') if t('flexible_plans') else '灵活选择' }}</h3>
                <p>{{ t('flexible_plans_desc') if t('flexible_plans_desc') else '多种套餐满足不同投资需求' }}</p>
            </div>
        </div>
    </div>
</section>

<!-- PDF Modal -->
<div id="pdfModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h3>佣金和费用计划表</h3>
        <iframe id="pdfViewer" src="" width="100%" height="600px" frameborder="0"></iframe>
    </div>
</div>

<style>
    /* Modal Styles */
    .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.8);
    }

    .modal-content {
        background-color: #fefefe;
        margin: 5% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 90%;
        max-width: 900px;
        border-radius: 8px;
        position: relative;
    }

    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        position: absolute;
        right: 15px;
        top: 10px;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

    .modal-content h3 {
        margin-top: 0;
        margin-bottom: 15px;
        color: #333;
        text-align: center;
    }

    #pdfViewer {
        border: 1px solid #ddd;
        border-radius: 4px;
    }
</style>

<script>
    function showPdfModal() {
        const modal = document.getElementById('pdfModal');
        const pdfViewer = document.getElementById('pdfViewer');

        // 设置PDF文件路径
        pdfViewer.src = '/static/css/pdf/20251001.pdf';

        // 显示模态框
        modal.style.display = 'block';
    }

    // 关闭模态框
    document.addEventListener('DOMContentLoaded', function () {
        const modal = document.getElementById('pdfModal');
        const closeBtn = document.querySelector('.close');

        closeBtn.onclick = function () {
            modal.style.display = 'none';
        }

        // 点击模态框外部关闭
        window.onclick = function (event) {
            if (event.target == modal) {
                modal.style.display = 'none';
            }
        }
    });
</script>
{% endblock %}