// app/(account)/layout.tsx
import Link from "next/link";
import AccountChrome from "./AccountChrome";

const nav = [
  { href: "/account", label: "My Account" },
  { href: "/account/settings", label: "Settings" },
  { href: "/vault", label: "My Vault" },
];

export default function AccountLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="min-h-screen">
      <AccountChrome />

      <div className="mx-auto w-full max-w-6xl px-4 py-6">
        {/* Header */}
        <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
          <div>
            <div className="text-[11px] uppercase tracking-[0.22em] text-white/50">
              Account
            </div>
            <h1 className="mt-1 text-2xl font-semibold text-white/90">
              Settings & Profile
            </h1>
            <p className="mt-1 text-sm text-white/60">
              Profile, password, and account settings.
            </p>
          </div>

          <Link
            href="/builder"
            className="inline-flex items-center justify-center rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm font-semibold text-white/80 hover:bg-white/10"
          >
            ← Back to Builder
          </Link>
        </div>

        <div className="grid gap-6 lg:grid-cols-12">
          <aside className="lg:col-span-3 rounded-2xl border border-white/10 bg-white/5 p-4">
            <nav className="flex flex-col gap-1">
              {nav.map((item) => (
                <Link
                  key={item.href}
                  href={item.href}
                  className="rounded-lg px-3 py-2 text-sm text-white/70 hover:bg-white/10 hover:text-white"
                >
                  {item.label}
                </Link>
              ))}
            </nav>
          </aside>

          <main className="lg:col-span-9 rounded-2xl border border-white/10 bg-white/5 p-5">
            {children}
          </main>
        </div>
      </div>
    </div>
  );
}