/*
  This page is for the List a home.
  It includes a banner with a title and a link to the find a home page.
  It also includes a section with the List a home.
*/
import { getDictionarys } from "@/getDictionarys";
import PageBannerTitle from "@/src/components/PageBannerTitle";
import getProfileView, { getEncryptedCookie } from "@/src/ssrapi/getProfileView";
import { ListAHomePageContent } from "@/src/types/StaticContent/listahome.content.type";
import { AUTH_COOKIES } from "@/src/utils/commonVariables";
import { encryptData } from "@/src/utils/encryptionFunctions";
import ImagesConstants from "@/src/utils/ImagesConstants";
import Routes from "@/src/utils/RouteConstants";
import { cookies } from "next/headers";
import Image from "next/image";
import Link from "next/link";
import React from "react";
import styles from "./page.module.scss";

const page: React.FC = async () => {

  // Get the list a home content
  const ListAHomePageContent = await getDictionarys('list-a-home') as ListAHomePageContent;

  // Banner Content
  const BannerDetails = {
    BannerTitle: ListAHomePageContent.PAGE_BANNER.TITLE,
    BannerLink: Routes.FIND_A_HOME,
    BannerLinkText: ListAHomePageContent?.PAGE_BANNER?.LINK_TEXT,
  };

  const ProfileData = await getProfileView()

  const cookieStore = await cookies();
  const cookie = cookieStore.get(AUTH_COOKIES.USER_TOKEN)?.value;
  const authToken = cookie && getEncryptedCookie(cookie) || ''

  let encryptedValue = null
  let isProfileAdded = null
  let userType = null
  let mail = null

  // Encrypt the data for passing to the dashboard site as query params
  if (ProfileData?.data) {
    encryptedValue = authToken && encryptData(JSON.stringify(authToken));
    isProfileAdded = authToken && encryptData(JSON.stringify(ProfileData?.data?.isProfileAdded));
    userType = authToken && encryptData(JSON.stringify('guest'));
    mail = authToken && encryptData(JSON.stringify(ProfileData?.data?.email));
  }


  return (
    <>
      <main className={`${styles.ListAHomeWrapper} main-mt pb-[30px] sm:pb-[40px] lg:pb-[50px] xxl:pb-[65px]`}>
        <PageBannerTitle CommonDetails={BannerDetails} />
        <section className={`${styles.TellUsAboutWrap}`}>
          <div className={`container`}>
            {/*  */}
            <div className={`bg-white rounded-[12px] p-[16px] lg:p-[20px] w-full mb-[25px] sm:mb-[30px] lg:mb-[40px] xxl:mb-[50px]`}>
              <h2 className={`h6 !tracking-normal !mb-4 sm:!mb-5 lg:!mb-6 xxxl:!mb-7 !font-fw600`}>{ListAHomePageContent.TELL_US_ABOUT.TITLE}</h2>
              <div className={`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-[16px]`}>
                <div className={`flex items-center h-full w-full flex-col gap-2 xxl:gap-2.5 bg-bgColor text-center rounded-[12px] p-[16px] lg:p-[20px]`}>
                  <div className={`flex mx-auto items-center justify-center w-[60px] h-[60px] rounded-full bg-secondaryColor`}>
                    <i className={`Icon IconWifi w-[26px] h-[26px] !bg-white`}></i>
                  </div>
                  <div className={`xl:max-w-[300px] w-full mx-auto`}>
                    <h3 className={`fs-20 !mb-2 xxl:!mb-2.5 !font-fw600`}>{ListAHomePageContent.TELL_US_ABOUT.CARDS.INTERNET.TITLE}</h3>
                    <p className={`fs-16 text-blackColor !mb-0 !font-normal !text-center`}>{ListAHomePageContent.TELL_US_ABOUT.CARDS.INTERNET.DESCRIPTION}</p>
                  </div>
                </div>
                <div className={`flex items-center h-full w-full flex-col gap-2 xxl:gap-2.5 bg-bgColor text-center rounded-[12px] p-[16px] lg:p-[20px]`}>
                  <div className={`flex mx-auto items-center justify-center w-[60px] h-[60px] rounded-full bg-secondaryColor`}>
                    <i className={`Icon IconDeskChair w-[26px] h-[26px] !bg-white`}></i>
                  </div>
                  <div className={`xl:max-w-[300px] w-full mx-auto`}>
                    <h3 className={`fs-20 !mb-2 xxl:!mb-2.5 !font-fw600`}>{ListAHomePageContent.TELL_US_ABOUT.CARDS.WORKSPACE.TITLE}</h3>
                    <p className={`fs-16 text-blackColor !mb-0 !font-normal !text-center`}>{ListAHomePageContent.TELL_US_ABOUT.CARDS.WORKSPACE.DESCRIPTION}</p>
                  </div>
                </div>
                <div className={`flex items-center h-full w-full flex-col gap-2 xxl:gap-2.5 bg-bgColor text-center rounded-[12px] p-[16px] lg:p-[20px]`}>
                  <div className={`flex mx-auto items-center justify-center w-[60px] h-[60px] rounded-full bg-secondaryColor`}>
                    <i className={`Icon IconGlob w-[26px] h-[26px] !bg-white`}></i>
                  </div>
                  <div className={`xl:max-w-[300px] w-full mx-auto`}>
                    <h3 className={`fs-20 !mb-2 xxl:!mb-2.5 !font-fw600`}>{ListAHomePageContent.TELL_US_ABOUT.CARDS.EUROPE_LOCATION.TITLE}</h3>
                    <p className={`fs-16 text-blackColor !mb-0 !font-normal !text-center`}>{ListAHomePageContent.TELL_US_ABOUT.CARDS.EUROPE_LOCATION.DESCRIPTION}</p>
                  </div>
                </div>
              </div>
            </div>
            {/* Let's Get Started */}
            <h4 className={`mb-3 md:mb-5 lg:mb-6 !font-fw500`}>{ListAHomePageContent.GET_STARTED_SECTION.TITLE}</h4>
            <div className={`bg-white rounded-[12px] p-[16px] lg:p-[20px] w-full`}>
              <div className={`flex justify-between flex-wrap lg:flex-nowrap gap-[20px] lg:gap-[24px] mb-4 md:mb-5`}>
                <div className={`lg:max-w-[690px] xxxl:max-w-[750px] w-full`}>
                  <h2 className={`h6 !font-fw500`}>{ListAHomePageContent.GET_STARTED_SECTION.DESCRIPTION}</h2>
                  <div className={`${styles.ProgressItemsWrap} mt-[25px] sm:mt-[30px] lg:mt-[40px] xxl:mt-[50px] flex flex-col gap-[30px] xl:gap-[50px]`}>
                    <div className={`${styles.ProgressItem} relative flex gap-x-3`}>
                      <div>
                        <p className={`fs-18 !mb-0 !font-fw700`}>{ListAHomePageContent.GET_STARTED_SECTION.STEPS.STEP_1.TITLE}</p>
                        <span className={`fs-18 !mb-0 block`}>{ListAHomePageContent.GET_STARTED_SECTION.STEPS.STEP_1.DESCRIPTION}</span>
                      </div>
                    </div>
                    <div className={`${styles.ProgressItem} relative flex gap-x-3`}>
                      <div>
                        <p className={`fs-18 !mb-0 !font-fw700`}>{ListAHomePageContent.GET_STARTED_SECTION.STEPS.STEP_2.TITLE}</p>
                        <span className={`fs-18 !mb-0 block`}>{ListAHomePageContent.GET_STARTED_SECTION.STEPS.STEP_2.DESCRIPTION}</span>
                      </div>
                    </div>
                    <div className={`${styles.ProgressItem} relative flex gap-x-3`}>
                      <div>
                        <p className={`fs-18 !mb-0 !font-fw700`}>{ListAHomePageContent.GET_STARTED_SECTION.STEPS.STEP_3.TITLE}</p>
                        <span className={`fs-18 !mb-0 block`}>{ListAHomePageContent.GET_STARTED_SECTION.STEPS.STEP_3.DESCRIPTION}</span>
                      </div>
                    </div>
                  </div>
                  <div className={`flex flex-wrap sm:flex-nowrap gap-[12px] mt-[20px] w-full`}>
                    {ProfileData?.data ?
                      <Link
                        className={`SecondaryBtn w-full`}
                        href={`${Routes.HOST_ADD_LISTING}?aI=${encryptedValue}&iPA=${isProfileAdded}&uT=${userType}&ml=${mail}`}
                      >
                        {ListAHomePageContent.GET_STARTED_SECTION.BUTTON_TEXT}
                      </Link>
                      :
                      <Link className={`SecondaryBtn w-full`} href={Routes.HOST_REGISTER}>{ListAHomePageContent.GET_STARTED_SECTION.BUTTON_TEXT}</Link>
                    }
                  </div>
                </div>
                <div className={`lg:max-w-[570px] xxl:max-w-[620px] xxxl:max-w-[660px] w-full`}>
                  <Image className={`w-full h-full`} width={100} height={100} src={ImagesConstants.GETSTARTED_IMG} alt='get-started' />
                </div>
              </div>
            </div>

            {/* About Place Start */}
            {/* <AboutPlace /> */}
            {/* About Place End */}

            {/* CTA Section Start*/}
            <div className={`mt-[30px] sm:mt-[40px] lg:mt-[50px] xxl:mt-[65px]`}>
              <div className={`flex justify-between flex-wrap items-center sm:flex-nowrap gap-[20px] lg:gap-[24px] bg-white rounded-[16px] py-[25px] sm:py-[32px] px-[15px] sm:px-[20px] md:px-[30px] lg:px-[40px] xl:px-[50px] w-full`}>
                <div className={`text-center sm:text-left w-full`}>
                  <h2 className={`h4 !mb-[8px]`}>{ListAHomePageContent.CTA.TITLE}</h2>
                  <p className={`text-grey667Color !mb-0 fs-18 !text-center sm:!text-left`}>{ListAHomePageContent.CTA.DESCRIPTION}</p>
                  <Link className={`PrimaryBtn mt-[20px] sm:mt-[25px] xxl:mt-[30px] w-fit mx-auto sm:mx-0`} href={Routes.CONTACT}>{ListAHomePageContent.CTA.BUTTON_TEXT}</Link>
                </div>
                <div className={`sm:max-w-[240px] md:max-w-[290px] xxl:max-w-[320px] xxxl:max-w-[350px] w-full`}>
                  <Image className={`w-full`} width={100} height={100} src={ImagesConstants.CTA_IMG} alt='get-started' />
                </div>
              </div>
            </div>
            {/* CTA Section End*/}
          </div>
        </section>
      </main>
    </>
  );
};

export default page;