import { DocsSidebar } from './_components/sidebar'
import { TableOfContents } from './_components/table-of-contents'
import { MarketingNav } from '@/components/layout/marketing-nav'
import { Footer } from '@/components/layout/footer'

export const metadata = {
  title: 'Docs · Spanlens',
  description:
    'Spanlens documentation: quick start, SDK reference, proxy API, OpenTelemetry, and self-hosting for drop-in LLM observability.',
  // NOTE: no `alternates.canonical` here — it would be inherited by every
  // docs page without its own `alternates`, canonicalising them all to
  // /docs and de-indexing them. Each docs page declares its own canonical.
}

export default function DocsLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="min-h-screen bg-bg">
      {/* Nav */}
      <MarketingNav subtitle="Docs" />

      <div className="max-w-7xl mx-auto flex gap-8 px-6 py-10">
        <aside className="hidden md:block w-56 shrink-0">
          <div className="sticky top-20">
            <DocsSidebar />
          </div>
        </aside>

        <main className="flex-1 min-w-0 max-w-2xl">
          <article
            className="prose prose-stone max-w-none
              prose-headings:scroll-mt-20
              prose-pre:bg-[#1a1816] prose-pre:text-[#d4cfc8] prose-pre:shadow-sm prose-pre:border prose-pre:border-border/40
              prose-a:text-accent prose-a:no-underline hover:prose-a:opacity-80
              prose-table:text-sm
              [&_table_th]:align-middle [&_table_td]:align-middle
              [&_table_th:first-child]:text-left [&_table_td:first-child]:text-left
              [&_table_td:first-child]:whitespace-nowrap
              [&_:not(pre)>code]:bg-bg-elev [&_:not(pre)>code]:text-text [&_:not(pre)>code]:font-normal [&_:not(pre)>code]:text-[0.9em] [&_:not(pre)>code]:rounded [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:border [&_:not(pre)>code]:border-border
              [&_:not(pre)>code]:before:content-none [&_:not(pre)>code]:after:content-none
              [&_pre_code]:bg-transparent [&_pre_code]:text-inherit [&_pre_code]:p-0 [&_pre_code]:rounded-none [&_pre_code]:text-sm [&_pre_code]:font-normal [&_pre_code]:before:content-none [&_pre_code]:after:content-none"
          >
            {children}
          </article>
        </main>

        <aside className="hidden xl:block w-52 shrink-0">
          <div className="sticky top-20">
            <TableOfContents />
          </div>
        </aside>
      </div>

      <Footer />
    </div>
  )
}
