森林環境スタートアップの資金調達とビジネスモデル分析

import React from 'react';

const ForestTechStartups = () => {
  // 資金調達データ（推定を含む）
  const fundingData = [
    { name: 'Pano AI', amount: 3700, rounds: 6, latest: 1700, year: 2023 },
    { name: 'Kodama Systems', amount: 660, rounds: 2, latest: 660, year: 2022 },
    { name: 'Charm Industrial', amount: 10000, rounds: 2, latest: 10000, year: 2023 },
    { name: 'Hula Earth', amount: 160, rounds: 1, latest: 160, year: 2024 },
    { name: 'Terraformation', amount: 4200, rounds: 1, latest: 4200, year: 2024 }
  ];

  // ビジネスモデルの分類
  const businessModels = [
    { category: '野火検知・防止', companies: ['Pano AI', 'Kodama Systems'], description: 'AIとカメラ/ロボット技術による早期検知と対応' },
    { category: 'カーボン除去', companies: ['Charm Industrial', 'Terraformation'], description: 'バイオマス変換と再森林化' },
    { category: '生物多様性モニタリング', companies: ['Hula Earth'], description: 'IoTセンサーと衛星データの統合' }
  ];

  return (
    <div className="container mx-auto p-8 bg-white">
      <div className="mb-12">
        <h2 className="text-2xl font-bold mb-6">森林テック企業の資金調達状況（単位：万ドル）</h2>
        <div className="overflow-x-auto">
          <table className="min-w-full bg-white border border-gray-300">
            <thead>
              <tr className="bg-gray-100">
                <th className="px-6 py-3 border-b">企業名</th>
                <th className="px-6 py-3 border-b">総調達額</th>
                <th className="px-6 py-3 border-b">調達ラウンド数</th>
                <th className="px-6 py-3 border-b">最新調達額</th>
                <th className="px-6 py-3 border-b">最新調達年</th>
              </tr>
            </thead>
            <tbody>
              {fundingData.map((company, index) => (
                <tr key={index} className="hover:bg-gray-50">
                  <td className="px-6 py-4 border-b">{company.name}</td>
                  <td className="px-6 py-4 border-b text-right">{company.amount.toLocaleString()}</td>
                  <td className="px-6 py-4 border-b text-center">{company.rounds}</td>
                  <td className="px-6 py-4 border-b text-right">{company.latest.toLocaleString()}</td>
                  <td className="px-6 py-4 border-b text-center">{company.year}</td>
                </tr>
              ))}
            </tbody>
          </table>
          <div className="text-sm text-gray-500 mt-2">
            出典: <a href="https://www.cbinsights.com/company/pano-ai/financials" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">Pano AI</a>, 
            <a href="https://tracxn.com/d/companies/kodama-systems/__u9DpoiikSo4Yc89n_agnFAt7Ox8VK53l_0rJaRRJxa8" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">Kodama Systems</a>, 
            <a href="https://www.finsmes.com/2023/06/charm-industrial-raises-100m-in-series-b-financing.html" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">Charm Industrial</a>のデータに基づく
          </div>
        </div>
      </div>

      <div className="mb-12">
        <h2 className="text-2xl font-bold mb-6">ビジネスモデルの分類</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {businessModels.map((model, index) => (
            <div key={index} className="bg-gray-50 p-6 rounded-lg">
              <h3 className="text-xl font-semibold mb-4">{model.category}</h3>
              <ul className="list-disc list-inside mb-4">
                {model.companies.map((company, cIndex) => (
                  <li key={cIndex} className="mb-2">{company}</li>
                ))}
              </ul>
              <p className="text-gray-600">{model.description}</p>
            </div>
          ))}
        </div>
      </div>

      <div className="text-sm text-gray-500">
        注意事項：
        <ul className="list-disc list-inside mt-2">
          <li>資金調達額は公開情報に基づいており、非公開の調達を含まない可能性があります</li>
          <li>一部の数値は推定値を含みます</li>
          <li>分類は主要な事業領域に基づいており、実際の事業範囲はより広い可能性があります</li>
        </ul>
      </div>
    </div>
  );
};

export default ForestTechStartups;