import { useState, useEffect } from 'react';
import { 
  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
  PieChart, Pie, Cell, LineChart, Line
} from 'recharts';
import Header from '@/components/Header';
import Hero from '@/components/Hero';
import FeatureSection from '@/components/FeatureSection';
import FeatureDetail from '@/components/FeatureDetail';
import ChartDemo from '@/components/ChartDemo';
import PricingSection from '@/components/PricingSection';
import Testimonials from '@/components/Testimonials';
import UseCases from '@/components/UseCases';
import CTA from '@/components/CTA';
import Footer from '@/components/Footer';

// ダミーデータ - アンケート統計例
const surveyData = [
  { name: '満足', value: 65 },
  { name: '普通', value: 25 },
  { name: '不満', value: 10 },
];

const usageData = [
  { month: '1月', 利用者: 400 },
  { month: '2月', 利用者: 600 },
  { month: '3月', 利用者: 800 },
  { month: '4月', 利用者: 1200 },
  { month: '5月', 利用者: 1500 },
  { month: '6月', 利用者: 1800 },
];

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

export default function Home() {
  const [isScrolled, setIsScrolled] = useState(false);
  
  // スクロール時のヘッダースタイル変更
  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50);
    };
    
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div className="min-h-screen bg-white text-gray-800">
      {/* ヘッダー */}
      <Header isScrolled={isScrolled} />
      
      {/* ヒーローセクション */}
      <Hero />
      
      {/* 特徴セクション */}
      <FeatureSection />
      
      {/* 機能詳細セクション */}
      <FeatureDetail />

      {/* Use Cases */}
      <UseCases />

      {/* CTAセクション */}
      <CTA />
      
      {/* フッター */}
      <Footer />
    </div>
  );
}