import Script from "next/script";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { Header } from "@/components/Header";
import { Footer } from "@/components/Footer";
import { SkipToContent } from "@/components/SkipToContent";
import { organizationJsonLd, websiteJsonLd } from "@/lib/json-ld";

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

export const metadata: Metadata = {
  title: {
    default: "Jenado Unlimited — Honey, Training, Sourdough & More",
    template: "%s | Jenado Unlimited",
  },
  description: "Jenado Unlimited — local honey, personal training, artisan sourdough, farm-to-table dining, recreation apps, laser engraving, and 3D printing.",
  generator: "Next.js",
  keywords: ["honey", "personal training", "sourdough", "farm-to-table", "recreation apps", "laser engraving", "3d printing"],
  openGraph: {
    type: "website",
    locale: "en_US",
    siteName: "Jenado Unlimited",
  },
  robots: {
    index: true,
    follow: true,
  },
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" data-scroll-behavior="smooth" suppressHydrationWarning className={inter.variable}>
      <body className="antialiased bg-[var(--color-bg)] text-[var(--color-text)] font-sans">
        <Script id="org-jsonld" type="application/ld+json" strategy="afterInteractive">
          {`{${JSON.stringify(organizationJsonLd())}}`}
        </Script>
        <Script id="website-jsonld" type="application/ld+json" strategy="afterInteractive">
          {`{${JSON.stringify(websiteJsonLd())}}`}
        </Script>
        <SkipToContent />
        <Header />
        <main id="main-content" className="min-h-screen">{children}</main>
        <Footer />
      </body>
    </html>
  );
}
