---
import '../components/landing/styles.css'
import '../components/landing/hero-nav.css'
// Preload the two woff2s used above the fold:
//   - variable Inter for hero headline + body copy (weights 400–800)
//   - static Inter Black (weight 900) for top-nav logo + giant footer wordmark
// Both use ?url so Astro bundles and hashes the file, keeping the
// preload <link> pointed at the exact asset the CSS references.
import interLatin from '@fontsource-variable/inter/files/inter-latin-wght-normal.woff2?url'
import interBlack from '@fontsource/inter/files/inter-latin-900-normal.woff2?url'
import { Landing } from '../components/landing/Landing'

const TITLE = "jackin' — Jack your AI coding agents in"
const DESCRIPTION =
  "Jack your AI coding agents in. Isolated worlds, scoped access, full autonomy. You're the Operator. They're already inside."
const URL = 'https://jackin.tailrocks.com/'
const OG_IMAGE = 'https://jackin.tailrocks.com/og-image.png'
const OG_ALT =
  "jackin' — jack your AI coding agents in: isolated worlds, scoped access, full autonomy"

const jsonLd = {
  '@context': 'https://schema.org',
  '@type': 'SoftwareApplication',
  name: "jackin'",
  alternateName: 'jackin',
  description: DESCRIPTION,
  url: URL,
  image: OG_IMAGE,
  applicationCategory: 'DeveloperApplication',
  operatingSystem: 'macOS, Linux',
  offers: {
    '@type': 'Offer',
    price: '0',
    priceCurrency: 'USD',
  },
  license: 'https://www.apache.org/licenses/LICENSE-2.0',
  sameAs: ['https://github.com/jackin-project/jackin'],
  publisher: {
    '@type': 'Organization',
    name: 'jackin project',
    url: 'https://github.com/jackin-project',
  },
}
---
{/* Root element has no hardcoded data-theme — the inline script below
    resolves it before first paint. Leaving it unset at SSR avoids a
    light-mode visitor seeing a dark flash on page load. */}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{TITLE}</title>
    <meta name="description" content={DESCRIPTION} />
    <link rel="canonical" href={URL} />
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
    <link rel="sitemap" href="/sitemap-index.xml" />

    {/* Theme-color respects the user's OS preference at the browser-chrome
        level (Safari/Android address bar tint). The inline script below
        re-points it after the theme is resolved so a stored manual
        preference overrides OS pref for the address-bar colour too. */}
    <meta name="theme-color" content="#0a0b0a" media="(prefers-color-scheme: dark)" />
    <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />

    {/* Runs FIRST — before any stylesheet that could block its execution.
        Mirrors the resolver in src/components/overrides/Head.astro so
        docs + landing share the same theme-resolution order and reuse
        the 'starlight-theme' localStorage key. This is what makes
        "toggle to light on the docs, come back to the landing" work
        without flashing back to dark.

        Resolution order:
          1. localStorage has 'light' or 'dark' → use it
          2. No stored value → honour OS prefers-color-scheme
          3. matchMedia unavailable → fall back to dark (brand default)
        We do NOT write to localStorage here — the toggle button is the
        only thing that writes. A first-time OS-light visitor stays in
        light across pages until they explicitly pick a theme. */}
    <script is:inline>
      (function () {
        var root = document.documentElement
        var flipped = false
        try {
          var stored = null
          try {
            stored = localStorage.getItem('starlight-theme')
            if (stored === 'auto') {
              localStorage.removeItem('starlight-theme')
              stored = null
            }
          } catch (e) {
            // localStorage access threw (private mode, SecurityError, etc).
          }
          var theme
          if (stored === 'light' || stored === 'dark') {
            theme = stored
          } else if (
            typeof window.matchMedia === 'function' &&
            window.matchMedia('(prefers-color-scheme: light)').matches
          ) {
            theme = 'light'
          } else {
            theme = 'dark'
          }
          if (root.getAttribute('data-theme') !== theme) {
            root.setAttribute('data-theme', theme)
            flipped = true
          }
          // color-scheme on the root enables the browser's native form
          // controls and scrollbar theming to match — set it too so
          // scrollbar chrome doesn't flash the wrong shade.
          root.style.colorScheme = theme
        } catch (e) {
          // Don't leave the page broken if anything above threw.
        }
        if (!flipped) return
        root.classList.add('theme-init')
        function releaseInit() {
          requestAnimationFrame(function () {
            requestAnimationFrame(function () {
              root.classList.remove('theme-init')
            })
          })
        }
        if (document.readyState === 'loading') {
          document.addEventListener('DOMContentLoaded', releaseInit, { once: true })
        } else {
          releaseInit()
        }
      })()
    </script>

    {/* Preload the above-the-fold woff2s — avoids FOUT on the hero and
        the giant wordmark, which are the first two things users see.
        crossorigin is required for woff2 preloads even when same-origin. */}
    <link rel="preload" as="font" type="font/woff2" href={interLatin} crossorigin fetchpriority="high" />
    <link rel="preload" as="font" type="font/woff2" href={interBlack} crossorigin fetchpriority="high" />

    {/* Open Graph — Facebook, LinkedIn, Slack, Discord, iMessage. */}
    <meta property="og:title" content={TITLE} />
    <meta property="og:description" content={DESCRIPTION} />
    <meta property="og:url" content={URL} />
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="jackin'" />
    <meta property="og:image" content={OG_IMAGE} />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:alt" content={OG_ALT} />

    {/* Twitter / X card. summary_large_image renders a full-width
        preview image above the title/description. */}
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content={TITLE} />
    <meta name="twitter:description" content={DESCRIPTION} />
    <meta name="twitter:image" content={OG_IMAGE} />
    <meta name="twitter:image:alt" content={OG_ALT} />

    {/* Favicon bundle — SVG preferred, PNG rasters for iOS and
        Android home-screen icons, manifest for installability. */}
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png" />
    <link rel="icon" type="image/png" sizes="512x512" href="/icon-512.png" />
    <link rel="manifest" href="/site.webmanifest" />

    {/* Structured data for rich Google search results — describes the
        site as a free/open-source developer tool. */}
    <script type="application/ld+json" set:html={JSON.stringify(jsonLd)} />

    {/* Fonts are self-hosted via fontsource — @imported from the
        landing's styles.css. No <link rel="stylesheet"> needed. */}
  </head>
  <body>
    <Landing client:load />
  </body>
</html>
