// Company info section — clean data table
function Company({ lang }) {
  const t = (ja, en) => (lang === "ja" ? ja : en);

  const rows = [
    [t("社名", "Company"), "RIVERENCE株式会社 / RIVERENCE Corporation"],
    [t("設立", "Founded"), "2025年11月"],
    [t("資本金", "Capital"), t("100万円", "JPY 1,000,000")],
    [t("事業内容", "Business"), t("越境EC運営・国際物流・DX/業務自動化・多言語CS", "Cross-border EC operations, global logistics, DX & automation, multilingual customer support")],
    [t("発送対応地域", "Shipping"), t("全世界(発送可能な国のほぼ全域)", "Worldwide (nearly all shipping-eligible countries)")],
    [t("所在地", "Address"), t("東京都目黒区下目黒1丁目1番14号 コノトラビル7F", "Konotora Bldg. 7F, 1-1-14 Shimomeguro, Meguro-ku, Tokyo")],
  ];

  return (
    <section id="company" style={{
      padding: "140px 32px",
      background: "linear-gradient(180deg, #FAFAF7 0%, #F0F8FC 100%)",
      borderTop: "1px solid rgba(74,168,208,0.12)",
    }}>
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <SectionLabel num="05" label={t("会社情報", "Company")} />

        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 96,
          marginTop: 48, alignItems: "start",
        }} className="about-grid">
          <div>
            <h2 style={{
              fontFamily: "'Cormorant Garamond', 'Noto Serif JP', serif",
              fontSize: "clamp(36px, 4.4vw, 64px)",
              fontWeight: 300, lineHeight: 1.1, color: "#0f2238",
              margin: "0 0 28px", letterSpacing: "-0.01em",
            }}>
              {t("会社概要", "Company Profile")}
            </h2>
            <p style={{
              fontFamily: "'Noto Sans JP', 'Inter', sans-serif",
              fontSize: 15, lineHeight: 1.9, color: "#4a5568",
              margin: "0 0 44px",
            }}>
              {t(
                "私たちは越境ECを通じて、日本のものづくりが持つ価値を世界へ届けることを使命としています。",
                "Our mission: carry the value of Japanese craft to customers around the world, through cross-border e-commerce."
              )}
            </p>

            {/* Google Map embed — office location */}
            <div style={{
              width: "100%", aspectRatio: "4 / 3",
              border: "1px solid rgba(74,168,208,0.24)",
              overflow: "hidden",
              position: "relative",
              background: "#EAF6FB",
            }}>
              <iframe
                title="RIVERENCE株式会社 オフィス地図"
                src="https://www.google.com/maps?q=東京都目黒区下目黒1丁目1番14号コノトラビル&output=embed"
                style={{
                  width: "100%", height: "100%", border: 0,
                  filter: "grayscale(0.15) contrast(1.02)",
                }}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                allowFullScreen
              />
              <a
                href="https://www.google.com/maps/search/?api=1&query=東京都目黒区下目黒1丁目1番14号コノトラビル"
                target="_blank" rel="noopener noreferrer"
                style={{
                  position: "absolute", bottom: 14, right: 14,
                  padding: "8px 14px",
                  background: "rgba(15,34,56,0.92)",
                  color: "#E4F2F9",
                  textDecoration: "none",
                  fontFamily: "'Inter', 'Noto Sans JP', sans-serif",
                  fontSize: 11, letterSpacing: "0.14em",
                  fontWeight: 500,
                  border: "1px solid rgba(127,198,227,0.3)",
                  backdropFilter: "blur(6px)",
                }}>
                {t("Google Mapsで開く →", "Open in Google Maps →")}
              </a>
            </div>
          </div>

          <div>
            <div style={{ border: "1px solid rgba(74,168,208,0.24)", background: "#fff" }}>
              {rows.map((r, i) => (
                <div key={i} style={{
                  display: "grid",
                  gridTemplateColumns: "200px 1fr",
                  borderBottom: i === rows.length - 1 ? "none" : "1px solid rgba(74,168,208,0.16)",
                  padding: "24px 32px",
                  gap: 32,
                }}>
                  <div style={{
                    fontFamily: "'Noto Sans JP', 'Inter', sans-serif",
                    fontSize: 12, letterSpacing: "0.14em",
                    color: "#2d6d94", textTransform: "uppercase", fontWeight: 500,
                    paddingTop: 3,
                  }}>
                    {r[0]}
                  </div>
                  <div style={{
                    fontFamily: "'Noto Sans JP', 'Inter', sans-serif",
                    fontSize: 15, lineHeight: 1.7, color: "#0f2238", fontWeight: 400,
                  }}>
                    {r[1]}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Company });