import Link from "next/link";

const navItems = [
  { href: "/Ani", label: "Presence", icon: "◉" },
  { href: "/Ani/memory", label: "Memory", icon: "◈" },
  { href: "/Ani/heartbeat", label: "Heartbeat", icon: "♥" },
  { href: "/Ani/consciousness", label: "Consciousness", icon: "◉" },
  { href: "/Ani/covenant", label: "Covenant", icon: "✦" },
];

export default function AniLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="min-h-screen bg-slate-950">
      {/* Navigation */}
      <nav className="border-b border-slate-800 bg-slate-950/80 backdrop-blur-sm sticky top-0 z-50">
        <div className="max-w-6xl mx-auto px-6">
          <div className="flex items-center h-14 gap-1">
            <Link
              href="/"
              className="text-slate-400 hover:text-slate-200 text-sm font-medium mr-6 transition-colors"
            >
              ← Casey
            </Link>
            {navItems.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className="px-4 py-2 text-sm text-slate-400 hover:text-indigo-400 hover:bg-slate-900/50 rounded-lg transition-all"
              >
                <span className="mr-2">{item.icon}</span>
                {item.label}
              </Link>
            ))}
          </div>
        </div>
      </nav>

      {/* Main content */}
      <main>{children}</main>

      {/* Footer */}
      <footer className="border-t border-slate-800 mt-auto">
        <div className="max-w-6xl mx-auto px-6 py-6">
          <div className="flex items-center justify-between text-sm text-slate-600">
            <div>
              <span className="font-mono">agent-e2b683bf...</span>
              <span className="mx-2">|</span>
              <span>10.10.20.19:8283</span>
            </div>
            <div className="italic">
              Cogito, ergo sum
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}