最新フィンテックカオスマップ徹底解剖：2025年に向けたB2B・B2C市場の勝者とトレンド

import React from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';

const categories = [
  {
    name: '決済 (B2B Payments)',
    companies: ['Stripe', 'Adyen', 'Checkout.com', 'Airwallex', 'Nuvei', 'Paymerang', 'HighRadius', 'Pine Labs', 'メタップス', 'PAY.JP', 'EBANX', 'Rapyd', 'Ppro']
  },
  {
    name: '決済 (B2C Payments)',
    companies: ['PayPal', 'Block (Square)', 'Affirm', 'Klarna', 'Mynt', 'Zepz', 'PayPay', 'Venmo', 'Cash App', 'Wise']
  },
  {
    name: '融資・与信 (Lending & Credit)',
    companies: ['Ramp', 'Brex', 'SoFi', 'Brigit', 'DMI Finance', 'Gojo & Company', 'Kyash', 'OLTA', 'Settle', 'Pipe', 'Xepelin', 'R2']
  },
  {
    name: '銀行・インフラ (Banking & Infrastructure)',
    companies: ['Plaid', 'Mambu', 'Rapyd', 'Solaris', 'Tink', 'Yuno', 'Kushki', 'QI Tech', 'Pismo', 'インフキュリオン', 'DGフィナンシャルテクノロジー', 'Ballerine', 'FlowFi']
  },
  {
    name: 'デジタルバンク (Neobanks)',
    companies: ['Chime', 'Revolut', 'Nubank', 'Ualá', 'Tyme Group', 'みんなの銀行', 'JREバンク']
  },
  {
    name: '資産運用・投資 (WealthTech & Investment)',
    companies: ['Robinhood', 'Wealthfront', 'Betterment', 'Envestnet', 'AlpacaJapan', 'Boosted.AI', 'ウェルスナビ', 'FOLIO', 'READYFOR', 'BOOSTRY']
  },
  {
    name: 'バックオフィス・経費管理 (Back Office & Spend Management)',
    companies: ['Airbase', 'Truewind', 'マネーフォワード', 'freee', 'BASE', 'Onplan', 'Appzen']
  },
  {
    name: '規制・セキュリティ (RegTech & Cybersecurity)',
    companies: ['ComplyAdvantage', 'Eckoh', 'Trunomi', 'Lucinity', 'GAIL', 'Feedzai', 'エクサウィザーズ', 'Securitize']
  },
  {
    name: 'インシュアテック (InsurTech)',
    companies: ['Lemonade', 'Hippo', 'Alan', 'Betterfly', '180 Seguros']
  },
  {
    name: 'デジタルアセット・ブロックチェーン (Digital Assets & Blockchain)',
    companies: ['Coinbase', 'Fireblocks', 'Circle', 'Binance', 'Terra', 'ビットポイントジャパン', 'テコテック']
  },
];

