import type { Metadata, Viewport } from 'next';
import './globals.css';
import { SiteHeader } from '../components/site-header';
import { SiteFooter } from '../components/site-footer';
import { SitePageFrame } from '../components/site-page-frame';

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1.0,
};

export const metadata: Metadata = {
  title: 'MotorSignal | The ride intelligence platform',
  description: 'Motorcycle telemetry, ride history, and connected rider tools.',
};

const tailwindConfigScript = `
  tailwind.config = {
    darkMode: "class",
    theme: {
      extend: {
        colors: {
          "brand": {
            "bg": "#080c13",
            "card": "#0f1420",
            "cardAlt": "#141c2c",
            "border": "#1f2a3f",
            "borderLight": "#2c3b57",
            "cyan": "#00f2fe",
            "emerald": "#10b981",
            "neonYellow": "#f59e0b",
            "glow": "rgba(0, 242, 254, 0.15)"
          },
          "tertiary-fixed-dim": "#7bd0ff",
          "surface": "#0f131c",
          "on-secondary-fixed-variant": "#005227",
          "primary-fixed": "#6ff6ff",
          "surface-container-low": "#181c24",
          "on-primary-container": "#002022",
          "on-background": "#dfe2ee",
          "inverse-on-surface": "#2c3039",
          "secondary-fixed": "#60ff98",
          "primary": "#00dce6",
          "background": "#080c13",
          "secondary": "#60ff98",
          "primary-container": "#00f2fe",
          "on-primary-fixed-variant": "#004f53",
          "on-tertiary-fixed-variant": "#004c69",
          "error": "#ffb4ab",
          "tertiary-container": "#b2e1ff",
          "surface-bright": "#353942",
          "surface-container-highest": "#28344c",
          "on-secondary-container": "#007239",
          "surface-container": "#141c2c",
          "primary-fixed-dim": "#00dce6",
          "surface-variant": "#1a2336",
          "surface-container-high": "#1c263c",
          "surface-dim": "#080c13",
          "tertiary": "#7bd0ff",
          "inverse-primary": "#00696f",
          "on-primary-fixed": "#002022",
          "tertiary-fixed": "#c4e7ff",
          "on-error": "#690005",
          "secondary-container": "#10b981",
          "on-error-container": "#ffdad6",
          "surface-tint": "#00dce6",
          "on-tertiary-fixed": "#001e2c",
          "on-tertiary-container": "#00678c",
          "on-primary": "#002022",
          "on-tertiary": "#00354a",
          "outline-variant": "#1f2a3f",
          "outline": "#849495",
          "on-secondary-fixed": "#00210c",
          "inverse-surface": "#dfe2ee",
          "surface-container-lowest": "#080c13",
          "error-container": "#93000a",
          "on-surface": "#dfe2ee",
          "on-secondary": "#00210c",
          "secondary-fixed-dim": "#00e478",
          "on-surface-variant": "#94a3b8"
        },
        borderRadius: {
          "DEFAULT": "0.25rem",
          "sm": "0.375rem",
          "md": "0.5rem",
          "lg": "0.75rem",
          "xl": "1rem",
          "2xl": "1.5rem",
          "full": "9999px"
        },
        spacing: {
          "space-lg": "1.5rem",
          "gutter-desktop": "2rem",
          "space-xl": "2rem",
          "container-max": "1280px",
          "gutter-tablet": "1.5rem",
          "space-sm": "0.75rem",
          "space-4xl": "6rem",
          "space-xs": "0.5rem",
          "space-2xs": "0.25rem",
          "space-3xl": "4rem",
          "gutter-mobile": "1rem",
          "space-2xl": "3rem",
          "space-md": "1rem"
        },
        fontFamily: {
          "telemetry-metric-md": ["Space Grotesk"],
          "body-lg": ["Plus Jakarta Sans"],
          "label-md": ["Plus Jakarta Sans"],
          "code-mono": ["Space Grotesk"],
          "body-sm": ["Plus Jakarta Sans"],
          "label-caps": ["Space Grotesk"],
          "body-md": ["Plus Jakarta Sans"],
          "headline-xl": ["Space Grotesk"],
          "headline-lg": ["Space Grotesk"],
          "headline-sm": ["Space Grotesk"],
          "display-hero-mobile": ["Space Grotesk"],
          "headline-md": ["Space Grotesk"],
          "headline-xl-mobile": ["Space Grotesk"],
          "telemetry-metric-xl": ["Space Grotesk"],
          "display-hero": ["Space Grotesk"]
        },
        fontSize: {
          "telemetry-metric-md": ["32px", { lineHeight: "36px", letterSpacing: "-0.03em", fontWeight: "700" }],
          "body-lg": ["18px", { lineHeight: "28px", letterSpacing: "0em", fontWeight: "400" }],
          "label-md": ["13px", { lineHeight: "18px", letterSpacing: "0.01em", fontWeight: "600" }],
          "code-mono": ["12px", { lineHeight: "16px", letterSpacing: "0.04em", fontWeight: "500" }],
          "body-sm": ["13px", { lineHeight: "20px", letterSpacing: "0.005em", fontWeight: "400" }],
          "label-caps": ["11px", { lineHeight: "14px", letterSpacing: "0.12em", fontWeight: "700" }],
          "body-md": ["15px", { lineHeight: "24px", letterSpacing: "0em", fontWeight: "400" }],
          "headline-xl": ["40px", { lineHeight: "48px", letterSpacing: "-0.02em", fontWeight: "700" }],
          "headline-lg": ["28px", { lineHeight: "36px", letterSpacing: "-0.015em", fontWeight: "600" }],
          "headline-sm": ["18px", { lineHeight: "26px", letterSpacing: "-0.005em", fontWeight: "600" }],
          "display-hero-mobile": ["36px", { lineHeight: "44px", letterSpacing: "-0.02em", fontWeight: "700" }],
          "headline-md": ["22px", { lineHeight: "30px", letterSpacing: "-0.01em", fontWeight: "600" }],
          "headline-xl-mobile": ["28px", { lineHeight: "36px", letterSpacing: "-0.01em", fontWeight: "700" }],
          "telemetry-metric-xl": ["48px", { lineHeight: "48px", letterSpacing: "-0.04em", fontWeight: "700" }],
          "display-hero": ["56px", { lineHeight: "64px", letterSpacing: "-0.03em", fontWeight: "700" }]
        }
      }
    }
  };
`;

export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en" className="dark">
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
        <link
          href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&family=Space+Grotesk:wght@300..700&display=swap"
          rel="stylesheet"
        />
        <link
          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
          rel="stylesheet"
        />
        <script src="https://cdn.tailwindcss.com"></script>
        <script dangerouslySetInnerHTML={{ __html: tailwindConfigScript }} />
      </head>
      <body>
        <SiteHeader />
        <SitePageFrame>{children}</SitePageFrame>
        <SiteFooter />
      </body>
    </html>
  );
}