<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="mobile-web-app-capable" content="yes" />

    <!-- ─── Title + Description ─── -->
    <title>Athlete Journal — Train smarter</title>
    <meta name="description" content="Personal training journal for grappling athletes. Log sessions, track competitions, analyze your performance." />

    <!-- ─── Favicons ─── -->
    <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png" />
    <link rel="shortcut icon" href="/icons/favicon.ico" />

    <!-- ─── Apple iOS ─── -->
    <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
    <link rel="apple-touch-icon" sizes="152x152" href="/icons/icon-152x152.png" />
    <link rel="apple-touch-icon" sizes="167x167" href="/icons/icon-167x167.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="/icons/icon-180x180.png" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="Athlete Journal" />

    <!-- ─── Theme color ─── -->
    <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)" />
    <meta name="theme-color" content="#000000" media="(prefers-color-scheme: light)" />

    <!-- ─── PWA manifest ─── -->
    <link rel="manifest" href="/manifest.json" />

    <!-- ─── iOS Splash Screens (light + dark per device) ─── -->
    <!-- iPhone SE -->
    <link rel="apple-touch-startup-image" href="/splash/splash-iphone-se-750x1334-dark.png"
      media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (prefers-color-scheme: dark)" />
    <link rel="apple-touch-startup-image" href="/splash/splash-iphone-se-750x1334-light.png"
      media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" />

    <!-- iPhone X / XS / 11 Pro -->
    <link rel="apple-touch-startup-image" href="/splash/splash-iphone-x-1125x2436-dark.png"
      media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (prefers-color-scheme: dark)" />
    <link rel="apple-touch-startup-image" href="/splash/splash-iphone-x-1125x2436-light.png"
      media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" />

    <!-- iPhone XR / 11 -->
    <link rel="apple-touch-startup-image" href="/splash/splash-iphone-xr-828x1792-dark.png"
      media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (prefers-color-scheme: dark)" />
    <link rel="apple-touch-startup-image" href="/splash/splash-iphone-xr-828x1792-light.png"
      media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" />

    <!-- iPhone 12 mini / 13 mini -->
    <link rel="apple-touch-startup-image" href="/splash/splash-iphone-12mini-1080x2340-dark.png"
      media="(device-width: 360px) and (device-height: 780px) and (-webkit-device-pixel-ratio: 3) and (prefers-color-scheme: dark)" />
    <link rel="apple-touch-startup-image" href="/splash/splash-iphone-12mini-1080x2340-light.png"
      media="(device-width: 360px) and (device-height: 780px) and (-webkit-device-pixel-ratio: 3)" />

    <!-- iPhone 12 / 13 / 14 -->
    <link rel="apple-touch-startup-image" href="/splash/splash-iphone-12-1170x2532-dark.png"
      media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (prefers-color-scheme: dark)" />
    <link rel="apple-touch-startup-image" href="/splash/splash-iphone-12-1170x2532-light.png"
      media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3)" />

    <!-- iPhone 12/13 Pro Max / 14 Plus -->
    <link rel="apple-touch-startup-image" href="/splash/splash-iphone-12promax-1284x2778-dark.png"
      media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (prefers-color-scheme: dark)" />
    <link rel="apple-touch-startup-image" href="/splash/splash-iphone-12promax-1284x2778-light.png"
      media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3)" />

    <!-- iPhone 14 Pro -->
    <link rel="apple-touch-startup-image" href="/splash/splash-iphone-14pro-1179x2556-dark.png"
      media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (prefers-color-scheme: dark)" />
    <link rel="apple-touch-startup-image" href="/splash/splash-iphone-14pro-1179x2556-light.png"
      media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3)" />

    <!-- iPhone 14 Pro Max / 15 Pro Max -->
    <link rel="apple-touch-startup-image" href="/splash/splash-iphone-14promax-1290x2796-dark.png"
      media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (prefers-color-scheme: dark)" />
    <link rel="apple-touch-startup-image" href="/splash/splash-iphone-14promax-1290x2796-light.png"
      media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3)" />

    <!-- iPad -->
    <link rel="apple-touch-startup-image" href="/splash/splash-ipad-1536x2048-dark.png"
      media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (prefers-color-scheme: dark)" />
    <link rel="apple-touch-startup-image" href="/splash/splash-ipad-1536x2048-light.png"
      media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" />

    <!-- iPad Pro 11 -->
    <link rel="apple-touch-startup-image" href="/splash/splash-ipad-pro-11-1668x2388-dark.png"
      media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (prefers-color-scheme: dark)" />
    <link rel="apple-touch-startup-image" href="/splash/splash-ipad-pro-11-1668x2388-light.png"
      media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" />

    <!-- iPad Pro 12.9 -->
    <link rel="apple-touch-startup-image" href="/splash/splash-ipad-pro-12-2048x2732-dark.png"
      media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (prefers-color-scheme: dark)" />
    <link rel="apple-touch-startup-image" href="/splash/splash-ipad-pro-12-2048x2732-light.png"
      media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" />

    <!-- ─── Open Graph (social sharing) ─── -->
    <meta property="og:title" content="Athlete Journal" />
    <meta property="og:description" content="Personal training journal for grappling athletes" />
    <meta property="og:image" content="/icons/icon-512x512.png" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://jumpjiujitsu.com" />

    <!-- ─── Twitter Card ─── -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Athlete Journal" />
    <meta name="twitter:description" content="Personal training journal for grappling athletes" />
    <meta name="twitter:image" content="/icons/icon-512x512.png" />

    <!-- ─── Geist font ─── -->
    <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=Geist:wght@400;500;600;700&display=swap" rel="stylesheet" />
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>