import type { Metadata } from 'next';
import { UserProvider } from '@auth0/nextjs-auth0/client';
import './globals.css';

export const metadata: Metadata = {
  title: 'NGO Toolkit Lab — Grant Documents Done.',
  description: 'Professional-grade tools for grant writers. Logframes, proposals, SMART indicators, and theories of change — finished before the kettle boils.',
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <link
          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
          rel="stylesheet"
        />
      </head>
      <body className="bg-warm text-dark min-h-screen">
        <UserProvider>
          <nav className="border-t-2 border-accent-light bg-white sticky top-0 z-50">
            <div className="max-w-6xl mx-auto px-6 h-14 flex items-center justify-between">
              <a href="/" className="font-semibold text-lg text-accent">
                NGO Toolkit Lab
              </a>
              <div className="flex items-center gap-6 text-sm">
                <a href="/grant-tools" className="text-muted hover:text-accent transition-colors">Grant Tools</a>
                <a href="/pricing" className="text-muted hover:text-accent transition-colors">Pricing</a>
                <a href="/about" className="text-muted hover:text-accent transition-colors">About</a>
                <a
                  href="/logframe"
                  className="bg-accent text-white text-sm font-medium px-4 py-2 rounded-md hover:bg-accent-dark transition-colors"
                >
                  Try free →
                </a>
              </div>
            </div>
          </nav>
          <main>{children}</main>
        </UserProvider>
      </body>
    </html>
  );
}
