// Hero B — Kinetic typography marquee
function HeroB() {
  const rowA = ["Who", "are", "you?", "What", "do", "you", "want?"];
  const rowB = ["意思", "経験", "関係性", "言語化", "実装", "接続"];
  const rowC = ["YOU", "MAKE", "THE", "DIFFERENCE"];

  const repeat = (arr, n) => Array.from({ length: n }, () => arr).flat();

  return (
    <section className="hero hero-b">
      <div className="kinetic-stack">
        <div className="kinetic-row dir-left">
          {repeat(rowA, 4).map((w, i) => (
            <span
              key={`a${i}`}
              className={`word ${i % 3 === 1 ? "brand" : i % 3 === 2 ? "outline" : "ink"}`}
            >{w}</span>
          ))}
        </div>
        <div className="kinetic-row dir-right">
          {repeat(rowB, 6).map((w, i) => (
            <span key={`b${i}`} className={`word ${i % 2 === 0 ? "outline" : "brand"}`}>{w}<span className="sep">・</span></span>
          ))}
        </div>
        <div className="kinetic-row dir-left">
          {repeat(rowC, 4).map((w, i) => (
            <span key={`c${i}`} className={`word ${w === "YOU" ? "brand" : "ink"}`}>{w}</span>
          ))}
        </div>
      </div>

      <div className="container hero-inner">
        <div className="hero-copy">
          <h1 className="hero-title reveal in d1" style={{ fontSize: "90px", whiteSpace: "nowrap" }}>
            <span className="brand-word jp">『自分だけ』</span>
            <span className="jp">らしく。</span>
          </h1>
          <p className="hero-sub reveal in d2" style={{ whiteSpace: "pre-line" }}>
            いつの時代も、人が向きべきは「何をしたいか」「自分は何者か」という問い。{"\n"}Who-nextは、その問いに対する答えを言語化し、実装し、社会に接続します。
          </p>
          <div className="hero-actions reveal in d3">
            <a href="#contact" className="btn-primary">
              <span>お問い合わせ</span><span>→</span>
            </a>
            <a href="#services" className="btn-ghost">事業を見る</a>
          </div>
        </div>
      </div>
    </section>
  );
}
window.HeroB = HeroB;