/* global React, Icons */

const VOICES = [
  {
    industry: "建設業",
    company: "内装工事 / 社員8名",
    name: "T.K.（40代・代表取締役）",
    amount: "150万円",
    speed: "当日3時間",
    problem: "元請けからの入金が翌月20日。材料費・職人への日当が月末に集中して毎月綱渡り。銀行には「担保不足」で断られ続けていた。",
    result: "請求書を送ったその日の午後には振込確認。職人への給与を遅延なく払えた。取引先には一切知られていない。",
    star: 5,
    tag: "2社間・即日",
  },
  {
    industry: "フリーランス",
    company: "Webデザイナー / 個人事業主",
    name: "S.M.（30代）",
    amount: "90万円",
    speed: "翌日",
    problem: "大手IT企業からの案件が完納後90日払い。Adobe CCやサーバー代の支払いが毎月ギリギリで、次の案件に集中できなかった。",
    result: "個人事業主でも審査通過。手数料は事前にしっかり提示され、明細も明確。「ファクタリングって怖くない」と実感できた。",
    star: 5,
    tag: "オンライン完結",
  },
  {
    industry: "運送業",
    company: "軽貨物配送 / 社員3名",
    name: "Y.K.（50代・代表）",
    amount: "40万円",
    speed: "即日",
    problem: "少額だから断られると思っていた。燃料費の高騰で月末に10〜50万円が慢性的に不足。",
    result: "10万円から対応の会社を紹介してもらい、少額でも丁寧に対応してもらえた。継続利用で審査も簡略化されてきた。",
    star: 4,
    tag: "少額対応",
  },
];

function Stars({ n }) {
  return (
    <div className="voice-stars">
      {[1,2,3,4,5].map(i => (
        <svg key={i} width="16" height="16" viewBox="0 0 16 16" fill={i <= n ? "#e2a83a" : "#e3e6ee"}>
          <path d="M8 1l1.9 3.8 4.2.6-3 2.9.7 4.2L8 10.5l-3.8 2 .7-4.2-3-2.9 4.2-.6z"/>
        </svg>
      ))}
    </div>
  );
}

function Testimonials() {
  return (
    <section className="section testimonials-section" id="voices">
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">USE CASE</div>
          <h2 className="section-title">こんな経営者が活用しています</h2>
          <p className="section-sub">業種・状況別の活用イメージです（※下記はモデルケースです。実在の個人・法人とは関係ありません）</p>
        </div>

        <div className="voices-grid">
          {VOICES.map((v, i) => (
            <div key={i} className="voice-card">
              <div className="voice-head">
                <span className="voice-industry">{v.industry}</span>
                <Stars n={v.star} />
              </div>
              <div className="voice-company">{v.company}</div>
              <div className="voice-name">{v.name}</div>

              <div className="voice-stats">
                <div className="voice-stat">
                  <div className="voice-stat-label">資金化額</div>
                  <div className="voice-stat-val">{v.amount}</div>
                </div>
                <div className="voice-stat">
                  <div className="voice-stat-label">入金スピード</div>
                  <div className="voice-stat-val">{v.speed}</div>
                </div>
                <span className="voice-tag">{v.tag}</span>
              </div>

              <div className="voice-block">
                <div className="voice-block-label before">利用前の悩み</div>
                <p className="voice-text">{v.problem}</p>
              </div>
              <div className="voice-block">
                <div className="voice-block-label after">利用後の変化</div>
                <p className="voice-text">{v.result}</p>
              </div>
            </div>
          ))}
        </div>

        <p className="voices-note">※ 上記はファクタリングの活用イメージを示したモデルケースです。実在の個人・法人の体験談ではありません。実際の審査結果・入金スピード・手数料は各社の審査により異なります。</p>
      </div>
    </section>
  );
}
window.Testimonials = Testimonials;