import BrancheCard from "@/app/_lib/components/page_component/about-us/branch-card";
import AboutUsSlider from "@/app/_lib/components/page_component/about-us/slider";
import dataFetcher from "@/app/_lib/utils/fetcher";
import Link from "next/link";
import { IoMdInformationCircleOutline } from "react-icons/io";

export default async function GetAboutUs() {
  const { data, branches } = await dataFetcher({ url: "about_us?website=1" });

  return (
    <>
      <section className="grid grid-cols-12 gap-16 mt-10 max-[1050px]:grid-cols-6">
        <h1 className="page-title-2 col-span-12 max-[1050px]:col-span-6">
          درباره ی ما
        </h1>
        <div className="col-span-6 max-[1050px]:!order-last">
          <pre className="whitespace-pre-wrap font-iran-sans mt-4 max-[1050px]:mt-0 leading-8 text-justify">{data.content}</pre>
        </div>
        <div className="col-span-6">
          <h2 className="opacity-[0.01] cursor-default page-title max-[1050px]:hidden">
            درباره ی ما
          </h2>
          <div className="mt-[-65px]">
            <AboutUsSlider
              video={data?.video}
              poster={data?.poster}
              images={data.images}
            />
          </div>
        </div>
      </section>
      <section>
        <Link
          className="flex flex-row items-center p-4 mt-16 rounded-md bg-primary-300 max-[530px]:text-sm"
          href={"/gallery"}
        >
          <IoMdInformationCircleOutline fontSize={24} className="ml-4" />
          برای مشاهده گالری تصاویر کلیک کنید.
        </Link>
      </section>
      <h2 className="mt-16 mb-5 page-title">شعبه ها</h2>
      <section className="grid grid-cols-4 max-[1200px]:grid-cols-3 gap-8 max-[950px]:gap-8 max-[950px]:grid-cols-2 max-[835px]:gap-2 max-[600px]:grid-cols-1">
        {branches?.map((item, index) => (
          <div
            key={"branch-card-" + index}
          >
            <BrancheCard {...item} />
          </div>
        ))}
      </section>
    </>
  );
}