import type { Metadata } from "next";
import { Inter, Playfair_Display } from "next/font/google";
import "./globals.css";
import { Header } from "@/components/header";
import { Footer } from "@/components/footer";
import { MobileBook } from "@/components/mobile-book";

const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap" });
const playfair = Playfair_Display({ subsets: ["latin"], variable: "--font-playfair", display: "swap" });
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://nailsbyella.com";

export const metadata: Metadata = {
  metadataBase: new URL(siteUrl),
  title: { default: "Nails by Ella | Nail Artist by Appointment", template: "%s | Nails by Ella" },
  description: "Personalized gel, acrylic, Gel-X and custom nail art by Ella. Beautiful nails, thoughtfully created by appointment only.",
  keywords: ["nail artist", "gel manicure", "Gel-X", "acrylic nails", "nail art"],
  alternates: { canonical: "/" },
  openGraph: { title: "Nails by Ella", description: "Beautiful nails, personalized just for you.", url: siteUrl, siteName: "Nails by Ella", type: "website" },
  robots: { index: true, follow: true },
  icons: { icon: "/favicon.svg" },
};

export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en" className={`${inter.variable} ${playfair.variable}`}>
      <body className="font-sans"><Header /><main>{children}</main><Footer /><MobileBook /></body>
    </html>
  );
}
