import Section from "../Section/index.tsx";
import Logo from "../Logo/index.js";

const Footer = () => (
    <Section
        className="pt-11 pb-6 px-5 lg:pt-[6.5rem] lg:px-7.5 lg:pb-12 xl:px-10"
        crosses
        customPaddings
    >
        <div className="flex items-center justify-center h-[6.5rem] mb-6 border-b border-n-6 lg:justify-start">
            <Logo />
            <nav className="hidden lg:flex items-center justify-center ml-auto">
                <a
                    className="text-n-1/50 font-code text-xs font-bold uppercase tracking-wider transition-colors hover:text-n-1 mr-10"
                    href="/features"
                >
                    特性功能
                </a>
                <a
                    className="text-n-1/50 font-code text-xs font-bold uppercase tracking-wider transition-colors hover:text-n-1 mr-10"
                    href="/pricing"
                >
                    定价方案
                </a>
                <a
                    className="text-n-1/50 font-code text-xs font-bold uppercase tracking-wider transition-colors hover:text-n-1"
                    href="/how-to-use"
                >
                    使用指南
                </a>
            </nav>
        </div>
        <div className="flex flex-col items-center space-y-2">
            <p className="caption text-n-4 lg:block">
                © 2024 价值前沿. 保留所有权利.
            </p>
            <div className="flex flex-col sm:flex-row items-center space-y-1 sm:space-y-0 sm:space-x-4 text-xs text-n-4">
                <a 
                    href="https://beian.mps.gov.cn/#/query/webSearch?code=11010802046286" 
                    rel="noreferrer" 
                    target="_blank"
                    className="hover:text-n-1 transition-colors"
                >
                    京公网安备11010802046286号
                </a>
                <span className="text-n-4">京ICP备2025107343号-1</span>
            </div>
        </div>
    </Section>
);

export default Footer;