// Japanese page: statement (gray -> accent wipe), Solutions card stack, Work showcase.
// Same structure and behaviour as ../sections-a.jsx; copy from the copy deck (S-*, SO-*, W-*).

function StatementText({ duplicate }) {
  const pill = duplicate
    ? <span className="st-pill">無料見積<Arrow /></span>
    : <QuoteLink className="st-pill">無料見積</QuoteLink>;
  return (
    <p className="statement-text">
      あなたのアイデアを、{' '}
      <span className="st-imgs" aria-hidden="true">
        <img src="../uploads/process_discover.webp" alt="" width="1024" height="1024" style={{ '--r': '-6deg' }} loading="lazy" />
        <img src="../uploads/process_build.webp" alt="" width="1024" height="1024" style={{ '--r': '5deg' }} loading="lazy" />
      </span>{' '}
      確実に機能する本番システムへ。迅速に立ち上げ、{' '}
      <span className="st-arrow" aria-hidden="true"><Arrow /></span>{' '}
      事業とともに成長し、確かな成果につなげます。{pill}
    </p>
  );
}

function Statement() {
  const reduced = useReducedMotion();
  const sectionRef = React.useRef(null);
  const stickyRef = React.useRef(null);

  useScrollFrame(() => {
    const section = sectionRef.current;
    const sticky = stickyRef.current;
    if (!section || !sticky) return;
    const p = reduced ? 0 : pinProgress(section);
    sticky.style.setProperty('--wipe', clamp01((p - 0.42) / 0.5).toFixed(4));
  }, [reduced]);

  return (
    <section ref={sectionRef} className="statement" id="about" aria-label="Next Horizon について">
      <div ref={stickyRef} className="statement-sticky">
        <div className="statement-layer">
          <StatementText />
        </div>
        <div className="statement-layer statement-layer--accent" aria-hidden="true">
          <StatementText duplicate />
        </div>
      </div>
    </section>
  );
}

const SERVICES = [
  { t: 'ダッシュボード・レポート', d: '営業・現場・経理の数字をリアルタイムで確認。日報・週報・月報も、Excelの更新を待たずに自動で作成されます。' },
  { t: '業務システム', d: '受発注、購買、承認、案件管理をひとつのシステムに。今の業務の進め方に合わせてつくります。' },
  { t: '在庫・受注管理', d: '在庫の動き、受注、配送、バーコード読み取り、発注アラートを一元管理。すべての拠点・倉庫をまとめて把握できます。' },
  { t: '予約・決済', d: 'オンライン予約、決済、リマインド、お客様のセルフサービスで、Lineとスプレッドシート頼みの運用から卒業できます。' },
  { t: '業務フローの自動化', d: '申請書、チェックリスト、承認、引き継ぎを紙やチャットから移行。誰が何をしたのか、記録がきちんと残ります。' },
  { t: 'システム連携', d: '会計ソフト、ECサイト、Line Businessなど、今お使いのツールと連携。同じデータを何度も入力する手間をなくします。' },
  { t: 'AIアシスタント', d: '書類の読み取り、社内からの質問への回答、返信文の下書き、写真のチェックまで。本当に手間が減るところにAIを組み込みます。' },
];

