import "./globals.css";
import type { Metadata } from "next";
import { Fraunces, DM_Sans } from "next/font/google";
import { CurrencyProvider, CurrencyToggle } from "./_currency";
import { I18nProvider, LocaleToggle } from "./_i18n";

const SITE = process.env.NEXT_PUBLIC_SITE_URL ?? "https://chowrest-property.com";

const fraunces = Fraunces({
  subsets: ["latin"],
  weight: ["300", "400", "500"],
  style: ["normal", "italic"],
  display: "swap",
  variable: "--font-serif",
});

const dmSans = DM_Sans({
  subsets: ["latin"],
  weight: ["300", "400", "500", "600"],
  display: "swap",
  variable: "--font-sans",
});

export const metadata: Metadata = {
  metadataBase: new URL(SITE),
  title: {
    default: "Chowrest Property — Homes for sale",
    template: "%s — Chowrest Property",
  },
  description:
    "Browse handpicked properties for sale in Thailand and beyond.",
  openGraph: {
    type: "website",
    url: SITE,
    siteName: "Chowrest Property",
  },
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className={`${fraunces.variable} ${dmSans.variable}`}>
      <body>
        <I18nProvider>
          <CurrencyProvider>
            <header className="sticky top-0 z-[100] border-b border-border bg-bg/90 backdrop-blur-md">
              <div className="mx-auto flex max-w-site items-center justify-between gap-6 px-7 py-5">
                <a
                  href="/"
                  className="font-serif text-[26px] font-medium tracking-tightish text-text"
                >
                  chow<em className="italic font-normal text-accent">rest</em>
                </a>
                <nav className="hidden items-center gap-10 md:flex">
                  <a
                    href="/"
                    className="text-[15px] text-text transition hover:text-accent"
                  >
                    Listings
                  </a>
                  <a
                    href="#"
                    className="text-[15px] text-text-muted transition hover:text-text"
                  >
                    About
                  </a>
                </nav>
                <div className="flex items-center gap-2">
                  <LocaleToggle />
                  <CurrencyToggle />
                </div>
              </div>
            </header>
            <main>{children}</main>
            <footer className="mt-20 border-t border-border py-14">
              <div className="mx-auto flex max-w-site flex-wrap items-center justify-between gap-5 px-7 text-[13px] text-text-soft">
                <span className="font-serif text-[22px] font-medium tracking-tightish text-text">
                  chow
                  <em className="italic font-normal text-accent">rest</em>
                </span>
                <p>Handpicked homes · &copy; 2026</p>
              </div>
            </footer>
          </CurrencyProvider>
        </I18nProvider>
      </body>
    </html>
  );
}
