import type { Metadata, Viewport } from "next";
import { Sora, IBM_Plex_Sans, IBM_Plex_Mono } from "next/font/google";
import dynamic from "next/dynamic";
import "./globals.css";
import Header from "@/components/Header";
import Footer from "@/components/Footer";

// Below-fold interactive islands: identical SSR HTML, deferred hydration
// so they stay off the mobile critical path.
const ConsentBanner = dynamic(() => import("@/components/ConsentBanner"));
const FloatingActions = dynamic(
  () => import("@/components/FloatingActions")
);

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

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

const plexMono = IBM_Plex_Mono({
  subsets: ["latin"],
  weight: ["500"],
  variable: "--font-plex-mono",
  display: "swap",
});

const siteUrl =
  process.env.NEXT_PUBLIC_SITE_URL?.replace(/\/$/, "") ||
  "https://www.mxerp.in";

export const metadata: Metadata = {
  metadataBase: new URL(siteUrl),
  title: {
    default: "MxERP — Manufacturing & Construction ERP",
    template: "%s | MxERP",
  },
  description:
    "MxERP is an integrated ERP platform for manufacturing and construction businesses — production, projects, procurement, inventory, finance and workforce in one system.",
  alternates: { canonical: "/" },
  robots: { index: true, follow: true },
  icons: {
    icon: "/favicon.png",
    apple: "/favicon.png",
  },
  openGraph: {
    type: "website",
    url: "/",
    siteName: "MxERP",
    locale: "en_IN",
    title: "MxERP — Manufacturing & Construction ERP",
    description:
      "Power your manufacturing & construction business with one integrated ERP.",
  },
  twitter: {
    card: "summary_large_image",
    site: "@ACGInfotechLtd",
    creator: "@ACGInfotechLtd",
    title: "MxERP — Manufacturing & Construction ERP",
    description:
      "The integrated ERP for manufacturing and construction businesses.",
  },
};

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  viewportFit: "cover",
  themeColor: "#0b1b36",
};

const jsonLd = {
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Organization",
      name: "MxERP",
      url: siteUrl,
      description:
        "Integrated ERP platform for manufacturing and construction businesses.",
    },
    {
      "@type": "WebSite",
      name: "MxERP",
      url: siteUrl,
      inLanguage: "en-IN",
    },
    {
      "@type": "SoftwareApplication",
      name: "MxERP",
      applicationCategory: "BusinessApplication",
      operatingSystem: "Web",
      offers: { "@type": "Offer", price: "0", priceCurrency: "INR" },
    },
  ],
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html
      lang="en-IN"
      className={`${sora.variable} ${plexSans.variable} ${plexMono.variable} h-full antialiased`}
    >
      <body className="flex min-h-full flex-col">
        <a href="#main" className="skip-link">
          Skip to content
        </a>
        <Header />
        <main id="main" className="flex-1">
          {children}
        </main>
        <Footer />
        <ConsentBanner />
        <FloatingActions />
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
        />
      </body>
    </html>
  );
}