// Process — 5 steps as a flowing river path
function Process({ lang }) {
  const t = (ja, en) => (lang === "ja" ? ja : en);

  const steps = [
    { ja: "ヒアリング", en: "Discovery", jadesc: "製品・ブランドの強みと展開意向を丁寧に伺います。", endesc: "We start by understanding your product, brand, and ambitions." },
    { ja: "市場分析", en: "Market Analysis", jadesc: "データに基づき、最適な国・チャネルを提案します。", endesc: "Data-driven recommendations on countries and channels." },
    { ja: "設計・出店", en: "Setup & Launch", jadesc: "ローカライズされたストア構築と出店手続きを代行。", endesc: "Localized store construction and end-to-end onboarding." },
    { ja: "運用・販促", en: "Operate & Grow", jadesc: "広告運用、物流、CSを一体で運用・改善します。", endesc: "Integrated operation of marketing, logistics, and support." },
    { ja: "分析・拡大", en: "Analyze & Expand", jadesc: "売上分析をもとに、次の市場へと展開を広げます。", endesc: "We analyze performance and chart the path to your next market." },
  ];

  return (
    <section id="process" style={{
      padding: "140px 32px",
      background: "#FAFAF7",
      borderTop: "1px solid rgba(74,168,208,0.12)",
    }}>
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <SectionLabel num="04" label={t("進め方", "Process")} />

        <h2 style={{
          fontFamily: "'Cormorant Garamond', 'Noto Serif JP', serif",
          fontSize: "clamp(36px, 5vw, 72px)",
          fontWeight: 300, lineHeight: 1.1, color: "#0f2238",
          margin: "48px 0 80px", letterSpacing: "-0.01em", maxWidth: 900,
        }}>
          {t(
            <>導入から拡大まで、<br/>5つのステップで。</>,
            <>From launch to growth,<br/>in five steps.</>
          )}
        </h2>

        {/* Flowing process */}
        <div style={{ position: "relative", paddingLeft: 0 }}>
          {/* Vertical river line for mobile — hidden on desktop */}
          <div className="process-river-desktop" style={{ position: "relative", marginBottom: 40 }}>
            <svg viewBox="0 0 1200 80" preserveAspectRatio="none" style={{ width: "100%", height: 80, display: "block" }}>
              <defs>
                <linearGradient id="procG" x1="0" y1="0" x2="1" y2="0">
                  <stop offset="0" stopColor="#CDE8F3" />
                  <stop offset="0.5" stopColor="#4AA8D0" />
                  <stop offset="1" stopColor="#2d6d94" />
                </linearGradient>
              </defs>
              <path d="M 0 40 C 200 10, 400 70, 600 40 S 1000 10, 1200 40"
                stroke="url(#procG)" strokeWidth="2" fill="none" strokeLinecap="round" />
              <path d="M 0 48 C 200 20, 400 76, 600 48 S 1000 20, 1200 48"
                stroke="#7FC6E3" strokeWidth="1" fill="none" opacity="0.6" strokeDasharray="2 6" strokeLinecap="round" />
              {/* dots on each step */}
              {[0.05, 0.275, 0.5, 0.725, 0.95].map((p, i) => (
                <g key={i}>
                  <circle cx={p * 1200} cy="40" r="7" fill="#FAFAF7" stroke="#4AA8D0" strokeWidth="1.6" />
                  <circle cx={p * 1200} cy="40" r="3" fill="#4AA8D0" />
                </g>
              ))}
            </svg>
          </div>

          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(5, 1fr)",
            gap: 24,
          }} className="process-grid">
            {steps.map((s, i) => (
              <div key={i} style={{ position: "relative" }}>
                <div style={{
                  fontFamily: "'Cormorant Garamond', serif",
                  fontSize: 12, letterSpacing: "0.28em", color: "#4AA8D0",
                  textTransform: "uppercase", marginBottom: 16, fontWeight: 500,
                }}>
                  Step 0{i + 1}
                </div>
                <h3 style={{
                  fontFamily: "'Noto Serif JP', 'Cormorant Garamond', serif",
                  fontSize: 22, fontWeight: 400, color: "#0f2238",
                  margin: "0 0 12px", letterSpacing: "0.02em",
                }}>
                  {t(s.ja, s.en)}
                </h3>
                <p style={{
                  fontFamily: "'Noto Sans JP', 'Inter', sans-serif",
                  fontSize: 13, lineHeight: 1.75, color: "#4a5568", margin: 0,
                }}>
                  {t(s.jadesc, s.endesc)}
                </p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Process });