/* global React, Icons */

const OK_CRITERIA = [
  { icon: Icons.Shield, title: "金融庁への届出・登記が確認できる", desc: "貸金業登録は不要ですが、会社の実在性・所在地・代表者が明確であることを確認。" },
  { icon: Icons.Document, title: "契約書が明示され、事前に確認できる", desc: "口頭・メールだけの説明で契約を急かす会社は一切除外しました。" },
  { icon: Icons.Money, title: "手数料が明確で、隠れ費用がない", desc: "「手数料のみ」を明示しており、審査後に追加費用を請求しないことを確認済み。" },
  { icon: Icons.Check, title: "償還請求権なし（ノンリコース）が原則", desc: "売掛先が不払いでも利用企業に請求しない、正規のファクタリング形態であること。" },
  { icon: Icons.Eye, title: "審査結果・条件が書面で提示される", desc: "口頭のみの条件提示は信頼できません。書面・画面確認ができる会社のみ掲載。" },
];

const NG_CRITERIA = [
  "手数料が20%を大きく超える（目安以上の高額請求）",
  "「保証金」「登録料」「事務手数料」など名目不明の費用を請求する",
  "契約書に「償還請求権あり」の条項が入っている",
  "会社所在地・代表者名が不明確、またはWebサイトに記載がない",
  "「今日中に決めないとダメ」など契約を強引に急かしてくる",
  "給与ファクタリング（貸金業法違反の可能性）を取り扱っている",
];

function SelectionCriteria() {
  return (
    <section className="section criteria-section" id="criteria">
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">SELECTION CRITERIA</div>
          <h2 className="section-title">加瀬豪の掲載基準</h2>
          <p className="section-sub">「破産寸前まで追い込まれた経営者」だからわかる、本当に信頼できる業者の見分け方</p>
        </div>

        <div className="criteria-kase-card">
          <div className="criteria-kase-icon">
            <Icons.Shield style={{width:28,height:28}}/>
          </div>
          <div>
            <div className="criteria-kase-eyebrow">所長・加瀬豪より</div>
            <p className="criteria-kase-msg">
              「私は25年の経営の中で、何度も深刻な資金繰り危機を経験しました。
              当時、ファクタリングという手法を知っていれば、あの苦しい局面のいくつかは乗り越えられていたはずです。
              だからこそ、同じ苦しみを抱える経営者に<strong>本当に使える情報だけ</strong>を届けたい。
              掲載基準は厳しく設けており、以下の条件を満たさない会社は一切掲載していません。」
            </p>
          </div>
        </div>

        <div className="criteria-two-col">
          <div className="criteria-ok-wrap">
            <div className="criteria-col-head ok">
              <Icons.Check style={{width:18,height:18}}/> 掲載する会社の基準
            </div>
            <div className="criteria-ok-list">
              {OK_CRITERIA.map((c, i) => {
                const I = c.icon;
                return (
                  <div key={i} className="criteria-ok-item">
                    <div className="criteria-ok-icon"><I style={{width:20,height:20}}/></div>
                    <div>
                      <div className="criteria-ok-title">{c.title}</div>
                      <div className="criteria-ok-desc">{c.desc}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          <div className="criteria-ng-wrap">
            <div className="criteria-col-head ng">
              <Icons.Shield style={{width:18,height:18}}/> 除外した業者の特徴
            </div>
            <ul className="criteria-ng-list">
              {NG_CRITERIA.map((item, i) => (
                <li key={i} className="criteria-ng-item">
                  <span className="criteria-ng-mark">✕</span>
                  {item}
                </li>
              ))}
            </ul>
            <div className="criteria-ng-note">
              上記に1つでも該当する業者との契約はリスクが高く、場合によっては貸金業法違反・詐欺被害につながります。
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.SelectionCriteria = SelectionCriteria;