// import React from 'react'
// import { Facebook, Twitter, Instagram, Linkedin, Mail } from 'lucide-react'


// export default function Footer() {
//   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">
//               Профессиональная платформа продвижения соц сетей. Упростите ваш социальный маркетинг с qWickPost.
//             </p>
//             <div className="flex space-x-6">
//               <a href="#" className="text-gray-400 hover:text-gray-500">
//                 <span className="sr-only">Facebook</span>
//                 <Facebook className="h-6 w-6" />
//               </a>
//               <a href="#" className="text-gray-400 hover:text-gray-500">
//                 <span className="sr-only">Twitter</span>
//                 <Twitter className="h-6 w-6" />
//               </a>
//               <a href="#" className="text-gray-400 hover:text-gray-500">
//                 <span className="sr-only">Instagram</span>
//                 <Instagram className="h-6 w-6" />
//               </a>
//               <a href="#" className="text-gray-400 hover:text-gray-500">
//                 <span className="sr-only">LinkedIn</span>
//                 <Linkedin 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">Решения</h3>
//                 <ul role="list" className="mt-4 space-y-4">
//                   <li>
//                     <a href="#" className="text-base text-gray-500 hover:text-gray-900">
//                       Планирование
//                     </a>
//                   </li>
//                   <li>
//                     <a href="#" className="text-base text-gray-500 hover:text-gray-900">
//                       Аналитика
//                     </a>
//                   </li>
//                   <li>
//                     <a href="#" className="text-base text-gray-500 hover:text-gray-900">
//                       Публикации
//                     </a>
//                   </li>
//                 </ul>
//               </div>
//               <div className="mt-12 md:mt-0">
//                 <h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">Поддержка</h3>
//                 <ul role="list" className="mt-4 space-y-4">
//                   <li>
//                     <a href="#" className="text-base text-gray-500 hover:text-gray-900">
//                       Цены
//                     </a>
//                   </li>
//                   <li>
//                     <a href="#" className="text-base text-gray-500 hover:text-gray-900">
//                       Документация
//                     </a>
//                   </li>
//                   <li>
//                     <a href="#" className="text-base text-gray-500 hover:text-gray-900">
//                       Руководства
//                     </a>
//                   </li>
//                 </ul>
//               </div>
//             </div>
//             <div className="md:grid md:grid-cols-2 md:gap-8">
//               <div>
//                 <h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">Компания</h3>
//                 <ul role="list" className="mt-4 space-y-4">
//                   <li>
//                     <a href="#" className="text-base text-gray-500 hover:text-gray-900">
//                       О нас
//                     </a>
//                   </li>
//                   <li>
//                     <a href="#" className="text-base text-gray-500 hover:text-gray-900">
//                       Блог
//                     </a>
//                   </li>
//                   <li>
//                     <a href="#" className="text-base text-gray-500 hover:text-gray-900">
//                       Партнеры
//                     </a>
//                   </li>
//                 </ul>
//               </div>
//               <div className="mt-12 md:mt-0">
//                 <h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">Контакты</h3>
//                 <ul role="list" className="mt-4 space-y-4">
//                   <li className="flex">
//                     <Mail className="flex-shrink-0 h-6 w-6 text-gray-400" aria-hidden="true" />
//                     <span className="ml-3 text-base text-gray-500">business@qwickpost.com</span>
//                   </li>
//                   <li className="flex">
//                     <span className="ml-3 text-base text-gray-500">Уагадугу, Буркина-Фасо</span>
//                   </li>
//                   <li className="flex">
//                     <span className="ml-3 text-base text-gray-500">Поддержка 24/7</span>
//                   </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">
//             &copy; 2024 qWickPost. Все права защищены.
//           </p>
//         </div>
//       </div>
//     </footer>
//   )
// }


// import React from 'react';
// import { Facebook, Twitter, Instagram, Linkedin} from 'lucide-react';
// import translations from '../translations.json';
// import { useLanguage } from '../contexts/LanguageContext';
// import { Link } from 'react-router-dom';
// import { CustomLink } from './CustomLink';
// import { ScrollLink } from './ScrollLink';

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

//   const socialIcons = {
//     facebook: Facebook,
//     twitter: Twitter,
//     instagram: Instagram,
//     linkedin: Linkedin
//   };

//   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>
//       );
//     }
//     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="#" className="text-gray-400 hover:text-gray-500">
//                     <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="/#usability-section" 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">
//                     {/* <Mail className="flex-shrink-0 h-6 w-6 text-gray-400" aria-hidden="true" /> */}
//                     <span className="ml-3 text-base text-gray-500">
//                       {t.sections.contacts.email}
//                     </span>
//                   </li>
//                   <li className="flex">
//                     <span className="ml-3 text-base text-gray-500">
//                       {t.sections.contacts.address}
//                     </span>
//                   </li>
//                   <li className="flex">
//                     <span className="ml-3 text-base text-gray-500">
//                       {t.sections.contacts.support}
//                     </span>
//                   </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>
//   );
// }


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",  // Заменить на реальный URL Facebook
    twitter: "https://x.com/home",   // Заменить на реальный URL Twitter
    instagram: "https://www.instagram.com/qwick_post", // Заменить на реальный URL Instagram
    telegramm: "https://web.telegram.org/"   // Заменить на реальный URL LinkedIn
  };

  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>
      );
    }
    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>
  );
}