/* global React */
function Footer() {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <a href="#" className="brand">
              <img src="assets/logo.png" alt="ファクタリング研究室" className="brand-logo" style={{filter: "brightness(0) invert(1)", opacity: .92}} />
            </a>
            <p>中小企業・個人事業主の資金繰りを支援する、ファクタリング比較・情報メディア。専門家監修のもと、信頼できる会社のみを厳選してご紹介します。</p>
          </div>
          <div className="footer-col">
            <h4>コンテンツ</h4>
            <ul>
              <li><a href="#ranking">比較ランキング</a></li>
              <li><a href="#about">ファクタリングとは</a></li>
              <li><a href="#two-three">2社間 / 3社間</a></li>
              <li><a href="#need">目的別おすすめ</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>サポート</h4>
            <ul>
              <li><a href="#faq">よくある質問</a></li>
              <li><a href="#glossary">用語集</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>運営</h4>
            <ul>
              <li><a href="https://e-dobe.co.jp/company/" target="_blank" rel="noopener">運営者情報</a></li>
              <li><a href="https://e-dobe.co.jp/privacy/" target="_blank" rel="noopener">プライバシーポリシー</a></li>
              <li><a href="terms.html">利用規約・免責事項</a></li>
              <li><a href="https://forms.gle/tfKMm9A8Xb7WDVon8" target="_blank" rel="noopener">取材・掲載依頼</a></li>
            </ul>
          </div>
        </div>
        <div className="disclaimer">
          ※当サイトはファクタリング会社の情報提供を目的としており、各社の利用に際してはご自身の責任で十分ご検討の上、ご契約ください。
          掲載情報は2026年4月時点のものであり、最新の条件は各公式サイトにてご確認ください。手数料・入金スピード等は審査により変動します。
        </div>
        <div className="footer-bottom">
          <span>© 2026 ファクタリング研究室. All rights reserved.</span>
          <span>cashflow-lab.net</span>
        </div>
      </div>
    </footer>
  );
}

function FloatingCTA() {
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setVisible(window.scrollY > 600);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div className={`floating-cta ${visible ? "" : "hidden"}`}>
      <div className="floating-cta-text">
        最短2時間で資金調達
        <small>専門家監修・厳選8社を無料比較</small>
      </div>
      <a href="#ranking" className="btn-primary">ランキングを見る</a>
    </div>
  );
}

window.Footer = Footer;
window.FloatingCTA = FloatingCTA;