/* eslint-disable @next/next/no-img-element */
/* eslint-disable jsx-a11y/control-has-associated-label */

"use client";

import React from "react";

import Container from "@/components/shared/container";
import { useBreakpoints } from "@/hooks/useBreakpoints";
import { useLocale } from "@/hooks/useLocale";
import { cn } from "@/libs/utils";
import { useServerDataCtx } from "@/providers/server-data-provider/server-data-provider";

const FooterOtel = () => {
  const { clientConfig } = useServerDataCtx();
  const { isDesktop } = useBreakpoints();
  const { t } = useLocale();
  const logoPath = clientConfig?.logoUrl;
  const tpData = sessionStorage.getItem("core-travel-planner");
  const choosedHotel = tpData ? JSON.parse(tpData).payload.destinationId : null;
  const selectedBaseHotel =
    clientConfig?.domainProducts.find((item) => item.id === +choosedHotel) ||
    clientConfig?.domainProducts.find(
      (item) => item.name === clientConfig?.clientScope,
    ) ||
    clientConfig?.domainProducts[0];
  const hasParameters = window.location.search;

  return (
    <Container className="flex w-full flex-col items-center justify-center border-t border-t-gray-200">
      <div className="grid w-full grid-cols-1 gap-4 py-8 md:grid-cols-12 md:flex-row md:gap-2 md:p-8">
        {/* Logo & Copyright */}
        <div className="col-span-12 flex flex-col items-start justify-start gap-2 md:col-span-6 md:items-start">
          <img
            src={logoPath}
            className="max-h-[50px] max-w-[160px] scale-[0.7] object-contain align-middle md:max-w-[330px] md:scale-100"
            alt="logo"
          />
          <h6 className="text-xs text-gray-500">
            {t("© {{year}} Gordion Technology Inc. All rights reserved.", {
              year: new Date().getFullYear(),
            })}
          </h6>
        </div>

        {/*  Address */}
        <div className="col-span-12 flex flex-col items-start justify-start text-left  md:col-span-4 md:items-start md:text-left">
          <h6 className="text-sm font-semibold text-gray-500">
            {t("Address")}
          </h6>
          <p className="w-full text-xs text-gray-500">
            {selectedBaseHotel?.address}
          </p>
          <p className="w-full text-xs text-gray-500">
            {selectedBaseHotel?.destinationDistrict &&
              `${selectedBaseHotel?.destinationDistrict}/`}
            {selectedBaseHotel?.destinationCity}&nbsp;-&nbsp;
            {selectedBaseHotel?.destinationCountry}
          </p>
        </div>

        {/*  Contact */}
        <div className="col-span-12 flex flex-col items-start justify-start md:col-span-2 md:items-start">
          <h6 className="text-sm font-semibold text-gray-500">
            {t("Contact")}
          </h6>
          <p className="text-xs text-gray-500">{selectedBaseHotel?.phone}</p>
          <p className="text-xs text-gray-500">{selectedBaseHotel?.email}</p>
        </div>
      </div>
      <div
        className={cn(
          "flex w-full flex-col items-center justify-center gap-4 md:border-t md:border-t-gray-200 grayscale hover:grayscale-0 transition-all duration-300",
          hasParameters && !isDesktop ? "pb-24" : "pb-8",
        )}
      >
        <div className="flex items-center gap-2 md:pt-8">
          <span className="text-xs leading-[18px] text-gray-400">
            Platform EVA by
          </span>
          <a
            target="_blank"
            rel="noopener noreferrer"
            href="https://www.gordiontech.com/"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="81"
              height="16"
              viewBox="0 0 81 16"
              fill="none"
            >
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M16 8.00071C16 12.419 12.4181 16.0004 7.99973 16.0004C3.58142 16.0004 0 12.419 0 8.00071C0 3.58239 3.58142 0.000976562 7.99973 0.000976562C12.4181 0.000976562 16 3.58239 16 8.00071Z"
                fill="#E42028"
              />
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M5.18414 8.64815C5.13947 8.45804 5.11514 8.26048 5.11514 8.05795C5.11514 6.58419 6.34965 5.38989 7.87157 5.38989C8.89015 5.38989 9.77818 5.92449 10.2557 6.71871C11.1919 6.50377 12.1941 6.47647 12.2115 6.47647C11.5652 4.7699 9.86654 3.55078 7.87157 3.55078C5.32114 3.55078 3.2542 5.54277 3.2542 8.00037C3.2542 8.56427 3.36439 9.10334 3.56245 9.59972C4.06876 9.26963 4.61528 8.94946 5.18414 8.64815Z"
                fill="#FEFEFE"
              />
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M12.357 6.94256C11.6477 6.91327 10.5139 7.10041 10.4489 7.11133C10.4494 7.11282 10.4504 7.11481 10.4509 7.11629C6.77665 7.88172 3.1039 10.0807 1.84953 11.4865C1.77011 11.5758 1.88329 11.6989 1.98256 11.6299C3.53923 10.5473 6.11695 9.28053 10.3437 9.23834C9.89394 10.1194 8.95627 10.726 7.87167 10.726C7.23283 10.726 6.64461 10.515 6.17702 10.1611C5.51682 10.3329 4.88592 10.5473 4.28678 10.8039C5.13361 11.8081 6.42471 12.4499 7.87167 12.4499C10.4221 12.4499 12.4895 10.458 12.4895 8.00036C12.4895 7.63551 12.4429 7.28159 12.357 6.94256Z"
                fill="#FEFEFE"
              />
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M27.728 6.95453V7.92744C27.728 9.33469 27.2868 10.4744 26.4057 11.3465C25.5241 12.2192 24.3794 12.6555 22.9727 12.6555C21.4741 12.6555 20.2431 12.176 19.2791 11.2165C18.3151 10.2575 17.8331 9.07409 17.8331 7.66733C17.8331 6.26058 18.3131 5.07224 19.2726 4.10379C20.2316 3.13584 21.4195 2.65137 22.8357 2.65137C23.7307 2.65137 24.5512 2.8524 25.2958 3.25398C26.0403 3.65655 26.6221 4.19115 27.0425 4.8578L24.9597 6.05011C24.7681 5.74831 24.4872 5.50657 24.1173 5.32341C23.7465 5.14123 23.3291 5.0494 22.863 5.0494C22.1045 5.0494 21.4835 5.2961 20.9991 5.78951C20.5151 6.28292 20.2728 6.91333 20.2728 7.68074C20.2728 8.42085 20.5126 9.04679 20.9926 9.55856C21.4716 10.0698 22.1457 10.326 23.0139 10.326C24.1283 10.326 24.8634 9.90553 25.2198 9.06466H22.8903V6.95453H27.728Z"
                fill="#222323"
              />
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M31.675 9.52366C32.1684 10.0126 32.7849 10.2573 33.5255 10.2573C34.2651 10.2573 34.8821 10.0126 35.3751 9.52366C35.8685 9.03522 36.1152 8.41176 36.1152 7.65329C36.1152 6.89481 35.8685 6.27135 35.3751 5.78241C34.8821 5.29397 34.2651 5.04925 33.5255 5.04925C32.7849 5.04925 32.1684 5.29397 31.675 5.78241C31.1816 6.27135 30.9349 6.89481 30.9349 7.65329C30.9349 8.41176 31.1816 9.03522 31.675 9.52366ZM37.0954 11.2095C36.122 12.1735 34.9321 12.6555 33.5254 12.6555C32.1181 12.6555 30.9278 12.1735 29.9549 11.2095C28.982 10.2461 28.4955 9.06019 28.4955 7.65344C28.4955 6.24619 28.982 5.06082 29.9549 4.09684C30.9278 3.13286 32.1181 2.65137 33.5254 2.65137C34.9321 2.65137 36.122 3.13286 37.0954 4.09684C38.0683 5.06082 38.5543 6.24619 38.5543 7.65344C38.5543 9.06019 38.0683 10.2461 37.0954 11.2095Z"
                fill="#222323"
              />
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M42.145 5.11735V7.26869H43.5016C43.8034 7.27812 44.0501 7.18231 44.2417 6.98128C44.4333 6.78024 44.5296 6.52014 44.5296 6.19997C44.5296 5.8803 44.4333 5.62019 44.2417 5.41866C44.0501 5.21812 43.8034 5.11735 43.5016 5.11735H42.145ZM44.6944 12.4496L43.0221 9.35214H42.145V12.4496H39.6919V2.85645H43.5289C44.5068 2.85645 45.3268 3.16917 45.989 3.79511C46.6512 4.42105 46.9828 5.21328 46.9828 6.17279C46.9828 6.7486 46.8363 7.27626 46.544 7.75527C46.2516 8.23527 45.8545 8.61699 45.3517 8.89993L47.3258 12.4496H44.6944Z"
                fill="#222323"
              />
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M52.0944 10.0789C52.761 10.0789 53.3046 9.85747 53.725 9.4142C54.145 8.97092 54.3554 8.3842 54.3554 7.65302C54.3554 6.92234 54.145 6.33512 53.725 5.89185C53.3046 5.44907 52.761 5.22719 52.0944 5.22719H50.71V10.0789H52.0944ZM52.0945 2.85645C53.4188 2.85645 54.5267 3.3156 55.4173 4.23391C56.3083 5.15222 56.754 6.29192 56.754 7.65301C56.754 9.01459 56.3083 10.1538 55.4173 11.0721C54.5267 11.9904 53.4188 12.4496 52.0945 12.4496H48.1884V2.85645H52.0945Z"
                fill="#222323"
              />
              <mask x="0" y="0" width="81" height="16">
                <path
                  fillRule="evenodd"
                  clipRule="evenodd"
                  d="M0 16H80.4074V0H0V16Z"
                  fill="white"
                />
              </mask>
              <g>
                <path
                  fillRule="evenodd"
                  clipRule="evenodd"
                  d="M57.8913 12.4496H60.3444V2.85645H57.8913V12.4496Z"
                  fill="#222323"
                />
                <path
                  fillRule="evenodd"
                  clipRule="evenodd"
                  d="M64.661 9.52366C65.1545 10.0126 65.771 10.2573 66.5111 10.2573C67.2512 10.2573 67.8677 10.0126 68.3611 9.52366C68.8545 9.03522 69.1012 8.41176 69.1012 7.65329C69.1012 6.89481 68.8545 6.27135 68.3611 5.78241C67.8677 5.29397 67.2512 5.04925 66.5111 5.04925C65.771 5.04925 65.1545 5.29397 64.661 5.78241C64.1676 6.27135 63.9209 6.89481 63.9209 7.65329C63.9209 8.41176 64.1676 9.03522 64.661 9.52366ZM70.0812 11.2095C69.1082 12.1735 67.9184 12.6555 66.5112 12.6555C65.1044 12.6555 63.9141 12.1735 62.9412 11.2095C61.9677 10.2461 61.4818 9.06019 61.4818 7.65344C61.4818 6.24619 61.9677 5.06082 62.9412 4.09684C63.9141 3.13286 65.1044 2.65137 66.5112 2.65137C67.9184 2.65137 69.1082 3.13286 70.0812 4.09684C71.0541 5.06082 71.5405 6.24619 71.5405 7.65344C71.5405 9.06019 71.0541 10.2461 70.0812 11.2095Z"
                  fill="#222323"
                />
                <path
                  fillRule="evenodd"
                  clipRule="evenodd"
                  d="M77.9681 2.85645H80.4073V12.4496H78.5161L75.1312 7.62521V12.4496H72.6781V2.85645H74.5832L77.9681 7.68031V2.85645Z"
                  fill="#222323"
                />
              </g>
            </svg>
          </a>
        </div>
      </div>
    </Container>
  );
};

export default FooterOtel;