import Banner, { type BannerConfig } from "@/components/Banner";
import Section from "@/components/layout/Section";
import { useStore } from "@/store";

export default function PrivacyPolicy() {
    const appConfig = useStore((s) => s.appConfig);
    const data = appConfig?.others?.privacyPolicy;
    const banner = data?.banner;

    const content = `
        <p style="font-weight: bold;font-size: 24px;">隐私保护</p>
        <p>本网站由银泰集团(以下简称"本公司")运营、管理。使用本网站之前，请仔细阅读下列各项条款与条件（包括但不限于本公司的免责条款及对用户的权利限制条款），请您审阅并接受或不接受本服务条款（未成年人审阅时应得到法定监护人的陪同）。如您不同意本服务条款及/或随时对其的修改，您应不使用或主动取消本公司提供的网站服务。您的使用行为将被视为您对本服务条款全部的完全接受，包括接受本公司对服务条款随时所做的任何修改。</p>
        <p>本网站由银泰集团(以下简称"本公司")运营、管理。使用本网站之前，请仔细阅读下列各项条款与条件（包括但不限于本公司的免责条款及对用户的权利限制条款），请您审阅并接受或不接受本服务条款（未成年人审阅时应得到法定监护人的陪同）。如您不同意本服务条款及/或随时对其的修改，您应不使用或主动取消本公司提供的网站服务。您的使用行为将被视为您对本服务条款全部的完全接受，包括接受本公司对服务条款随时所做的任何修改。</p>
    `;

    return (
        <div>
            <Banner
                title={banner?.title ?? "隐私保护"}
                content={(banner as BannerConfig)?.content}
                titleSize={(banner as BannerConfig)?.titleSize ?? "large"}
                showBreadcrumb={banner?.showBreadcrumb ?? false}
                backgroundImage={banner?.backgroundImage ?? "/images/bg-overview.png"}
            />

            <Section background="" maskBackground="#fff">
                <p
                    style={{
                        fontSize: "18px",
                        lineHeight: "34px",
                        color: "#333333",
                    }}
                    dangerouslySetInnerHTML={{ __html: content }}
                />
            </Section>
        </div>
    );
}