/* global React */

const TERMS = [
  { tag: "基本", name: "ファクタリング", desc: "売掛債権をファクタリング会社に売却し、入金期日前に現金化する資金調達手法。借入ではなく債権売買のため負債が増えない。" },
  { tag: "基本", name: "売掛債権", yomi: "うりかけさいけん", desc: "商品・サービスを提供した後に代金を受け取る権利（売掛金）。ファクタリングはこれを売却して現金化する。" },
  { tag: "種類", name: "2社間ファクタリング", desc: "利用企業とファクタリング会社の2者間で完結。取引先への通知不要。手数料は高めだが最短当日入金が可能。" },
  { tag: "種類", name: "3社間ファクタリング", desc: "利用企業・ファクタリング会社・売掛先の3者間で行う。取引先の承諾が必要だが手数料が低い（1〜9%）。" },
  { tag: "重要", name: "償還請求権", yomi: "しょうかんせいきゅうけん", desc: "売掛先が不払いの際にファクタリング会社が利用企業へ返還を求める権利。「ありの契約」は悪質業者の典型。正規のファクタリングは「なし（ノンリコース）」。" },
  { tag: "費用", name: "手数料", desc: "売掛金額に対して差し引かれる費用（%）。2社間5〜20%、3社間1〜9%が相場。売掛先の信用力・金額・残り日数で変動。" },
  { tag: "費用", name: "掛け目", yomi: "かけめ", desc: "売掛金額に対して実際に買い取る割合。掛け目80%なら100万円の売掛金に対し買取上限は80万円。" },
  { tag: "基本", name: "ノンリコース", desc: "「償還請求権なし」のこと。売掛先が不払いでも利用企業は責任を負わない。正規のファクタリングの形態。" },
  { tag: "基本", name: "資金繰り", yomi: "しきんぐり", desc: "企業の入出金の管理・計画。利益が出ていても現金が不足する「黒字倒産」を防ぐためのキャッシュフロー管理。" },
  { tag: "基本", name: "黒字倒産", yomi: "くろじとうさん", desc: "損益上は黒字でも手元現金が不足して倒産すること。売掛金の回収遅れが主因。ファクタリングで防げるケースがある。" },
  { tag: "基本", name: "入金サイト", yomi: "にゅうきんさいと", desc: "請求書発行から実際の入金までの期間。サイトが長い（例：90日後）ほど手元資金が不足しやすい。" },
  { tag: "種類", name: "注文書ファクタリング", desc: "請求書ではなく受注時の注文書を担保に資金調達する手法。建設業・製造業で仕事完了前に先行費用が必要な場合に有効。" },
];

function Glossary() {
  return (
    <section className="section glossary-section" id="glossary">
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">GLOSSARY</div>
          <h2 className="section-title">用語集</h2>
          <p className="section-sub">ファクタリング・資金繰りの重要ワードをコンパクトに解説</p>
        </div>
        <div className="glossary-grid">
          {TERMS.map((t) => (
            <div key={t.name} className="gloss-card">
              <div className="gloss-header">
                <span className={`gloss-tag${t.tag === "重要" ? " gloss-tag-alert" : ""}`}>{t.tag}</span>
                <div className="gloss-name">
                  {t.name}
                  {t.yomi && <span className="gloss-yomi">（{t.yomi}）</span>}
                </div>
              </div>
              <p className="gloss-desc">{t.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Glossary = Glossary;