/* global React, Icons */
function AboutFactoring() {
  const flow = [
    { icon: Icons.Document, title: "請求書を準備", desc: "売掛金の請求書を用意" },
    { icon: Icons.Chat, title: "オンラインで申込", desc: "最短数分で完了" },
    { icon: Icons.Eye, title: "審査・契約", desc: "最短2時間で結果通知" },
    { icon: Icons.Money, title: "口座へ入金", desc: "手数料を引いた金額が振込" },
  ];

  return (
    <section className="section about-factoring" id="about">
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">ABOUT FACTORING</div>
          <h2 className="section-title">ファクタリングとは？</h2>
          <p className="section-sub">「請求書（売掛債権）を売って早期に現金化する」資金調達手法。借入ではないため負債計上されません。</p>
        </div>

        <div className="flow-grid">
          {flow.map((f, i) => {
            const I = f.icon;
            return (
              <div className="flow-card" key={i}>
                <div className="flow-num">{i + 1}</div>
                <div className="flow-icon"><I/></div>
                <div className="flow-title">{f.title}</div>
                <div className="flow-desc">{f.desc}</div>
                <Icons.ArrowRight className="flow-arrow"/>
              </div>
            );
          })}
        </div>

        <div className="facts-grid">
          <div className="fact-card">
            <div className="fact-q"><span className="q-mark">Q.</span>融資との違いは？</div>
            <div className="fact-a">借入ではなく「債権の売買」。負債計上されず、信用情報にも影響しません。</div>
          </div>
          <div className="fact-card">
            <div className="fact-q"><span className="q-mark">Q.</span>違法ではない？</div>
            <div className="fact-a">合法な資金調達手法。経済産業省も中小企業の資金調達策として推奨しています。</div>
          </div>
          <div className="fact-card">
            <div className="fact-q"><span className="q-mark">Q.</span>取引先にバレる？</div>
            <div className="fact-a">2社間ファクタリングなら取引先への通知・承諾は不要。秘密を守れます。</div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.AboutFactoring = AboutFactoring;