ホテル業界における生成AIスタートアップの資金調達最新動向

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

const AIFundingDashboard = () => {
  // 2024年のホテル関連生成AIスタートアップの資金調達データ
  const fundingData = [
    { name: 'Canary Technologies', amount: 50, date: '2024-06', category: 'ゲスト管理' },
    { name: 'Lokalee', amount: 5.6, date: '2024-01', category: 'コンテンツ管理' },
    { name: 'Runnr.ai', amount: 1.1, date: '2024-01', category: 'ゲストコミュニケーション' },
    { name: 'Guestara', amount: 0.5, date: '2024-01', category: 'ゲスト管理' },
    { name: 'Smartpricing', amount: 14, date: '2024-01', category: '収益管理' },
    { name: 'Nory', amount: 16, date: '2024-01', category: 'オペレーション' }
  ];

  // カテゴリー別の資金調達総額
  const categoryData = [
    { name: 'ゲスト管理', value: 50.5 },
    { name: 'コンテンツ管理', value: 5.6 },
    { name: 'ゲストコミュニケーション', value: 1.1 },
    { name: '収益管理', value: 14 },
    { name: 'オペレーション', value: 16 }
  ];

  // 月別の累積資金調達額
  const cumulativeData = [
    { month: '2024-01', amount: 37.2 },
    { month: '2024-02', amount: 37.2 },
    { month: '2024-03', amount: 37.2 },
    { month: '2024-04', amount: 37.2 },
    { month: '2024-05', amount: 37.2 },
    { month: '2024-06', amount: 87.2 }
  ];

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

  return (
    <div className="min-h-screen bg-gray-100 p-8">
      <div className="max-w-7xl mx-auto">
        <div className="bg-white rounded-lg shadow-lg p-6 mb-8">
          <h1 className="text-3xl font-bold mb-6 text-gray-800">ホテル業界におけるAI・生成AIスタートアップの資金調達動向（2024年）</h1>
          <p className="text-sm text-gray-500 mb-4">
            出典: <a href="https://www.canarytechnologies.com/press/canary-raises-50m-ai-hotel-technology" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">Canary Technologies</a>, 
            <a href="https://www.sme10x.com/whats-the-deal/hotel-tech-disruptor-lokalee-secures-us56m-funding-for-ai-enhanced-guest-journey" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">Lokalee</a>, 
            <a href="https://tech.eu/2024/01/17/runnrai-secures-eur1m-funding-for-hotel-communication-automation/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">Runnr.ai</a>他
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
          <div className="bg-white rounded-lg shadow-lg p-6">
            <h2 className="text-xl font-semibold mb-4">企業別資金調達額（単位：百万ドル）</h2>
            <ResponsiveContainer width="100%" height={300}>
              <BarChart data={fundingData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" angle={-45} textAnchor="end" height={100} />
                <YAxis />
                <Tooltip />
                <Legend />
                <Bar dataKey="amount" fill="#0088FE" name="資金調達額" />
              </BarChart>
            </ResponsiveContainer>
          </div>

          <div className="bg-white rounded-lg shadow-lg p-6">
            <h2 className="text-xl font-semibold mb-4">カテゴリー別資金調達比率</h2>
            <ResponsiveContainer width="100%" height={300}>
              <PieChart>
                <Pie
                  data={categoryData}
                  cx="50%"
                  cy="50%"
                  labelLine={false}
                  label={({ name, percent }) => `${name} (${(percent * 100).toFixed(0)}%)`}
                  outerRadius={100}
                  fill="#8884d8"
                  dataKey="value"
                >
                  {categoryData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                  ))}
                </Pie>
                <Tooltip />
              </PieChart>
            </ResponsiveContainer>
          </div>
        </div>

        <div className="bg-white rounded-lg shadow-lg p-6 mb-8">
          <h2 className="text-xl font-semibold mb-4">2024年の累積資金調達額推移（単位：百万ドル）</h2>
          <ResponsiveContainer width="100%" height={300}>
            <AreaChart data={cumulativeData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="month" />
              <YAxis />
              <Tooltip />
              <Legend />
              <Area type="monotone" dataKey="amount" name="累積資金調達額" stroke="#8884d8" fill="#8884d8" />
            </AreaChart>
          </ResponsiveContainer>
        </div>

        <div className="bg-white rounded-lg shadow-lg p-6">
          <h2 className="text-xl font-semibold mb-4">主要な調査結果</h2>
          <ul className="list-disc pl-6 space-y-2 text-gray-700">
            <li>2024年上半期、ホテル業界の生成AIスタートアップは総額約87.2百万ドルの資金を調達</li>
            <li>最大の資金調達はCanary Technologiesの50百万ドル（シリーズC）</li>
            <li>ゲスト管理カテゴリーが全体の約58%を占め、最も注目を集めている分野</li>
            <li>6月のCanary Technologiesの大型調達により、累積資金調達額が大幅に増加</li>
          </ul>
        </div>
      </div>
    </div>
  );
};

export default AIFundingDashboard;