/* global React */
function TwoVsThree() {
  return (
    <section className="section two-three" id="two-three">
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">2-PARTY vs 3-PARTY</div>
          <h2 className="section-title">2社間 vs 3社間 — どちらを選ぶ？</h2>
          <p className="section-sub">急ぎ・秘密厳守なら「2社間」、手数料を抑えたいなら「3社間」</p>
        </div>

        <div className="compare-wrap">
          <div className="compare-card recommended">
            <span className="ribbon">急ぎ・秘密重視ならコレ</span>
            <h3 className="compare-title"><span className="num">2</span>社間ファクタリング</h3>
            <p className="compare-sub">利用者 ⇄ ファクタリング会社の2者で完結</p>
            <dl className="compare-attrs">
              <div className="compare-attr"><dt>手数料</dt><dd><span className="meh">8〜18% （やや高め）</span></dd></div>
              <div className="compare-attr"><dt>入金速度</dt><dd><span className="pos">最短2時間〜即日</span></dd></div>
              <div className="compare-attr"><dt>取引先への通知</dt><dd><span className="pos">不要（秘密厳守）</span></dd></div>
              <div className="compare-attr"><dt>必要書類</dt><dd>請求書・通帳・本人確認のみ</dd></div>
              <div className="compare-attr"><dt>こんな人に</dt><dd>今すぐ現金が必要／取引先に知られたくない</dd></div>
            </dl>
          </div>

          <div className="compare-card">
            <h3 className="compare-title"><span className="num">3</span>社間ファクタリング</h3>
            <p className="compare-sub">利用者 ⇄ 取引先 ⇄ ファクタリング会社の3者契約</p>
            <dl className="compare-attrs">
              <div className="compare-attr"><dt>手数料</dt><dd><span className="pos">1〜9% （安い）</span></dd></div>
              <div className="compare-attr"><dt>入金速度</dt><dd><span className="meh">数日〜2週間</span></dd></div>
              <div className="compare-attr"><dt>取引先への通知</dt><dd><span className="neg">必要（承諾が必要）</span></dd></div>
              <div className="compare-attr"><dt>必要書類</dt><dd>取引先の同意書・契約書類など</dd></div>
              <div className="compare-attr"><dt>こんな人に</dt><dd>大口案件・継続利用／コストを抑えたい</dd></div>
            </dl>
          </div>
        </div>
      </div>
    </section>
  );
}
window.TwoVsThree = TwoVsThree;