// Hero — full-bleed with flowing river background, large serif headline, scroll cue
function Hero({ lang, accent }) {
  const t = (ja, en) => (lang === "ja" ? ja : en);

  return (
    <section id="top" style={{
      position: "relative",
      minHeight: "100vh",
      display: "flex",
      alignItems: "center",
      overflow: "hidden",
      background: "linear-gradient(180deg, #F4FAFD 0%, #E4F2F9 55%, #CDE8F3 100%)",
    }}>
      <RiverBackground intensity={1} tone="light" />

      {/* Content */}
      <div style={{
        position: "relative", zIndex: 2,
        maxWidth: 1320, margin: "0 auto", padding: "140px 32px 100px",
        width: "100%",
      }}>
        <div style={{ maxWidth: 860 }}>
          <div style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            padding: "8px 16px",
            background: "rgba(255,255,255,0.72)",
            border: "1px solid rgba(74,168,208,0.28)",
            borderRadius: 999,
            marginBottom: 34,
            backdropFilter: "blur(8px)",
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 99, background: accent, animation: "pulse 2.4s ease-in-out infinite" }} />
            <span style={{
              fontFamily: "'Inter', 'Noto Sans JP', sans-serif",
              fontSize: 11, letterSpacing: "0.22em", fontWeight: 500,
              color: "#1a4a6a", textTransform: "uppercase",
            }}>
              {t("越境ECカンパニー", "Cross-border E-Commerce")}
            </span>
          </div>

          <h1 style={{
            fontFamily: "'Cormorant Garamond', 'Noto Serif JP', serif",
            fontSize: "clamp(44px, 7.2vw, 104px)",
            fontWeight: 300,
            lineHeight: 1.02,
            letterSpacing: "-0.01em",
            color: "#0f2238",
            margin: "0 0 28px",
            textWrap: "balance",
          }}>
            {t(<>日本の価値を、<br/>世界の市場へ。</>, <>Japanese value,<br/>to global markets.</>)}
          </h1>

          <p style={{
            fontFamily: "'Noto Sans JP', 'Inter', sans-serif",
            fontSize: "clamp(15px, 1.15vw, 18px)",
            lineHeight: 1.85,
            color: "#2a3a52",
            maxWidth: 620,
            margin: "0 0 44px",
            fontWeight: 400,
            letterSpacing: "0.02em",
          }}>
            {t(
              "RIVERENCE株式会社は、日本の優れた商品を海外の消費者へ届ける越境ECの専門会社です。製品選定から物流、マーケティング、カスタマーサポートまで、一気通貫でご提供します。",
              "RIVERENCE is a cross-border e-commerce partner for Japanese brands. From product selection and logistics to marketing and customer support — we handle the entire journey, end to end."
            )}
          </p>

          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <button onClick={() => document.getElementById("contact")?.scrollIntoView({ behavior: "smooth" })}
              className="btn-primary"
              style={{
                padding: "16px 32px",
                background: "linear-gradient(135deg, #4AA8D0 0%, #2d6d94 100%)",
                color: "#fff", border: "none", borderRadius: 999,
                fontFamily: "'Noto Sans JP', 'Inter', sans-serif",
                fontSize: 14, fontWeight: 500, letterSpacing: "0.08em",
                cursor: "pointer",
                boxShadow: "0 10px 30px rgba(45,109,148,0.28)",
                transition: "all 240ms",
              }}>
              {t("ご相談はこちら →", "Start a conversation →")}
            </button>
            <button onClick={() => document.getElementById("services")?.scrollIntoView({ behavior: "smooth" })}
              className="btn-ghost"
              style={{
                padding: "16px 28px",
                background: "transparent",
                color: "#1a4a6a", border: "1px solid rgba(45,109,148,0.36)", borderRadius: 999,
                fontFamily: "'Noto Sans JP', 'Inter', sans-serif",
                fontSize: 14, fontWeight: 500, letterSpacing: "0.08em",
                cursor: "pointer",
                transition: "all 240ms",
              }}>
              {t("サービスを見る", "Explore services")}
            </button>
          </div>
        </div>

        {/* Stats row */}
        <div style={{
          marginTop: 96,
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
          gap: 40,
          maxWidth: 900,
          paddingTop: 36,
          borderTop: "1px solid rgba(26,74,106,0.14)",
        }}>
          {[
            { n: "100+", l: t("発送対応国", "Markets shipped") },
            { n: "200+", l: t("取扱ブランド", "Brands shipped") },
            { n: "\n", l: t("\n", "\n") },
            { n: "24/7", l: t("多言語サポート", "Multilingual support") },
          ].map((s, i) => (
            <div key={i} style={{ padding: "0px" }}>
              <div style={{
                fontFamily: "'Noto Sans JP'",
                fontSize: 44, fontWeight: 400,
                color: "#0f2238", lineHeight: 1,
                marginBottom: 8,
              }}>{s.n}</div>
              <div style={{
                fontFamily: "'Noto Sans JP', 'Inter', sans-serif",
                fontSize: 12, letterSpacing: "0.1em",
                color: "#2a3a52", opacity: 0.75,
              }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Scroll cue */}
      <div style={{
        position: "absolute", bottom: 28, left: "50%", transform: "translateX(-50%)",
        zIndex: 3, display: "flex", flexDirection: "column", alignItems: "center", gap: 8,
        opacity: 0.7,
      }}>
        <span style={{
          fontFamily: "'Inter', sans-serif", fontSize: 10, letterSpacing: "0.24em",
          color: "#1a4a6a", textTransform: "uppercase",
        }}>Scroll</span>
        <div style={{ width: 1, height: 44, background: "#1a4a6a", animation: "scrollCue 2.2s ease-in-out infinite", transformOrigin: "top" }} />
      </div>
    </section>
  );
}

Object.assign(window, { Hero });