'use client';
import React, { useEffect, useState } from "react";
import SocialLinks from "@/components/contact/SocialLinks";
import { getSiteSettings } from "@/utlis/siteSettings";
import MenuList from "./MenuList";
import Contact from "@/components/contact/Contact";

export default function Footer15() {
  const [siteSettings, setSiteSettings] = useState({});

  useEffect(() => {
    getSiteSettings().then(setSiteSettings);
  }, []);

  return (
    <footer className="bg-[#21262c] opacity-100 !text-[#cacaca]">
      <div className="container pt-20 pb-7">
        <div className="w-full flex flex-col md:flex-row justify-center items-stretch gap-8 md:gap-10 xl:gap-16">
          {/* 产品中心 */}
          <div className="flex-1 min-w-[220px] max-w-xs  flex flex-col">
            <MenuList componentName="MenuList-1" />
          </div>
          {/* 菜单 */}
          <div className="flex-1 min-w-[220px] max-w-xs  flex flex-col">
            <MenuList componentName="MenuList-2" />
          </div>
          {/* 联系方式 */}
          <div className="flex-[1.5] min-w-[220px] max-w-lg  flex flex-col items-center text-center">
            <Contact />
          </div>
        </div>
        <hr className="!mt-13 xl:!mt-20 lg:!mt-20 md:!mt-20 !mb-7 [border-top:1px_solid]" />
        <div className="xl:!flex lg:!flex md:!flex items-center justify-between">
          <p className="!mb-2 xl:!mb-0 lg:!mb-0">
            © {new Date().getFullYear()} {siteSettings.company_name || "Jsite"} {siteSettings.copyright || "All Rights Reserved."}
            {siteSettings.icp && (
              <a
                className="ml-2 !text-[#cacaca] hover:!text-[#1fc76f]"
                href="https://beian.miit.gov.cn"
                target="_blank"
                rel="noopener noreferrer"
              >
                {siteSettings.icp}
              </a>
            )}
          </p>
          <SocialLinks />
        </div>
      </div>
    </footer>
  );
}