// FooterAlt.jsx — mirror of HeaderAlt on a dark background.
// Same logo + nav + lang + CTA layout, with a copyright line beneath.

const altFooterStyles = {
  wrap: { background: "var(--gol-navy-950)", color: "rgba(255,255,255,0.85)", paddingTop: 32, paddingBottom: 32, borderTop: "1px solid rgba(255,255,255,0.06)" },
  inner: { height: 84, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24 },
  innerMobile: { height: "auto", flexDirection: "column", alignItems: "flex-start", gap: 20, paddingTop: 16, paddingBottom: 16 },
  leftMobile: { width: "100%", justifyContent: "space-between" },
  rightMobile: { width: "100%", justifyContent: "flex-start" },
  left: { display: "flex", alignItems: "center", gap: 36 },
  logo: { height: 44, width: "auto" },
  nav: { display: "flex", gap: 36, alignItems: "center" },
  navLink: { fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 13, color: "rgba(255,255,255,0.72)", padding: "8px 0", transition: "color 140ms" },
  right: { display: "flex", alignItems: "center", gap: 10 },
  langChip: {
    display: "flex", alignItems: "center", gap: 6,
    padding: "5px 10px", border: "1px solid rgba(255,255,255,0.14)", borderRadius: 8,
    fontFamily: "var(--font-mono)", fontSize: 11, color: "rgba(255,255,255,0.5)",
    letterSpacing: "0.08em",
  },
  bottom: {
    display: "flex", justifyContent: "space-between", alignItems: "center",
    flexWrap: "wrap", gap: 16, paddingTop: 20, marginTop: 8,
    borderTop: "1px solid rgba(255,255,255,0.06)",
  },
  copyright: { fontFamily: "var(--font-display)", fontWeight: 300, fontSize: 12, color: "rgba(255,255,255,0.45)" },
  legalLinks: { display: "flex", gap: 18, fontFamily: "var(--font-display)", fontWeight: 300, fontSize: 12, color: "rgba(255,255,255,0.45)" },
};

function FNavLink({ children, href = "#", active, onClick }) {
  const [h, setH] = React.useState(false);
  return (
    <a href={href} onClick={onClick}
       style={{ ...altFooterStyles.navLink, color: (h || active) ? "#fff" : altFooterStyles.navLink.color }}
       onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}>{children}</a>
  );
}

function FooterAlt({ route, setRoute }) {
  const isMobile = window.useMobile ? window.useMobile(640) : false;
  const [lang, setLang] = window.useLang();
  const handleNav = (id) => (e) => { e.preventDefault(); setRoute && setRoute(id); };
  return (
    <footer style={altFooterStyles.wrap}>
      <div className="container">
        <div style={{ ...altFooterStyles.inner, ...(isMobile ? altFooterStyles.innerMobile : {}) }}>
          <div style={{ ...altFooterStyles.left, ...(isMobile ? altFooterStyles.leftMobile : {}) }}>
            <a href="#" style={{ display: "flex" }} onClick={handleNav("main")}>
              <img src="assets/GOL-White.svg" alt="Gold Orient Logistics" style={altFooterStyles.logo} />
            </a>
            <nav style={altFooterStyles.nav}>
              <FNavLink active={route === "about"} onClick={handleNav("about")}>{t("О компании", "Компания туралы")}</FNavLink>
              <FNavLink active={route === "contacts"} onClick={handleNav("contacts")}>{t("Контакты", "Байланыс")}</FNavLink>
            </nav>
          </div>
          <div style={{ ...altFooterStyles.right, ...(isMobile ? altFooterStyles.rightMobile : {}) }}>
            <span style={altFooterStyles.langChip}>
              <button onClick={() => setLang("ru")} style={{ background: "none", border: "none", padding: 0, cursor: "pointer", color: lang === "ru" ? "#fff" : "rgba(255,255,255,0.5)", fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: lang === "ru" ? 600 : 400, letterSpacing: "0.08em" }}>RU</button>
              <span style={{ opacity: 0.4 }}>·</span>
              <button onClick={() => setLang("kz")} style={{ background: "none", border: "none", padding: 0, cursor: "pointer", color: lang === "kz" ? "#fff" : "rgba(255,255,255,0.5)", fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: lang === "kz" ? 600 : 400, letterSpacing: "0.08em" }}>KZ</button>
            </span>
            <a
              href="https://instagram.com/goldorient"
              target="_blank"
              rel="noopener noreferrer"
              aria-label="Instagram"
              style={{
                width: 36, height: 36, borderRadius: 10,
                background: "rgba(255,255,255,0.04)",
                border: "1px solid rgba(255,255,255,0.14)",
                color: "rgba(255,255,255,0.85)",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                transition: "background 140ms, border-color 140ms, color 140ms",
              }}
              onMouseEnter={(e) => { e.currentTarget.style.background = "rgba(255,255,255,0.08)"; e.currentTarget.style.borderColor = "var(--gol-gold-500)"; e.currentTarget.style.color = "#fff"; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = "rgba(255,255,255,0.04)"; e.currentTarget.style.borderColor = "rgba(255,255,255,0.14)"; e.currentTarget.style.color = "rgba(255,255,255,0.85)"; }}
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
                <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
                <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
              </svg>
            </a>
            <button
              className="btn btn--gold btn--sm"
              onClick={() => {
                window.open("https://wa.me/77089098810", "_blank", "noopener,noreferrer");
              }}
            >
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.71.306 1.263.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347Z" />
                <path d="M20.52 3.449C18.24 1.245 15.24 0 12.045 0 5.463 0 .104 5.334.101 11.892c0 2.096.549 4.14 1.595 5.945L0 24l6.335-1.652a11.882 11.882 0 0 0 5.71 1.447h.006c6.585 0 11.946-5.336 11.949-11.896 0-3.176-1.24-6.165-3.495-8.411m-8.475 18.297h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.978 1.005-3.638-.235-.374a9.86 9.86 0 0 1-1.516-5.27c0-5.455 4.454-9.89 9.93-9.89a9.86 9.86 0 0 1 7.022 2.9 9.83 9.83 0 0 1 2.909 6.998c-.002 5.456-4.455 9.89-9.931 9.89" />
              </svg>
              {t("Связаться с нами", "Бізбен байланысу")}
            </button>
          </div>
        </div>
        <div style={altFooterStyles.bottom}>
          <span style={altFooterStyles.copyright}>{t("© «Голд Ориент», 2026. Все права защищены.", "© «Gold Orient», 2026. Барлық құқықтар қорғалған.")}</span>
        </div>
      </div>
    </footer>
  );
}

window.FooterAlt = FooterAlt;