import Link from "next/link";
import Logo from "@/modules/ui/logo";
import SocialMedia from "@/modules/layout/components/social-media";
import NewsLetters from "@/modules/layout/components/news-letters";
import NeedHelp from "@/modules/layout/components/need-help";
import CopyRight from "@/modules/layout/components/copyright";
import AcceptedPaymentMethods from "@/modules/layout/components/accepted-payment-methods";
import { MenuCategory } from "@/lib/types/models";
import menuData from "../../../../../public/menufile.json"

export default async function Page() {
  const headerData = (menuData?.success
    ? menuData?.data ?? []
    : []) as unknown as MenuCategory[];
  return (
    <footer className="bg-[#dad8d8] min-h-[32.125rem] pt-16 pb-5">
      <div className="main-container mobile-container">
        <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-0">
          <div>
            <Link href="/">
              <Logo />
            </Link>
            <SocialMedia />
            <NeedHelp />
          </div>
          <div className="mt-5 lg:mt-0">
            <div className="lg:flex flex-col gap-1">
              <div className="mb-3 font-semibold text-neutral-black-87">
                Help & Ideas
              </div>
              <Link
                href="/faq"
                className="cursor-pointer flex justify-start mb-2 font-normal text-neutral-black-87 text-[15px]"
              >
                FAQ&apos;s
              </Link>
              <Link
                href="/contact"
                className="cursor-pointer flex justify-start mb-2 font-normal text-neutral-black-87 text-[15px]"
              >
                Contact Us
              </Link>
              <Link
                href="/about"
                className="cursor-pointer flex justify-start mb-2 font-normal text-neutral-black-87 text-[15px]"
              >
                About Us
              </Link>
              <Link
                href="/templates"
                className="cursor-pointer flex justify-start mb-2 font-normal text-neutral-black-87 text-[15px]"
              >
                Templates
              </Link>
              <Link
                href="/holiday-schedule"
                className="cursor-pointer flex justify-start mb-2 font-normal text-neutral-black-87 text-[15px]"
              >
                Holiday Schedule
              </Link>
              <Link
                href="/production-steps"
                className="cursor-pointer flex justify-start mb-2 font-normal text-neutral-black-87 text-[15px]"
              >
                Production Steps
              </Link>
            </div>
          </div>
          <div className="mt-5 lg:mt-0">
            <div className="lg:flex flex-col gap-1">
              <div className="mb-3 font-semibold text-neutral-black-87">
                Products
              </div>
              <div className="flex flex-col">
                {headerData?.map((item, index) => (
                  <Link
                    key={index}
                    href={`/info/${item.slug}`}
                    className="cursor-pointer flex justify-start mb-2 font-normal text-neutral-black-87 text-[15px]"
                  >
                    {item.name}
                  </Link>
                ))}
              </div>
            </div>
          </div>
          <NewsLetters />
        </div>
        <hr className="!border-[#C1C1C1]  mb-5" />
        <div className="grid grid-cols-12 gap-0">
          <div className="col-span-9 flex items-center mt-8 lg:mt-0">
            <ul className="lg:flex font-light list-none lg:list-disc list-inside text-[11px] text-neutral-black-87">
              <li className="list-none lg:mr-5  mb-2 lg:mb-0">
                <Link href="/privacy">Privacy Policy</Link>
              </li>
              <li className="lg:mr-5 mb-2 lg:mb-0">
                <Link href="/terms">Terms & conditions</Link>
              </li>
              <li className="lg:mr-5 mb-2 lg:mb-0">
                <Link href="#">Refund and cancellations policy</Link>
              </li>
            </ul>
          </div>
          <AcceptedPaymentMethods />
        </div>
        <CopyRight />
      </div>
    </footer>
  );
}