// Japanese page: Process (stacking cards), Why us, consultation band.
// Same structure and behaviour as ../sections-b.jsx; copy from the copy deck (P-*, Y-*, Q-* consultation variant).

const STEPS = [
  { t: '業務の流れを知る', wk: '1週目', d: '申請書、Excelファイル、チャットグループ、承認、レポートの作り方まで。今の業務の流れを、毎日それを使っている方々と一緒に確認します。', img: '../uploads/process_discover.webp' },
  { t: '最初の一手を決める', wk: '2週目', d: 'ダッシュボード、業務システム、顧客ポータル、自動化、AIアシスタント。何から着手すべきか、優先順位をつけた実践的なロードマップをお渡しします。', img: '../uploads/process_design.webp' },
  { t: 'チームと一緒につくる', wk: '3〜8週目', d: '実際に動く画面を順次お届けし、使う方々に試していただきながら、本番導入の前に現場の制約に合わせて調整します。', img: '../uploads/process_build.webp' },
  { t: '導入し、改善を続ける', wk: 'リリース後', d: '導入後もデータと現場の声をもとに改善を重ね、変化するニーズに応えながら、事業の成長と継続的な成果創出を支えます。', img: '../uploads/process_scale.webp' },
];

function Process() {
  return (
    <section className="process" id="process" aria-labelledby="process-title">
      <div className="process-head">
        <h2 id="process-title" className="t-display reveal">数か月ではなく、数週間で稼働。</h2>
        <p className="t-lede reveal r-d-1">
          まずは一番負担の大きい業務をひとつ選び、すぐに使える最初のバージョンをお届けしてから、次の領域へと広げていきます。
        </p>
      </div>
      <ol className="process-list">
        {STEPS.map((s, i) => (
          <li key={s.t} className="step" style={{ '--i': i }}>
            <article className="step-card">
              <div className="step-copy">
                <div className="step-meta">
                  <span>{String(i + 1).padStart(2, '0')}.</span>
                  <span>{s.wk}</span>
                </div>
                <div>
                  <h3 className="t-h3">{s.t}</h3>
                  <p>{s.d}</p>
                </div>
              </div>
              <div className="step-img"><img src={s.img} alt="" width="1024" height="1024" loading="lazy" /></div>
            </article>
          </li>
        ))}
      </ol>
    </section>
  );
}

function Why() {
  return (
    <section className="why" id="why" aria-labelledby="why-title">
      <div className="split">
        <div className="split-head">
          <p className="eyebrow reveal">選ばれる理由</p>
          <h2 id="why-title" className="t-display reveal r-d-1" style={{ marginTop: 20 }}>少数精鋭だから、速い。</h2>
          <p className="t-lede reveal r-d-2">
            経験豊富なエンジニアが、経営者や管理職、そして実際にシステムを使う方々と直接やり取りします。要件をまとめた担当者が、開発の最後まで責任を持って関わります。
          </p>
        </div>
        <div className="why-cards">
          <div className="why-card reveal">
            <div className="why-row">
              <span className="why-stat">4〜8<small>週間</small></span>
              <span className="why-bar"><span /> 最初のシステムが稼働</span>
            </div>
            <p>キックオフから、最初のシステムが現場で使えるようになるまでの一般的な期間です。</p>
          </div>
          <div className="why-card reveal">
            <div className="why-row">
              <span className="why-stat">1<small>チーム</small></span>
              <div className="why-chips" aria-hidden="true">
                {['ヒアリング', 'デザイン', '開発', 'AI', 'トレーニング', 'サポート'].map((c) => <span key={c}>{c}</span>)}
              </div>
            </div>
            <p>最初のワークショップからリリース後のサポートまで、ひとつのチームが担当します。複数の会社をまたぐ引き継ぎはありません。</p>
          </div>
          <div className="why-card why-card--dark reveal">
            <div className="why-row">
              <span className="why-stat">100<small>%</small></span>
            </div>
            <p style={{ marginTop: 20 }}>ソースコードやドキュメントを含め、開発したものはすべてお客様の資産です。特定の開発会社に縛られることはありません。</p>
          </div>
        </div>
      </div>
    </section>
  );
}

const QUOTE_STEPS = [
  ['ご連絡', 'メールでご連絡'],
  ['ヒアリング', 'オンラインで30分'],
  ['ご提案', '進め方と日程'],
  ['お見積もり', '日本円・項目別'],
  ['開発開始', '最初の機能から'],
];

const DOC_LINES = ['業務ヒアリング', 'ダッシュボード・レポート', '基幹システム機能', 'システム連携', 'トレーニング・引き継ぎ'];

function Quote() {
  const reduced = useReducedMotion();
  const docRef = React.useRef(null);

  // Scroll-linked: the sample quotation fills in line by line as the section scrolls up.
  useScrollFrame(() => {
    const el = docRef.current;
    if (!el) return;
    if (reduced) {
      el.style.removeProperty('--q');
      return;
    }
    const r = el.getBoundingClientRect();
    const vh = window.innerHeight;
    // Starts once the first line is on screen and finishes with the total in view.
    el.style.setProperty('--q', clamp01((vh * 0.78 - r.top) / (vh * 0.66)).toFixed(3));
  }, [reduced]);

  return (
    <section className="quote" id="quote" aria-labelledby="quote-title">
      <div className="quote-grid">
        <div>
          <p className="eyebrow reveal">無料相談 · オンライン30分</p>
          <h2 id="quote-title" className="t-display quote-title reveal r-d-1">まずは<span className="quote-hl">30分、</span>ご相談ください。</h2>
          <p className="quote-lede reveal r-d-2">
            事業内容と、いまお困りのことをお聞かせください。概算の費用とスケジュールの目安を、日本語でご案内します。
          </p>
          <div className="quote-actions reveal r-d-3">
            <QuoteLink className="btn btn-on-accent">まずは無料見積</QuoteLink>
            <a href={emailMailto} className="btn btn-white">メールで相談する</a>
          </div>
          <p className="quote-fine reveal r-d-3">ご相談は無料です。お見積もりは日本円（税込）でご提示します。</p>
          <ol className="quote-steps reveal">
            {QUOTE_STEPS.map(([b, s]) => <li key={b}><b>{b}</b>{s}</li>)}
          </ol>
        </div>
        <div ref={docRef} className="quote-doc-wrap reveal r-d-2" style={{ '--n': DOC_LINES.length + 3 }} aria-hidden="true">
          <div className="quote-doc quote-doc--back">
            <header><div><b>プロジェクト提案書</b><span>範囲 · スケジュール · 進め方</span></div></header>
            <div className="doc-lines">{[80, 64, 72, 50].map((w, k) => <div key={w} className="doc-bar" style={{ width: `${w}%`, '--k': k }} />)}</div>
          </div>
          <div className="quote-doc quote-doc--front">
            <span className="doc-stamp qd-step" style={{ '--k': DOC_LINES.length + 2 }}><span><b>30</b>分</span></span>
            <header className="qd-step" style={{ '--k': 0 }}>
              <div><b>御見積書</b><span>〇〇業務システム</span></div>
              <span className="doc-tag">サンプル</span>
            </header>
            <div className="doc-lines">
              {DOC_LINES.map((l, k) => (
                <div key={l} className="doc-line qd-step" style={{ '--k': k + 1 }}><span>{l}</span><span>¥ ·····</span></div>
              ))}
            </div>
            <div className="doc-total qd-step" style={{ '--k': DOC_LINES.length + 1 }}><span>概算合計</span><b>¥ ·····</b></div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Process, Why, Quote });