import { ScrollViewStyleReset } from 'expo-router/html';
import { type PropsWithChildren } from 'react';

/** Web document shell — meta tags, viewport, theme color */
export default function Root({ children }: PropsWithChildren) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="theme-color" content="#000000" />
        <meta name="description" content="Zendo — modern money management, payments, crypto, and automations." />
        <meta property="og:title" content="Zendo" />
        <meta property="og:description" content="Send, save, automate, and manage your financial life." />
        <meta property="og:type" content="website" />
        <title>Zendo</title>
        <ScrollViewStyleReset />
        <style
          dangerouslySetInnerHTML={{
            __html: `
              html, body, #root {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
                overflow: auto;
                scrollbar-gutter: stable;
                -webkit-overflow-scrolling: touch;
              }
              /* RN Web scroll containers */
              [style*="overflow: auto"],
              [style*="overflow: scroll"],
              [style*="overflow-y: auto"],
              [style*="overflow-y: scroll"],
              [style*="overflow-x: auto"],
              [style*="overflow-x: scroll"] {
                scrollbar-width: thin;
                scrollbar-color: #555555 #0a0a0a;
              }
              * { box-sizing: border-box; }
              * {
                scrollbar-width: thin;
                scrollbar-color: #555555 #0a0a0a;
              }
              ::-webkit-scrollbar {
                width: 12px;
                height: 12px;
              }
              ::-webkit-scrollbar-track {
                background: #0a0a0a;
              }
              ::-webkit-scrollbar-thumb {
                background: #555555;
                border-radius: 6px;
                border: 2px solid #0a0a0a;
              }
              ::-webkit-scrollbar-thumb:hover {
                background: #777777;
              }
            `,
          }}
        />
      </head>
      <body>{children}</body>
    </html>
  );
}
