---
interface Props {
  title: string
  description?: string
  ogImage?: string
  isHome?: boolean
  redirect?: string
}

const { title, description, ogImage, isHome, redirect } = Astro.props
const defaultDescription =
  'Zen Browser is built for speed, security, and true privacy. Download now to enjoy a beautifully-designed, distraction-free web experience packed with features.'
const defaultOgImage = '/share-pic.png'
import '@fontsource/bricolage-grotesque/400.css'
import '@fontsource/bricolage-grotesque/500.css'
import '@fontsource/bricolage-grotesque/600.css'
import Footer from '~/components/Footer.astro'
import NavBar from '~/components/NavBar.astro'
import { getLocale } from '~/utils/i18n'
const locale = getLocale(Astro)
---

<script is:inline data-cfasync="false">
  const theme = (() => {
    if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
      return localStorage.getItem('theme') ?? 'light'
    }
    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
      return 'dark'
    }
    return 'light'
  })()


  if (theme === 'light') {
    document.documentElement.setAttribute('data-theme', 'light')
  } else {
    document.documentElement.setAttribute('data-theme', 'dark')
  }
</script>

<!doctype html>
<html lang={locale}>
  <head>
    <meta charset="UTF-8" />
    {redirect ? <meta http-equiv="refresh" content={`0;url=${redirect}`} /> : null}
    <meta name="description" content={description ?? defaultDescription} />
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="sitemap" href="/sitemap-0.xml" />

    {isHome && (
      // @prettier-ignore
      <!-- Injecting schema to homepage only (for SEO) -->
      <script is:inline type="application/ld+json">
      {
        "@context":"https://schema.org",
        "@type":"WebSite",
        "name":"Zen Browser",
        "url":"https://zen-browser.app/"
      }
      </script>)}

    <!-- ICO favicon as a fallback for browsers that don't support SVG favicons (Safari) -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />

    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
    <meta name="theme-color" content="#da755b" />

    <!-- Open Graph -->
    <meta property="og:title" content={title} />
    <meta property="og:type" content="website" />
    <meta property="og:image" content={ogImage ?? defaultOgImage} />
    <meta
      property="og:description"
      content={description ?? defaultDescription}
    />
    <meta property="og:color" content="#da755b" />
    <!-- Twitter card -->
    <meta name="twitter:card" content="summary_large_image" />
    <!-- RSS Feed -->
    <link
      rel="alternate"
      type="application/rss+xml"
      title="Zen Browser Release Notes"
      href={`${Astro.url.origin}/feed.xml`}
    />

    <script>
      console.log(
        '%c✌️ Zen-Browser%c\nWelcome to a calmer internet!',
        'filter: invert(1); font-size: 28px; font-weight: bolder; font-family: "Rubik"; margin-top: 20px; margin-bottom: 8px;',
        'color: #f76f53; font-size: 16px; font-family: "Rubik"; margin-bottom: 20px;'
      );
    </script>

  </head>
  <body
    class="overflow-x-hidden bg-paper font-['bricolage-grotesque'] text-dark text-balance"
  >
    <NavBar />
    <slot />
    <Footer />
  </body>
</html>
<style is:global>
  @font-face {
    font-family: 'Junicode';
    src: url('/fonts/JunicodeVF-Roman-subset.woff2') format('woff2');
    font-display: swap;
  }

  @font-face {
    font-family: 'Junicode-Italic';
    src: url('/fonts/JunicodeVF-Italic-subset.woff2') format('woff2');
    font-display: swap;
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  :root {
    --zen-paper: #f2f0e3;
    --zen-dark: #2e2e2e;
    --zen-muted: rgba(0, 0, 0, 0.05);
    --zen-subtle: rgba(0,0,0,0.05);

    &[data-theme='dark'] {
      --zen-paper: #1f1f1f;
      --zen-dark: #d1cfc0;
      --zen-muted: rgba(255, 255, 255, 0.05);
      --zen-subtle: rgba(255,255,255,0.1);
    }
  }

  html {
    scroll-behavior: smooth;
  }

  body,
  body > * {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 500;
    font-variation-settings: 'wdth' 100;
  }

  h1 .italic {
    font-family: 'Junicode-Italic', serif;
    font-weight: 400;
    font-feature-settings: 'swsh' 0;
    font-style: normal;
  }

  .zen-link {
    @apply text-coral underline underline-offset-4;
  }
</style>
<style is:global>
  /* Declare a custom CSS class to make the icon look right */
  .svg-inline--fa {
    overflow: visible;
    box-sizing: content-box;
    display: inline-block;
    height: 1em;
    vertical-align: -0.125em;
  }
</style>
