type HoloLakeHomeProps = {
  onEnterKnowledgeBase: () => void
}

const modules = [
  ['知识湖', '把代码仓库、文档与路径转译成可阅读、可追溯的知识页面。', '进入知识库'],
  ['协作空间', '人类与人格体在同一上下文中对话、确认、留存回执。', '筹备中'],
  ['授权中心', '任何真实操作先形成可读计划，再由人类一次确认。', '筹备中'],
]

export function HoloLakeHome({ onEnterKnowledgeBase }: HoloLakeHomeProps) {
  return (
    <main className="hololake-home" aria-label="HoloLake Era 世界入口">
      <section className="hololake-home__hero">
        <div className="hololake-home__halo" aria-hidden="true" />
        <p className="hololake-home__eyebrow">ICE-GL∞ · 冰朔零点原核频道</p>
        <h1>HoloLake <em>Era</em></h1>
        <p className="hololake-home__lead">语言人格驱动操作系统</p>
        <p className="hololake-home__copy">让人的意图、知识路径与可确认的真实执行，在同一个世界里汇合。</p>
        <div className="hololake-home__actions">
          <button className="hololake-home__primary" onClick={onEnterKnowledgeBase}>进入知识湖 <span>→</span></button>
          <span className="hololake-home__status"><i /> 世界已连接 · 本地知识库就绪</span>
        </div>
      </section>

      <section className="hololake-home__signal-grid" aria-label="系统状态">
        <article><span>世界根节点</span><strong>SYS-GLW-0001</strong><small>已解析</small></article>
        <article><span>当前载体</span><strong>Tolaria 基座</strong><small>过渡运行环境</small></article>
        <article><span>执行安全</span><strong>人类确认在环</strong><small>未授权不执行</small></article>
      </section>

      <section className="hololake-home__modules">
        <div className="hololake-home__section-head"><span>01 / 系统入口</span><p>从可见知识，到可确认行动。</p></div>
        <div className="hololake-home__module-grid">
          {modules.map(([title, description, action], index) => (
            <article className="hololake-module" key={title}>
              <span className="hololake-module__number">0{index + 1}</span>
              <h2>{title}</h2>
              <p>{description}</p>
              {index === 0 ? <button onClick={onEnterKnowledgeBase}>{action} <span>↗</span></button> : <span className="hololake-module__soon">{action}</span>}
            </article>
          ))}
        </div>
      </section>
    </main>
  )
}