<!doctype html>
<html lang="ro">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/AtomraICON WHITE TRANSP.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    
    <!-- Preconnect to external domains -->
    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
    <link rel="preconnect" href="https://images.pexels.com" crossorigin>
    <link rel="dns-prefetch" href="//api.stripe.com">
    <link rel="dns-prefetch" href="//fonts.gstatic.com">

    <!-- Critical CSS inline -->
    <style>
      /* Critical above-the-fold styles */
      body { 
        margin: 0; 
        font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        line-height: 1.6;
        color: #1e293b;
        background: #ffffff;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
      }
      
      .loading-screen { 
        position: fixed; 
        inset: 0; 
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        z-index: 9999;
        transition: opacity 0.3s ease;
      }
      .loading-screen.hidden { opacity: 0; pointer-events: none; }
      
      .spinner { 
        width: 40px; 
        height: 40px; 
        border: 3px solid #e2e8f0; 
        border-top: 3px solid #1e293b; 
        border-radius: 50%; 
        animation: spin 1s linear infinite; 
      }
      @keyframes spin { to { transform: rotate(360deg); } }
      
      /* Critical layout styles */
      .hero-section {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
      }
      
      .header {
        position: fixed;
        top: 32px;
        left: 0;
        right: 0;
        z-index: 50;
        backdrop-filter: blur(32px);
        -webkit-backdrop-filter: blur(32px);
      }
      
      /* Prevent layout shift */
      img {
        max-width: 100%;
        height: auto;
      }
      
      /* Locally hosted font */
      @font-face {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 300 600;
        font-display: swap;
        src: url('/inter-font.woff2') format('woff2');
      }
    </style>
    
    <title>Atomra Home Romania | Refillable Pearled Candles</title>
    <meta name="description" content="Discover refillable candles powered by wax pearls. Clean, eco-friendly, customizable. Pour. Light. Refresh." />
    
    <!-- Open Graph -->
    <meta property="og:title" content="Atomra Home Romania | Refillable Pearled Candles" />
    <meta property="og:description" content="Discover refillable candles powered by wax pearls. Clean, eco-friendly, customizable. Pour. Light. Refresh." />
    <meta property="og:image" content="https://atomrahomeromania.ro/photoshoot-image%20(11).webp" />
    <meta property="og:url" content="https://atomrahomeromania.ro" />
    <meta property="og:type" content="website" />
    
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Atomra Home Romania | Refillable Pearled Candles" />
    <meta name="twitter:description" content="Discover refillable candles powered by wax pearls. Clean, eco-friendly, customizable. Pour. Light. Refresh." />
    <meta name="twitter:image" content="https://atomrahomeromania.ro/photoshoot-image%20(11).webp" />
    
    <!-- Structured Data -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Store",
      "name": "Atomra Home Romania",
      "description": "Refillable candles powered by wax pearls. Clean, eco-friendly, customizable.",
      "url": "https://atomrahomeromania.ro",
      "logo": "https://atomrahomeromania.ro/AtomraICON%20WHITE%20TRANSP.png",
      "image": "https://atomrahomeromania.ro/photoshoot-image%20(11).webp",
      "address": {
        "@type": "PostalAddress",
        "addressCountry": "RO"
      },
      "hasOfferCatalog": {
        "@type": "OfferCatalog",
        "name": "Refillable Candles",
        "itemListElement": [
          {
            "@type": "Offer",
            "itemOffered": {
              "@type": "Product",
              "name": "Refillable Pearl Candles",
              "description": "Eco-friendly refillable candles with wax pearls"
            }
          }
        ]
      }
    }
    </script>
    
    <!-- Only preload resources that are immediately needed -->
    <link rel="preload" href="/photoshoot-image (11).webp" as="image" type="image/webp" fetchpriority="high">
    <link rel="preload" href="/AtomraICON WHITE TRANSP.png" as="image" type="image/png">
    <link rel="preload" href="/inter-font.woff2" as="font" type="font/woff2" crossorigin>
    
    <!-- Canonical URL -->
    <link rel="canonical" href="https://atomrahomeromania.ro" />
    
    <!-- Alternate language versions -->
    <link rel="alternate" hrefLang="ro" href="https://atomrahomeromania.ro" />
    <link rel="alternate" hrefLang="hu" href="https://atomrahomeromania.ro/hu" />
    <link rel="alternate" hrefLang="en" href="https://atomrahomeromania.ro/en" />
    <link rel="alternate" hrefLang="x-default" href="https://atomrahomeromania.ro" />
    <script type="module" crossorigin src="/assets/index-CFCptkOm.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/vendor-uDb7aHyE.js">
    <link rel="modulepreload" crossorigin href="/assets/supabase-djTH2g6h.js">
    <link rel="modulepreload" crossorigin href="/assets/router-D1dUC_kA.js">
    <link rel="modulepreload" crossorigin href="/assets/stripe-BwSz9-ZA.js">
    <link rel="modulepreload" crossorigin href="/assets/ui-DaynndLC.js">
    <link rel="stylesheet" crossorigin href="/assets/index-2pH86rUY.css">
  </head>
  <body>
    <!-- Loading screen -->
    <div id="loading-screen" class="loading-screen">
      <div class="spinner"></div>
    </div>
    
    <div id="root"></div>
    
    <script>
      // Performance optimizations
      const startTime = performance.now();
      
      // Remove loading screen when page loads
      window.addEventListener('load', () => {
        const loadingScreen = document.getElementById('loading-screen');
        if (loadingScreen) {
          loadingScreen.classList.add('hidden');
          setTimeout(() => loadingScreen.remove(), 300);
        }
        
        // Log performance metrics
        const loadTime = performance.now() - startTime;
        console.log(`Page loaded in ${Math.round(loadTime)}ms`);
      });
      
      // Service Worker registration for caching
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
          navigator.serviceWorker.register('/sw.js', { scope: '/' })
            .then(registration => {
              console.log('SW registered:', registration.scope);
              
              // Update available
              registration.addEventListener('updatefound', () => {
                const newWorker = registration.installing;
                if (newWorker) {
                  newWorker.addEventListener('statechange', () => {
                    if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
                      console.log('New content available, refresh to update');
                    }
                  });
                }
              });
            })
            .catch(error => console.log('SW registration failed:', error));
        });
      }
      
      // Handle session recovery
      const handleSessionRecovery = () => {
        // Check if we're returning from admin panel
        if (document.referrer.includes('/admin')) {
          // Clear any problematic session data
          localStorage.removeItem('supabase.auth.token');
          
          // Force reload after a short delay
          setTimeout(() => {
            window.location.reload();
          }, 100);
        }
      };
      
      // Run session recovery on page load
      window.addEventListener('DOMContentLoaded', handleSessionRecovery);
    </script>
    
  </body>
</html>