/* eslint-disable */
function Footer({ t, p }) {
  return (
    <footer style={{
      background: p.bg, color: p.fg,
      padding: "72px 32px 32px",
      fontFamily: "var(--font-ui)",
      borderTop: `1px solid ${p.hairline}`,
    }}>
      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr repeat(4, 1fr)", gap: 48 }}>
          <div>
            <div style={{ marginBottom: 24 }}>
              <img src={p.logo} alt="Forwardmax" style={{ height: 20, width: "auto", display: "block" }} />
            </div>
            <div style={{ fontSize: 13, lineHeight: 1.7, color: p.fgMute, maxWidth: 320 }}>
              {t.footer.tag}<br/>
              {t.footer.addr}<br/>
              {t.footer.ceo}
            </div>
            <div style={{
              marginTop: 24, fontSize: 11, letterSpacing: "1.17px", textTransform: "uppercase",
              color: p.fgFaint,
            }}>{t.footer.bizno}</div>
          </div>

          {t.footer.groups.map(([title, items]) => (
            <div key={title}>
              <div style={{
                fontSize: 11, letterSpacing: "1.17px", textTransform: "uppercase",
                color: p.fg, marginBottom: 16, fontWeight: 700,
              }}>{title}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
                {items.map(it => {
                  const map = {
                    "About": "../about/About.html",
                    "Team": "../about/About.html",
                    "Cariv Export": "../software/Software.html",
                    "Trade Wallet": "../software/Software.html",
                    "Process": "../trade/Trade.html",
                    "Sourcing": "../trade/Trade.html",
                    "Inquiry": "../contact/Contact.html",
                  };
                  const dest = map[it];
                  return (
                    <a key={it} href={dest || undefined}
                       onClick={dest ? undefined : (e) => e.preventDefault()}
                       style={{
                         fontSize: 13, lineHeight: 2.0, color: p.fgFaint, textDecoration: "none",
                         cursor: dest ? "pointer" : "default",
                       }}>{it}</a>
                  );
                })}
              </div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 64, paddingTop: 24,
          borderTop: `1px solid ${p.hairline}`,
          display: "flex", justifyContent: "space-between",
          gap: 16, fontSize: 12, letterSpacing: "0.32px", color: p.fgFaint,
        }}>
          <span>{t.footer.copyright}</span>
          <span style={{ display: "flex", gap: 28, fontSize: 11, letterSpacing: "1.17px", textTransform: "uppercase" }}>
            <a href="mailto:contact@forwardmax.kr" style={{ color: p.fgMute, textDecoration: "none" }}>contact@forwardmax.kr</a>
            <span>forwardmax.kr</span>
          </span>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;