import type { Metadata, Viewport } from "next";
import {
  Fraunces,
  Inter,
  Caveat,
  Plus_Jakarta_Sans,
  Instrument_Serif,
  Hanken_Grotesk,
  Newsreader,
} from "next/font/google";
import "./globals.css";
import { Toaster } from "sonner";

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

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
  weight: ["400", "500", "600", "700", "800"],
  display: "swap",
});

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

const jakarta = Plus_Jakarta_Sans({
  subsets: ["latin"],
  variable: "--font-jakarta",
  weight: ["400", "500", "600", "700", "800"],
  display: "swap",
});

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

const hanken = Hanken_Grotesk({
  subsets: ["latin"],
  variable: "--font-hanken",
  weight: ["400", "500", "600", "700", "800", "900"],
  display: "swap",
});

const newsreader = Newsreader({
  subsets: ["latin"],
  variable: "--font-newsreader",
  weight: ["400", "500", "600"],
  style: ["italic"],
  display: "swap",
});

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  maximumScale: 1,
};

export const metadata: Metadata = {
  metadataBase: new URL(
    process.env.NEXT_PUBLIC_APP_URL || "https://designshare.net",
  ),
  title: {
    default: "DesignShare — Unlimited UI/UX & Product Design Subscription",
    template: "%s | DesignShare",
  },
  description:
    "DesignShare — a senior product studio shipping design and development for founders worldwide.",
  keywords: [
    "DesignShare",
    "Unlimited design",
    "web development",
    "subscription design",
    "Elegant IT Limited",
    "product studio",
    "design agency",
  ],
  openGraph: {
    title:
      "DesignShare — Your Subscription-Based Creative Partner for Modern Products",
    description:
      "Unlimited UI/UX, branding, landing pages, and product design for startups and growing teams. Fast delivery, senior-level quality, and one predictable monthly fee.",
    url: process.env.NEXT_PUBLIC_APP_URL || "https://designshare.net",
    siteName: "DesignShare",
    images: [
      {
        url: "https://designshare.net/assets/og-image.png",
        width: 1200,
        height: 630,
        alt: "DesignShare — Unlimited design & development",
      },
    ],
    type: "website",
    locale: "en_US",
  },
  twitter: {
    card: "summary_large_image",
    title:
      "DesignShare — Your Subscription-Based Creative Partner for Modern Products",
    description:
      "Unlimited UI/UX, branding, landing pages, and product design for startups and growing teams. Fast delivery, senior-level quality, and one predictable monthly fee.",
    images: ["https://designshare.net/assets/og-image.png"],
  },
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html
      lang="en"
      className={`${fraunces.variable} ${inter.variable} ${caveat.variable} ${jakarta.variable} ${instrument.variable} ${hanken.variable} ${newsreader.variable}`}
      suppressHydrationWarning
      data-scroll-behavior="smooth"
    >
      <body suppressHydrationWarning>
        {children}
        <Toaster richColors position="top-right" />
      </body>
    </html>
  );
}
