---
import { getConfig, getExtra } from "../../../utils/config";
import BaijiahaoLogo from '../../../public/template_2/baijiahao.svg'
import Toutiaohao from '../../../public/template_2/toutiaohao.svg'
import Douyin from '../../../public/template_2/douyin.svg'
import { 
    TP2_COLUMN_NEWS,
    TP2_COLUMN_NEWS_URL,
    TP2_COLUMN_ABOUT_US,
    TP2_COLUMN_ABOUT_US_URL,
    TP2_COLUMN_CONTACT_US,
    TP2_COLUMN_CONTACT_US_URL,
    TP2_COLUMN_PROTECT,
    TP2_COLUMN_PROTECT_URL,
    TP2_COLUMN_REFUND,
    TP2_COLUMN_REFUND_URL
} from "../../../utils/const";
const config = getConfig(Astro)
const extra = getExtra(config.app_extra_tag)
const { path = [] } = Astro.props
---
<footer class="v4 n09-footer footer" data-component="n09-footer">
    <div class="container">
        <div class="breadcrumbs">
            <ul class="breadcrumbs__list">
                {
                    path?.map(e => {
                        return <li class="breadcrumbs__item">
                            <a class="breadcrumbs__link" title={e.title} href={`${e.url}`}>{e.title}</a>
                        </li>
                    })
                }
            </ul>
        </div>

        <div class="usp-wrap"></div>
        <div class="footer-links">
            <div class="row">
                <div class="col-xl-2 col-lg-4">
                    <div class="footer-links__block">
                        <div class="heading footer-links__title heading-06 js-footer-accordion-btn">服务支持</div>
                        <ul class="footer-links__list" role="menubar">

                            <li class="footer-links__item" role="menuitem">
                                <a title={TP2_COLUMN_PROTECT} class="footer-links__link" href={TP2_COLUMN_PROTECT_URL}>
                                    {TP2_COLUMN_PROTECT}
                                </a>
                            </li>

                            <li class="footer-links__item" role="menuitem">
                                <a title={TP2_COLUMN_REFUND} class="footer-links__link" href={TP2_COLUMN_REFUND_URL}>
                                    {TP2_COLUMN_REFUND}
                                </a>
                            </li>

                            <li class="footer-links__item" role="menuitem">
                                <a title={TP2_COLUMN_CONTACT_US} class="footer-links__link" href={TP2_COLUMN_CONTACT_US_URL}>
                                    {TP2_COLUMN_CONTACT_US}
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-xl-2 col-lg-4">
                    <div class="footer-links__block">
                        <div class="heading footer-links__title heading-06 js-footer-accordion-btn">
                            应用与下载
                        </div>
                        <ul class="footer-links__list" role="menubar">
                            {
                                extra?.app_store.map(item => {
                                    return <li class="footer-links__item" role="menuitem">
                                                <a title={`${item.name}下载地址`} rel="nofollow" class="footer-links__link" href={item.url}>
                                                    {item.name}
                                                </a>
                                            </li>
                                })
                            }
                        </ul>
                    </div>
                </div>

                <div class="col-xl-2 col-lg-4">
                    <div class="footer-links__block">
                        <div class="heading footer-links__title heading-06 js-footer-accordion-btn">
                            新闻中心
                        </div>
                        <ul class="footer-links__list" role="menubar">
                            <li class="footer-links__item" role="menuitem">
                                <a title={TP2_COLUMN_NEWS}  class="footer-links__link" href={TP2_COLUMN_NEWS_URL}>
                                    {TP2_COLUMN_NEWS}
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="col-xl-2 col-lg-4">
                    <div class="footer-links__block">
                        <div class="heading footer-links__title heading-06 js-footer-accordion-btn">
                            关于我们
                        </div>
                        <ul class="footer-links__list" role="menubar">
                            <li class="footer-links__item" role="menuitem">
                                <a title={TP2_COLUMN_ABOUT_US} class="footer-links__link" href={TP2_COLUMN_ABOUT_US_URL}>
                                    {TP2_COLUMN_ABOUT_US}
                                </a>
                            </li>

                            <!-- <li class="footer-links__item" role="menuitem">
                                <a title="隐私" data-title="隐私" class="footer-links__link" href="/cn/privacy/privacy-statement-huawei/">
                                    隐私
                                </a>
                            </li> -->
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="contact">
            <div class="row">
                <div class="contact__block col-xl-2 col-md-6">
                    <div class="heading contact__title heading-06">
                        在线支持
                    </div>

                    <p class="contact__text">
                        <span>7*24小时服务热线</span>
                        {
                            extra?.contact_us?.telephone.map(item => {
                                return <div style="font-size: 1.5rem;font-weight: bold">
                                            <a title="24小时服务热线" href={`tel:${item.number}`}>{item.number}</a>
                                        </div>
                            })
                        }
                    </p>
                </div>

                <div class="contact__block col-xl-6 col-md-6">
                    <div class="heading contact__title heading-06">
                        关注我们
                    </div>
                    <ul class="contact__social-links lazyload-target">
                        {
                            extra.weibo_offical.address ?
                            <li class="contact__social-item">
                                <a title={extra.weibo_offical.name} class="contact__social-link" href={extra.weibo_offical.address} target="_blank" rel="noreferrer">
                                    <span class="icon-lazy font-ico-weibo" data-name="font-ico-weibo"></span>
                                </a>
                            </li> : ''
                        }
                        {
                            extra.gongzhonghao_offical.address ?
                            <li class="contact__social-item">
                                <a title={extra.gongzhonghao_offical.name} class="contact__social-link" href={extra.gongzhonghao_offical.address} target="_blank" rel="noreferrer">
                                    <span class="icon-lazy font-ico-weixin" data-name="font-ico-weixin"></span>
                                    <span class="contact__social-qrcode"></span>
                                </a>
                            </li> : ''
                        }
                        {
                            extra.baijiahao_offical.address.trim() ?
                            <li class="contact__social-item">
                                <a title={extra.baijiahao_offical.name} class="contact__social-link" href={extra.baijiahao_offical.address} target="_blank" rel="noreferrer">
                                    <BaijiahaoLogo class="icon-lazy" />
                                </a>
                            </li> : ''
                        }
                        {
                            extra.toutiaohao_offical.address ?
                            <li class="contact__social-item">
                                <a title={extra.toutiaohao_offical.name} class="contact__social-link" href={extra.toutiaohao_offical.address} target="_blank" rel="noreferrer">
                                    <Toutiaohao class="icon-lazy" />
                                </a>
                            </li> : ''
                        }
                        {
                            extra.douyin_offical.address ?
                            <li class="contact__social-item">
                                <a title={extra.douyin_offical.name} class="contact__social-link" href={extra.douyin_offical.address} target="_blank" rel="noreferrer">
                                    <Douyin class="icon-lazy" />
                                </a>
                            </li> : ''
                        }
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer-legals">
            <div class="row">
                <div class="copyright col-xl-4 col-md-8">
                    <small class="copyright__text">版权所有 © {config.app_company}
                        。保留一切权利。<a href={config.app_filing_url}>{config.app_filing}</a></small>
                </div>
                <!-- <div class="bottom-links col-xl-5">
                    <ul class="bottom-links__list">

                        <li class="bottom-links__item">
                            <a title="资质主体" class="bottom-links__link" href="/cn/legal/terms-of-use/">
                                资质主体
                            </a>
                        </li>

                        <li class="bottom-links__item">
                            <a title="使用条款" class="bottom-links__link" href="/cn/legal/terms-of-use/">
                                使用条款
                            </a>
                        </li>

                        <li class="bottom-links__item">
                            <a title="隐私声明" class="bottom-links__link" href="/cn/privacy/privacy-policy/">
                                隐私声明
                            </a>
                        </li>

                        <li class="bottom-links__item">
                            <a title="法律信息" class="bottom-links__link" href="/cn/legal/">
                                法律信息
                            </a>
                        </li>
                    </ul>
                </div> -->
            </div>
        </div>
    </div>
