import React, { useState } from 'react';
import Header from './components/Layouts/Header';
import MapContainer from './components/Map/MapContainer';
import SiQuan from './components/Business/SiQuan';
import SiZhi from './components/Business/SiZhi';
import SiYu from './components/Business/SiYu';
import SiGuan from './components/Business/SiGuan';
import './index.less';

const HomePage = () => {
  const [activeMenu, setActiveMenu] = useState('siquan');

  const renderContent = () => {
    switch (activeMenu) {
      case 'siquan':
        return <SiQuan />;
      case 'sizhi':
        return <SiZhi />;
      case 'siyu':
        return <SiYu />;
      case 'siguan':
        return <SiGuan />;
      default:
        return <SiQuan />;
    }
  };

  return (
    <div className="home-page">
      <Header activeMenu={activeMenu} onMenuChange={setActiveMenu} />
      <div className="main-content-wrapper">
        <MapContainer />
        <div className="content-overlay">
          {renderContent()}
        </div>
      </div>
    </div>
  )
}

export default HomePage;