import Image from 'next/image';
import Link from 'next/link';
import logo from '@/../public/images/Home-Footer-Logo.svg';
import fb from '@/../public/images/home/Facebook.svg';
import yt from '@/../public/images/footer/yt.svg';
import ig from '@/../public/images/home/Instagram.svg';
import tiktok from '@/../public/images/home/Tik_Tok.svg';
import { useTranslation } from 'next-i18next';
const LinkSelect = dynamic(() => import('@/components/atoms/LinkSelect'), { ssr: false });

import { useEffect, useState } from 'react';
import { getCities } from '@/data/cities';
import dynamic from 'next/dynamic';
type Props = {
  cities?: any[];
};

const Footer: React.FC<Props> = ({ cities }) => {
  const { t } = useTranslation(['common', 'routes']);
  const [citiesOptions, setCitiesOptions] = useState<any[]>([]);

  useEffect(() => {
    if (cities && Array?.isArray(cities) && cities?.length) {
      const citiesArray = cities?.map((city) => {
        return {
          label: city?.name + ', ' + city?.state?.name,
          value: city?.slug,
          link: '/' + city?.slug
        };
      });
      setCitiesOptions(citiesArray);
    } else {
      setCitiesOptions([]);
    }
  }, [cities]);
  return (
    <footer className="tw-bg-main-dark tw-text-tertiary-light">
      <div className="container pt-10 pt-md-15 pb-7">
        <div className="row gy-6 gy-lg-0">
          <div className="col-lg-3">
            <div className="text-center text-lg-start widget mb-5">
              <Image src={logo} alt="logo grupo velas" className="mb-5 mx-auto mx-lg-0" />
            </div>

            <div className="mb-5">
              <p className="tw-text-xs  tw-font-barlow tw-text-tertiary-light tw-font-medium tw-mb-4">
                {t('common:footer.schedule')}
              </p>
              <p className="mb-0 tw-text-xs  tw-font-barlow tw-text-tertiary-light tw-font-medium ">
                {t('common:footer.monday-to-friday')} 9:00 am - 6:00 pm
              </p>
              <p className="mb-0 tw-text-xs  tw-font-barlow tw-text-tertiary-light tw-font-medium ">
                {t('common:footer.saturday')} 9:00 am - 2:00 pm
              </p>
            </div>
            <div>
              <Link
                target='_blank'
                href={t('routes:/privacy-notice')}
                className="tw-text-xs tw-font-barlow hover:tw-text-main-color d-none d-md-block tw-text-tertiary-light tw-font-normal tw-uppercase"
              >
                {' '}
                * {t('common:footer.exclusion')}
              </Link>
              <Link

                href={t('routes:/privacy-notice')}
                className="tw-text-xs tw-font-barlow hover:tw-text-main-color tw-text-tertiary-light tw-font-normal tw-uppercase d-md-none"
              >
                {' '}
                * {t('common:footer.exclusion')}
              </Link>
            </div>
            {/* /.widget */}
          </div>
          {/* /column */}
          <div className="col-md-8 col-lg-6  lg:tw-mx-auto">
            <div className="widget row">
              <h4 className="col-12 widget-title tw-text-main-light tw-text-sm tw-font-bold mb-7 tw-font-barlow">
                Grupo Velas
              </h4>
              <ul className="col-4 list-unstyled text-reset mb-0">
                <li>
                  <Link
                    href={'/'}
                    className="mt-0 tw-font-medium tw-font-barlow hover:tw-text-main-color tw-text-tertiary-light  tw-text-sm  "
                  >
                    {' '}
                    {t('common:header:home')}
                  </Link>
                </li>
                <li>
                  <Link
                    href={t('routes:/about-us')}
                    className="mt-0 tw-font-medium tw-font-barlow hover:tw-text-main-color tw-text-tertiary-light  tw-text-sm  "
                  >
                    {' '}
                    {t('common:header:about-us')}
                  </Link>
                </li>
                <li>
                  <Link
                    href={t('routes:/developments')}
                    className="mt-0 mt-0 tw-font-medium tw-font-barlow hover:tw-text-main-color tw-text-tertiary-light  tw-text-sm  "
                  >
                    {' '}
                    {t('common:header:projects')}
                  </Link>
                </li>
                <li>
                  <Link
                    href={t('routes:/sustainability')}
                    className="mt-0 mt-0 tw-font-medium tw-font-barlow hover:tw-text-main-color tw-text-tertiary-light  tw-text-sm  "
                  >
                    {' '}
                    {t('common:header.sustainability')}
                  </Link>
                </li>
                <li>
    <a
      href="https://vacantes.grupovelas.com/"
      target="_blank"
      rel="noopener noreferrer"
      className="tw-capitalize mt-0 mt-0 tw-font-medium tw-font-barlow hover:tw-text-main-color tw-text-tertiary-light tw-text-sm"
    >
      {' '}
      {t('common:header.talents')}
    </a>
  </li>
              </ul>
              <ul className="col-4 list-unstyled text-reset mb-0">
                <li>
                  <Link
                    href={t('routes:/locations')}
                    className="tw-capitalize mt-0 mt-0 tw-font-medium tw-font-barlow hover:tw-text-main-color tw-text-tertiary-light  tw-text-sm "
                  >
                    {' '}
                    {t('common:header:cities')?.toLowerCase()}
                  </Link>
                </li>
                {/*  <li>
                  <Link
                    href={t('routes:/human-capital')}
                    className="tw-capitalize mt-0 mt-0 tw-font-medium tw-font-barlow hover:tw-text-main-color tw-text-tertiary-light  tw-text-sm "
                  >
                    {' '}
                    {t('common:header:human-capital')?.toLowerCase()}
                  </Link>
                </li> */}
                <li>
                  <Link
                    href={t('routes:/contact')}
                    className="mt-0 mt-0 tw-font-medium tw-font-barlow hover:tw-text-main-color tw-text-tertiary-light  tw-text-sm "
                  >
                    {' '}
                    {t('common:header:contact')}
                  </Link>
                </li>
              </ul>
              <ul className="col-4 list-unstyled text-reset mb-0">
                <li>
                  <a
    href="https://horizonte.grupovelas.com/"
    target="_blank"
    rel="noopener noreferrer"
    className="tw-capitalize mt-0 mt-0 tw-font-medium tw-font-barlow hover:tw-text-main-color tw-text-tertiary-light  tw-text-sm"
  >
    {' '}
    {t('common:topHeader:blog')}
  </a>
                </li>

                { /* <li>
                  <Link
                    href={t('routes:/agents')}
                    className="mt-0 mt-0 tw-font-medium tw-font-barlow hover:tw-text-main-color tw-text-tertiary-light  tw-text-sm "
                  >
                    {' '}
                    {t('common:footer:agents')}
                  </Link>
                </li> */}
              </ul>
            </div>
            {/* /.widget */}
          </div>

          <div className="col-md-4 col-lg-3 tw-ml-auto ">
            <div className="widget">
              <h4 className="widget-title tw-text-main-light tw-text-s, tw-font-bold mb-7 tw-font-barlow">
                {' '}
                {t('common:footer:developments')}
              </h4>
              <div>
                <LinkSelect options={citiesOptions} placeholder={t('common:footer.selectCity')} />
              </div>
            </div>
            {/* /.widget */}
          </div>
          {/* /column */}
        </div>
        {/*/.row */}
        <hr className="tw-my-8 tw-text-main-light" />
        <div className="d-md-flex align-items-center justify-content-between">
          <p className="mb-2 mb-lg-0  tw-text-tertiary-light text-center text-lg-start tw-text-sm tw-font-normal mb-7 tw-font-barlow">
            2026 Grupo Velas. {t('common:footer.allRights')}
          </p>
          <nav className="nav   tw-gap-4 tw-justify-center">
            <Link
              target="_blank"
              href="https://www.facebook.com/people/Grupo-Velas-Inmobiliaria/61584865130339/"
              className="hover:tw-opacity-75"
            >
              <Image src={fb} alt="fb icon" className="tw-w-5 tw-h-5 tw-brightness-0 tw-invert" />
            </Link>
            <Link
              target="_blank"
              href="https://www.instagram.com/grupovelasinmobiliaria/"
              className="hover:tw-opacity-75"
            >
              <Image src={ig} alt="ig icon" className="tw-w-5 tw-h-5 tw-brightness-0 tw-invert" />
            </Link>
            <Link
              target="_blank"
              href="https://www.tiktok.com/@grupovelasinmobiliaria"
              className="hover:tw-opacity-75"
            >
              <Image src={tiktok} alt="tiktok icon" className="tw-w-5 tw-h-5 tw-brightness-0 tw-invert" />
            </Link>
            <Link target='_blank' href="https://www.youtube.com/channel/UC9dB8d8vtl6cUay-5QSYxdg" className="hover:tw-opacity-75">
              <Image src={yt} alt="yt icon" className="tw-w-5 tw-h-5" />
            </Link>
          </nav>
          {/* /.social */}
        </div>
        {/* /div */}
      </div>
      {/* /.container */}
    </footer>
  );
};

export default Footer;