<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico?v=2025" />
    <link rel="apple-touch-icon" href="/favicon.ico?v=2025" />
    <link rel="shortcut icon" href="/favicon.ico?v=2025" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <!-- HTML Meta Tags -->
    <title>Surra AI</title>
    <meta name="description" content="Create professional, on-brand emails in seconds by chatting with AI. Surra replaces hard to use tools with intelligent conversation.">
    <meta name="keywords" content="AI email designer, email marketing AI, email builder, AI email creator, email design tool, email automation, Surra AI, conversational email design">
    <meta name="author" content="Surra AI">
    <link rel="canonical" href="https://surra.co/">
    <meta name="robots" content="index, follow">

    <!-- Facebook Meta Tags -->
    <meta property="og:url" content="https://surra.co">
    <meta property="og:type" content="website">
    <meta property="og:title" content="Surra AI">
    <meta property="og:description" content="Create professional, on-brand emails in seconds by chatting with AI. Surra replaces hard to use tools with intelligent conversation.">
    <meta property="og:image" content="https://opengraph.b-cdn.net/production/images/634ba441-6e46-4b4a-855d-61f6461324c9.png?token=UWBi_GFV2j24laBqxY6wbqzOEN8V4YDDSNMZxDYRZcM&height=616&width=1142&expires=33291270657">

    <!-- Twitter Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta property="twitter:domain" content="surra.co">
    <meta property="twitter:url" content="https://surra.co">
    <meta name="twitter:title" content="Surra AI">
    <meta name="twitter:description" content="Create professional, on-brand emails in seconds by chatting with AI. Surra replaces hard to use tools with intelligent conversation.">
    <meta name="twitter:image" content="https://opengraph.b-cdn.net/production/images/634ba441-6e46-4b4a-855d-61f6461324c9.png?token=UWBi_GFV2j24laBqxY6wbqzOEN8V4YDDSNMZxDYRZcM&height=616&width=1142&expires=33291270657">
    
    <!-- Performance optimizations -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="dns-prefetch" href="https://www.googletagmanager.com">
    
    <!-- Critical CSS for above-the-fold content -->
    <style>
      /* Critical CSS - Inline for above-the-fold content */
      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
      :root { --color-primary-start: #6C77FF; --color-primary-end: #BA7EFF; --color-bg-main: #F5F7FF; --color-text-primary: #1A1A1A; --color-text-secondary: #666C80; }
      body { background-color: var(--color-bg-main); color: var(--color-text-primary); font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0; padding: 0; min-height: 100vh; }
      h1, h2, h3, h4, h5, h6 { font-family: 'Inter', system-ui, sans-serif; font-weight: 700; }
      .relative { position: relative; } .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-center { justify-content: center; }
      .min-h-screen { min-height: 100vh; } .w-full { width: 100%; } .max-w-2xl { max-width: 42rem; } .mx-auto { margin-left: auto; margin-right: auto; } .text-center { text-align: center; }
      .px-4 { padding-left: 1rem; padding-right: 1rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } .mt-8 { margin-top: 2rem; } .mb-4 { margin-bottom: 1rem; }
      .text-6xl { font-size: 3.75rem; line-height: 1; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
      .font-bold { font-weight: 700; } .font-medium { font-weight: 500; }
      .inline-flex { display: inline-flex; } .rounded-2xl { border-radius: 1rem; } .bg-gradient-to-r { background: linear-gradient(to right, var(--color-primary-start), var(--color-primary-end)); }
      .text-white { color: white; } .px-8 { padding-left: 2rem; padding-right: 2rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
      .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); } .transition-all { transition: all 0.2s ease-in-out; }
      .overflow-hidden { overflow: hidden; } .rounded-3xl { border-radius: 1.5rem; } .h-96 { height: 24rem; } .object-contain { -o-object-fit: contain; object-fit: contain; }
      @keyframes slideDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
      .animate-slide-down { animation: slideDown 0.8s ease-out; }
      @media (min-width: 768px) { .md\:text-7xl { font-size: 4.5rem; line-height: 1; } .md\:text-2xl { font-size: 1.5rem; line-height: 2rem; } .md\:h-\[450px\] { height: 450px; } }
    </style>
    
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Dancing+Script:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
    <noscript><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Dancing+Script:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet"></noscript>
    
    <!-- Google Analytics - Optimized with task scheduling -->
    <script>
      // Utility to yield to main thread - safer version
      function yieldToMain() {
        if (typeof window !== 'undefined' && window.scheduler && typeof window.scheduler.postTask === 'function') {
          try {
            return new Promise(resolve => window.scheduler.postTask(resolve, { priority: 'background' }));
          } catch (e) {
            // Fallback to setTimeout if scheduler fails
          }
        }
        return new Promise(resolve => setTimeout(resolve, 0));
      }
      
      // Load GA with proper task scheduling to prevent blocking
      async function loadGA() {
        if (window.gtag) return; // Already loaded
        
        // Yield before heavy work
        await yieldToMain();
        
        // Create script element
        const script = document.createElement('script');
        script.async = true;
        script.src = 'https://www.googletagmanager.com/gtag/js?id=G-HGB53M03BQ';
        
        // Setup gtag before script loads to prevent blocking
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        window.gtag = gtag;
        
        // Yield again before adding script
        await yieldToMain();
        
        document.head.appendChild(script);
        
        // Initialize after script loads
        script.onload = async function() {
          await yieldToMain();
          gtag('js', new Date());
          gtag('config', 'G-HGB53M03BQ');
        };
      }
      
      // Smart loading strategy
      if (window.innerWidth > 768) {
        // Desktop: Load with delay to not block initial render
        setTimeout(() => loadGA(), 100);
      } else {
        // Mobile: Load after interaction or 3 seconds
        let loaded = false;
        const mobileLoad = () => {
          if (!loaded) {
            loaded = true;
            loadGA();
          }
        };
        
        ['mousedown', 'touchstart', 'scroll', 'keydown'].forEach(event => {
          document.addEventListener(event, mobileLoad, { once: true, passive: true });
        });
        
        setTimeout(mobileLoad, 3000);
      }
    </script>
    
    <!-- JSON-LD Structured Data -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "SoftwareApplication",
      "name": "Surra AI",
      "alternateName": "Surra Email Designer",
      "applicationCategory": "BusinessApplication",
      "description": "AI-powered email designer that creates professional, on-brand emails through natural conversation. Replace clunky drag-and-drop editors with intelligent AI chat.",
      "url": "https://surra.co",
      "operatingSystem": "Web",
      "offers": {
        "@type": "Offer",
        "price": "0",
        "priceCurrency": "USD"
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.8",
        "ratingCount": "127"
      },
      "creator": {
        "@type": "Organization",
        "name": "Surra AI",
        "url": "https://surra.co"
      },
      "potentialAction": {
        "@type": "UseAction",
        "target": {
          "@type": "EntryPoint",
          "urlTemplate": "https://surra.co/ai-playground",
          "actionPlatform": [
            "https://schema.org/DesktopWebPlatform",
            "https://schema.org/MobileWebPlatform"
          ]
        }
      }
    }
    </script>
    <script type="module" crossorigin src="/assets/index-B66FkTEk.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/vendor-react-D_mkZstk.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-router-BCtxp6-q.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-supabase-BldDj361.js">
    <link rel="stylesheet" crossorigin href="/assets/index-Cz0PCJmk.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
