/* global React */

function Flow() {
  const steps = [
    {
      n: "01",
      t: "お問い合わせ",
      d: "お電話・LINEのいずれでも。品目と状況だけ、ざっくりで結構です。",
      means: ["TEL 090-7778-1111", "LINE友だち"],
      time: "所要 3分〜",
    },
    {
      n: "02",
      t: "無料お見積もり",
      d: "写真をお送りいただければ、その日のうちに概算を。訪問見積もりも0円です。",
      means: ["写真見積もり", "訪問見積もり", "他社見積チェック"],
      time: "最短当日",
    },
    {
      n: "03",
      t: "日程のご確定",
      d: "ご都合の良い日時をお伺いし、確定。急ぎの場合は即日の出動も可能です。",
      means: ["当日枠あり", "深夜早朝可", "法人一括日程"],
      time: "最短その日",
    },
    {
      n: "04",
      t: "当日作業",
      d: "ご挨拶から搬出、積込、最終確認まで。立会いなしでのご依頼も承ります。",
      means: ["近隣配慮", "養生作業", "確認写真"],
      time: "30分〜",
    },
    {
      n: "05",
      t: "お支払い",
      d: "現金・銀行振込（西日本シティ銀行）に対応。領収書・適格請求書を発行いたします。",
      means: ["現金 / 銀行振込", "領収書発行", "インボイス対応"],
      time: "作業完了時",
    },
  ];

  return (
    <section className="section" id="flow">
      <div className="container">
        <div className="section-head">
          <div><div className="idx">06 / 09 &nbsp; PROCESS</div></div>
          <div>
            <h2>ご依頼の流れは、<br />五つだけ。</h2>
            <p className="lede">
              お問い合わせから完了まで、最短でその日のうちに。<br />
              各工程のご連絡窓口と所要時間を明記しております。
            </p>
          </div>
        </div>

        <ol className="flow-list">
          {steps.map((s, i) => (
            <li className="flow-step" key={i}>
              <div className="flow-rail">
                <div className="flow-num mono">{s.n}</div>
                <div className="flow-line" />
              </div>
              <div className="flow-body">
                <div className="flow-head">
                  <h3 className="flow-t heading">{s.t}</h3>
                  <span className="flow-time mono">{s.time}</span>
                </div>
                <p className="flow-d">{s.d}</p>
                <div className="flow-means">
                  {s.means.map((m, j) => <span key={j} className="flow-chip mono">{m}</span>)}
                </div>
              </div>
            </li>
          ))}
        </ol>

        <div className="flow-foot">
          <div className="eyebrow">CANCELLATION</div>
          <p>
            日程確定後のキャンセルは、前日まで無料・当日は出動費実費（3,000円）を申し受けます。<br />
            ご事情のあるキャンセルは柔軟に対応いたしますので、ご遠慮なくお知らせください。
          </p>
        </div>
      </div>
    </section>
  );
}

window.Flow = Flow;