import { Bot, FileText, LockKeyhole, ShieldCheck } from 'lucide-react';
import { HomeModeSelector } from '@/components/home/HomeModeSelector';

const details = [
  {
    icon: LockKeyhole,
    title: '本地记录加密',
    desc: '测评记录写入浏览器 IndexedDB 前会先加密；旧记录读取后会自动迁移为密文。',
  },
  {
    icon: ShieldCheck,
    title: '服务器只存密文',
    desc: '匿名同步使用代号和恢复口令派生密钥，记录在浏览器加密后再上传。',
  },
  {
    icon: FileText,
    title: '完整导出',
    desc: '可导出 Markdown / JSON，也可以复制给 ChatGPT 做长期解读。',
  },
];

export default function Home() {
  return (
    <main className="min-h-[calc(100vh-3.5rem)] bg-background">
      <section className="safe-x mx-auto grid max-w-6xl gap-8 py-8 md:grid-cols-[1fr_380px] md:py-14">
        <div className="space-y-8">
          <div className="space-y-4">
            <h1 className="text-4xl font-semibold leading-tight tracking-normal md:text-5xl">
              MindScope
            </h1>
            <p className="max-w-2xl text-base leading-7 text-muted-foreground md:text-lg">
              中文心理量表与个人测评档案。先选择保存模式，再开始答题。
              默认本地加密；需要跨设备时，可以使用匿名加密同步。
            </p>
          </div>

          <div className="grid gap-3 md:grid-cols-3">
            {details.map((item) => (
              <div key={item.title} className="border p-4">
                <div className="mb-2 flex items-center gap-2 font-medium">
                  <item.icon className="h-4 w-4" />
                  {item.title}
                </div>
                <p className="text-sm leading-6 text-muted-foreground">{item.desc}</p>
              </div>
            ))}
          </div>

          <div className="border-l-2 border-primary pl-4 text-sm leading-6 text-muted-foreground">
            结果仅供自我了解、教育和研究参考，不构成医学或心理诊断。
            不建议填写真实姓名、手机号、住址等身份信息。
          </div>

          <div className="border bg-muted/30 p-4">
            <div className="mb-2 flex items-center gap-2 font-medium">
              <Bot className="h-4 w-4" />
              给 AI 解读
            </div>
            <p className="text-sm leading-6 text-muted-foreground">
              完成测评后可以复制完整记录给 ChatGPT。若想长期追踪变化，可以在对话里明确说：
              “请记住我的测评背景和后续变化”。
            </p>
          </div>
        </div>

        <HomeModeSelector />
      </section>
    </main>
  );
}