const STEPS = [
  {
    num: "01",
    title: "お問い合わせ",
    en: "INQUIRY",
    desc: "フォーム or メールで概要をお送りください。3営業日以内に返信します。",
    time: "0 day",
  },
  {
    num: "02",
    title: "ヒアリング",
    en: "DISCOVERY",
    desc: "対面 or オンラインで30〜60分。目的・読者・予算感を整理します。",
    time: "1 — 2 days",
  },
  {
    num: "03",
    title: "お見積り・契約",
    en: "PROPOSAL",
    desc: "構成案と見積書をお渡し。納得いただいてからご契約・着手金 30%。",
    time: "3 — 5 days",
  },
  {
    num: "04",
    title: "設計・デザイン",
    en: "DESIGN",
    desc: "原稿整理 → ワイヤー → デザイン。途中で2回まで方向修正できます。",
    time: "1 — 2 weeks",
  },
  {
    num: "05",
    title: "実装・確認",
    en: "BUILD",
    desc: "コーディングと動作確認。テスト環境で全ページご確認いただきます。",
    time: "1 — 2 weeks",
  },
  {
    num: "06",
    title: "公開・運用",
    en: "LAUNCH",
    desc: "本番公開・残金精算。納品後も小さな修正と更新相談を継続サポート。",
    time: "ongoing",
  },
];

function Process() {
  return (
    <section className="section process" id="process">
      <div className="section__inner">
        <div className="section__head">
          <div className="section__index">
            <span>SECTION</span><b>/ 04</b>
          </div>
          <h2 className="section__title">
            お問い合わせから公開まで、約 4 — 6 週間。
            <span className="en">Process / 6 steps</span>
          </h2>
        </div>

        <div className="process__list">
          {STEPS.map(s => (
            <div className="step" key={s.num}>
              <div className="step__num">STEP {s.num}</div>
              <h4>
                {s.title}
                <span className="en">{s.en}</span>
              </h4>
              <p>{s.desc}</p>
              <div className="step__time">⏱ {s.time}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Process });