import React from 'react';
import { Facebook, Twitter, Instagram, Linkedin} from 'lucide-react';
import { FacebookFilled, XOutlined, InstagramOutlined, SendOutlined } from '@ant-design/icons';
import translations from '../translations.json';
import { useLanguage } from '../contexts/LanguageContext';
import { CustomLink } from './CustomLink';

export default function Footer() {
  const { language } = useLanguage();
  const t = translations.footer[language];

  const socialIcons = {
    facebook: FacebookFilled,
    twitter: XOutlined,
    instagram: InstagramOutlined,
    telegramm: SendOutlined
  };

  // Здесь можно будет настроить URL-адреса социальных сетей
  const socialLinks = {
    facebook: "https://www.facebook.com/profile.php?id=61566725398725",  
    twitter: "https://x.com/home",   
    instagram: "https://www.instagram.com/qwick_post",
    telegramm: "https://web.telegram.org/"   
  };

  const renderSupportLink = (key, value) => {
    if (key === 'pricing') {
      return (
        <CustomLink to="/pricing" className="text-base text-gray-500 hover:text-gray-900">
          {value}
        </CustomLink>
      );
    }
    if (key === 'documentation') {
      return (
        <a href="/#contacts-section" className="text-base text-gray-500 hover:text-gray-900">
          {value}
        </a>
      );
    }
    if (key === 'policy') {
      return (
        <CustomLink to="/policy" className="text-base text-gray-500 hover:text-gray-900">
          {value}
        </CustomLink>
      );
    }
    return (
      <a href="#" className="text-base text-gray-500 hover:text-gray-900">
        {value}
      </a>
    );
  };

  return (
    <footer className="bg-gray-100 mt-8">
      <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
        <div className="xl:grid xl:grid-cols-3 xl:gap-8">
          <div className="space-y-8 xl:col-span-1">
            <p className="text-gray-500 text-base">
              {t.description}
            </p>
            <div className="flex space-x-6">
              {Object.entries(t.socials).map(([key, value]) => {
                const Icon = socialIcons[key];
                return (
                  <a 
                    key={key} 
                    href={socialLinks[key]} 
                    target="_blank" 
                    rel="noopener noreferrer"
                    className="text-gray-400 hover:text-gray-500"
                    title={value}
                  >
                    <span className="sr-only">{value}</span>
                    <Icon className="h-6 w-6" />
                  </a>
                );
              })}
            </div>
          </div>
          
          <div className="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
            <div className="md:grid md:grid-cols-2 md:gap-8">
              <div>
                <h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
                  {t.sections.solutions.title}
                </h3>
                <ul role="list" className="mt-4 space-y-4">
                  {Object.entries(t.sections.solutions.links).map(([key, value]) => (
                    <li key={key}>
                      <a href="/solutions" className="text-base text-gray-500 hover:text-gray-900">
                        {value}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
              <div className="mt-12 md:mt-0">
                <h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
                  {t.sections.support.title}
                </h3>
                <ul role="list" className="mt-4 space-y-4">
                  {Object.entries(t.sections.support.links).map(([key, value]) => (
                    <li key={key}>
                      {renderSupportLink(key, value)}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
            <div className="md:grid md:grid-cols-2 md:gap-8">
              <div className="mt-12 md:mt-0">
                <h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
                  {t.sections.contacts.title}
                </h3>
                <ul role="list" className="mt-4 space-y-4">
                  <li className="flex">
                    <a 
                      href={`mailto:${t.sections.contacts.email}`}
                      className="ml-3 text-base text-gray-500 hover:text-gray-900"
                    >
                      {t.sections.contacts.email}
                    </a>
                  </li>
                  <li className="flex">
                    <a 
                      href="https://www.google.com/maps/place/%D0%91%D1%83%D1%80%D0%BA%D0%B8%D0%BD%D0%B0-%D0%A4%D0%B0%D1%81%D0%BE/@12.2400091,-4.1961905,7z/data=!3m1!4b1!4m6!3m5!1s0xe2dca26d5a6709b:0x27930aed46836dab!8m2!3d12.238333!4d-1.561593!16zL20vMDE2OTk?entry=ttu&g_ep=EgoyMDI0MTExOS4yIKXMDSoASAFQAw%3D%3D"  // Заменить на реальный URL карты
                      target="_blank"
                      rel="noopener noreferrer"
                      className="ml-3 text-base text-gray-500 hover:text-gray-900"
                    >
                      {t.sections.contacts.address}
                    </a>
                  </li>
                  <li className="flex">
                    {/* <a 
                      className="ml-3 text-base text-gray-500 hover:text-gray-900"
                    >
                      {t.sections.contacts.support}
                    </a> */}
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div className="mt-12 border-t border-gray-200 pt-8">
          <p className="text-base text-gray-400 xl:text-center">
            {t.copyright}
          </p>
        </div>
      </div>
    </footer>
  );
}