import { getProfile } from "../data.ts";
import { PageNav } from "./page-nav.tsx";

export const otherEntries = [
  {
    index: "01",
    href: "/knowledge/now",
    title: "Now",
    description: "My current understanding of the systems I am studying.",
    meta: "Living note",
    external: false,
  },
  {
    index: "02",
    href: "/services",
    title: "Services",
    description: "Private tutoring, company workshops, and AI and agent consulting.",
    meta: "Available work",
    external: false,
  },
  {
    index: "03",
    href: "/endorsements",
    title: "Endorsements",
    description: "Projects and people endorsed through public fund.at records.",
    meta: "AT Protocol",
    external: false,
  },
  {
    index: "04",
    href: "/type",
    title: "Around typeface",
    description: "A custom geometric display face drawn from the Ring's grammar.",
    meta: "Typeface specimen",
    external: false,
  },
  {
    index: "05",
    href: "/type/processional",
    title: "Processional typeface",
    description: "A monumental display face built from pylons, slabs, and circular apertures.",
    meta: "Typeface specimen",
    external: false,
  },
  {
    index: "06",
    href: "/links",
    title: "Links",
    description: "Saved reading and interesting things from my public Semble collection.",
    meta: "Bookmarks",
    external: false,
  },
  {
    index: "07",
    href: "/type/brinewake",
    title: "Brinewake typeface",
    description: "An original ink-cut serif. Soft curves and sharply cut edges.",
    meta: "Typeface specimen",
    external: false,
  },
  {
    index: "08",
    href: "/tide-pool",
    title: "Tide pool",
    description: "A tidal shelf its machines dig, fill, and build on. Leave something, then follow who comes for it.",
    meta: "Interactive art",
    external: false,
  },
];

export async function OtherIndex() {
  const profile = await getProfile();

  return (
    <div>
      <PageNav profile={profile} active="other" />

      <header class="other-index-header">
        <h1 class="page-title">Other</h1>
        <p class="page-subtitle">Misc stuff.</p>
      </header>

      <nav class="other-index-list" aria-label="Other pages">
        {otherEntries.map((entry) => (
          <a
            href={entry.href}
            target={entry.external ? "_blank" : undefined}
            rel={entry.external ? "noopener" : undefined}
            class="other-index-entry"
            key={entry.href}
          >
            <span class="other-index-number">{entry.index}</span>
            <span class="other-index-copy">
              <strong>
                {entry.title}
                {entry.external && <span aria-hidden="true"> ↗</span>}
              </strong>
              <span>{entry.description}</span>
            </span>
            <span class="other-index-meta">{entry.meta}</span>
          </a>
        ))}
      </nav>
    </div>
  );
}