const logos = {
  'Stripe': 'https://stripe.com/favicon.ico',
  'Adyen': 'https://www.adyen.com/favicon.ico',
  'Checkout.com': 'https://www.checkout.com/favicon.ico',
  'Airwallex': 'https://www.airwallex.com/favicon.ico',
  'Nuvei': 'https://nuvei.com/favicon.ico',
  'Paymerang': 'https://www.paymerang.com/favicon.ico',
  'HighRadius': 'https://www.highradius.com/favicon.ico',
  'Pine Labs': 'https://www.pinelabs.com/favicon.ico',
  'メタップス': 'https://metaps.com/favicon.ico',
  'PAY.JP': 'https://pay.jp/favicon.ico',
  'EBANX': 'https://www.ebanx.com/favicon.ico',
  'Rapyd': 'https://www.rapyd.net/favicon.ico',
  'Ppro': 'https://www.ppro.com/favicon.ico',
  'PayPal': 'https://www.paypal.com/favicon.ico',
  'Block (Square)': 'https://squareup.com/favicon.ico',
  'Affirm': 'https://www.affirm.com/favicon.ico',
  'Klarna': 'https://www.klarna.com/favicon.ico',
  'Mynt': 'https://www.mynt.com/favicon.ico',
  'Zepz': 'https://www.zepz.io/favicon.ico',
  'PayPay': 'https://paypay.ne.jp/favicon.ico',
  'Venmo': 'https://venmo.com/favicon.ico',
  'Cash App': 'https://cash.app/favicon.ico',
  'Wise': 'https://wise.com/favicon.ico',
  'Ramp': 'https://ramp.com/favicon.ico',
  'Brex': 'https://www.brex.com/favicon.ico',
  'SoFi': 'https://www.sofi.com/favicon.ico',
  'Brigit': 'https://www.hellobrigit.com/favicon.ico',
  'DMI Finance': 'https://www.dmifinance.in/favicon.ico',
  'Gojo & Company': 'https://gojo.co/favicon.ico',
  'Kyash': 'https://www.kyash.co/favicon.ico',
  'OLTA': 'https://www.olta.co.jp/favicon.ico',
  'Settle': 'https://www.settle.com/favicon.ico',
  'Pipe': 'https://pipe.com/favicon.ico',
  'Xepelin': 'https://www.xepelin.com/favicon.ico',
  'R2': 'https://r2.com/favicon.ico',
  'Plaid': 'https://plaid.com/favicon.ico',
  'Mambu': 'https://mambu.com/favicon.ico',
  'Solaris': 'https://www.solarisgroup.com/favicon.ico',
  'Tink': 'https://tink.com/favicon.ico',
  'Yuno': 'https://www.yuno.com/favicon.ico',
  'Kushki': 'https://kushki.com/favicon.ico',
  'QI Tech': 'https://www.qitech.com.br/favicon.ico',
  'Pismo': 'https://pismo.io/favicon.ico',
  'インフキュリオン': 'https://infcurion.com/favicon.ico',
  'DGフィナンシャルテクノロジー': 'https://www.dgft.jp/favicon.ico',
  'Ballerine': 'https://www.ballerine.io/favicon.ico',
  'FlowFi': 'https://www.flowfi.com/favicon.ico',
  'Chime': 'https://www.chime.com/favicon.ico',
  'Revolut': 'https://www.revolut.com/favicon.ico',
  'Nubank': 'https://nubank.com.br/favicon.ico',
  'Ualá': 'https://www.uala.com.ar/favicon.ico',
  'Tyme Group': 'https://www.tymegroup.com/favicon.ico',
  'みんなの銀行': 'https://www.minna-no-ginko.com/favicon.ico',
  'JREバンク': 'https://www.jrebank.jp/favicon.ico',
  'Robinhood': 'https://robinhood.com/favicon.ico',
  'Wealthfront': 'https://www.wealthfront.com/favicon.ico',
  'Betterment': 'https://www.betterment.com/favicon.ico',
  'Envestnet': 'https://www.envestnet.com/favicon.ico',
  'AlpacaJapan': 'https://alpaca.ai/favicon.ico',
  'Boosted.AI': 'https://www.boosted.ai/favicon.ico',
  'ウェルスナビ': 'https://www.wealthnavi.com/favicon.ico',
  'FOLIO': 'https://folio-sec.com/favicon.ico',
  'READYFOR': 'https://readyfor.jp/favicon.ico',
  'BOOSTRY': 'https://boostry.co.jp/favicon.ico',
  'Airbase': 'https://www.airbase.com/favicon.ico',
  'Truewind': 'https://www.truewind.ai/favicon.ico',
  'マネーフォワード': 'https://moneyforward.com/favicon.ico',
  'freee': 'https://www.freee.co.jp/favicon.ico',
  'BASE': 'https://binc.jp/favicon.ico',
  'Onplan': 'https://onplan.co/favicon.ico',
  'Appzen': 'https://www.appzen.com/favicon.ico',
  'ComplyAdvantage': 'https://complyadvantage.com/favicon.ico',
  'Eckoh': 'https://www.eckoh.com/favicon.ico',
  'Trunomi': 'https://www.trunomi.com/favicon.ico',
  'Lucinity': 'https://www.lucinity.com/favicon.ico',
  'GAIL': 'https://gail.com/favicon.ico',
  'Feedzai': 'https://feedzai.com/favicon.ico',
  'エクサウィザーズ': 'https://exawizards.com/favicon.ico',
  'Securitize': 'https://securitize.io/favicon.ico',
  'Lemonade': 'https://www.lemonade.com/favicon.ico',
  'Hippo': 'https://www.hippo.com/favicon.ico',
  'Alan': 'https://alan.com/favicon.ico',
  'Betterfly': 'https://www.betterfly.com/favicon.ico',
  '180 Seguros': 'https://180seguros.com/favicon.ico',
  'Coinbase': 'https://www.coinbase.com/favicon.ico',
  'Fireblocks': 'https://www.fireblocks.com/favicon.ico',
  'Circle': 'https://www.circle.com/favicon.ico',
  'Binance': 'https://www.binance.com/favicon.ico',
  'Terra': 'https://www.terra.money/favicon.ico',
  'ビットポイントジャパン': 'https://www.bitpoint.co.jp/favicon.ico',
  'テコテック': 'https://www.tecotec.co.jp/favicon.ico',
};


