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

const cormorant = Cormorant_Garamond({
  variable: "--font-serif",
  subsets: ["latin"],
  weight: ["400", "500", "600"],
  display: "swap",
});

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

export const metadata: Metadata = {
  title: {
    default: "Cynthia Trenshaw | Poet (1942–2024)",
    template: "%s | Cynthia Trenshaw",
  },
  description: "The collected poems of Cynthia Trenshaw (1942–2024), poet, hospital chaplain, and author of Meeting in the Margins and Mortal Beings.",
  keywords: ["poetry", "Cynthia Trenshaw", "Mortal Beings", "Meeting in the Margins", "memorial", "chaplain", "poet"],
  authors: [{ name: "Cynthia Trenshaw" }],
  openGraph: {
    type: "website",
    locale: "en_US",
    siteName: "Cynthia Trenshaw — Collected Poems",
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className={`${cormorant.variable} ${inter.variable}`}>
      <body className="flex min-h-screen flex-col bg-white antialiased font-sans">
        {/* Navigation */}
        <header className="fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-sm border-b border-stone-100">
          <nav className="mx-auto max-w-5xl px-6 py-4">
            <div className="flex items-center justify-between">
              <Link href="/" className="font-serif text-xl text-stone-800 hover:text-stone-600 transition-colors">
                Cynthia Trenshaw
              </Link>
              <div className="flex items-center gap-6 text-sm">
                <Link href="/#contents" className="text-stone-600 hover:text-stone-800 transition-colors">
                  Contents
                </Link>
                <Link href="/about" className="text-stone-600 hover:text-stone-800 transition-colors">
                  About
                </Link>
                <Link href="/#books" className="text-stone-600 hover:text-stone-800 transition-colors">
                  Books
                </Link>
              </div>
            </div>
          </nav>
        </header>
        <main className="flex-1 pt-16">{children}</main>
      </body>
    </html>
  );
}