</footer>
<style>

    a {
        color: #7f7f7f !important;
    }

    .footer-legals .row {
        justify-content: space-between;
    }

    .icon-lazy {
        width: 24px;
        height: 24px;
    }

</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
    function isMobile() {
        return window.innerWidth <= 991;
    }

    function setupFooterAccordion() {
        const btns = document.querySelectorAll('.js-footer-accordion-btn');
        btns.forEach(btn => {
            // 先重置
            btn.setAttribute('aria-expanded', 'false');
            btn.classList.remove('footer-links__title--active');
            const list = btn.nextElementSibling;
            if (list && list.classList.contains('footer-links__list') && list instanceof HTMLElement) {
                list.style.display = '';
            }

            // 只在小屏下绑定
            (btn as HTMLElement).onclick = function (e: MouseEvent) {
                if (!isMobile()) return;
                e.preventDefault();
                const isActive = btn.classList.toggle('footer-links__title--active');
                btn.setAttribute('aria-expanded', isActive ? 'true' : 'false');
                // 展开/收起对应的 ul
                if (list && list.classList.contains('footer-links__list') && list instanceof HTMLElement) {
                    list.style.display = isActive ? 'block' : 'none';
                }
                // 收起其它
                btns.forEach(otherBtn => {
                    if (otherBtn !== btn) {
                        otherBtn.classList.remove('footer-links__title--active');
                        otherBtn.setAttribute('aria-expanded', 'false');
                        const otherList = otherBtn.nextElementSibling;
                        if (otherList && otherList.classList.contains('footer-links__list') && otherList instanceof HTMLElement) {
                            otherList.style.display = 'none';
                        }
                    }
                });
            };
        });
    }

    // 初始化
    setupFooterAccordion();
    // 屏幕尺寸变化时重置
    window.addEventListener('resize', setupFooterAccordion);
});
</script>