import { Link } from 'react-router-dom'
import { createRoot } from 'react-dom/client'
import { getGlobalConfig } from '../utils/utils'

const Home = () => {
  return (
    
    <div className="min-h-screen bg-gray-50 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
    <div className="max-w-md w-full space-y-8">
      {/* 系统介绍区域 */}
      <div className="text-center">
        <h1 className="text-4xl font-bold text-gray-900 mb-4">
          {getGlobalConfig('APP_NAME')}
        </h1>
        <p className="text-lg text-gray-600 mb-8">
          全功能应用Starter
        </p>
        <p className="text-base text-gray-500 mb-8">
          这是一个基于Hono和React的应用Starter，提供了用户认证、文件管理、图表分析、地图集成和主题切换等常用功能。
        </p>
      </div>

      {/* 管理入口按钮 */}
      <div className="space-y-4">
        <Link
          to="/admin"
          className="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
        >
          进入管理后台
        </Link>
        
        {/* 移动端入口按钮 */}
        <Link
          to="/mobile"
          className="w-full flex justify-center py-3 px-4 border border-blue-600 rounded-md shadow-sm text-lg font-medium text-blue-600 bg-white hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
        >
          进入移动端
        </Link>
        
      </div>
    </div>
  </div>
  )
}

const rootElement = document.getElementById('root')
if (rootElement) {
  const root = createRoot(rootElement)
  root.render(
    <Home />
  )
}