import Link from 'next/link';

const docsLinks = [
  { href: '/docs/overview', label: 'Product Overview' },
  { href: '/docs/installation', label: 'Installation Guide' },
  { href: '/docs/first-service', label: 'Deploy Your First Service' },
  { href: '/docs/integrations', label: 'Infrastructure Integrations' },
  { href: '/docs/premium', label: 'Premium Features' },
  { href: '/docs/api', label: 'API and Automation' },
  { href: '/docs/troubleshooting', label: 'Troubleshooting' },
];

export default function DocsLayout({
  title,
  intro,
  children,
}: {
  title: string;
  intro: string;
  children: React.ReactNode;
}) {
  return (
    <section className="relative py-12 sm:py-16 lg:py-20">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 gap-10 lg:grid-cols-[260px_minmax(0,1fr)]">
          <aside className="h-fit rounded-2xl border border-surface-700/50 bg-surface-900/50 p-5 lg:sticky lg:top-24">
            <div className="mb-4">
              <p className="text-xs font-semibold uppercase tracking-[0.2em] text-brand-400">Documentation</p>
              <h2 className="mt-2 text-lg font-semibold text-surface-50">DashCaddy Docs</h2>
            </div>
            <nav className="space-y-2">
              <Link
                href="/docs"
                className="block rounded-lg px-3 py-2 text-sm font-medium text-surface-300 transition-colors hover:bg-surface-800 hover:text-brand-400"
              >
                Docs Home
              </Link>
              {docsLinks.map((link) => (
                <Link
                  key={link.href}
                  href={link.href}
                  className="block rounded-lg px-3 py-2 text-sm font-medium text-surface-300 transition-colors hover:bg-surface-800 hover:text-brand-400"
                >
                  {link.label}
                </Link>
              ))}
            </nav>
          </aside>

          <article className="min-w-0 rounded-2xl border border-surface-700/50 bg-surface-900/40 p-6 sm:p-8 lg:p-10">
            <header className="mb-10 border-b border-surface-700/50 pb-6">
              <p className="mb-3 text-xs font-semibold uppercase tracking-[0.2em] text-brand-400">DashCaddy Documentation</p>
              <h1 className="text-3xl font-bold text-surface-50 sm:text-4xl">{title}</h1>
              <p className="mt-4 max-w-3xl text-base leading-7 text-surface-300 sm:text-lg">{intro}</p>
            </header>
            <div className="prose prose-invert max-w-none prose-headings:text-surface-50 prose-p:text-surface-300 prose-li:text-surface-300 prose-strong:text-surface-100">
              {children}
            </div>
          </article>
        </div>
      </div>
    </section>
  );
}