// Original line illustrations, one per service. Drawn on a 400x220 canvas.
function ServiceArt({ i }) {
  const a = 'var(--accent)';
  const w = 'rgba(255,255,255,0.85)';
  const m = 'rgba(255,255,255,0.22)';
  const g = 'rgba(255,255,255,0.08)';
  const arts = [
    // 0 dashboard: bars + trend line
    <g key="0">
      {[0, 1, 2, 3, 4, 5, 6, 7].map((k) => {
        const h = [60, 92, 74, 120, 104, 138, 116, 150][k];
        return <rect key={k} x={52 + k * 38} y={182 - h} width="22" height={h} rx="4" fill={k === 7 ? a : m} />;
      })}
      <path d="M60 128 L98 104 L136 116 L174 82 L212 92 L250 60 L288 70 L326 40" stroke={w} strokeWidth="3" fill="none" strokeLinejoin="round" />
      <circle cx="326" cy="40" r="7" fill={a} />
    </g>,
    // 1 ERP: connected modules
    <g key="1">
      {[[60, 40], [60, 136], [170, 88], [280, 40], [280, 136]].map(([x, y], k) => (
        <rect key={k} x={x} y={y} width="70" height="46" rx="10" fill={k === 2 ? a : g} stroke={k === 2 ? 'none' : m} strokeWidth="2" />
      ))}
      <path d="M130 63 H150 V111 H170 M130 159 H150 V111 M240 111 H260 V63 H280 M260 111 V159 H280" stroke={w} strokeWidth="2.5" fill="none" />
    </g>,
    // 2 inventory: shelving with boxes
    <g key="2">
      {[56, 118, 180].map((y) => <line key={y} x1="60" y1={y} x2="340" y2={y} stroke={m} strokeWidth="3" />)}
      {[
        [56, [[70, 40], [118, 30], [156, 46], [212, 36], [258, 28], [296, 38]]],
        [118, [[74, 34], [116, 46], [172, 30], [212, 48], [270, 34]]],
        [180, [[68, 38], [114, 30], [152, 44], [206, 34], [250, 48], [306, 28]]],
      ].map(([shelf, boxes], r) => boxes.map(([x, s], k) => {
        const hot = r === 1 && k === 3;
        return <rect key={`${r}-${k}`} x={x} y={shelf - s - 2} width={s} height={s} rx="4" fill={hot ? a : g} stroke={hot ? 'none' : w} strokeOpacity="0.5" strokeWidth="2" />;
      }))}
    </g>,
    // 3 booking: calendar with booked slots
    <g key="3">
      <rect x="70" y="26" width="260" height="170" rx="12" fill={g} stroke={m} strokeWidth="2" />
      <rect x="88" y="39" width="70" height="8" rx="4" fill={w} />
      <rect x="250" y="33" width="64" height="20" rx="10" fill={a} />
      <text x="282" y="47" textAnchor="middle" fontSize="10" fontFamily="Inter Tight, Hiragino Sans, Noto Sans JP, sans-serif" fontWeight="600" fill="#0b0b0b">支払済</text>
      <line x1="70" y1="62" x2="330" y2="62" stroke={m} strokeWidth="2" />
      {Array.from({ length: 21 }, (_, k) => {
        const booked = [2, 5, 9, 10, 15, 19].includes(k);
        return <rect key={k} x={88 + (k % 7) * 34} y={76 + Math.floor(k / 7) * 38} width="24" height="24" rx="6" fill={booked ? (k === 10 ? a : w) : m} fillOpacity={booked && k !== 10 ? 0.75 : 1} />;
      })}
    </g>,
    // 4 workflow: checklist
    <g key="4">
      {[0, 1, 2, 3].map((k) => (
        <g key={k}>
          <rect x="96" y={34 + k * 42} width="26" height="26" rx="7" fill={k === 2 ? 'none' : a} stroke={k === 2 ? '#ff6b5e' : 'none'} strokeWidth="2.5" />
          {k !== 2 && <path d={`M102 ${47 + k * 42} l6 6 l10 -12`} stroke="#0b0b0b" strokeWidth="3" fill="none" strokeLinecap="round" />}
          {k === 2 && <path d="M103 125 l12 12 M115 125 l-12 12" stroke="#ff6b5e" strokeWidth="2.5" strokeLinecap="round" />}
          <rect x="138" y={42 + k * 42} width={[150, 120, 164, 104][k]} height="10" rx="5" fill={k === 2 ? w : m} />
        </g>
      ))}
    </g>,
    // 5 integrations: hub and spokes
    <g key="5">
      {[[84, 56], [84, 164], [316, 56], [316, 164], [200, 30], [200, 190]].map(([x, y], k) => (
        <g key={k}>
          <line x1="200" y1="110" x2={x} y2={y} stroke={k === 2 ? w : m} strokeWidth="2.5" strokeDasharray={k === 2 ? 'none' : '6 6'} />
          <rect x={x - 20} y={y - 18} width="40" height="36" rx="9" fill="#0f1012" stroke={k === 2 ? w : m} strokeWidth="2" />
        </g>
      ))}
      <circle cx="200" cy="110" r="30" fill={a} />
      <path d="M188 110 h24 M204 102 l8 8 l-8 8" stroke="#0b0b0b" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round" />
    </g>,
    // 6 AI assistant: chat exchange
    <g key="6">
      <rect x="60" y="30" width="196" height="58" rx="16" fill={g} stroke={m} strokeWidth="2" />
      <rect x="80" y="49" width="132" height="8" rx="4" fill={w} />
      <rect x="80" y="65" width="92" height="8" rx="4" fill={m} />
      <rect x="140" y="106" width="200" height="80" rx="16" fill={a} />
      {[146, 128, 84].map((wd, k) => <rect key={k} x="160" y={126 + k * 16} width={wd} height="8" rx="4" fill="#0b0b0b" fillOpacity={k === 0 ? 0.75 : 0.45} />)}
      <path d="M96 116 L102 134 L120 140 L102 146 L96 164 L90 146 L72 140 L90 134 Z" fill={w} />
      <path d="M300 40 L303 50 L313 53 L303 56 L300 66 L297 56 L287 53 L297 50 Z" fill={a} />
    </g>,
  ];
  return (
    <svg viewBox="0 0 400 220" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
      <rect width="400" height="220" fill="#0f1012" />
      {arts[i]}
    </svg>
  );
}

