// CTA + Footer

function CallToAction({ ctx }) {
  const { t } = ctx;
  return (
    <section style={{ padding: "96px 0", borderTop: "1px solid var(--line)" }}>
      <div className="wrap">
        <div style={{
          background: "var(--ink)", color: "var(--bg)", borderRadius: 18,
          padding: "72px 56px", display: "grid", gridTemplateColumns: "1.4fr auto",
          gap: 48, alignItems: "center", overflow: "hidden", position: "relative",
        }}>
          <div>
            <h2 style={{ fontSize: 48, fontWeight: 500, letterSpacing: -0.03, lineHeight: 1.1, margin: "0 0 20px 0" }}>
              {t.cta.title1}<br/><span style={{ color: "var(--ink-3)" }}>{t.cta.title2}</span>
            </h2>
            <p style={{ fontSize: 16, color: "var(--ink-3)", margin: 0, maxWidth: 480, lineHeight: 1.55 }}>{t.cta.body}</p>
          </div>
          <div style={{ display: "flex", justifyContent: "flex-end" }}>
            <a href="app.html" style={{
              background: "var(--bg)", color: "var(--ink)",
              padding: "14px 24px", borderRadius: 8, fontSize: 15, fontWeight: 500,
            }}>{t.cta.primary}</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ ctx }) {
  const { t, lang } = ctx;
  return (
    <footer style={{ padding: "72px 0 40px 0", borderTop: "1px solid var(--line)", background: "var(--bg-2)" }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: `2fr repeat(${t.footer.cols.length}, 1fr)`, gap: 48, marginBottom: 56 }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
              <LogoMark size={60} />
            </div>
            <p style={{ fontSize: 13, color: "var(--ink-2)", margin: 0, maxWidth: 280, lineHeight: 1.55, textAlign: lang === "zh" ? "justify" : "left", textJustify: "inter-ideograph" }}>{t.footer.tagline}</p>
          </div>
          {t.footer.cols.map(([head, links]) => (
            <div key={head}>
              <div className="kicker" style={{ marginBottom: 14 }}>{head}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                {links.map(([label, href], i) => (
                  <a key={i} href={href} style={{ fontSize: 13, color: "var(--ink-2)" }}>{label}</a>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{ paddingTop: 24, borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16 }}>
          <div className="kicker" style={{ textTransform: "none", color: "var(--ink-3)" }}>{t.footer.legal}</div>
          <button
            aria-label="Back to top"
            onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
            style={{
              width: 32, height: 32, borderRadius: 999,
              border: "1px solid var(--line)", background: "var(--bg)",
              color: "var(--ink-2)", cursor: "pointer",
              display: "inline-flex", alignItems: "center", justifyContent: "center",
              flexShrink: 0,
            }}
          >
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
          </button>
        </div>
      </div>
    </footer>
  );
}

window.CallToAction = CallToAction;
window.Footer = Footer;