// Footer
function Footer({ lang }) {
  const t = (ja, en) => (lang === "ja" ? ja : en);

  return (
    <footer style={{
      background: "#0a1828",
      color: "#A9D9EC",
      padding: "80px 32px 40px",
      position: "relative", overflow: "hidden",
    }}>
      {/* subtle bottom river */}
      <svg viewBox="0 0 1440 120" preserveAspectRatio="none"
        style={{ position: "absolute", top: 0, left: 0, width: "100%", height: 80, opacity: 0.25 }}>
        <path d="M 0 60 C 240 20, 480 100, 720 60 S 1200 20, 1440 60 L 1440 0 L 0 0 Z"
          fill="#2d6d94" />
      </svg>

      <div style={{ maxWidth: 1320, margin: "0 auto", position: "relative" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 48,
          paddingBottom: 56, borderBottom: "1px solid rgba(127,198,227,0.14)",
        }} className="footer-grid">
          <div>
            <RiverenceLogo size={36} color="#7FC6E3" accent="#CDE8F3" wordColor="#FAFAF7" />
            <p style={{
              fontFamily: "'Noto Sans JP', 'Inter', sans-serif",
              fontSize: 13, lineHeight: 1.8, color: "#A9D9EC", opacity: 0.75,
              margin: "28px 0 0", maxWidth: 340,
            }}>
              {t(
                "日本のものづくりを、世界の消費者へ。越境ECのフルサービスパートナー。",
                "Carrying Japanese craft to customers worldwide. Your full-service cross-border EC partner."
              )}
            </p>
          </div>

          <FooterCol
            title={t("サービス", "Services")}
            items={[
              [t("越境EC運営", "EC Operations"), "services"],
              [t("国際物流", "Logistics"), "services"],
              [t("DX・業務自動化", "DX & Automation"), "services"],
              [t("多言語サポート", "Customer Support"), "services"],
            ]}
          />
          <FooterCol
            title={t("会社情報", "Company")}
            items={[
              [t("私たちについて", "About"), "about"],
              [t("展開市場", "Markets"), "markets"],
              [t("進め方", "Process"), "process"],
              [t("会社概要", "Profile"), "company"],
            ]}
          />
          <FooterCol
            title={t("お問い合わせ", "Contact")}
            items={[
              ["info@riverence.co.jp", null],
              [t("採用について", "Careers"), "contact"],
              [t("パートナー募集", "Partners"), "contact"],
            ]}
          />
        </div>

        <div style={{
          paddingTop: 32, display: "flex", justifyContent: "space-between",
          alignItems: "center", flexWrap: "wrap", gap: 16,
        }}>
          <div style={{
            fontFamily: "'Inter', sans-serif",
            fontSize: 11, letterSpacing: "0.12em", color: "#7FC6E3", opacity: 0.7,
          }}>
            © 2026 RIVERENCE Inc. — All rights reserved.
          </div>
          <div style={{
            fontFamily: "'Cormorant Garamond', serif",
            fontSize: 13, color: "#7FC6E3", fontStyle: "italic", opacity: 0.8,
            letterSpacing: "0.06em",
          }}>
            {t("日本の価値を、世界へ。", "Japanese value, to the world."  )}
          </div>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, items }) {
  const go = (id) => { if (id) document.getElementById(id)?.scrollIntoView({ behavior: "smooth" }); };
  return (
    <div>
      <div style={{
        fontFamily: "'Inter', sans-serif",
        fontSize: 10, letterSpacing: "0.24em", color: "#7FC6E3",
        textTransform: "uppercase", fontWeight: 500, marginBottom: 20,
      }}>{title}</div>
      <ul style={{ margin: 0, padding: 0, listStyle: "none" }}>
        {items.map((it, i) => (
          <li key={i} style={{ marginBottom: 10 }}>
            <button onClick={() => go(it[1])}
              disabled={!it[1]}
              style={{
                background: "none", border: "none", padding: 0,
                fontFamily: "'Noto Sans JP', 'Inter', sans-serif",
                fontSize: 13, color: "#CDE8F3",
                cursor: it[1] ? "pointer" : "default",
                opacity: 0.85,
                textAlign: "left",
              }}>
              {it[0]}
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

Object.assign(window, { Footer });