function Solutions() {
  const reduced = useReducedMotion();
  const sectionRef = React.useRef(null);
  const [active, setActive] = React.useState(0);
  const n = SERVICES.length;

  useScrollFrame(() => {
    const section = sectionRef.current;
    if (!section || reduced) return;
    const p = pinProgress(section);
    const idx = Math.min(n - 1, Math.floor(p * n * 0.999));
    setActive((prev) => (prev === idx ? prev : idx));
  }, [reduced]);

  return (
    <section ref={sectionRef} className="solutions" id="solutions" style={{ '--n': n }} aria-labelledby="solutions-title">
      <div className="solutions-sticky">
        <div className="solutions-copy">
          <h2 id="solutions-title" className="solutions-lead">
            実績ある手法とムダのないプロセスで、最初のワークショップから本番稼働まで、アイデアを確実にかたちにします。
          </h2>
          <div className="solutions-foot">
            <p>まずは一番困っている業務から。準備ができたら、次の機能へそのままつなげられます。</p>
            {!reduced && (
              <span className="solutions-count" aria-hidden="true">
                {String(active + 1).padStart(2, '0')} / {String(n).padStart(2, '0')}
              </span>
            )}
          </div>
        </div>
        <ol className="card-stack">
          {SERVICES.map((s, i) => {
            const d = i - active;
            const cls = d < 0 ? ' is-gone' : '';
            return (
              <li
                key={s.t}
                className={`svc-card${cls}`}
                style={{ '--d': Math.max(0, Math.min(d, 3)), opacity: d > 3 ? 0 : undefined }}
              >
                <span className="svc-num">{String(i + 1).padStart(2, '0')}.</span>
                <div className="svc-body">
                  <h3 className="svc-title">{s.t}</h3>
                  <p className="svc-desc">{s.d}</p>
                </div>
                <div className="svc-art"><ServiceArt i={i} /></div>
              </li>
            );
          })}
        </ol>
      </div>
    </section>
  );
}

// Example builds: drawn sample screens, one per kind of system. Not client work; all figures are sample data.

function WsSide({ active }) {
  return (
    <div className="ws-side">
      <span className="ws-logo" />
      {[0, 1, 2, 3, 4].map((k) => <span key={k} className={`ws-nav${k === active ? ' is-on' : ''}`} />)}
    </div>
  );
}

function WsTop({ title, chip }) {
  return (
    <div className="mock-top">
      <span className="mock-dot" /><span className="mock-dot" /><span className="mock-dot" />
      <span className="mock-title">{title}</span>
      <span className="ws-chip">{chip}</span>
    </div>
  );
}

