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

const Home = () => {

  return (
    <div style={{ 
      minHeight: "100vh", 
      display: "flex", 
      flexDirection: "column",
      backgroundColor: "#f9fafb"
    }}>
      {/* 顶部导航 */}
      <header style={{ 
        backgroundColor: "#fff", 
        boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
        padding: "1rem"
      }}>
        <div style={{ 
          maxWidth: "1280px", 
          margin: "0 auto", 
          display: "flex", 
          justifyContent: "space-between", 
          alignItems: "center" 
        }}>
          <div style={{ fontSize: "1.5rem", fontWeight: "bold", color: "#1f2937" }}>
            Excel to JSON 转换平台
          </div>
          <a href="/member/home" style={{ 
            padding: "0.5rem 1rem", 
            backgroundColor: "#1d4ed8", 
            color: "#fff", 
            borderRadius: "0.375rem", 
            textDecoration: "none",
            fontWeight: "500",
            boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1)"
          }}>
            进入用户中心
          </a>
        </div>
      </header>

      {/* 主要内容 */}
      <main style={{ flexGrow: 1 }}>
        {/* 英雄区域 */}
        <div style={{ 
          backgroundColor: "#1d4ed8", 
          padding: "3rem 1rem", 
          color: "#fff",
          textAlign: "center"
        }}>
          <h1 style={{ 
            fontSize: "2.5rem", 
            fontWeight: "800", 
            marginBottom: "1.5rem" 
          }}>
            Excel to JSON 转换平台
          </h1>
          <p style={{ 
            fontSize: "1.25rem", 
            maxWidth: "800px", 
            margin: "0 auto",
            color: "#bfdbfe"
          }}>
            基于Remix.js + TypeScript构建的管理系统，提供可视化Excel格式配置及标准化JSON数据转换服务。
          </p>
          <div style={{ 
            marginTop: "2rem", 
            display: "flex", 
            justifyContent: "center",
            gap: "1rem"
          }}>
            <a href="/member/home" style={{ 
              padding: "0.75rem 1.5rem", 
              backgroundColor: "#fff", 
              color: "#1d4ed8", 
              borderRadius: "0.375rem", 
              textDecoration: "none",
              fontWeight: "500"
            }}>
              开始使用
            </a>
            <a href="/member/api-playground" style={{ 
              padding: "0.75rem 1.5rem", 
              backgroundColor: "#1e40af", 
              color: "#fff", 
              borderRadius: "0.375rem", 
              textDecoration: "none",
              fontWeight: "500"
            }}>
              API调试
            </a>
          </div>
        </div>

        {/* 核心功能区域 */}
        <div style={{ 
          padding: "3rem 1rem", 
          backgroundColor: "#fff"
        }}>
          <div style={{ 
            maxWidth: "1280px", 
            margin: "0 auto" 
          }}>
            <h2 style={{ 
              fontSize: "2rem", 
              fontWeight: "700", 
              textAlign: "center",
              marginBottom: "2rem",
              color: "#1f2937"
            }}>
              核心功能
            </h2>

            <div style={{ 
              display: "grid", 
              gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", 
              gap: "2rem" 
            }}>
              {/* 配置管理 */}
              <div style={{ 
                padding: "1.5rem", 
                borderRadius: "0.5rem", 
                backgroundColor: "#f9fafb",
                border: "1px solid #f3f4f6"
              }}>
                <h3 style={{ 
                  fontSize: "1.25rem", 
                  fontWeight: "700", 
                  textAlign: "center",
                  marginBottom: "1rem",
                  color: "#1f2937"
                }}>
                  配置管理
                </h3>
                <ul style={{ 
                  listStyleType: "none", 
                  padding: 0, 
                  margin: 0, 
                  color: "#4b5563"
                }}>
                  <li style={{ marginBottom: "0.5rem" }}>📁 多格式模板支持 - 可创建多种Excel文件格式模板</li>
                  <li style={{ marginBottom: "0.5rem" }}>📑 多工作表配置 - 支持为每个模板配置多个工作表参数</li>
                  <li style={{ marginBottom: "0.5rem" }}>⚙️ 字段映射配置 - 可视化配置Excel列与JSON字段的映射关系</li>
                  <li style={{ marginBottom: "0.5rem" }}>🛠 验证规则设置 - 配置必填字段、数据校验规则</li>
                </ul>
              </div>

              {/* 数据转换 */}
              <div style={{ 
                padding: "1.5rem", 
                borderRadius: "0.5rem", 
                backgroundColor: "#f9fafb",
                border: "1px solid #f3f4f6"
              }}>
                <h3 style={{ 
                  fontSize: "1.25rem", 
                  fontWeight: "700", 
                  textAlign: "center",
                  marginBottom: "1rem",
                  color: "#1f2937"
                }}>
                  数据转换
                </h3>
                <ul style={{ 
                  listStyleType: "none", 
                  padding: 0, 
                  margin: 0, 
                  color: "#4b5563"
                }}>
                  <li style={{ marginBottom: "0.5rem" }}>⬆️ 多格式文件上传 - 支持xlsx、csv等多种格式文件上传</li>
                  <li style={{ marginBottom: "0.5rem" }}>👁 实时预览 - 提供表格视图和JSON视图两种数据预览模式</li>
                  <li style={{ marginBottom: "0.5rem" }}>📥 数据导出 - 支持导出标准化JSON文件</li>
                  <li style={{ marginBottom: "0.5rem" }}>🔄 批量转换 - 支持同时处理多个Excel文件</li>
                </ul>
              </div>

              {/* API服务 */}
              <div style={{ 
                padding: "1.5rem", 
                borderRadius: "0.5rem", 
                backgroundColor: "#f9fafb",
                border: "1px solid #f3f4f6"
              }}>
                <h3 style={{ 
                  fontSize: "1.25rem", 
                  fontWeight: "700", 
                  textAlign: "center",
                  marginBottom: "1rem",
                  color: "#1f2937"
                }}>
                  API服务
                </h3>
                <ul style={{ 
                  listStyleType: "none", 
                  padding: 0, 
                  margin: 0, 
                  color: "#4b5563"
                }}>
                  <li style={{ marginBottom: "0.5rem" }}>🚀 多输入源支持 - 接收文件、URL、Base64等多种输入形式</li>
                  <li style={{ marginBottom: "0.5rem" }}>⚡ 实时转换 - 提供RESTful API即时转换服务</li>
                  <li style={{ marginBottom: "0.5rem" }}>🔒 权限验证 - 支持JWT令牌验证访问权限</li>
                  <li style={{ marginBottom: "0.5rem" }}>📊 数据校验 - 自动验证数据格式和必填字段</li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        {/* 快速开始 */}
        <div style={{ 
          padding: "3rem 1rem", 
          backgroundColor: "#f9fafb"
        }}>
          <div style={{ 
            maxWidth: "1280px", 
            margin: "0 auto",
            textAlign: "center"
          }}>
            <h2 style={{ 
              fontSize: "2rem", 
              fontWeight: "700", 
              marginBottom: "1rem",
              color: "#1f2937"
            }}>
              快速开始
            </h2>
            <p style={{ 
              fontSize: "1.25rem", 
              color: "#6b7280", 
              marginBottom: "2rem" 
            }}>
              立即体验Excel to JSON强大的转换功能
            </p>

            <div style={{ 
              display: "flex", 
              justifyContent: "center",
              gap: "1rem"
            }}>
              <a href="/member/templates" style={{ 
                padding: "0.75rem 1.5rem", 
                backgroundColor: "#1d4ed8", 
                color: "#fff", 
                borderRadius: "0.375rem", 
                textDecoration: "none",
                fontWeight: "500"
              }}>
                浏览模板库
              </a>
              <a href="/member/template/add" style={{ 
                padding: "0.75rem 1.5rem", 
                backgroundColor: "#10b981", 
                color: "#fff", 
                borderRadius: "0.375rem", 
                textDecoration: "none",
                fontWeight: "500"
              }}>
                创建新模板
              </a>
            </div>
          </div>
        </div>
      </main>

      {/* 页脚 */}
      <footer style={{ 
        backgroundColor: "#fff",
        padding: "2rem 1rem",
        borderTop: "1px solid #e5e7eb"
      }}>
        <div style={{ 
          maxWidth: "1280px", 
          margin: "0 auto",
          display: "flex",
          flexDirection: "column",
          alignItems: "center"
        }}>
          <div style={{ 
            display: "flex", 
            gap: "1.5rem", 
            marginBottom: "1rem" 
          }}>
            <a href="/member/home" style={{ color: "#9ca3af", textDecoration: "none" }}>
              用户中心
            </a>
            {/* <a href="/admin" style={{ color: "#9ca3af", textDecoration: "none" }}>
              管理后台
            </a> */}
          </div>
          <p style={{ color: "#9ca3af", fontSize: "0.875rem" }}>
            &copy; 2023 Excel to JSON 转换平台. 保留所有权利.
          </p>
        </div>
      </footer>
    </div>
  );
}

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