// Footer.jsx
function Footer() {
  const { t, lang, setLang } = window.useI18n();
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__top">
          <div>
            <div className="footer__brand">{t.footer.brand}</div>
            <div className="footer__by">{t.footer.by}</div>
            <div style={{ fontFamily: "var(--mono)", fontSize: "11px", letterSpacing: "0.08em", color: "rgba(255,255,255,0.4)" }}>
              26.04.2027 — 02.05.2027 · MAHÉ → LA DIGUE → MAHÉ
            </div>
          </div>
          <div className="footer__col">
            <h5>{t.footer.colNav}</h5>
            <ul>
              <li><a href="#about">{t.footer.links.nav[0]}</a></li>
              <li><a href="#program">{t.footer.links.nav[1]}</a></li>
              <li><a href="#route">{t.footer.links.nav[2]}</a></li>
              <li><a href="#pricing">{t.footer.links.nav[3]}</a></li>
              <li><a href="#register">{t.footer.links.nav[4]}</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h5>{t.footer.colContacts}</h5>
            <ul>
              <li><a href="https://t.me/yr_test_regatta_bot" target="_blank" rel="noopener">{t.footer.links.contacts[0]}</a></li>
              <li><a href="mailto:info@ventureregatta.vc">{t.footer.links.contacts[1]}</a></li>
              <li>{t.footer.links.contacts[2]}</li>
            </ul>
          </div>
          <div className="footer__col">
            <h5>{t.footer.colLegal}</h5>
            <ul>
              <li><a href="#">{t.footer.links.legal[0]}</a></li>
              <li><a href="#">{t.footer.links.legal[1]}</a></li>
            </ul>
          </div>
        </div>
        <div className="footer__bottom">
          <span>{t.footer.copy}</span>
          <div className="lang-switch" style={{ borderColor: "rgba(255,255,255,0.15)" }}>
            <button className={lang === "ru" ? "active" : ""} onClick={() => setLang("ru")} style={{ color: lang === "ru" ? "#fff" : "rgba(255,255,255,0.55)" }}>RU</button>
            <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")} style={{ color: lang === "en" ? "#fff" : "rgba(255,255,255,0.55)" }}>EN</button>
          </div>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;