// app/layout.tsx

import { Leaf } from "lucide-react";
import type { Metadata, Viewport } from "next";
import { Navigation } from "./components/Navigation";
import "./globals.css";

export const viewport: Viewport = {
  themeColor: "#0E292E",
  width: "device-width",
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
};

export const metadata: Metadata = {
  title: "Naturvärdarna Kullaberg",
  description: "Intern app för naturvärdarna på Kullaberg",
  manifest: "/manifest.json",
  appleWebApp: {
    capable: true,
    statusBarStyle: "default",
    title: "Naturvärdarna",
    startupImage: [
      {
        url: "/apple-splash.png",
      },
    ],
  },
  icons: {
    icon: '/favicon.svg',
    shortcut: '/favicon.svg',
    apple: [
      { url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' },
    ],
  },
  formatDetection: {
    telephone: false,
  }
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="sv" suppressHydrationWarning>
      <body className="min-h-screen bg-eggshell font-sans text-ebony selection:bg-gold selection:text-ebony pb-10">
        {/* Header & Navigation */}
        <header className="sticky top-0 z-50 bg-ebony shadow-md">
          <div className="max-w-5xl mx-auto">
            <div className="px-4 py-3 flex items-center justify-between">
              <h1 className="text-xl font-black text-eggshell flex items-center tracking-tight uppercase drop-shadow-sm">
                <Leaf className="mr-2 text-seafoam" size={20} />
                Naturvärdarna
              </h1>
            </div>
            <Navigation />
          </div>
        </header>

        {/* Main Content Area */}
        <main className="max-w-5xl mx-auto p-3 py-6 md:py-8">
          {children}
        </main>
      </body>
    </html>
  );
}