import Link from "next/link";
import { helpNavItems } from "@/components/help/help-nav-data";

export default function HelpIndexPage() {
  return (
    <div className="max-w-3xl">
      <header className="mb-10">
        <h1 className="font-heading text-3xl md:text-4xl font-bold tracking-tight text-[#2D3436]">
          Help Center
        </h1>
        <p className="mt-3 text-lg text-[#8A8F87] leading-relaxed">
          Everything you need to know about managing your home with honeyDue.
        </p>
      </header>

      <div className="grid sm:grid-cols-2 gap-4">
        {helpNavItems.map((item) => (
          <Link
            key={item.href}
            href={item.href}
            className="group rounded-2xl border border-[#E8E3DC] bg-white p-5 transition-all hover:shadow-lg hover:shadow-[#2D3436]/[0.04] hover:-translate-y-0.5"
          >
            <div className="flex items-start gap-3.5">
              <div className="inline-flex items-center justify-center size-10 rounded-xl bg-[#EDF2ED] text-[#6B8F71] shrink-0">
                <item.icon className="size-5" />
              </div>
              <div>
                <h2 className="font-heading text-base font-bold text-[#2D3436] group-hover:text-[#6B8F71] transition-colors">
                  {item.label}
                </h2>
                <p className="text-sm text-[#8A8F87] mt-0.5 leading-relaxed">
                  {item.description}
                </p>
              </div>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}
