TENTIALの決算資料から読み解くスポーツ市場戦略とリカバリーウェア成長分析

import React from 'react';

const App = () => {
  const marketData = {
    recovery: {
      2019: 3.9,
      2023: 5.4,
      2024: 6.0,
      2030: 14.1
    },
    clothing: {
      2019: 867,
      2023: 1439,
      2030: 5642
    }
  };

  const tentiaFinancials = {
    2020: { sales: 0.37, profit: -0.97 },
    2021: { sales: 4.43, profit: -0.95 },
    2022: { sales: 8.47, profit: -3.50 },
    2023: { sales: 20.34, profit: 0.39 },
    2024: { sales: 54.09, profit: 4.73 },
    2025: { sales: 128.37, profit: 14.52 }
  };

  const competitorData = [
    { name: 'TENTIAL', product: 'BAKUNE', features: '一般医療機器27件届出済み', marketShare: 'No.1（2024年）' },
    { name: 'MTG', product: 'SIXPAD Recovery', features: 'Mediculation®繊維', price: '9,900円〜13,200円' },
    { name: 'ベネクス', product: 'VENEX', features: 'ナノプラチナ練り込み', history: '発売15年' }
  ];

  const marketStrategy = [
    { category: '市場の再定義', description: 'スポーツ市場を「疲労回復・パフォーマンス向上を目的としたコンディショニング市場」として再定義' },
    { category: '健康課題の認識', description: '日本人の約4人に1人が健康課題を自覚、働き盛りの8割が疲労感を抱える' },
    { category: 'グローバル展開', description: '米国10.0兆円、西欧4.4兆円、中国4.5兆円の機能性ファッション市場を攻略' },
    { category: 'D2Cモデル', description: '売上の約90%を自社チャネル経由で獲得、粗利率69.9%を実現' }
  ];

  return (
    <div className="min-h-screen bg-gray-50 p-6">
      <div className="max-w-7xl mx-auto">
        {/* ヘッダー */}
        <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
          <h1 className="text-3xl font-bold text-gray-800 mb-4">
            TENTIALのスポーツ市場戦略分析
          </h1>
          <p className="text-gray-600">
            決算資料から読み解くコンディショニング市場への独自アプローチ
          </p>
        </div>

        {/* 市場規模の推移 */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
          <div className="bg-white rounded-lg shadow-lg p-6">
            <h2 className="text-xl font-bold text-gray-800 mb-4">
              リカバリー市場規模の推移
            </h2>
            <div className="space-y-4">
              {Object.entries(marketData.recovery).map(([year, value]) => (
                <div key={year} className="flex justify-between items-center">
                  <span className="font-medium">{year}年</span>
                  <div className="flex items-center">
                    <div 
                      className="bg-blue-500 h-6 rounded mr-2"
                      style={{ width: `${(value / 14.1) * 200}px` }}
                    ></div>
                    <span className="font-bold">{value.toLocaleString()}兆円</span>
                  </div>
                </div>
              ))}
            </div>
            <p className="text-sm text-gray-500 mt-4">
              出典: <a href="https://prtimes.jp/main/html/rd/p/000000059.000085299.html" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">日本リカバリー協会</a>
            </p>
          </div>

          <div className="bg-white rounded-lg shadow-lg p-6">
            <h2 className="text-xl font-bold text-gray-800 mb-4">
              衣服関連リカバリー市場
            </h2>
            <div className="space-y-4">
              {Object.entries(marketData.clothing).map(([year, value]) => (
                <div key={year} className="flex justify-between items-center">
                  <span className="font-medium">{year}年</span>
                  <div className="flex items-center">
                    <div 
                      className="bg-green-500 h-6 rounded mr-2"
                      style={{ width: `${(value / 5642) * 200}px` }}
                    ></div>
                    <span className="font-bold">{value.toLocaleString()}億円</span>
                  </div>
                </div>
              ))}
            </div>
            <div className="mt-4 p-3 bg-green-50 rounded">
              <p className="text-sm text-green-700 font-medium">
                2019年→2023年: 約1.66倍成長
              </p>
            </div>
            <p className="text-sm text-gray-500 mt-4">
              出典: <a href="https://www.p-antiaging.co.jp/ja/ir/news/auto_20241029505501/pdfFile.pdf" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">プレミアアンチエイジング資料</a>
            </p>
          </div>
        </div>

        {/* TENTIAL財務実績 */}
        <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
          <h2 className="text-xl font-bold text-gray-800 mb-4">
            TENTIAL売上高・営業利益推移（億円）
          </h2>
          <div className="grid grid-cols-6 gap-4">
            {Object.entries(tentiaFinancials).map(([year, data]) => (
              <div key={year} className="text-center">
                <div className="mb-2">
                  <div className="text-sm font-medium text-gray-600">{year}年</div>
                </div>
                <div className="space-y-2">
                  <div>
                    <div 
                      className="bg-blue-400 mx-auto rounded"
                      style={{ 
                        height: `${Math.max((data.sales / 128.37) * 100, 5)}px`,
                        width: '30px'
                      }}
                    ></div>
                    <div className="text-xs mt-1 font-bold">{data.sales.toLocaleString()}</div>
                  </div>
                  <div>
                    <div 
                      className={`mx-auto rounded ${data.profit >= 0 ? 'bg-green-400' : 'bg-red-400'}`}
                      style={{ 
                        height: `${Math.max(Math.abs(data.profit / 14.52) * 60, 3)}px`,
                        width: '20px'
                      }}
                    ></div>
                    <div className="text-xs mt-1">{data.profit.toLocaleString()}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div className="flex justify-center mt-4 space-x-6">
            <div className="flex items-center">
              <div className="w-4 h-4 bg-blue-400 rounded mr-2"></div>
              <span className="text-sm">売上高</span>
            </div>
            <div className="flex items-center">
              <div className="w-4 h-4 bg-green-400 rounded mr-2"></div>
              <span className="text-sm">営業利益</span>
            </div>
          </div>
          <div className="mt-4 p-3 bg-blue-50 rounded">
            <p className="text-sm text-blue-700 font-medium">
              売上高CAGR（2020-2024年）: 247.6%
            </p>
          </div>
          <p className="text-sm text-gray-500 mt-4">
            出典: <a href="https://ssl4.eir-parts.net/doc/325A/tdnet/2581792/00.pdf" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">TENTIAL決算説明資料</a>
          </p>
        </div>

        {/* 競合比較 */}
        <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
          <h2 className="text-xl font-bold text-gray-800 mb-4">
            リカバリーウェア市場の主要プレイヤー
          </h2>
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b">
                  <th className="text-left py-3 px-4 font-medium">企業名</th>
                  <th className="text-left py-3 px-4 font-medium">主力商品</th>
                  <th className="text-left py-3 px-4 font-medium">技術特徴</th>
                  <th className="text-left py-3 px-4 font-medium">市場地位</th>
                </tr>
              </thead>
              <tbody>
                {competitorData.map((company, index) => (
                  <tr key={index} className="border-b hover:bg-gray-50">
                    <td className="py-3 px-4 font-medium">{company.name}</td>
                    <td className="py-3 px-4">{company.product}</td>
                    <td className="py-3 px-4">{company.features}</td>
                    <td className="py-3 px-4">
                      {company.marketShare || company.price || company.history}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <p className="text-sm text-gray-500 mt-4">
            出典: <a href="https://www.mtgec.jp/wellness/sixpad/series/recoverywear/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">MTG公式サイト</a>、
            <a href="https://ssl4.eir-parts.net/doc/325A/ir_material_for_fiscal_ym/175959/00.pdf" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">TENTIAL決算資料</a>
          </p>
        </div>

        {/* 戦略分析 */}
        <div className="bg-white rounded-lg shadow-lg p-6">
          <h2 className="text-xl font-bold text-gray-800 mb-4">
            TENTIALのスポーツ市場戦略
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {marketStrategy.map((strategy, index) => (
              <div key={index} className="border-l-4 border-blue-500 pl-4">
                <h3 className="font-bold text-gray-800 mb-2">{strategy.category}</h3>
                <p className="text-gray-600 text-sm">{strategy.description}</p>
              </div>
            ))}
          </div>
          
          <div className="mt-6 p-4 bg-yellow-50 rounded-lg">
            <h3 className="font-bold text-yellow-800 mb-2">重要な差別化ポイント</h3>
            <ul className="text-sm text-yellow-700 space-y-1">
              <li>• 一般的なスポーツウェアではなく「健康×機能性」領域に特化</li>
              <li>• 一般医療機器として27件届出済み（科学的根拠の重視）</li>
              <li>• プロアスリートから一般消費者まで幅広いターゲット</li>
              <li>• D2Cモデルによる高収益性（粗利率69.9%）</li>
            </ul>
          </div>

          <div className="mt-6 p-4 bg-green-50 rounded-lg">
            <h3 className="font-bold text-green-800 mb-2">市場機会</h3>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
              <div>
                <div className="font-medium text-green-700">国内市場</div>
                <div className="text-green-600">4人に1人が健康課題を自覚</div>
              </div>
              <div>
                <div className="font-medium text-green-700">海外市場</div>
                <div className="text-green-600">米国10.0兆円の機能性市場</div>
              </div>
              <div>
                <div className="font-medium text-green-700">成長予測</div>
                <div className="text-green-600">2030年まで年30-40%成長目標</div>
              </div>
            </div>
          </div>

          <p className="text-sm text-gray-500 mt-4">
            出典: <a href="https://finance-frontend-pc-dist.west.edge.storage-yahoo.jp/disclosure/20250228/20250227584109.pdf" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">TENTIAL事業計画書</a>
          </p>
        </div>
      </div>
    </div>
  );
};

export default App;