function ScreenDashboard() {
  const bars = [34, 52, 46, 70, 62, 84, 58, 76, 92, 66, 48, 30];
  const branches = [['A店', '順調', 'ok', 92], ['B店', '混雑', 'warn', 71], ['C店', '遅延', 'bad', 48], ['D店', '順調', 'ok', 88], ['オンラインストア', '順調', 'ok', 95]];
  return (
    <>
      <WsTop title="稼働状況" chip="全店舗 · 本日" />
      <div className="ws-body">
        <WsSide active={0} />
        <div className="ws-main ws-dash">
          <div className="ws-kpis">
            <div className="ws-kpi"><small>受注件数</small><b>1,248</b><i className="ok">前週比 +8%</i></div>
            <div className="ws-kpi"><small>対応中</small><b>36</b><i>本日期限 12件</i></div>
            <div className="ws-kpi"><small>期限超過</small><b>4</b><i className="bad">要フォロー 2件</i></div>
            <div className="ws-kpi ws-kpi--accent"><small>納期遵守率</small><b>94%</b><i>目標 90%</i></div>
          </div>
          <div className="ws-card ws-chart">
            <div className="ws-card-head"><b>時間帯別の受注</b><span>リアルタイム</span></div>
            <div className="ws-bars">{bars.map((h, k) => <span key={k} className={k === 8 ? 'is-peak' : ''} style={{ height: `${h}%` }} />)}</div>
            <div className="ws-axis"><span>8:00</span><span>12:00</span><span>16:00</span><span>19:00</span></div>
          </div>
          <div className="ws-card ws-list">
            <div className="ws-card-head"><b>店舗別の状況</b></div>
            {branches.map(([n, s, c, v]) => (
              <div key={n} className="ws-branch">
                <span>{n}</span><em className={`ws-badge ${c}`}>{s}</em>
                <span className="ws-meter"><span className={c} style={{ width: `${v}%` }} /></span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}

function ScreenOrders() {
  const cols = [
    ['新規', 12, [['SO-2291', '24点', ''], ['SO-2292', '6点', ''], ['SO-2293', '11点', '']]],
    ['承認待ち', 5, [['SO-2287', '値引き 12%', 'approve'], ['SO-2288', '与信枠の確認', 'approve']]],
    ['梱包中', 8, [['SO-2280', 'ピッキング 18/24', 'warn', 75], ['SO-2283', 'ピッキング 9/9', 'ok', 100], ['SO-2284', 'ピッキング 3/12', 'warn', 25]]],
    ['配送中', 6, [['SO-2276', '到着予定 15:40', 'ok', 100], ['SO-2278', '到着予定 17:10', 'ok', 100], ['SO-2279', '到着予定 18:00', 'ok', 100]]],
  ];
  const stages = [['新規', 12], ['承認', 5], ['梱包', 8], ['配送中', 6], ['配送済み', 41]];
  return (
    <>
      <WsTop title="受注 → 配送" chip="今週" />
      <div className="ws-body">
        <WsSide active={1} />
        <div className="ws-main ws-orders">
          <div className="ws-stages">
            {stages.map(([s, n], k) => <div key={s} className={`ws-stage${k === 4 ? ' is-done' : ''}`}><b>{n}</b><small>{s}</small></div>)}
          </div>
          <div className="ws-board">
            {cols.map(([name, total, cards]) => (
              <div key={name} className="ws-col">
                <div className="ws-col-head"><b>{name}</b><span>{total}</span></div>
                {cards.map(([id, sub, state, pct]) => (
                  <div key={id} className="ws-ticket">
                    <div className="ws-ticket-top"><b>{id}</b><span className="ws-ava" /></div>
                    <small>{sub}</small>
                    {state === 'approve'
                      ? <div className="ws-ticket-act"><em className="ws-badge warn">上長の承認待ち</em><span className="ws-btn">承認</span></div>
                      : state && <div className="ws-ticket-act"><span className="ws-meter"><span className={state} style={{ width: `${pct}%` }} /></span></div>}
                  </div>
                ))}
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}

function ScreenBooking() {
  const days = Array.from({ length: 35 }, (_, k) => k - 2);
  const slots = [['9:00', 'taken'], ['9:30', ''], ['10:00', 'taken'], ['10:30', 'is-on'], ['11:00', ''], ['11:30', ''], ['14:00', 'taken'], ['14:30', ''], ['15:00', '']];
  return (
    <>
      <WsTop title="ご来店予約" chip="お客様画面" />
      <div className="ws-body ws-body--portal">
        <div className="ws-main ws-book">
          <ol className="ws-steps">
            <li className="is-done">メニュー</li><li className="is-on">日時</li><li>予約金</li><li>予約完了</li>
          </ol>
          <div className="ws-card ws-cal">
            <div className="ws-card-head"><b>10月</b><span>‹ ›</span></div>
            <div className="ws-cal-grid">
              {['月', '火', '水', '木', '金', '土', '日'].map((d, k) => <small key={`h${k}`}>{d}</small>)}
              {days.map((d) => <span key={d} className={d === 23 ? 'is-on' : d === 21 ? 'is-today' : d < 1 || d > 31 ? 'is-off' : ''}>{d < 1 || d > 31 ? '' : d}</span>)}
            </div>
          </div>
          <div className="ws-stack">
            <div className="ws-card ws-slots">
              <div className="ws-card-head"><b>10月23日（金）</b><span>空き 6枠</span></div>
              <div className="ws-slot-grid">{slots.map(([t, c]) => <span key={t} className={c}>{t}</span>)}</div>
            </div>
            <div className="ws-toast"><span className="ws-bell" /><div><b>リマインドを設定しました</b><small>前日にLINEとメールでお知らせ</small></div></div>
          </div>
          <div className="ws-card ws-summary">
            <div className="ws-card-head"><b>ご予約内容</b></div>
            <dl>
              <div><dt>メニュー</dt><dd>ご相談 · 60分</dd></div>
              <div><dt>日時</dt><dd>10月23日（金）10:30</dd></div>
              <div><dt>担当</dt><dd>指名なし</dd></div>
              <div><dt>予約金</dt><dd>¥5,000</dd></div>
            </dl>
            <small className="ws-fine">24時間前まで、日時の変更は無料です。</small>
            <span className="ws-pay">予約金を支払う</span>
            <div className="ws-methods"><span>カード</span><span>コンビニ</span><span>PayPay</span></div>
          </div>
        </div>
      </div>
    </>
  );
}

function ScreenInventory() {
  const rows = [
    ['梱包用段ボール（M）', 'PK-104', 1840, 82, 'ok', '在庫あり'],
    ['感熱ラベル', 'LB-220', 96, 18, 'bad', '要発注'],
    ['清掃キット', 'CL-031', 240, 46, 'warn', '残りわずか'],
    ['プリンタートナー', 'TN-512', 6, 9, 'bad', '要発注'],
    ['梱包テープ', 'TP-077', 610, 74, 'ok', '在庫あり'],
    ['作業用手袋（箱）', 'GL-210', 58, 14, 'bad', '要発注'],
    ['緩衝材ロール', 'BW-118', 320, 66, 'ok', '在庫あり'],
    ['レシート用紙', 'RP-045', 410, 58, 'ok', '在庫あり'],
  ];
  return (
    <>
      <WsTop title="在庫状況" chip="メイン倉庫" />
      <div className="ws-body">
        <WsSide active={2} />
        <div className="ws-main ws-inv">
          <div className="ws-alert"><span className="ws-alert-dot" /><b>3品目が発注点を下回っています。</b><span>発注書の下書きを作成しました。</span><span className="ws-btn">発注書を確認</span></div>
          <div className="ws-kpis ws-kpis--3">
            <div className="ws-kpi"><small>取扱品目</small><b>842</b><i>2拠点の合計</i></div>
            <div className="ws-kpi"><small>在庫僅少</small><b>4</b><i className="bad">3品目が発注点</i></div>
            <div className="ws-kpi"><small>入荷予定</small><b>5件</b><i className="ok">本日入荷 2件</i></div>
          </div>
          <div className="ws-card ws-table">
            <div className="ws-tr ws-th"><span>品目</span><span>品番</span><span>在庫数</span><span>水準</span><span>状態</span></div>
            {rows.map(([n, sku, q, lvl, c, s]) => (
              <div key={sku} className="ws-tr">
                <span>{n}</span><span className="ws-mono">{sku}</span><span>{q.toLocaleString('en-US')}</span>
                <span className="ws-meter"><span className={c} style={{ width: `${lvl}%` }} /></span>
                <span><em className={`ws-badge ${c}`}>{s}</em></span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}

const WORK_ITEMS = [
  { t: '全店舗の稼働状況をリアルタイムで一覧', tag: 'ダッシュボード', bg: '../uploads/process_scale.webp', Screen: ScreenDashboard, label: 'ダッシュボードのサンプル画面：受注件数、納期遵守率、時間帯別の受注、店舗ごとの状況' },
  { t: '承認フロー付きの受注〜配送管理', tag: '業務システム', bg: '../uploads/process_design.webp', Screen: ScreenOrders, label: '業務システムのサンプル画面：新規受注から承認、梱包、配送までの流れ' },
  { t: 'オンライン予約・決済・リマインド', tag: '顧客ポータル', bg: '../uploads/process_discover.webp', Screen: ScreenBooking, label: '顧客ポータルのサンプル画面：日時を選び、予約金を支払い、リマインドを受け取る' },
  { t: '自動発注アラート付きの在庫管理', tag: '在庫管理', bg: '../uploads/process_build.webp', Screen: ScreenInventory, label: '在庫管理のサンプル画面：品目ごとの在庫数と発注アラート、発注書の下書き' },
];

function WorkMedia({ children, className = '' }) {
  const ref = React.useRef(null);
  const reduced = useReducedMotion();
  useScrollFrame(() => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const vh = window.innerHeight;
    if (r.bottom < 0 || r.top > vh) return;
    const centre = (r.top + r.height / 2 - vh / 2) / vh; // -1..1 roughly
    el.style.setProperty('--par', reduced ? '0px' : `${(centre * -60).toFixed(1)}px`);
    el.style.setProperty('--sc', reduced ? '1' : (1 - Math.min(0.06, Math.abs(centre) * 0.08)).toFixed(3));
  }, [reduced]);
  return <div ref={ref} className={`work-media ${className}`.trim()}>{children}</div>;
}

function Work() {
  return (
    <section className="work" id="work" aria-labelledby="work-title">
      <div className="work-head">
        <h2 id="work-title" className="t-display reveal">事例</h2>
      </div>

      <div className="work-item">
        <WorkMedia className="work-media--feature">
          <div className="work-media-inner" aria-hidden="true" />
          <div className="work-screen-wrap">
            <figure className="work-shot">
              <div className="mock-top" aria-hidden="true">
                <span className="mock-dot" /><span className="mock-dot" /><span className="mock-dot" />
                <span className="mock-title">{QUOTE_HOST}</span>
              </div>
              <img
                src="../uploads/work_quote_app.webp"
                alt="Next Horizonのプロジェクト自動見積もりツールの画面"
                width="1600" height="1000" loading="lazy"
              />
            </figure>
          </div>
        </WorkMedia>
        <div className="work-caption">
          <h3>自社で開発・運用する、プロジェクト自動見積もりツール</h3>
          <p><a href={QUOTE_URL}>{QUOTE_HOST}</a> · 稼働中</p>
        </div>
      </div>

      {WORK_ITEMS.map(({ t, tag, bg, Screen, label }) => (
        <div className="work-item" key={t}>
          <WorkMedia>
            <div className="work-media-inner" aria-hidden="true"><img src={bg} alt="" width="1024" height="1024" loading="lazy" /></div>
            <div className="work-screen-wrap">
              <figure className="work-shot ws" role="img" aria-label={label}>
                <div className="ws-inner" aria-hidden="true"><Screen /></div>
              </figure>
            </div>
          </WorkMedia>
          <div className="work-caption">
            <h3>{t}</h3>
            <p>{tag}</p>
          </div>
        </div>
      ))}

    </section>
  );
}

Object.assign(window, { Statement, Solutions, Work });