import Link from "next/link";

const chatHighlights = [
  "打开网站即自动生成临时设备身份",
  "公共聊天室支持文字、图片、文件、粘贴和拖拽",
  "手机和电脑共用同一个入口，便于局域网内快速传资料"
];

const libraryHighlights = [
  "书架内置几本演示书，方便先验证阅读体验",
  "阅读页采用干净居中的版心，弱干扰、强正文",
  "后续可继续接入章节目录、阅读设置和进度同步"
];

const agentHighlights = [
  "按成员卡片方式查看每个 agent 的角色、状态和当前任务",
  "适合后续接入真实心跳、队列、产出摘要和运行节点信息",
  "同样兼容手机查看，适合做局域网里的总览大盘"
];

export default function HomePage() {
  return (
    <main className="page-shell">
      <section className="hero">
        <div className="card hero__main">
          <div className="eyebrow">一期骨架已就位</div>
          <h1>一个入口，承接局域网聊天和小说阅读。</h1>
          <p>
            这个版本先把信息架构、页面风格和响应式骨架搭起来。你可以先从聊天室进入，也可以直接去书架页查看阅读器的版式方向。
          </p>
          <div className="hero__actions">
            <Link className="button button--primary" href="/chat">
              打开聊天室
            </Link>
            <Link className="button button--secondary" href="/library">
              进入书架
            </Link>
          </div>
        </div>

        <div className="hero__aside">
          <div className="stat-card">
            <h3>局域网公共聊天室</h3>
            <p>为几台电脑和手机之间传送文本、图片、文件而设计，页面结构已经按后续实时通信预留好了区域。</p>
          </div>
          <div className="stat-card">
            <h3>简洁阅读器</h3>
            <p>书架、章节、阅读页都已经连通，后续只需要继续接入真实数据和阅读设置即可。</p>
          </div>
        </div>
      </section>

      <section className="home-sections">
        <div className="section-card">
          <h2>模块一：聊天室</h2>
          <p>先做一个你自己在局域网里使用的公共聊天空间，操作简单，文件流转顺手。</p>
          <div className="section-card__list">
            {chatHighlights.map((item, index) => (
              <div className="section-card__item" key={item}>
                <div className="section-card__index">{index + 1}</div>
                <div>{item}</div>
              </div>
            ))}
          </div>
          <Link className="button button--primary" href="/chat">
            去看聊天页骨架
          </Link>
        </div>

        <div className="section-card">
          <h2>模块二：书架与阅读</h2>
          <p>阅读页先走你要的简洁路线，把版心、段落、操作区和手机排版先定下来。</p>
          <div className="section-card__list">
            {libraryHighlights.map((item, index) => (
              <div className="section-card__item" key={item}>
                <div className="section-card__index">{index + 1}</div>
                <div>{item}</div>
              </div>
            ))}
          </div>
          <Link className="button button--secondary" href="/library">
            去看书架骨架
          </Link>
        </div>

        <div className="section-card">
          <h2>模块三：Agent 观察页</h2>
          <p>新增一个偏大盘视角的成员总览，主要用于观察各个 agent 当前的状态和最近输出。</p>
          <div className="section-card__list">
            {agentHighlights.map((item, index) => (
              <div className="section-card__item" key={item}>
                <div className="section-card__index">{index + 1}</div>
                <div>{item}</div>
              </div>
            ))}
          </div>
          <Link className="button button--primary" href="/agents">
            去看 Agent 页面
          </Link>
        </div>
      </section>
    </main>
  );
}