import type { Metadata } from "next";
import { Cormorant_Garamond, Manrope } from "next/font/google";
import { Footer } from "@/components/layout/Footer";
import { Header } from "@/components/layout/Header";
import { WhatsAppFloatingWidget } from "@/components/layout/WhatsAppFloatingWidget";
import { ScrollProgress } from "@/components/ui/ScrollProgress";
import "./globals.css";

const body = Manrope({
  variable: "--font-body",
  subsets: ["latin"],
  weight: ["400", "500", "600", "700", "800"],
});

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

export const metadata: Metadata = {
  metadataBase: new URL("https://aurevastudio.example"),
  title: {
    default: "Aureva Studio | Luxury Interiors & Architectural Spaces",
    template: "%s | Aureva Studio",
  },
  description:
    "Aureva Studio designs luxury interiors, architecture plans, turnkey homes, villas, offices, retail spaces, and renovations with premium execution.",
  keywords: [
    "interior designers",
    "interior designers near me",
    "luxury interior designers",
    "architecture firm",
    "home interiors",
    "villa interiors",
    "office interiors",
    "turnkey interiors",
    "modular kitchen design",
    "interior design consultation",
    "renovation services",
    "commercial interior design",
  ],
  openGraph: {
    title: "Aureva Studio | Luxury Interiors & Architectural Spaces",
    description:
      "Premium interiors, architecture planning, and turnkey execution for homes, villas, offices, and commercial spaces.",
    url: "https://aurevastudio.example",
    siteName: "Aureva Studio",
    images: [
      {
        url: "https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&w=1200&q=85",
        width: 1200,
        height: 630,
        alt: "Luxury interior designed living room by Aureva Studio",
      },
    ],
    locale: "en_IN",
    type: "website",
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html
      lang="en"
      className={`${body.variable} ${display.variable} h-full antialiased`}
    >
      <body className="flex min-h-full flex-col bg-ivory text-charcoal">
        <ScrollProgress />
        <Header />
        <main className="flex-1">{children}</main>
        <Footer />
        <WhatsAppFloatingWidget />
      </body>
    </html>
  );
}
