"use client";

import AText from "../icons/AText";
import BText from "../icons/BText";

// Components
import SearchBar from "./search";
import FrequentSearches from "./FrequentSearches";
import { useProvince } from "@/context/ProvinceProvider";

function HomePage() {
  const { isProvinceInclude } = useProvince();

  return (
    <div className="bg-banner-home after:z-[2] !bg-bottom !bg-no-repeat !bg-cover md:!min-h-[115vh]">
      <div className="padding-responsive z-20 min-h-screen py-[120px] flex items-center justify-center flex-col gap-[40px]">
        <div className="z-[50]">
          <p className="text-[#F17732] text-center font-kalame text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] font-bold">
            با {isProvinceInclude?.site_name}
          </p>
          <p
            className="text-[#525252] text-center mt-2.5 font-kalame text-[16px] sm:text-[25px] md:text-[31px] lg:text-[36px] 
            font-bold flex items-center gap-1 sm:gap-2"
          >
            <BText />
            {isProvinceInclude?.slogan}
            <AText />
          </p>
        </div>
        <SearchBar />
        <FrequentSearches />
      </div>
    </div>
  );
}

export default HomePage;