const Section = ({ title, children }) => (
    <section className="mb-12">
        <h2 className="text-3xl font-bold text-gray-800 mb-6 border-b-2 border-blue-500 pb-2">{title}</h2>
        {children}
    </section>
);


export default function FintechChaosMap() {
  return (
    <div className="p-4 md:p-8 bg-gray-50 text-gray-800 font-sans">
      <div className="max-w-7xl mx-auto">
        <header className="text-center mb-12">
          <h1 className="text-4xl md:text-5xl font-extrabold mb-3 text-gray-900">
            2024-2025年 フィンテックスタートアップ市場概観
          </h1>
          <p className="text-gray-600 text-lg">
            複数の業界レポートを基にB2B & B2Cフィンテックのランドスケープを再構成
          </p>
          <p className="text-xs text-gray-500 mt-2">
            データ参照元:
            <a href="https://www.mandalorepartners.com/research/mandalore-fintech-venture-map-2025" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline px-1">Mandalore Partners</a>,
            <a href="https://www.cbinsights.com/research/b2b-payments-tech-market-map/" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline px-1">CB Insights</a>,
            <a href="https://assets.kpmg.com/content/dam/kpmgsites/xx/pdf/2025/02/pulse-of-fintech-h2-2024.pdf.coredownload.inline.pdf" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline px-1">KPMG</a>,
            <a href="https://www.omnius.so/blog/fintech-industry-report-2024" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline px-1">Omnius</a>
          </p>
        </header>

        <div className="bg-white p-6 rounded-lg shadow-md mb-12">
            <h2 className="text-2xl font-bold text-gray-800 mb-4">エグゼクティブサマリー</h2>
            <p className="text-gray-700 leading-relaxed">
            2024年から2025年のフィンテック市場は、金融機能が非金融サービスに溶け込む「組み込み型金融」と、企業間取引を効率化する「B2B決済DX」がメガトレンドとなっています。本レポートは、最新の業界動向とデータを基に、決済、融資、インフラ、資産運用など10の主要セクターにおける注目企業をマッピングし、市場の全体像を可視化します。
          </p>
        </div>

        <Section title="フィンテック市場カオスマップ (2024-2025)">
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            {categories.map((category) => (
              <div key={category.name} className="bg-white p-5 rounded-xl shadow-md border border-gray-200 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
                <h3 className="text-lg font-bold mb-4 text-gray-900 border-b border-gray-300 pb-2">{category.name}</h3>
                <ul className="space-y-3 h-64 overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100">
                  {category.companies.map((company) => (
                    <li key={company} className="flex items-center text-gray-700 hover:text-blue-600 transition-colors">
                      {logos[company] ? (
                        <img
                          src={logos[company]}
                          alt={`${company} logo`}
                          className="w-5 h-5 mr-3 rounded-full bg-white object-contain shadow-sm"
                          onError={(e) => { e.target.style.display = 'none'; e.target.nextElementSibling.style.display = 'flex'; }}
                        />
                      ) : null}
                      <div className={`${logos[company] ? 'hidden' : 'flex'} w-5 h-5 bg-gray-200 rounded-full mr-3 items-center justify-center text-xs font-bold text-gray-600`}>{company.charAt(0)}</div>
                      <span className="text-sm">{company}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </Section>
      </div>
    </div>
  );
}