防災スタートアップの資金調達とビジネスモデル分析

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

const App = () => {
  // 資金調達データ
  const fundingData = [
    { name: 'RapidSOS', amount: 408.0, stage: 'シリーズD', focus: '緊急対応データプラットフォーム' },
    { name: 'One Concern', amount: 152.0, stage: 'シリーズB', focus: 'AI災害管理' },
    { name: 'Disaster Tech', amount: 9.1, stage: 'レイトVC', focus: '緊急管理ソフトウェア' },
    { name: 'OroraTech', amount: 49.9, stage: 'シリーズB', focus: '野火検出システム' },
    { name: 'FloodMapp', amount: 9.89, stage: 'シリーズA', focus: '洪水予測' },
  ];

  // ビジネスモデル分類データ
  const businessModelData = [
    { name: 'SaaS', value: 45, description: 'サブスクリプションベースのソフトウェアサービス' },
    { name: 'データ分析', value: 25, description: 'AIと機械学習による予測分析' },
    { name: 'ハードウェア', value: 15, description: 'センサーやデバイスの提供' },
    { name: 'コンサルティング', value: 15, description: '専門家による支援サービス' },
  ];

  const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];

  return (
    <div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        <div className="bg-white rounded-lg shadow p-6 mb-8">
          <h2 className="text-2xl font-bold mb-4">防災スタートアップの資金調達状況</h2>
          <div className="h-[400px]">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={fundingData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis label={{ value: '資金調達額（百万ドル）', angle: -90, position: 'insideLeft' }} />
                <Tooltip />
                <Legend />
                <Bar dataKey="amount" fill="#8884d8" name="資金調達額" />
              </BarChart>
            </ResponsiveContainer>
          </div>
          <div className="mt-4 text-sm text-gray-500">
            出典: <a href="https://tracxn.com/d/companies/rapidsos/__KA6fgogP_--ipfoVb9p027NvNJICPECgPg5ZMe0i3-8" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">Tracxn - RapidSOS</a>
          </div>
        </div>

        <div className="bg-white rounded-lg shadow p-6">
          <h2 className="text-2xl font-bold mb-4">防災スタートアップのビジネスモデル分布</h2>
          <div className="h-[400px]">
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie
                  data={businessModelData}
                  cx="50%"
                  cy="50%"
                  labelLine={false}
                  label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                  outerRadius={150}
                  fill="#8884d8"
                  dataKey="value"
                >
                  {businessModelData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                  ))}
                </Pie>
                <Tooltip />
                <Legend />
              </PieChart>
            </ResponsiveContainer>
          </div>
          <div className="mt-4 text-sm text-gray-500">
            出典: <a href="https://vizologi.com/business-strategy-canvas/rapidsos-business-model-canvas/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">Vizologi - RapidSOSのビジネスモデル分析</a>
          </div>
        </div>

        <div className="bg-white rounded-lg shadow p-6 mt-8">
          <h2 className="text-2xl font-bold mb-4">主要プレイヤーの特徴</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {fundingData.map((company) => (
              <div key={company.name} className="border rounded-lg p-4">
                <h3 className="font-bold text-lg mb-2">{company.name}</h3>
                <ul className="list-disc list-inside space-y-2">
                  <li>資金調達: {company.amount}百万ドル</li>
                  <li>ステージ: {company.stage}</li>
                  <li>注力分野: {company.focus}</li>
                </ul>
              </div>
            ))}
          </div>
          <div className="mt-4 text-sm text-gray-500">
            出典: <a href="https://startupsavant.com/startups-to-watch/startups-tackling-natural-disasters" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">StartupSavant - 自然災害に取り組むスタートアップ</a>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;