import React from "react";
import SocialLinks from "@/components/contact/SocialLinks";
import { getSiteSettings } from "@/utils/data";
import MenuList from "./MenuList";
import Image from "next/image";

export default async function Footer() {
  const siteSettings = await getSiteSettings();

  return (
    <footer className="!text-[#333333] z-0">
      <div className="container py-20">
        <div className="w-full flex flex-col md:flex-row justify-center items-stretch gap-8 md:gap-10 xl:gap-10">
          {/* 联系方式 */}
          <div className="flex-[2] min-w-[220px] !max-w-2xl flex flex-col">
            <Image
              className="mb-3"
              alt="image"
              width="160"
              height="40"
              src="/assets/img/logo-dark.png"
            />
            <SocialLinks />
            <p className="!mb-2">
              © {new Date().getFullYear()} {siteSettings.company_name || "Jsite"} {siteSettings.copyright || "All Rights Reserved."}
            </p>
            <p className="!mb-2">
              {siteSettings.icp && (
                <a
                  className="!text-[#333333] hover:!text-[#1fc76f]"
                  href="https://beian.miit.gov.cn"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  {siteSettings.icp}
                </a>
              )}
            </p>
          </div>          
          {/* 产品中心 */}
          <div className="flex-1 min-w-[200px] max-w-xs  flex flex-col">
            <MenuList componentName="MenuList-1" />
          </div>
          {/* 菜单 */}
          <div className="flex-1 min-w-[200px] max-w-xs  flex flex-col">
            <MenuList componentName="MenuList-2" />
          </div>
          <div className="flex-1 min-w-[200px] max-w-xs  flex flex-col">
            <MenuList componentName="MenuList-3" />
          </div>
        </div>
      </div>
    </footer>
  );
}