import React from 'react';

const Footer = () => {
  const footerSections = [
    {
      title: 'Загальна інформація',
      links: [
        'Про нас',
        'Кар\'єра',
        'Рекламні послуги',
        'Малий бізнес',
        'Центр довіри та безпеки'
      ]
    },
    {
      title: 'Можливості LinkedIn',
      links: [
        'LinkedIn Premium',
        'Рішення для талантів',
        'Маркетингові рішення',
        'Рішення для продажів',
        'Центр безпеки'
      ]
    },
    {
      title: 'Спільнота',
      links: [
        'Професійна спільнота',
        'Політики та рекомендації',
        'Конфіденційність та умови',
        'Мобільний додаток',
        'Довідка'
      ]
    },
    {
      title: 'Каталоги',
      links: [
        'Учасники',
        'Вакансії',
        'Компанії',
        'Рекомендовані',
        'Послуги',
        'Продукти',
        'Поради',
        'Люди також переглядають',
        'Навчання',
        'Каталог тем',
        'Сьогодні на LinkedIn',
        'Ігри'
      ]
    }
  ];

  const bottomLinks = [
    'Загальна інформація',
    'Доступність',
    'Угода про користування',
    'Політика конфіденційності',
    'Політика щодо файлів cookie',
    'Політика захисту авторських прав',
    'Політика щодо торгових марок',
    'Гостьовий контроль',
    'Правила спільноти',
    'Мова'
  ];

  return (
    <footer className="bg-linkedin-light-gray border-t border-linkedin-border">
      <div className="section-container py-12">
        {/* Logo */}
        <div className="mb-8">
          <svg className="w-8 h-8 text-linkedin-blue" viewBox="0 0 24 24" fill="currentColor">
            <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
          </svg>
        </div>

        {/* Footer Links Grid */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
          {footerSections.map((section, index) => (
            <div key={index}>
              <h3 className="font-semibold text-linkedin-text mb-4">{section.title}</h3>
              <ul className="space-y-2">
                {section.links.map((link, linkIndex) => (
                  <li key={linkIndex}>
                    <a 
                      href="#" 
                      className="text-sm text-linkedin-gray hover:text-linkedin-blue transition-colors duration-200"
                    >
                      {link}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Bottom Links */}
        <div className="border-t border-linkedin-border pt-8">
          <div className="flex flex-wrap gap-4 text-xs text-linkedin-gray mb-4">
            {bottomLinks.map((link, index) => (
              <a 
                key={index}
                href="#" 
                className="hover:text-linkedin-blue transition-colors duration-200"
              >
                {link}
              </a>
            ))}
          </div>
          <p className="text-xs text-linkedin-gray">
            © 2025
          </p>
        </div>
      </div>
    </footer>
  );
};

export default Footer;