建設廃棄物のアップサイクル事例と資金調達の最新動向

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: 'Carbon Upcycling', amount: 2600, url: 'https://www.esgtoday.com/cleantech-startup-carbon-upcycling-raises-26-million-to-deploy-cement-decarbonization-solution/' },
    { name: 'BioMason', amount: 9500, url: 'https://www.recyclingstartups.org/top/building-materials/' },
    { name: 'Novoloop', amount: 1100, url: 'https://www.esgtoday.com/recycling-tech-startup-novoloop-raises-11-million-to-upcycle-low-value-plastic-to-high-performance-materials/' },
    { name: 'ByFusion', amount: 450, url: 'https://www.fastcompany.com/90714272/this-startup-is-turning-non-recyclable-plastic-into-building-blocks-fit-for-construction' },
  ];

  // 建設廃棄物のアップサイクル用途分類 (推定値に基づく)
  const upcycleUsageData = [
    { name: 'コンクリート再生材', value: 40, description: '建設資材・骨材' },
    { name: '木材リサイクル', value: 25, description: '家具・内装材' },
    { name: '金属スクラップ', value: 20, description: '鉄鋼原料' },
    { name: 'プラスチック', value: 15, description: '建築部材' },
  ];

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

  return (
    <div className="container mx-auto p-8">
      <div className="bg-white rounded-lg shadow-lg p-6 mb-8">
        <h2 className="text-2xl font-bold mb-4">建設廃棄物アップサイクル企業の主な資金調達額（単位：万ドル）</h2>
        <p className="text-sm text-gray-500 mb-4">出典：
          <a href="https://www.esgtoday.com/cleantech-startup-carbon-upcycling-raises-26-million-to-deploy-cement-decarbonization-solution/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">ESG Today</a>、
          <a href="https://www.recyclingstartups.org/top/building-materials/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">Recycling Startups</a>
        </p>
        <ResponsiveContainer width="100%" height={300}>
          <BarChart data={fundingData}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="name" />
            <YAxis />
            <Tooltip />
            <Legend />
            <Bar dataKey="amount" fill="#0088FE" />
          </BarChart>
        </ResponsiveContainer>
      </div>

      <div className="bg-white rounded-lg shadow-lg p-6">
        <h2 className="text-2xl font-bold mb-4">建設廃棄物のアップサイクル用途分布（推定値）</h2>
        <p className="text-sm text-gray-500 mb-4">出典：
          <a href="https://www.chemistryworld.com/news/recycled-construction-waste-could-cut-cement-and-steels-carbon-footprint/4019570.article" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">Chemistry World</a>、
          <a href="https://calrecycle.ca.gov/condemo/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">CalRecycle</a>
        </p>
        <ResponsiveContainer width="100%" height={300}>
          <PieChart>
            <Pie
              data={upcycleUsageData}
              cx="50%"
              cy="50%"
              labelLine={false}
              label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
              outerRadius={100}
              fill="#8884d8"
              dataKey="value"
            >
              {upcycleUsageData.map((entry, index) => (
                <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
              ))}
            </Pie>
            <Tooltip />
            <Legend />
          </PieChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
};

export default App;