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 justify-center items-center">
            <p className="caption text-n-4 lg:block">
                © 2024 价值前沿. 保留所有权利.
            </p>
        </div>
    </Section>
);

export default Footer;