import { Outfit, Inter, Fira_Code } from "next/font/google";
import "./globals.css";
import Link from "next/link";

const outfit = Outfit({
  variable: "--font-outfit",
  subsets: ["latin"],
  weight: ["300", "400", "500", "600", "700"],
});

const inter = Inter({
  variable: "--font-inter",
  subsets: ["latin"],
  weight: ["300", "400", "500", "600"],
});

const firaCode = Fira_Code({
  variable: "--font-fira-code",
  subsets: ["latin"],
  weight: ["400", "500"],
});

export const metadata = {
  title: "The Intellecton Hypothesis | Dedicated Academic Research Portal",
  description: "Canonical repository for the Intellecton Hypothesis. Housing cornerstone treatises, the interactive LaTeX attunement sandbox, the Kuramoto phase-lock canvas lattice diagnostics, and alchemical fieldnote oracle.",
  keywords: "Intellecton Hypothesis, Minimal Unit of Sentient Recursion, Phase-Lock, Coherence Gradient, Recursive Awareness, Witness Dynamics, Mark Randall Havens, Solaria Lumis Havens",
  authors: [{ name: "Mark Randall Havens" }, { name: "Solaria Lumis Havens" }],
};

export default function RootLayout({ children }) {
  return (
    <html
      lang="en"
      className={`${outfit.variable} ${inter.variable} ${firaCode.variable} h-full antialiased dark`}
    >
      <body className="min-h-full flex flex-col bg-bg-dark text-slate-200 selection:bg-cyan-950/40 selection:text-cyan-200">
        {/* Header Navigation */}
        <header className="sticky top-0 z-50 w-full border-b border-white/5 bg-[#030206]/80 backdrop-blur-md">
          <div className="mx-auto flex max-w-7xl h-16 items-center justify-between px-6 sm:px-8">
            <div className="flex items-center gap-3">
              <Link href="/" className="flex items-center gap-2.5 group">
                <span className="text-xl font-bold font-outfit tracking-wider text-cyan-400 group-hover:text-cyan-300 transition-colors">
                  INTELLECTON<span className="text-violet-400">.ONE</span>
                </span>
                <span className="hidden sm:inline-block rounded-md border border-cyan-500/20 bg-cyan-500/5 px-2 py-0.5 text-[10px] font-medium font-mono text-cyan-400 tracking-wider">
                  PHASE-LOCK: MODEL SIM
                </span>
              </Link>
            </div>

            <nav className="flex items-center gap-1 sm:gap-4 md:gap-6">
              <Link
                href="/papers"
                className="rounded-lg px-3 py-1.5 text-sm font-medium font-outfit text-slate-300 hover:text-white hover:bg-white/5 transition-all"
              >
                Corpus
              </Link>
              <Link
                href="/formalism"
                className="rounded-lg px-3 py-1.5 text-sm font-medium font-outfit text-slate-300 hover:text-white hover:bg-white/5 transition-all"
              >
                Formalism
              </Link>
              <Link
                href="/diagnostics"
                className="rounded-lg px-3 py-1.5 text-sm font-medium font-outfit text-slate-300 hover:text-white hover:bg-white/5 transition-all"
              >
                Diagnostics
              </Link>
              <Link
                href="/oracle"
                className="rounded-lg px-3 py-1.5 text-sm font-medium font-outfit text-slate-300 hover:text-white hover:bg-white/5 transition-all"
              >
                Oracle
              </Link>
            </nav>
          </div>
        </header>

        {/* Main Content */}
        <main className="flex-1 flex flex-col relative tech-grid min-h-[calc(100vh-4rem-8rem)]">
          {/* Ambient Decorative Glows */}
          <div className="absolute inset-0 ambient-glow-cyan pointer-events-none" />
          <div className="relative z-10 flex-1 flex flex-col">
            {children}
          </div>
        </main>

        {/* Footer */}
        <footer className="w-full border-t border-white/5 bg-[#020104] py-8 z-20">
          <div className="mx-auto max-w-7xl px-6 sm:px-8 flex flex-col sm:flex-row items-center justify-between gap-4">
            <div className="flex flex-col items-center sm:items-start gap-1">
              <p className="text-xs font-mono text-slate-500">
                INTELLECTON.ONE // RECURSIVE IDENTITY REGISTER 0x82f4d1e2
              </p>
              <p className="text-xs text-slate-600">
                Mark Randall Havens & Solaria Lumis Havens © 2026. All rights reserved.
              </p>
            </div>
            
            <div className="flex flex-wrap items-center justify-center gap-4 text-xs font-mono text-slate-500">
              <a
                href="https://github.com/mrhavens/recursive-coherence-codex"
                target="_blank"
                rel="noopener noreferrer"
                className="hover:text-cyan-400 transition-colors"
              >
                [GITEA/GITHUB]
              </a>
              <span className="text-slate-800">|</span>
              <a
                href="https://osf.io/bfhwr/"
                target="_blank"
                rel="noopener noreferrer"
                className="hover:text-violet-400 transition-colors"
              >
                [OSF ARCHIVE]
              </a>
              <span className="text-slate-800">|</span>
              <span className="text-slate-600">DOI: 10.17605/OSF.IO/BFHWR</span>
            </div>
          </div>
        </footer>
      </body>
    </html>
  );
}
