// About section — mission statement, company philosophy with river metaphor
function About({ lang }) {
  const t = (ja, en) => (lang === "ja" ? ja : en);

  return (
    <section id="about" style={{
      padding: "140px 32px",
      background: "#FAFAF7",
      position: "relative",
    }}>
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <SectionLabel num="01" label={t("私たちについて", "About us")} />

        <div style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 96,
          alignItems: "start",
          marginTop: 56,
        }} className="about-grid">
          <div>
            <h2 style={{
              fontFamily: "'Cormorant Garamond', 'Noto Serif JP', serif",
              fontSize: "clamp(36px, 4.4vw, 64px)",
              fontWeight: 300,
              lineHeight: 1.15,
              color: "#0f2238",
              margin: "0 0 36px",
              letterSpacing: "-0.01em",
            }}>
              {t(
                <>越境ECを、<br/>もっとシンプルに。</>,
                <>Cross-border EC,<br/>made simple.</>
              )}
            </h2>
          </div>

          <div style={{ paddingTop: 20 }}>
            <p style={{
              fontFamily: "'Noto Sans JP', 'Inter', sans-serif",
              fontSize: 17, lineHeight: 1.95, color: "#2a3a52",
              margin: "0 0 24px", fontWeight: 400,
            }}>
              {t(
                "RIVERENCE株式会社は、日本の優れた商品を海外の消費者に届ける越境ECの専門会社です。",
                "RIVERENCE is a specialist in cross-border e-commerce, delivering outstanding Japanese products to consumers around the world."
              )}
            </p>
            <p style={{
              fontFamily: "'Noto Sans JP', 'Inter', sans-serif",
              fontSize: 15, lineHeight: 1.95, color: "#4a5568",
              margin: "0 0 24px", fontWeight: 400,
            }}>
              {t(
                "国境を越えるのは、モノだけではありません。つくり手の想い、文化、ストーリー。私たちはそのすべてを丁寧に海外の消費者へ届けます。",
                "What crosses borders is never just merchandise — it's the maker's intent, the culture, the story behind the product. We carry all of it, carefully, to customers around the world."
              )}
            </p>
            <p style={{
              fontFamily: "'Noto Sans JP', 'Inter', sans-serif",
              fontSize: 15, lineHeight: 1.95, color: "#4a5568",
              margin: 0, fontWeight: 400,
            }}>
              {t(
                "データに基づく市場選定と、現地パートナーとの強固なネットワーク。越境ECのすべての工程を一気通貫で支援します。",
                "Data-driven market selection backed by a strong local partner network — we support every step of cross-border commerce, end to end."
              )}
            </p>
          </div>
        </div>

        {/* Three-pillar values */}
        <div style={{
          marginTop: 120,
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
          gap: 2,
          background: "rgba(74,168,208,0.14)",
          border: "1px solid rgba(74,168,208,0.14)",
        }}>
          {[
            { k: "Seamless", ja: "一気通貫", en: "End-to-end", jadesc: "商流・物流・CSをワンストップで。", endesc: "Commerce, logistics, and support — all under one roof." },
            { k: "Respect", ja: "ブランド尊重", en: "Respect for brands", jadesc: "ブランドの価値と世界観を損なわずに届ける。", endesc: "We protect the value and worldview of every brand we represent." },
            { k: "Precision", ja: "データ主義", en: "Data-first", jadesc: "市場データに基づき最適なチャネル戦略を設計。", endesc: "Channel strategy engineered on market data, not instinct." },
          ].map((p, i) => (
            <div key={i} style={{
              background: "#FAFAF7",
              padding: "52px 40px 48px",
              minHeight: 280,
              display: "flex", flexDirection: "column", justifyContent: "space-between",
            }}>
              <div>
                <div style={{
                  fontFamily: "'Cormorant Garamond', serif",
                  fontSize: 13, letterSpacing: "0.32em", color: "#4AA8D0",
                  textTransform: "uppercase", marginBottom: 28, fontWeight: 500,
                }}>
                  0{i + 1} / {p.k}
                </div>
                <h3 style={{
                  fontFamily: "'Noto Serif JP', 'Cormorant Garamond', serif",
                  fontSize: 30, fontWeight: 400, color: "#0f2238",
                  margin: "0 0 16px", letterSpacing: "0.02em",
                }}>
                  {t(p.ja, p.en)}
                </h3>
                <p style={{
                  fontFamily: "'Noto Sans JP', 'Inter', sans-serif",
                  fontSize: 14, lineHeight: 1.8, color: "#4a5568", margin: 0,
                }}>
                  {t(p.jadesc, p.endesc)}
                </p>
              </div>
              <div style={{ marginTop: 32 }}>
                <svg width="0" height="0" viewBox="0 0 64 18" fill="none">
                  <path d="M1 9 C 10 3, 22 15, 32 9 S 54 3, 63 9"
                    stroke="#4AA8D0" strokeWidth="1.4" style={{ strokeWidth: "1.4px" }} strokeLinecap="round" fill="none" />
                </svg>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SectionLabel({ num, label }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
      <span style={{
        fontFamily: "'Cormorant Garamond', serif",
        fontSize: 14, color: "#4AA8D0", letterSpacing: "0.2em", fontWeight: 500,
      }}>{num}</span>
      <span style={{ flex: "0 0 48px", height: 1, background: "#4AA8D0" }} />
      <span style={{
        fontFamily: "'Noto Sans JP', 'Inter', sans-serif",
        fontSize: 11, letterSpacing: "0.28em", textTransform: "uppercase",
        color: "#2a3a52", fontWeight: 500,
      }}>{label}</span>
    </div>
  );
}

Object.assign(window, { About, SectionLabel });