// Markets — reframed as "worldwide coverage" instead of listing specific platforms
function Markets({ lang }) {
  const t = (ja, en) => (lang === "ja" ? ja : en);

  const regions = [
    { code: "NA", ja: "北米", en: "North America", count: "US · CA · MX" },
    { code: "EU", ja: "欧州", en: "Europe", count: "27+ countries" },
    { code: "AP", ja: "アジア太平洋", en: "Asia Pacific", count: "JP · KR · SG · AU · NZ 他" },
    { code: "GC", ja: "大中華圏", en: "Greater China", count: "CN · HK · TW" },
    { code: "SEA", ja: "東南アジア", en: "Southeast Asia", count: "TH · VN · MY · PH 他" },
    { code: "LA", ja: "中南米", en: "Latin America", count: "BR · AR · CL 他" },
    { code: "ME", ja: "中東", en: "Middle East", count: "UAE · SA · IL 他" },
    { code: "ROW", ja: "その他", en: "Rest of World", count: t("発送可能地域", "Shipping-eligible regions") },
  ];

  return (
    <section id="markets" style={{
      padding: "140px 32px",
      background: "#FAFAF7",
      position: "relative",
    }}>
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <SectionLabel num="03" label={t("展開市場", "Markets")} />

        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: 72,
          alignItems: "end", marginTop: 48, marginBottom: 72,
        }} className="about-grid">
          <h2 style={{
            fontFamily: "'Cormorant Garamond', 'Noto Serif JP', serif",
            fontSize: "clamp(36px, 5vw, 72px)",
            fontWeight: 300, lineHeight: 1.1, color: "#0f2238",
            margin: 0, letterSpacing: "-0.01em",
          }}>
            {t(<>世界中の消費者へ、<br/>直接届ける。</>, <>Directly to consumers,<br/>worldwide.</>)}
          </h2>
          <p style={{
            fontFamily: "'Noto Sans JP', 'Inter', sans-serif",
            fontSize: 15, lineHeight: 1.9, color: "#4a5568",
            margin: 0, maxWidth: 480,
          }}>
            {t(
              "RIVERENCEは発送可能な国のほぼ全域をカバー。日本の商品を、世界中の消費者の手元まで直接お届けします。地域ごとの規制・税制・通関対応も、システムとオペレーションで標準化しています。",
              "RIVERENCE ships to nearly every country where delivery is possible. We send Japanese products directly to consumers around the world, with regulatory, tax, and customs handling standardized through our systems and operations."
            )}
          </p>
        </div>

        {/* Region grid */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
          gap: 1,
          background: "rgba(74,168,208,0.18)",
          border: "1px solid rgba(74,168,208,0.18)",
        }}>
          {regions.map((r, i) => (
            <RegionCard key={r.code} region={r} t={t} />
          ))}
        </div>

        {/* Summary stat block */}
        <div style={{
          marginTop: 72,
          padding: "48px 52px",
          background: "linear-gradient(135deg, #EAF6FB 0%, #CDE8F3 100%)",
          border: "1px solid rgba(74,168,208,0.2)",
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 48,
        }} className="markets-stats">
          {[
            { n: "100+", l: t("発送対応国", "Countries shipped") },
            { n: "24h", l: t("受注処理の自動化", "Automated order flow") },
            { n: "99.4%", l: t("配送追跡率", "Shipment tracking rate") },
          ].map((s, i) => (
            <div key={i}>
              <div style={{
                fontFamily: "'Cormorant Garamond', serif",
                fontSize: 54, fontWeight: 300, color: "#0f2238",
                lineHeight: 1, marginBottom: 10, letterSpacing: "-0.02em",
              }}>{s.n}</div>
              <div style={{
                fontFamily: "'Noto Sans JP', 'Inter', sans-serif",
                fontSize: 12, letterSpacing: "0.14em", color: "#2d6d94",
                fontWeight: 500, textTransform: "uppercase",
              }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function RegionCard({ region, t }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: hover ? "#0f2238" : "#FAFAF7",
        color: hover ? "#FAFAF7" : "#0f2238",
        padding: "44px 28px 32px",
        transition: "all 320ms",
        cursor: "default",
        position: "relative",
        overflow: "hidden",
        minHeight: 200,
        display: "flex", flexDirection: "column", justifyContent: "space-between",
      }}>
      <div style={{
        position: "absolute", top: 20, right: 24,
        width: 8, height: 8, borderRadius: 99,
        background: hover ? "#7FC6E3" : "#4AA8D0",
        boxShadow: hover ? "0 0 20px #7FC6E3" : "none",
        transition: "all 320ms",
      }} />
      <div>
        <div style={{
          fontFamily: "'Cormorant Garamond', serif",
          fontSize: 40, fontWeight: 300, letterSpacing: "0.08em",
          color: hover ? "#7FC6E3" : "#4AA8D0",
          marginBottom: 6, transition: "color 320ms",
        }}>
          {region.code}
        </div>
        <div style={{
          fontFamily: "'Noto Serif JP', 'Cormorant Garamond', serif",
          fontSize: 20, fontWeight: 400, marginBottom: 4,
        }}>
          {t(region.ja, region.en)}
        </div>
      </div>
      <div style={{ marginTop: 24 }}>
        <div style={{
          fontFamily: "'Inter', sans-serif",
          fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase",
          opacity: 0.6, marginBottom: 6,
        }}>{t("主な発送先", "Destinations")}</div>
        <div style={{
          fontFamily: "'Inter', 'Noto Sans JP', sans-serif",
          fontSize: 13, fontWeight: 500, letterSpacing: "0.02em",
        }}>
          {region.count}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Markets });