import Link from "next/link";
import type { ReactNode } from "react";

const nav = [
  ["/", "Home"],
  ["/content", "Content"],
  ["/pipeline", "Production"],
  ["/distribution", "Distribution"],
  ["/analytics", "Analytics"],
  ["/settings", "Settings"],
] as const;

export function AppShell({ children }: { children: ReactNode }) {
  return (
    <div className="shell">
      <aside className="sidebar">
        <div className="brand">
          <div className="brand-mark">CO</div>
          <div><strong>CartoonOS</strong><span>Decide · Make · Release · Learn</span></div>
        </div>
        <nav className="nav" aria-label="Primary navigation">
          {nav.map(([href, label], index) => (
            <Link key={href} href={href} className="nav-link">
              <span className="nav-index">{String(index + 1).padStart(2, "0")}</span>{label}
            </Link>
          ))}
        </nav>
        <div className="sidebar-note">
          <span className="eyebrow">Current objective</span>
          <strong>Prove one Golden Short loop before increasing throughput or architecture.</strong>
          <Link href="/readiness" className="text-link">Proof details →</Link>
        </div>
      </aside>
      <main className="main">
        <div className="prototype-notice">
          <span>Operational preview</span>
          <span>Live, durable, planning and unavailable states must remain visually distinct.</span>
        </div>
        {children}
      </main>
    </div>
  );
}