import Link from "next/link";
import PageShell from "@/components/page-shell";
import { BookOpen, BrainCircuit, Compass, Sparkles } from "lucide-react";
import { ZenCard } from "@/components/ui/zen-card";
import { HOME_CONTAINER } from "@/lib/layout";
import { TaijiIcon } from "@/components/svg/taiji";

const MODULES = [
  {
    href: "/learn",
    title: "易经学习",
    description: "64 卦卡片择读，繁体精简与简体图文",
    icon: BookOpen,
    accent: "from-amber-500/10 to-transparent",
  },
  {
    href: "/liuyao",
    title: "六爻算卦",
    description: "三钱法起卦，卦辞 AI 智能解读",
    icon: Sparkles,
    accent: "from-stone-500/10 to-transparent",
  },
  {
    href: "/bazi",
    title: "生辰八字",
    description: "四柱排盘，十神大运，AI 命理解读",
    icon: BrainCircuit,
    accent: "from-zinc-500/10 to-transparent",
  },
  {
    href: "/combined",
    title: "综合测算",
    description: "天时地利人和，六爻可选",
    icon: Compass,
    accent: "from-neutral-500/10 to-transparent",
  },
];

export default function Home() {
  return (
    <PageShell className={`${HOME_CONTAINER} py-10 sm:py-14`}>
      <div className="mb-10 text-center">
        <TaijiIcon className="mx-auto h-12 w-12 opacity-80" />
        <h1 className="mt-2 text-3xl font-bold tracking-[0.2em]">知命阁</h1>
        <p className="mt-3 text-sm tracking-wide text-muted-foreground">
          融合周易智慧与人工智能
        </p>
      </div>
      <div className="grid gap-4 sm:grid-cols-2">
        {MODULES.map(({ href, title, description, icon: Icon, accent }) => (
          <Link key={href} href={href} className="group block">
            <ZenCard
              className={`h-full bg-gradient-to-br ${accent} transition-all duration-300 group-hover:-translate-y-0.5 group-hover:shadow-md`}
            >
              <div className="mb-3 flex items-center gap-3">
                <span className="flex h-10 w-10 items-center justify-center rounded-full border border-border/60 bg-background/80">
                  <Icon size={20} className="text-primary/80" />
                </span>
                <span className="text-lg font-medium tracking-wide">{title}</span>
              </div>
              <p className="text-sm leading-relaxed text-muted-foreground">
                {description}
              </p>
            </ZenCard>
          </Link>
        ))}
      </div>
    </PageShell>
  );
}