<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- Google Analytics -->
    <script>
      // Configure GA4 based on environment
      const isProduction = window.location.hostname === 'withjulienne.com';
      const MEASUREMENT_ID = 'G-FSBN27V5JS';
    </script>
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-FSBN27V5JS"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      // Initial GA4 configuration - minimal setup, rest handled by analytics.ts
      gtag('config', 'G-FSBN27V5JS');
    </script>
    
    <!-- Favicon -->
    <link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon-16x16.png">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <!-- Primary Meta Tags -->
    <title>Julienne</title>
    <meta name="title" content="Julienne">
    <meta name="description" content="Save recipes from any website, app, book or video.">
    
    <!-- iOS Specific -->
    <meta name="apple-mobile-web-app-title" content="Julienne">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    
    <!-- Theme Color - will be updated by theme script -->
    <meta name="theme-color" content="#ffffff">
    
    <!-- Open Graph / Facebook / Instagram -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://withjulienne.com">
    <meta property="og:title" content="Julienne">
    <meta property="og:description" content="Save recipes from any website, app, book or video.">
    <meta property="og:image" content="https://withjulienne.com/assets/images/og-image.png">
    <meta property="og:site_name" content="Julienne">
    
    <!-- Additional Open Graph tags for better compatibility -->
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:image:alt" content="Julienne">
    <meta property="og:locale" content="en_US">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:secure_url" content="https://withjulienne.com/assets/images/og-image.png">
    
    <!-- Additional Instagram-specific meta tags -->
    <meta property="al:ios:url" content="https://withjulienne.com">
    <meta property="al:android:url" content="https://withjulienne.com">
    <meta property="al:ios:app_store_id" content="YOUR_APP_STORE_ID">
    <meta property="al:android:package" content="com.withjulienne.app">
    <meta property="al:ios:app_name" content="Julienne">
    <meta property="al:android:app_name" content="Julienne">
    
    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="https://withjulienne.com">
    <meta name="twitter:title" content="Julienne">
    <meta name="twitter:description" content="Save recipes from any website, app, book or video.">
    <meta name="twitter:image" content="https://withjulienne.com/assets/images/og-image.png">
    
    <!-- Schema.org markup for Google -->
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "WebApplication",
        "name": "Julienne",
        "description": "Save recipes from any website, app, book or video. Create your own cookbook, organize ingredients, and get beautiful recipe summaries.",
        "url": "https://withjulienne.com",
        "image": "https://withjulienne.com/assets/images/og-image.png",
        "applicationCategory": "Food & Drink",
        "operatingSystem": "Web",
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "USD"
        },
        "featureList": [
          "Save recipes from any website",
          "Create personal cookbook",
          "Organize ingredients",
          "Beautiful recipe summaries",
          "Mobile-friendly interface"
        ],
        "screenshot": [
          "https://withjulienne.com/assets/images/RDP-Tablet.png",
          "https://withjulienne.com/assets/images/RDP-Mobile.png"
        ],
        "browserRequirements": "Requires JavaScript. Requires HTML5.",
        "softwareVersion": "1.0.0",
        "aggregateRating": {
          "@type": "AggregateRating",
          "ratingValue": "4.8",
          "ratingCount": "100"
        }
      }
    </script>
    
    <!-- Font imports -->
    <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=EB+Garamond:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Apple Sign In JavaScript -->
    <script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
    
    <!-- Stripe.js -->
    <script src="https://js.stripe.com/v3/"></script>
    
    <!-- Theme Script - Run immediately to prevent flash -->
    <script>
      (function() {
        try {
          // Function to get theme based on time
          function getAutoTheme() {
            const hour = new Date().getHours();
            return (hour >= 18 || hour < 6) ? 'dark' : 'light';
          }
          
          // Function to update theme-color meta tag
          function updateThemeColor(theme) {
            const metaThemeColor = document.querySelector('meta[name="theme-color"]');
            if (metaThemeColor) {
              metaThemeColor.setAttribute('content', theme === 'dark' ? '#1D1D1D' : '#ffffff');
            }
          }
          
          // Check localStorage for saved theme preference
          const stored = localStorage.getItem('themePreference');
          let theme = getAutoTheme();
          
          if (stored) {
            try {
              const { theme: savedTheme, isManualOverride } = JSON.parse(stored);
              if (isManualOverride) {
                theme = savedTheme;
              }
            } catch (e) {
              console.error('Error parsing theme preference:', e);
            }
          }
          
          // Apply theme class immediately
          document.documentElement.classList.add(theme);
          
          // Update theme-color meta tag immediately
          updateThemeColor(theme);
        } catch (error) {
          console.error('Error initializing theme:', error);
        }
      })();
    </script>
    <script type="module" crossorigin src="/assets/index-49a959c0.js"></script>
    <link rel="stylesheet" href="/assets/index-afd359a2.css">
  </head>
  <body>
    <div id="root"></div>
    
  </body>
</html>