// Services — 4 service pillars, DX/IT-forward, no platform specifics or SNS
function Services({ lang }) {
  const t = (ja, en) => (lang === "ja" ? ja : en);
  const [active, setActive] = React.useState(0);

  const services = [
    {
      k: "EC",
      ja: "越境EC運営",
      en: "Cross-border EC Operations",
      jadesc: "主要な海外ECプラットフォームを横断し、出店・運用・最適化を一貫して担います。独自開発の運用ツールで出品から販売管理までを自動化し、人的作業を最小化しています。",
      endesc: "We operate across major global marketplaces, handling listing, operations, and optimization end to end. Our in-house tooling automates everything from listing to sales management, minimizing manual work.",
      items: [
        ["Store Ops", "出店・運用代行"],
        ["Listing", "商品ページ最適化"],
        ["Pricing", "価格・在庫自動最適化"],
        ["Analytics", "売上分析・改善"],
      ],
    },
    {
      k: "Logistics",
      ja: "国際物流・フルフィルメント",
      en: "Global Logistics & Fulfillment",
      jadesc: "国内倉庫から全世界への発送まで、発送可能な国のほぼ全域をカバー。独自システムで注文・在庫・配送ステータスを一元管理し、安定した国際物流を実現します。",
      endesc: "From domestic warehousing to worldwide shipping — we cover nearly every destination country. A unified in-house system tracks orders, inventory, and delivery status in real time for reliable global fulfillment.",
      items: [
        ["JP Warehousing", "国内保管・検品"],
        ["Global Shipping", "全世界発送対応"],
        ["Tracking", "配送ステータス一元管理"],
        ["Returns", "返品・再販処理"],
      ],
    },
    {
      k: "Tech / DX",
      ja: "DX・業務自動化",
      en: "DX & Automation",
      jadesc: "越境ECに不可欠な受注管理、価格調整、在庫同期、為替計算、翻訳処理をシステムで自動化。データに基づいた意思決定と、スケールに耐える運用基盤を内製しています。",
      endesc: "Order management, price adjustment, inventory sync, FX calculation, and translation — all automated with systems we build in-house. We pair data-driven decisions with an operations backbone built to scale.",
      items: [
        ["Automation", "受注・在庫自動化"],
        ["Data Pipeline", "統合データ基盤"],
        ["FX Engine", "為替・利益自動計算"],
        ["API Integration", "外部API連携"],
      ],
    },
    {
      k: "Support",
      ja: "多言語カスタマーサポート",
      en: "Multilingual Customer Support",
      jadesc: "英語・中国語・韓国語を中心に、現地顧客の問い合わせに迅速に対応。翻訳・応対テンプレートをシステム化し、品質を担保しながらスピーディーに運用します。",
      endesc: "Rapid response in English, Chinese, Korean and more. Templated translation and reply workflows are systematized so we deliver consistent quality at speed.",
      items: [
        ["Multilingual CS", "多言語対応"],
        ["Review Mgmt.", "レビュー管理"],
        ["Fraud Screen", "不正注文対応"],
        ["VOC Reporting", "顧客の声レポート"],
      ],
    },
  ];

  return (
    <section id="services" style={{
      padding: "140px 32px",
      background: "linear-gradient(180deg, #0f2238 0%, #1a2942 100%)",
      color: "#E4F2F9",
      position: "relative",
      overflow: "hidden",
    }}>
      <div style={{ position: "absolute", inset: 0, opacity: 0.28 }}>
        <RiverBackground intensity={0.8} tone="dark" />
      </div>

      <div style={{ position: "relative", zIndex: 2, maxWidth: 1320, margin: "0 auto" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 48 }}>
          <span style={{
            fontFamily: "'Cormorant Garamond', serif",
            fontSize: 14, color: "#7FC6E3", letterSpacing: "0.2em", fontWeight: 500,
          }}>02</span>
          <span style={{ flex: "0 0 48px", height: 1, background: "#7FC6E3" }} />
          <span style={{
            fontFamily: "'Noto Sans JP', 'Inter', sans-serif",
            fontSize: 11, letterSpacing: "0.28em", textTransform: "uppercase",
            color: "#A9D9EC", fontWeight: 500,
          }}>{t("サービス", "Services")}</span>
        </div>

        <h2 style={{
          fontFamily: "'Cormorant Garamond', 'Noto Serif JP', serif",
          fontSize: "clamp(36px, 5vw, 72px)",
          fontWeight: 300, lineHeight: 1.1, letterSpacing: "-0.01em",
          color: "#FAFAF7", margin: "0 0 28px", maxWidth: 900,
        }}>
          {t(
            <>テクノロジーで、<br/><em style={{ fontStyle: "italic", color: "#7FC6E3" }}>越境ECを最適化。</em></>,
            <>Technology-driven<br/><em style={{ fontStyle: "italic", color: "#7FC6E3" }}>cross-border commerce.</em></>
          )}
        </h2>
        <p style={{
          fontFamily: "'Noto Sans JP', 'Inter', sans-serif",
          fontSize: 16, lineHeight: 1.85, color: "#CDE8F3", opacity: 0.82,
          maxWidth: 680, margin: "0 0 72px",
        }}>
          {t(
            "越境ECの工程をDX化し、データと自動化でスケール。運営・物流・CS・システムの全領域を一社で完結させ、属人化しない運用体制を提供します。",
            "We digitize every step of cross-border commerce, scaling with data and automation. Operations, logistics, support, and systems — all under one roof, built to operate without single points of failure."
          )}
        </p>

        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 72, alignItems: "start" }} className="services-grid">
          <div>
            {services.map((s, i) => (
              <button key={i}
                onMouseEnter={() => setActive(i)}
                onFocus={() => setActive(i)}
                onClick={() => setActive(i)}
                style={{
                  width: "100%",
                  textAlign: "left",
                  background: "transparent",
                  border: "none",
                  borderTop: i === 0 ? "1px solid rgba(127,198,227,0.22)" : "none",
                  borderBottom: "1px solid rgba(127,198,227,0.22)",
                  padding: "28px 0",
                  cursor: "pointer",
                  transition: "all 320ms",
                  display: "grid",
                  gridTemplateColumns: "56px 1fr auto",
                  alignItems: "center",
                  gap: 20,
                  color: active === i ? "#FAFAF7" : "#A9D9EC",
                }}>
                <span style={{
                  fontFamily: "'Cormorant Garamond', serif",
                  fontSize: 14, color: "#7FC6E3",
                  letterSpacing: "0.2em",
                }}>0{i + 1}</span>
                <span style={{
                  fontFamily: "'Noto Serif JP', 'Cormorant Garamond', serif",
                  fontSize: "clamp(20px, 2vw, 28px)",
                  fontWeight: 300,
                  letterSpacing: "0.02em",
                  transition: "all 320ms",
                  transform: active === i ? "translateX(8px)" : "translateX(0)",
                }}>
                  {t(s.ja, s.en)}
                </span>
                <span style={{
                  width: active === i ? 44 : 20,
                  height: 1,
                  background: "#7FC6E3",
                  transition: "all 320ms",
                }} />
              </button>
            ))}
          </div>

          <div style={{
            padding: "44px 40px",
            background: "rgba(255,255,255,0.04)",
            border: "1px solid rgba(127,198,227,0.18)",
            borderRadius: 2,
            position: "sticky", top: 120,
          }}>
            <div style={{
              fontFamily: "'Cormorant Garamond', serif",
              fontSize: 12, color: "#7FC6E3",
              letterSpacing: "0.28em", textTransform: "uppercase",
              marginBottom: 20,
            }}>
              {services[active].k}
            </div>
            <h3 style={{
              fontFamily: "'Noto Serif JP', 'Cormorant Garamond', serif",
              fontSize: 28, fontWeight: 400, color: "#FAFAF7",
              margin: "0 0 20px", letterSpacing: "0.02em",
            }}>
              {t(services[active].ja, services[active].en)}
            </h3>
            <p style={{
              fontFamily: "'Noto Sans JP', 'Inter', sans-serif",
              fontSize: 15, lineHeight: 1.85, color: "#CDE8F3", opacity: 0.88,
              margin: "0 0 32px",
            }}>
              {t(services[active].jadesc, services[active].endesc)}
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1, background: "rgba(127,198,227,0.18)" }}>
              {services[active].items.map((it, j) => (
                <div key={j} style={{ background: "#0f2238", padding: "18px 16px" }}>
                  <div style={{
                    fontFamily: "'Inter', sans-serif",
                    fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase",
                    color: "#7FC6E3", marginBottom: 6, fontWeight: 500,
                  }}>{it[0]}</div>
                  <div style={{
                    fontFamily: "'Noto Sans JP', sans-serif",
                    fontSize: 13, color: "#E4F2F9",
                  }}>{it[1]}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Services });
