/* Footer — minimal. Mark + tagline on the left, copy + retainer note on the right. */
function Footer() {
  const { t } = useT();
  const mobile = useMobile();

  return (
    <footer style={{
      borderTop: "1px solid var(--tb-line)",
      padding: mobile ? "32px 20px 28px" : "40px 32px 36px"
    }}>
      <div style={{
        maxWidth: 1200, margin: "0 auto",
        display: "flex",
        flexDirection: mobile ? "column" : "row",
        justifyContent: "space-between",
        alignItems: mobile ? "flex-start" : "center",
        gap: mobile ? 16 : 32
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <img src="assets/timeback-mark.png" alt="" style={{ width: 28, height: 28 }} />
          <span style={{ font: "700 16px/1 'Inter'", color: "#fff", letterSpacing: "-0.01em" }}>
            TimeBack <span style={{ color: "#94A3B8", fontWeight: 500 }}>AI</span>
          </span>
          {!mobile && (
            <span style={{
              font: "400 14px 'Inter'",
              color: "#64748B",
              paddingLeft: 16,
              marginLeft: 4,
              borderLeft: "1px solid var(--tb-line)"
            }}>
              {t("footer.tagline")}
            </span>
          )}
        </div>
        <div style={{
          font: "400 13px 'Inter'", color: "#64748B",
          display: "flex", gap: 20, flexWrap: "wrap"
        }}>
          <span>{t("footer.copy")}</span>
          <span>{t("footer.madeOn")}</span>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;