import type { Metadata, Viewport } from "next";
import { Instrument_Serif, Inter, JetBrains_Mono } from "next/font/google";
import "./globals.css";
import { Header } from "@/components/layout/Header";
import { Footer } from "@/components/layout/Footer";
import { SmoothScroll } from "@/components/motion/SmoothScroll";
import { company, contact, offices } from "@/content/company";
import { INDEXABLE, SITE_URL } from "@/lib/site";

const display = Instrument_Serif({
  subsets: ["latin"],
  weight: "400",
  variable: "--font-instrument-serif",
  display: "swap",
});

const sans = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
  display: "swap",
});

const mono = JetBrains_Mono({
  subsets: ["latin"],
  variable: "--font-jetbrains-mono",
  display: "swap",
});

export const metadata: Metadata = {
  metadataBase: new URL(SITE_URL),
  title: {
    default: `${company.shortName} Hosiery Mills | ${company.positioning}`,
    template: `%s | ${company.shortName} Hosiery Mills`,
  },
  description:
    "Three Stars Hosiery Mills, founded 1956 in Multan, Pakistan. Vertically integrated knitwear, denim and workwear manufacturing from spinning through to finished garment, exporting to the UK, Europe and the USA.",
  keywords: [
    "textile manufacturer Pakistan",
    "knitwear manufacturer Multan",
    "denim manufacturer Lahore",
    "workwear manufacturer Pakistan",
    "melange yarn",
    "vertically integrated textile mill",
    "garment exporter Pakistan",
  ],
  authors: [{ name: company.legalName }],
  openGraph: {
    type: "website",
    locale: "en_GB",
    url: SITE_URL,
    siteName: `${company.shortName} Hosiery Mills`,
    title: `${company.shortName} Hosiery Mills | ${company.tagline}`,
    description:
      "Vertically integrated knitwear, denim and workwear manufacturing from Multan and Lahore, Pakistan, since 1956.",
  },
  twitter: {
    card: "summary_large_image",
    title: `${company.shortName} Hosiery Mills`,
    description: company.positioning,
  },
  robots: {
    index: INDEXABLE,
    follow: INDEXABLE,
  },
};

export const viewport: Viewport = {
  themeColor: "#080b14",
  colorScheme: "dark",
};

/** Structured data, so the mill's real details surface in search and maps. */
function OrganizationSchema() {
  const schema = {
    "@context": "https://schema.org",
    "@type": "Organization",
    name: company.legalName,
    alternateName: company.groupName,
    url: SITE_URL,
    foundingDate: String(company.founded),
    description: company.summary,
    email: contact.email,
    telephone: contact.phonePk,
    numberOfEmployees: { "@type": "QuantitativeValue", minValue: 1001, maxValue: 5000 },
    address: offices.map((office) => ({
      "@type": "PostalAddress",
      streetAddress: office.address,
      addressLocality: office.id === "multan" ? "Multan" : "Lahore",
      addressRegion: "Punjab",
      postalCode: office.postcode,
      addressCountry: "PK",
    })),
    location: offices.map((office) => ({
      "@type": "Place",
      name: office.label,
      geo: {
        "@type": "GeoCoordinates",
        latitude: office.coords.lat,
        longitude: office.coords.lng,
      },
    })),
    areaServed: ["GB", "EU", "US"],
    knowsAbout: [
      "Knitwear manufacturing",
      "Denim manufacturing",
      "Workwear and uniforms",
      "Cotton spinning",
      "Melange yarn",
    ],
  };

  return (
    <script
      type="application/ld+json"
      // Content is a fixed object built at render time, not user input.
      dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
    />
  );
}

export default function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return (
    // Browser extensions write their own attributes onto <html> and <body>
    // before React hydrates. Grammarly adds data-gr-ext-installed and
    // data-new-gr-c-s-check-loaded, ColorZilla adds cz-shortcut-listen, and
    // password managers and theme switchers do the same sort of thing. React
    // sees attributes on the client that were not in the server HTML and
    // reports a mismatch for markup nobody wrote.
    //
    // suppressHydrationWarning applies to one element's own attributes and its
    // direct text only. It does not cascade, so a genuine mismatch inside any
    // component below still gets reported.
    <html
      lang="en"
      className={`${display.variable} ${sans.variable} ${mono.variable}`}
      suppressHydrationWarning
    >
      <body suppressHydrationWarning>
        <OrganizationSchema />
        <SmoothScroll>
          <Header />
          <main id="main">{children}</main>
          <Footer />
        </SmoothScroll>
      </body>
    </html>
  );
}
