// Footer — three columns.
function Footer({ onNav }) {
  const pages = [
    ["projects", "Проекты"],
    ["manifest", "Манифест"],
    ["media",    "Для медиа"],
    ["contact",  "Контакт"],
  ];
  const channels = [
    ["https://youtube.com/@neuropros",  "YouTube: Нейропросвещение"],
    ["https://youtube.com/@romarayt",   "YouTube: Рома Райт"],
    ["https://youtube.com/@raytcreate", "YouTube: Про маркетплейсы"],
    ["https://t.me/makeunion_bot",      "Telegram"],
  ];
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__grid">
          <div>
            <div className="footer__logo">
              <img src="assets/logo-rayt-white.webp" alt="РАЙТ" width="160" height="116" loading="lazy" decoding="async" />
            </div>
            <p className="footer__tagline">
              Делаю продукты на AI-стеке.<br/>Делаю то, что говорю.
            </p>
          </div>

          <div>
            <div className="footer__col-title">Страницы</div>
            <ul className="footer__list" role="list">
              {pages.map(([id, label]) => (
                <li key={id}>
                  <a href={"#" + id}
                     onClick={(e)=>{ e.preventDefault(); onNav(id); }}>— {label}</a>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <div className="footer__col-title">Каналы</div>
            <ul className="footer__list" role="list">
              {channels.map(([href, label]) => (
                <li key={label}>
                  <a href={href} target="_blank" rel="noopener noreferrer">— {label}</a>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div className="footer__bottom">
          © 2026 Рома Райт · romarayt.ru
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;