import type { Metadata } from "next";
import Link from "next/link";
import { Inter, Lora, JetBrains_Mono } from "next/font/google";
import "./globals.css";

const inter = Inter({
  variable: "--font-inter",
  subsets: ["latin"],
});

const lora = Lora({
  variable: "--font-lora",
  subsets: ["latin"],
});

const jetbrainsMono = JetBrains_Mono({
  variable: "--font-jetbrains-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "tidalDB — One database for personalized content ranking",
  description:
    "Replace Elasticsearch + Redis + Kafka + feature store + vector DB + ranking service with a single process, a single query, and a single operational model.",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className="dark">
      <body
        className={`${inter.variable} ${lora.variable} ${jetbrainsMono.variable} antialiased bg-background text-foreground`}
        suppressHydrationWarning
      >
        <Nav />
        <main>{children}</main>
        <Footer />
      </body>
    </html>
  );
}

function Nav() {
  return (
    <nav className="fixed top-0 z-50 w-full border-b border-border/50 bg-background/80 backdrop-blur-md">
      <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
        <Link href="/" className="font-serif text-xl font-bold tracking-tight">
          tidalDB
        </Link>
        <div className="flex items-center gap-8">
          <Link
            href="/blog"
            className="text-sm text-muted transition-colors hover:text-foreground"
          >
            Notes
          </Link>
          <Link
            href="/vision"
            className="text-sm text-muted transition-colors hover:text-foreground"
          >
            Vision
          </Link>
          <a
            href="https://github.com/orchard9/tidalDB"
            target="_blank"
            rel="noopener noreferrer"
            className="rounded-full border border-border px-4 py-1.5 text-sm text-muted transition-colors hover:border-accent hover:text-foreground"
          >
            GitHub
          </a>
        </div>
      </div>
    </nav>
  );
}

function Footer() {
  return (
    <footer className="border-t border-border">
      <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-12">
        <p className="text-sm text-subtle">
          tidalDB is open source. MIT licensed.
        </p>
        <div className="flex gap-6">
          <a
            href="https://github.com/orchard9/tidalDB"
            className="text-sm text-subtle transition-colors hover:text-muted"
          >
            GitHub
          </a>
          <Link
            href="/blog"
            className="text-sm text-subtle transition-colors hover:text-muted"
          >
            Notes
          </Link>
        </div>
      </div>
    </footer>
  );
}
