/* global React, MYSOKU_DATA, Mysoku */
// 「あらゆる様式のマイソク」マーキーセクション ─ 20件をスクロール表示
// 仲介現場には多種多様なフォーマットでマイソクが流れ込むという事実を視覚化する。

const { useMemo: fwUseMemo } = React;

function FormatWall() {
  // 2行で逆方向にスクロール。それぞれシャッフルしたコピーを使い「同じ並びが続かない」感を出す
  const top = fwUseMemo(() => {
    // 偶数番目を集める + 奇数 = 20 件のまま順序だけバラす
    const order = [0, 4, 12, 8, 16, 2, 14, 6, 18, 10];
    return order.map((i) => MYSOKU_DATA[i]);
  }, []);
  const bot = fwUseMemo(() => {
    const order = [5, 1, 17, 11, 7, 13, 3, 19, 9, 15];
    return order.map((i) => MYSOKU_DATA[i]);
  }, []);

  return (
    <section id="formats" className="fw-section">
      <div className="container">
        <div className="section-header center">
          <span className="section-eyebrow">Universal input</span>
          <h2 className="section-title reveal">
            どんな様式の<em>マイソク</em>でも、<br />
            同じ見やすさで、お客様に。
          </h2>
          <p className="section-lead reveal delay-1">
            街の不動産仲介店舗には、毎日 何十種類ものフォーマットのマイソクが届きます。<br />
            ftool は、その全てを統一されたお客様向け公開ページに変換します。
          </p>
        </div>
      </div>

      <div className="fw-stage">
        {/* 上段マーキー — 左へ流れる */}
        <div className="fw-marquee fw-m-l">
          <div className="fw-track">
            {[...top, ...top].map((d, i) =>
            <div className="fw-card" key={`t-${i}`}>
                <Mysoku data={d} withLabel={false} />
                <span className="fw-card-tag">{d.brand}</span>
              </div>
            )}
          </div>
        </div>

        {/* 下段マーキー — 右へ流れる */}
        <div className="fw-marquee fw-m-r">
          <div className="fw-track">
            {[...bot, ...bot].map((d, i) =>
            <div className="fw-card" key={`b-${i}`}>
                <Mysoku data={d} withLabel={false} />
                <span className="fw-card-tag">{d.brand}</span>
              </div>
            )}
          </div>
        </div>

        {/* グラデーション・フェード(左右) */}
        <div className="fw-fade fw-fade-l"></div>
        <div className="fw-fade fw-fade-r"></div>
      </div>

      <div className="container">
        <div className="fw-stat-row">
          <div className="fw-stat">
            <span className="fw-stat-n">10</span>
            <span className="fw-stat-l">提案したい物件資料</span>
          </div>
          <div className="fw-stat-arrow">
            <svg width="32" height="20" viewBox="0 0 32 20" fill="none">
              <path d="M2 10 H28 M22 4 L28 10 L22 16" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>
          <div className="fw-stat">
            <span className="fw-stat-n">1</span>
            <span className="fw-stat-l">統一された公開ページ</span>
          </div>
        </div>
      </div>
    </section>);

}

window.FormatWall = FormatWall;