import Link from "next/link";
import PageShell from "@/components/page-shell";
import { BookOpen, BrainCircuit, Compass, Sparkles } from "lucide-react";

const MODULES = [
  {
    href: "/learn",
    title: "易经学习",
    description: "64 卦原文阅读，繁体精简版与简体图文版",
    icon: BookOpen,
  },
  {
    href: "/liuyao",
    title: "六爻算卦",
    description: "三钱法起卦，结合卦辞 AI 智能解读",
    icon: Sparkles,
  },
  {
    href: "/bazi",
    title: "生辰八字",
    description: "四柱排盘，十神大运流年，AI 命理解读",
    icon: BrainCircuit,
  },
  {
    href: "/combined",
    title: "综合测算",
    description: "天时地利人和融合分析，六爻可选",
    icon: Compass,
  },
];

export default function Home() {
  return (
    <PageShell className="max-w-2xl px-4 py-8">
      <div className="mb-8 text-center">
        <h1 className="text-2xl font-bold tracking-tight">知命阁</h1>
        <p className="mt-2 text-muted-foreground">
          融合周易智慧与人工智能
        </p>
      </div>
      <div className="grid gap-4 sm:grid-cols-2">
        {MODULES.map(({ href, title, description, icon: Icon }) => (
          <Link
            key={href}
            href={href}
            className="group rounded-lg border bg-card p-5 shadow-sm transition-colors hover:border-primary/40 hover:bg-accent/30"
          >
            <div className="mb-3 flex items-center gap-2">
              <Icon size={20} className="text-primary" />
              <span className="font-medium">{title}</span>
            </div>
            <p className="text-sm text-muted-foreground">{description}</p>
          </Link>
        ))}
      </div>
    </PageShell>
  );
}