import type { Metadata } from "next";
import Link from "next/link";

import { ArrowRightIcon } from "@/components/icons/arrow-right";
import { PageHero } from "@/components/marketing/page-hero";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export const metadata: Metadata = {
  title: "For developers",
  description:
    "Build on krypco — docs, architecture, and a portal to follow hybrid transactions.",
};

const LINKS = [
  {
    href: "/portal/docs",
    title: "Docs",
    body: "SDK and API stubs as the surface solidifies.",
  },
  {
    href: "/portal/architecture",
    title: "Architecture",
    body: "Layers, relayer, and how anchors relate to private blocks.",
  },
  {
    href: "/portal/explorer",
    title: "Explorer",
    body: "Follow private execution → public anchor in the portal.",
  },
] as const;

export default function DevelopersPage() {
  return (
    <>
      <PageHero
        eyebrow="For developers"
        title="Build on the hybrid path"
        description="The portal and docs are the working surface: understand the private and public layers, then follow real transaction lifecycle states as the network comes online."
      >
        <div className="flex flex-wrap gap-3">
          <Link
            href="/portal/docs"
            className={cn(buttonVariants({ size: "lg" }), "gap-2")}
          >
            Open docs
            <ArrowRightIcon size={15} />
          </Link>
          <Link
            href="/portal"
            className={cn(buttonVariants({ variant: "outline", size: "lg" }))}
          >
            Open portal
          </Link>
        </div>
      </PageHero>

      <section className="section-pad">
        <div className="mx-auto max-w-6xl px-5 lg:px-8">
          <ul className="divide-y divide-border rounded-2xl border border-border bg-card">
            {LINKS.map((item) => (
              <li key={item.href}>
                <Link
                  href={item.href}
                  className="flex flex-col gap-1 px-6 py-6 transition-colors hover:bg-muted/50 sm:flex-row sm:items-center sm:justify-between sm:gap-8"
                >
                  <div>
                    <p className="font-display text-lg font-semibold">
                      {item.title}
                    </p>
                    <p className="mt-1 text-sm text-muted-foreground">
                      {item.body}
                    </p>
                  </div>
                  <ArrowRightIcon
                    size={16}
                    className="shrink-0 text-muted-foreground"
                  />
                </Link>
              </li>
            ))}
          </ul>
        </div>
      </section>
    </>
  );
}