import type { Metadata } from "next";
import Script from "next/script";
import localFont from "next/font/local";
import "./globals.css";
import "lenis/dist/lenis.css";
import { Footer } from "@/components/layout/footer";
import { Navbar } from "@/components/layout/navbar";
import { SmoothScrollProvider } from "@/components/layout/smooth-scroll-provider";
import { ToastProvider } from "@/components/ui/toast";

// Kolabora's real brand fonts (BAB IX §9.4/9.5) — self-hosted now that the
// licensed files exist under `font kolabora/`, replacing the earlier
// Google Fonts/Fontshare-CDN stand-ins. Full variable weight range on both
// (not a curated subset) so no weight utility used anywhere on the site
// (font-bold, etc.) silently loses its actual weight.
const archivo = localFont({
  src: "../fonts/archivo/Archivo-Variable.woff2",
  variable: "--font-archivo",
  weight: "100 900",
});

// Brand heading font (BAB IX §9.5.5) — deliberately scoped to only the
// About section's tagline (see --font-clash-display in globals.css and
// AboutSection.tsx), not promoted to --font-heading sitewide.
const clashDisplay = localFont({
  src: "../fonts/clash-display/ClashDisplay-Variable.woff2",
  variable: "--font-clashdisplay",
  weight: "200 700",
});

// Signaturee 2026's real display face + body face (Brand Visual Guideline
// — see `font siganturee/`) — see --font-signaturee/--font-signaturee-body
// in globals.css for where these get applied.
const rushenCurvy = localFont({
  src: "../fonts/rushen-curvy/RushenCurvy-Regular.ttf",
  variable: "--font-rushen-curvy",
  weight: "400",
});

const plusJakartaSans = localFont({
  src: "../fonts/plus-jakarta-sans/PlusJakartaSans-VariableFont_wght.ttf",
  variable: "--font-plus-jakarta-sans",
  weight: "200 800",
});

export const metadata: Metadata = {
  title: "Kolaborativ — Event Management System",
  description:
    "Event Management & Ticketing platform: create, manage, and sell event tickets online.",
};

const META_PIXEL_ID = process.env.NEXT_PUBLIC_META_PIXEL_ID;

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html
      lang="en"
      className={`${archivo.variable} ${clashDisplay.variable} ${rushenCurvy.variable} ${plusJakartaSans.variable} h-full antialiased`}
    >
      <body className="min-h-full flex flex-col bg-kolabora-neutral-white text-kolabora-neutral-dark">
        {META_PIXEL_ID && (
          <>
            <Script id="meta-pixel" strategy="afterInteractive">
              {`!function(f,b,e,v,n,t,s)
              {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
              n.callMethod.apply(n,arguments):n.queue.push(arguments)};
              if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
              n.queue=[];t=b.createElement(e);t.async=!0;
              t.src=v;s=b.getElementsByTagName(e)[0];
              s.parentNode.insertBefore(t,s)}(window, document,'script',
              'https://connect.facebook.net/en_US/fbevents.js');
              fbq('init', '${META_PIXEL_ID}');
              fbq('track', 'PageView');`}
            </Script>
            <noscript>
              <img
                height="1"
                width="1"
                style={{ display: "none" }}
                src={`https://www.facebook.com/tr?id=${META_PIXEL_ID}&ev=PageView&noscript=1`}
                alt=""
              />
            </noscript>
          </>
        )}
        <ToastProvider>
          <SmoothScrollProvider>
            <a
              href="#main-content"
              className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-50 focus:rounded-lg focus:bg-kolabora-primary focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-kolabora-neutral-white focus:outline-none focus-visible:ring-2 focus-visible:ring-kolabora-neutral-dark focus-visible:ring-offset-2"
            >
              Skip to main content
            </a>
            <Navbar />
            <main id="main-content" className="flex-1">{children}</main>
            <Footer />
          </SmoothScrollProvider>
        </ToastProvider>
      </body>
    </html>
  );
}
