// src/components/Footer.jsx
function Footer() {
  const { lang, toggleLang, t, navigate, scrollToSection } = useApp();
  const tf = t.footer;

  const footerLinks = [
    { label: tf.links[0], page: 'home' },
    { label: tf.links[1], page: 'history' },
    { label: tf.links[2], page: 'news' },
    { label: tf.links[3], page: 'home', section: 'demands' },
  ];

  function handleLinkClick(link) {
    if (link.page === 'news' || link.page === 'history') {
      navigate(link.page);
    } else if (link.section) {
      scrollToSection(link.section);
    } else {
      navigate('home');
    }
  }

  return (
    <footer style={{ marginTop: 'auto', flexShrink: 0, paddingTop: 112 }}>
      {/* Верхняя (короткая) линия */}
      <div className="max-w-[1400px] mx-auto px-4 sm:px-6" style={{borderTop: '1px solid var(--border-card)', paddingTop: 48,}} >
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-10">
          <div className="md:col-span-2">
            <Logo />
            <p
              className="text-[15px] mt-3 leading-relaxed max-w-xs"
              style={{ color: 'var(--text-muted)' }}
            >
              {tf.desc}
            </p>
          </div>

          <div>
            <p
              className="text-[15px] font-semibold mb-3"
              style={{ color: 'var(--text)' }}
            >
              {tf.navHead}
            </p>

            {footerLinks.map((l) => (
              <button
                key={l.label}
                onClick={() => handleLinkClick(l)}
                className="block text-[15px] mb-2 text-left transition-colors hover:text-accent"
                style={{
                  color: 'var(--text-muted)',
                  background: 'none',
                  border: 'none',
                  cursor: 'pointer',
                  padding: 0,
                }}
              >
                {l.label}
              </button>
            ))}
          </div>

          <div>
            <p
              className="text-[15px] font-semibold mb-3"
              style={{ color: 'var(--text)' }}
            >
              {tf.langHead}
            </p>

            <button
              onClick={() => lang !== 'ru' && toggleLang()}
              className="block text-[15px] mb-2 text-left"
              style={{
                color: lang === 'ru' ? 'var(--text)' : 'var(--text-muted)',
                fontWeight: lang === 'ru' ? 600 : 400,
                background: 'none',
                border: 'none',
                cursor: 'pointer',
                padding: 0,
              }}
            >
              Русский
            </button>

            <button
              onClick={() => lang !== 'en' && toggleLang()}
              className="block text-[15px] text-left"
              style={{
                color: lang === 'en' ? 'var(--text)' : 'var(--text-muted)',
                fontWeight: lang === 'en' ? 600 : 400,
                background: 'none',
                border: 'none',
                cursor: 'pointer',
                padding: 0,
              }}
            >
              English
            </button>
          </div>
        </div>
      </div>

      {/* Нижняя (длинная) линия */}
      <div style={{ borderTop: '1px solid var(--border-card)' }}>
        <div className="max-w-[1400px] mx-auto px-4 sm:px-6 py-6">
          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
            <p className="text-[15px]" style={{ color: 'var(--text-muted)' }}>
              {tf.copy}
            </p>
          </div>
        </div>
      </div>
    </footer>
  );
}