import { FileText, Network, Server, Shield, Activity, Wrench, FolderGit2, Home } from "lucide-react";

export default function Fastr1DocsSite() {
  const nav = [
    { title: "Home", icon: Home, active: true },
    { title: "Architecture", icon: FileText },
    { title: "Network", icon: Network },
    { title: "Infrastructure", icon: Server },
    { title: "Services", icon: FolderGit2 },
    { title: "Monitoring", icon: Activity },
    { title: "Security", icon: Shield },
    { title: "Runbooks", icon: Wrench },
  ];

  const sections = [
    {
      title: "Architecture overview",
      text: "A high-level map of the homelab, including internet edge, public hosting, internal services, and where each piece belongs so future-you does not have to perform archaeology.",
    },
    {
      title: "Network and DNS",
      text: "DNS flow, local name resolution, reverse proxy design, subdomain usage, and any future VLAN or firewall segmentation plans.",
    },
    {
      title: "Windows infrastructure",
      text: "Domain controller details, AD design, Microsoft services, and the pieces that matter when your lab starts pretending it is an enterprise.",
    },
    {
      title: "Monitoring and observability",
      text: "Grafana, Prometheus, Loki, uptime checks, alerting paths, and the dashboards you will definitely stare at while pretending that is the same as solving the problem.",
    },
  ];

  const quickLinks = [
    "01_architecture/homelab-architecture.md",
    "02_network/dns-and-proxy.md",
    "03_infrastructure/windows-server-build.md",
    "04_services/service-catalog.md",
    "05_monitoring/observability-stack.md",
    "07_runbooks/common-fixes.md",
  ];

  return (
    <div className="min-h-screen bg-zinc-950 text-zinc-100">
      <div className="flex min-h-screen">
        <aside className="hidden w-72 shrink-0 border-r border-zinc-800 bg-zinc-950 lg:block">
          <div className="sticky top-0 flex h-screen flex-col">
            <div className="border-b border-zinc-800 px-6 py-6">
              <div className="text-xs font-semibold uppercase tracking-[0.18em] text-zinc-500">
                fastr1 docs
              </div>
              <div className="mt-2 text-2xl font-semibold text-white">Homelab Handbook</div>
              <p className="mt-3 text-sm leading-6 text-zinc-400">
                Documentation for systems, services, and infrastructure choices that seemed wise at the time.
              </p>
            </div>

            <nav className="flex-1 px-4 py-5">
              <div className="space-y-1">
                {nav.map((item) => {
                  const Icon = item.icon;
                  return (
                    <a
                      key={item.title}
                      href="#"
                      className={`flex items-center gap-3 rounded-2xl px-4 py-3 text-sm transition ${
                        item.active
                          ? "bg-zinc-900 text-white shadow-sm"
                          : "text-zinc-400 hover:bg-zinc-900 hover:text-zinc-200"
                      }`}
                    >
                      <Icon className="h-4 w-4" />
                      <span>{item.title}</span>
                    </a>
                  );
                })}
              </div>
            </nav>

            <div className="border-t border-zinc-800 p-4">
              <div className="rounded-2xl border border-zinc-800 bg-zinc-900 p-4">
                <div className="text-sm font-medium text-white">Publishing model</div>
                <p className="mt-2 text-sm leading-6 text-zinc-400">
                  Public docs on Cloudflare Pages. Internal tools stay in the lab where they can continue their quiet, unreliable little lives.
                </p>
              </div>
            </div>
          </div>
        </aside>

        <main className="flex-1">
          <header className="border-b border-zinc-800 bg-zinc-950/90 backdrop-blur">
            <div className="mx-auto max-w-6xl px-6 py-5 lg:px-10">
              <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
                <div>
                  <div className="text-sm text-zinc-500">Documentation portal</div>
                  <h1 className="mt-1 text-3xl font-bold tracking-tight text-white">
                    fastr1 homelab docs
                  </h1>
                </div>
                <div className="flex flex-wrap gap-3">
                  <a
                    href="#"
                    className="rounded-2xl border border-zinc-700 bg-zinc-900 px-4 py-2 text-sm text-zinc-200 hover:border-zinc-500 hover:bg-zinc-800"
                  >
                    View repo
                  </a>
                  <a
                    href="#"
                    className="rounded-2xl bg-white px-4 py-2 text-sm font-medium text-zinc-950 hover:-translate-y-0.5 transition"
                  >
                    Open runbooks
                  </a>
                </div>
              </div>
            </div>
          </header>

          <div className="mx-auto max-w-6xl px-6 py-8 lg:px-10">
            <section className="grid gap-6 lg:grid-cols-[1.3fr_0.7fr]">
              <div className="rounded-3xl border border-zinc-800 bg-zinc-900 p-8 shadow-sm">
                <div className="inline-flex rounded-full border border-zinc-700 bg-zinc-950 px-3 py-1 text-xs uppercase tracking-[0.16em] text-zinc-400">
                  Overview
                </div>
                <h2 className="mt-4 text-4xl font-bold tracking-tight text-white">
                  A docs-style site built for actual operations, not decorative nonsense.
                </h2>
                <p className="mt-5 max-w-3xl text-base leading-8 text-zinc-300">
                  This format works better for your environment because it turns the website into an extension of your Git documentation. Instead of a glossy homepage with nowhere useful to go, you get a structured handbook for architecture, services, troubleshooting, and future build plans.
                </p>
                <div className="mt-6 rounded-2xl border border-zinc-800 bg-zinc-950 p-5 font-mono text-sm leading-7 text-zinc-300">
                  fastr1-docs/
                  <br />├── 01_architecture/
                  <br />├── 02_network/
                  <br />├── 03_infrastructure/
                  <br />├── 04_services/
                  <br />├── 05_monitoring/
                  <br />├── 06_security/
                  <br />└── 07_runbooks/
                </div>
              </div>

              <div className="rounded-3xl border border-zinc-800 bg-zinc-900 p-8 shadow-sm">
                <div className="text-lg font-semibold text-white">Quick links</div>
                <div className="mt-5 space-y-3">
                  {quickLinks.map((link) => (
                    <a
                      key={link}
                      href="#"
                      className="block rounded-2xl border border-zinc-800 bg-zinc-950 px-4 py-3 font-mono text-sm text-zinc-300 transition hover:border-zinc-700 hover:text-white"
                    >
                      {link}
                    </a>
                  ))}
                </div>
              </div>
            </section>

            <section className="mt-8 grid gap-6 xl:grid-cols-2">
              {sections.map((section) => (
                <div
                  key={section.title}
                  className="rounded-3xl border border-zinc-800 bg-zinc-900 p-8 shadow-sm"
                >
                  <h3 className="text-2xl font-semibold text-white">{section.title}</h3>
                  <p className="mt-4 text-sm leading-7 text-zinc-400">{section.text}</p>
                  <a
                    href="#"
                    className="mt-6 inline-flex rounded-2xl border border-zinc-700 bg-zinc-950 px-4 py-2 text-sm text-zinc-200 transition hover:border-zinc-500 hover:bg-zinc-800"
                  >
                    Read section
                  </a>
                </div>
              ))}
            </section>

            <section className="mt-8 rounded-3xl border border-zinc-800 bg-zinc-900 p-8 shadow-sm">
              <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
                <div className="max-w-3xl">
                  <h3 className="text-2xl font-semibold text-white">Recommended site structure</h3>
                  <p className="mt-4 text-sm leading-7 text-zinc-400">
                    Keep the public side clean and useful. The docs site should explain the environment, link to diagrams, and provide sanitized runbooks. Anything sensitive or truly internal stays out of the public build because the internet is full of bored weirdos with port scanners.
                  </p>
                </div>
                <div className="rounded-2xl border border-zinc-800 bg-zinc-950 px-4 py-3 text-sm text-zinc-300">
                  Best fit: Cloudflare Pages + GitHub
                </div>
              </div>

              <div className="mt-6 grid gap-4 md:grid-cols-3">
                {[
                  ["Public", "Architecture summaries, service catalog, learning notes, sanitized diagrams"],
                  ["Private", "Grafana, Portainer, internal DNS, admin URLs, sensitive configs"],
                  ["Hybrid", "Public docs site with links into private lab tooling where appropriate"],
                ].map(([title, text]) => (
                  <div key={title} className="rounded-2xl border border-zinc-800 bg-zinc-950 p-5">
                    <div className="text-lg font-semibold text-white">{title}</div>
                    <p className="mt-3 text-sm leading-6 text-zinc-400">{text}</p>
                  </div>
                ))}
              </div>
            </section>
          </div>
        </main>
      </div>
    </div>
  );
}