import Link from "next/link";
import type { Metadata } from "next";
import { PageHeader } from "@/app/admin/_components/ui";

export const metadata: Metadata = {
  title: "Homepage content",
};

const editors = [
  { href: "/admin/homepage/header", label: "Header & logo", hint: "Logo, title, subtitle" },
  { href: "/admin/homepage/hero", label: "Hero", hint: "Copy, CTA, carousel slides" },
  { href: "/admin/homepage/ged", label: "GED feature", hint: "Heading, body, seal labels" },
  { href: "/admin/homepage/about", label: "About", hint: "Copy, CTA, both images" },
  { href: "/admin/homepage/programs", label: "Programs section", hint: "Heading, body, main image" },
  { href: "/admin/homepage/partners", label: "Partners", hint: "Label and partner logos" },
  { href: "/admin/homepage/blogs", label: "Blog section", hint: "Heading and intro copy" },
  { href: "/admin/homepage/footer", label: "Footer", hint: "Contact details and program links" },
];

export default function HomepageAdminPage() {
  return (
    <div>
      <PageHeader
        title="Homepage content"
        description="Update homepage text and images."
      />

      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3">
        {editors.map((editor) => (
          <Link
            key={editor.href}
            href={editor.href}
            className="rounded-2xl border border-[#d9e2f7] bg-white p-4 hover:bg-[#f8faff]"
          >
            <p className="font-semibold text-[#132b87]">{editor.label}</p>
            <p className="mt-1 text-sm text-[#5a688d]">{editor.hint}</p>
          </Link>
        ))}
      </div>
    </div>
  );
}
