function Process() {
  useReveal();
  const steps = [
    { num: '壱', phase: 'PHASE 01', title: '対話・発見', body: '事業の文脈を深く理解するため、経営層・現場・エンドユーザーへのインタビューから始めます。', deliverable: ['成果物', 'Discovery Doc / 要件マトリクス'] },
    { num: '弐', phase: 'PHASE 02', title: '設計・合意', body: 'ユーザーフロー、ドメインモデル、アーキテクチャを同時に設計。「動く仕様」として合意します。', deliverable: ['成果物', 'Figma / ADR / ER図'] },
    { num: '参', phase: 'PHASE 03', title: '実装・検証', body: '2週間のスプリント。毎週、動くアプリを届けます。自動テストとCIを初日から整備。', deliverable: ['成果物', '動くプロダクト / E2Eテスト'] },
    { num: '四', phase: 'PHASE 04', title: '運用・改善', body: 'SLO監視、インシデント対応、継続的な機能改善。運用フェーズこそ本番です。', deliverable: ['成果物', 'SLOレポート / 改善提案'] },
    { num: '伍', phase: 'PHASE 05', title: '内製化・伴走', body: 'プロダクトはお客様のもの。知見・コード・運用ノウハウを丁寧にお渡しします。', deliverable: ['成果物', 'ハンドオフ / 教育資料'] },
  ];

  return (
    <section className="process" id="process">
      <div className="wrap">
        <div className="section-header reveal">
          <p className="h-eyebrow"><span className="num">06</span>OUR PROCESS — 開発の流れ</p>
          <h2 className="h-section">5つの段階で、<br/>一気通貫の共創を。</h2>
          <div className="meta-row">
            <span className="mono small">/ 平均プロジェクト期間 8ヶ月</span>
            <span className="mono small">壱 — 伍</span>
          </div>
        </div>
        <div className="process-steps reveal-stagger">
          {steps.map((s, i) => (
            <div className="step" key={i}>
              <div className="st-phase">{s.phase}</div>
              <div className="st-num">{s.num}</div>
              <h3 className="st-title">{s.title}</h3>
              <p className="st-body">{s.body}</p>
              <div className="st-deliverable">
                {s.deliverable[0]}
                <b>{s.deliverable[1]}</b>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Process });