/* global React, Icons */
function WhyUs() {
  const items = [
    { icon: Icons.Eye, title: "独自の7項目比較", desc: "手数料・スピード・対応範囲など7つの基準で公平に評価" },
    { icon: Icons.Award, title: "専門家が監修", desc: "資金繰り研究所所長・加瀬豪が掲載基準を厳格に管理" },
    { icon: Icons.Shield, title: "中立的な立場", desc: "悪質業者を排除し、安心して利用できる会社のみ厳選" },
    { icon: Icons.Calendar, title: "定期的に見直し", desc: "市場動向に合わせ、毎月ランキングを再評価" },
  ];

  return (
    <section className="section why-us" id="why">
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">WHY US</div>
          <h2 className="section-title">ファクタリング研究室が選ばれる理由</h2>
        </div>
        <div className="why-grid">
          {items.map((it, i) => {
            const I = it.icon;
            return (
              <div className="why-card" key={i}>
                <div className="why-icon"><I/></div>
                <div className="why-title">{it.title}</div>
                <div className="why-desc">{it.desc}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="final-cta">
      <div className="container">
        <h2>あなたに合うファクタリング会社を、<br/>今すぐ無料で比較</h2>
        <p>専門家監修の独自基準で厳選。最短2時間で資金調達できる会社が見つかります。</p>
        <a href="#ranking" className="btn-primary">
          比較ランキングを見る <Icons.ArrowRight style={{width:18, height:18}}/>
        </a>
      </div>
    </section>
  );
}

window.WhyUs = WhyUs;
window.FinalCTA = FinalCTA;