/* global React, Icons */

function Hero({ layout = "centered" }) {
  const Bolt = Icons.Bolt, Eye = Icons.Eye, Check = Icons.Check;

  return (
    <section className={`hero hero-layout-${layout}`}>
      <div className="container hero-inner">
        <span className="hero-eyebrow">
          <span className="dot"></span>
          資金繰り研究所が厳選 ／ 2026年最新版
        </span>
        <p className="hero-prelude">
          あなたの資金繰りの<span className="pop">ベストパートナー</span>が見つかる
        </p>
        <h1 className="hero-title">
          ファクタリング会社<br/>
          比較ランキング<span className="num">8</span>選
        </h1>
        <p className="hero-sub">
          中小企業・個人事業主の資金繰りを25年支援してきた専門家・加瀬豪が、<br className="hide-sp"/>
          手数料・スピード・対応範囲を徹底比較。あなたに合う1社が、最短2分で見つかります。
        </p>

        <div className="hero-stats">
          <div>
            <div className="hero-stat-num">2<small>時間〜</small></div>
            <div className="hero-stat-label">最短入金スピード</div>
          </div>
          <div>
            <div className="hero-stat-num">10,000<small>社</small></div>
            <div className="hero-stat-label">支援実績</div>
          </div>
          <div>
            <div className="hero-stat-num">8<small>社</small></div>
            <div className="hero-stat-label">独自審査で厳選</div>
          </div>
        </div>

        <div className="hero-badges">
          <div className="hero-badge"><Check className="icon"/>最短即日で資金調達が可能</div>
          <div className="hero-badge"><Check className="icon"/>売掛金があれば利用可能</div>
          <div className="hero-badge"><Check className="icon"/>借入ではないので負債にならない</div>
        </div>

        <div className="hero-cta">
          <a href="#ranking" className="btn-primary">
            比較ランキングを見る <Icons.ArrowRight style={{width:18, height:18}}/>
          </a>
          <a href="#need" className="btn-secondary">
            <Eye className="icon" style={{width:16,height:16}}/>目的から選ぶ
          </a>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;