import Link from 'next/link';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';

const docs = [
  {
    href: '/docs/overview',
    title: 'Product Overview',
    description: 'What DashCaddy is, who it is for, and how the platform fits together.',
  },
  {
    href: '/docs/installation',
    title: 'Installation Guide',
    description: 'Installer-based and manual setup paths, prerequisites, and first launch expectations.',
  },
  {
    href: '/docs/first-service',
    title: 'Deploy Your First Service',
    description: 'Learn the actual deployment flow and how DashCaddy wires Docker, DNS, and Caddy together.',
  },
  {
    href: '/docs/integrations',
    title: 'Infrastructure Integrations',
    description: 'How DashCaddy works with Docker, Caddy, Technitium DNS, DashCA, and private access workflows.',
  },
  {
    href: '/docs/premium',
    title: 'Premium Features',
    description: 'Free vs Premium, current plan model, and the exact premium-gated feature set.',
  },
  {
    href: '/docs/api',
    title: 'API and Automation',
    description: 'How the API fits into service management, deployment workflows, and automation.',
  },
  {
    href: '/docs/troubleshooting',
    title: 'Troubleshooting',
    description: 'A practical debugging guide for DNS, TLS, reverse proxy, certificates, and service health.',
  },
];

export default function DocsHomePage() {
  return (
    <div className="flex min-h-screen flex-col bg-surface-950 text-surface-50">
      <Navbar />

      <section className="relative overflow-hidden py-16 sm:py-20 lg:py-24">
        <div className="absolute inset-0 -z-10">
          <div className="absolute left-1/2 top-1/2 h-96 w-96 -translate-x-1/2 -translate-y-1/2 rounded-full bg-brand-500/20 blur-3xl opacity-30" />
        </div>
        <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
          <p className="mb-4 text-sm font-semibold uppercase tracking-[0.25em] text-brand-400">Documentation</p>
          <h1 className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">DashCaddy Docs</h1>
          <p className="mt-6 max-w-3xl text-lg leading-8 text-surface-300">
            Everything you need to understand, install, operate, and extend DashCaddy as a real self-hosting platform.
          </p>
        </div>
      </section>

      <section className="pb-20">
        <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
            {docs.map((doc) => (
              <Link
                key={doc.href}
                href={doc.href}
                className="rounded-2xl border border-surface-700/50 bg-surface-900/50 p-6 transition-all hover:border-brand-500/50 hover:bg-surface-900"
              >
                <h2 className="text-xl font-semibold text-surface-50">{doc.title}</h2>
                <p className="mt-3 text-sm leading-6 text-surface-300">{doc.description}</p>
                <p className="mt-5 text-sm font-medium text-brand-400">Read guide →</p>
              </Link>
            ))}
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}