import Link from 'next/link';
import WhiteLogo from '../../public/icons/ccnWhiteLogo.svg';
import FacebookIcon from '../../public/icons/fb-round.svg';
import InstagramIcon from '../../public/icons/ig-round.svg';
import WhatsAppIcon from '../../public/icons/wp-bg-round.svg';
import FooterColumn from 'components/FooterColumn';
import { useTranslation } from 'next-i18next';

const Footer: React.FC<{ currentRoute: string; backgroundColor?: string }> = ({
  backgroundColor = 'bg-primary',
  currentRoute
}) => {
  const { t } = useTranslation('footer');

  return (
    <footer
      className={`w-full ${backgroundColor} text-background pt-10 pb-7 px-4 sm:px-8 md:px-16 xl:px-40 text-base md:text-lg 2xl:text-xl`}
    >
      <div className='grid grid-cols-1 md:grid-cols-2 xl:grid-cols-[1fr_48px_1fr_1fr_1fr_340px] gap-y-10 gap-x-8 md:gap-x-12 xl:gap-x-16 w-full mx-auto items-start'>
        {/* Columna Logo */}
        <div className='flex flex-col items-center xl:items-start xl:col-span-1 min-w-0'>
          <Link aria-label='logo' href='/'>
            <WhiteLogo className='w-32 h-32 sm:w-44 sm:h-44 md:w-52 md:h-52 xl:w-60 xl:h-60' />
          </Link>
          <p className='font-light text-center xl:text-left mt-2'>{t('bestNetwork')}</p>
        </div>
        {/* Espacio extra después de la primer columna */}
        <div className='hidden xl:block xl:col-span-1'></div>
        {/* Columna 2 */}
        <div className='xl:col-span-1 min-w-0'>
          <FooterColumn
            title={{ name: t('plans'), route: '/planes' }}
            items={[
              { name: t('basic'), route: '/planes#basic-plan' },
              { name: t('medium'), route: '/planes#meduim-plan' },
              { name: t('ultra'), route: '/planes#ultra-plan' },
              { name: t('company'), route: '/empresas' }
            ]}
          />
        </div>
        {/* Columna 3 */}
        <div className='xl:col-span-1 min-w-0'>
          <FooterColumn
            title={{ name: t('offices'), route: '/oficinas' }}
            items={[
              { name: t('saltillo'), route: '/oficinas#saltillo' },
              { name: t('monclova'), route: '/oficinas#monclova' }
            ]}
          />
        </div>
        {/* Columna 4 */}
        <div className='xl:col-span-1 min-w-0'>
          <FooterColumn
            title={{ name: t('about'), route: '/nosotros' }}
            items={[
              { name: t('mission'), route: '/nosotros#mission' },
              { name: t('vision'), route: '/nosotros#vision' },
              { name: t('support'), route: '/soporte' },
              { name: t('FAQ'), route: '/soporte#FAQS' }
            ]}
          />
        </div>
        {/* Columna 5: Redes Sociales */}
        <div className='flex flex-col font-light xl:col-span-1 min-w-0 xl:pl-20 mt-8 md:mt-0'>
          <div className='space-y-3 text-left'>
            <p className='pb-4 font-bold font-header'>{t('follow')}</p>
            <div>
              <Link href='https://www.facebook.com/CCN-Telecom-100738098785355' target='_blank'>
                <div className='flex flex-row items-center'>
                  <FacebookIcon width='26' height='26' className='mr-3' /> <p>{t('fb')}</p>
                </div>
              </Link>
            </div>
            <div>
              <Link href='https://www.instagram.com/ccntelecom210/' target='_blank'>
                <div className='flex flex-row items-center'>
                  <InstagramIcon
                    width='26'
                    height='26'
                    className='mr-3'
                    fill={`${currentRoute === '/empresas' ? '#191F21' : '#367DEE'}`}
                  />
                  <p>{t('ig')}</p>
                </div>
              </Link>
            </div>
            <div>
              <a href='https://wa.me/8441234567' target='_blank' rel='noopener noreferrer'>
                <div className='flex flex-row items-center'>
                  <WhatsAppIcon
                    width='26'
                    height='26'
                    className='mr-3'
                    fill={`${currentRoute === '/empresas' ? '#191F21' : '#367DEE'}`}
                  />
                  <p>{t('wp')}</p>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div className='pt-4 w-full col-span-full'>
        <p className='font-light text-sm md:text-base 2xl:text-lg text-center w-full'>{t('copyRight')}</p>
      </div>
    </footer>
  );
};

export default Footer;