Artifacts

import Link from "next/link";
import { Users, ArrowUpRight } from "lucide-react";
import { PageHeader } from "@/components/layout/page-header";
import { EmptyState } from "@/components/shared/empty-state";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { getExecutives } from "@/lib/content/executives";

export const dynamic = "force-dynamic";
export const metadata = { title: "Executives" };

function initials(name: string) {
  return name
    .split(" ")
    .map((p) => p[0])
    .join("")
    .slice(0, 2)
    .toUpperCase();
}

export default function ExecutivesPage() {
  const executives = getExecutives();

  return (
    <div>
      <PageHeader
        eyebrow="Intelligence"
        title="Executives"
        description="Hermes executive profiles. Each holds standing authority, current objectives, and the lessons the organization has preserved."
      />

      {executives.length === 0 ? (
        <EmptyState
          icon={Users}
          title="No executive profiles"
          description="Add a Hermes profile (.yaml) under hermes/executives/ to render it here."
          hint="src/hermes/executives/agent-z.yaml"
        />
      ) : (
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          {executives.map((e) => (
            <Link key={e.id} href={`/executives/${e.id}`} className="group block">
              <Card className="h-full p-6 transition-all hover:border-foreground/20 hover:shadow-[0_2px_8px_rgba(16,24,40,0.06)]">
                <div className="flex items-start justify-between">
                  <div className="flex items-center gap-3.5">
                    <div className="flex h-11 w-11 items-center justify-center rounded-full bg-primary text-sm font-semibold text-primary-foreground">
                      {initials(e.name)}
                    </div>
                    <div>
                      <div className="text-[15px] font-semibold tracking-tight text-foreground">
                        {e.name}
                      </div>
                      <div className="text-[13px] text-muted-foreground">{e.role}</div>
                    </div>
                  </div>
                  <ArrowUpRight className="h-4 w-4 text-muted-foreground/40 transition-colors group-hover:text-foreground" />
                </div>
                <p className="mt-4 line-clamp-3 text-[14px] leading-relaxed text-foreground/80">
                  {e.mission}
                </p>
                {e.authority.length > 0 && (
                  <div className="mt-4 flex flex-wrap gap-1.5">
                    {e.authority.slice(0, 4).map((a) => (
                      <Badge key={a} variant="muted">
                        {a}
                      </Badge>
                    ))}
                    {e.authority.length > 4 && (
                      <Badge variant="muted">+{e.authority.length - 4}</Badge>
                    )}
                  </div>
                )}
              </Card>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}