<!doctype html>
<html lang="en">
  <head>
    <script>try{if(localStorage.getItem('valley-theme')==='dark')document.documentElement.classList.add('dark')}catch(e){}</script>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Valley Electrical Contractors - Professional electrical services dashboard for managing projects, quotes, and client communications in South Africa." />
    <meta name="author" content="Valley Electrical Contractors" />
    <meta name="publisher" content="Valley Electrical Contractors" />
    <meta name="robots" content="index, follow" />

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://app.valleyelectrical.co.za/" />
    <meta property="og:title" content="Valley Electrical Contractors Dashboard" />
    <meta property="og:description" content="Professional electrical services dashboard for managing projects, quotes, inspections, and client communications in South Africa." />
    <meta property="og:image" content="https://app.valleyelectrical.co.za/pwa/splash/app-landing-desktop.webp" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:site_name" content="Valley Electrical Contractors" />
    <meta property="og:locale" content="en_ZA" />

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:url" content="https://app.valleyelectrical.co.za/" />
    <meta name="twitter:title" content="Valley Electrical Contractors Dashboard" />
    <meta name="twitter:description" content="Professional electrical services dashboard for managing projects, quotes, inspections, and client communications." />
    <meta name="twitter:image" content="https://app.valleyelectrical.co.za/pwa/splash/app-landing-desktop.webp" />

    <!-- Canonical URL -->
    <link rel="canonical" href="https://app.valleyelectrical.co.za/" />

    <!-- Google Analytics (Deferred for performance) -->
    <script>
      // Defer GA loading until after page is interactive
      window.addEventListener('load', function() {
        setTimeout(function() {
          var script = document.createElement('script');
          script.async = true;
          script.src = 'https://www.googletagmanager.com/gtag/js?id=G-LV9Q427E4D';
          document.head.appendChild(script);

          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'G-LV9Q427E4D');
        }, 2000); // Load after 2 seconds
      });
    </script>

    <!-- Microsoft Clarity disabled until project ID is configured -->
    <!-- To enable: Sign up at https://clarity.microsoft.com/ and add your project ID below -->
    <!--
    <script type="text/javascript">
      (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
      })(window, document, "clarity", "script", "YOUR_PROJECT_ID_HERE");
    </script>
    -->

    <!-- Preload critical resources -->
    <link rel="preload" as="image" href="/pwa/splash/app-landing-mobile.webp" media="(max-width: 600px)" type="image/webp" />
    <link rel="preload" as="image" href="/pwa/splash/app-landing-desktop.webp" media="(min-width: 601px)" type="image/webp" />

    <!-- Preload critical fonts -->
    <link
      rel="preload"
      as="style"
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap"
    />

    <!-- Favicons -->
    <link rel="icon" type="image/x-icon" href="/favicon/favicon.ico" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />

    <!-- PWA Meta Tags -->
    <link rel="manifest" href="/manifest.json" />
    <meta name="theme-color" content="#2E3192" />
    <meta name="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="ValleyElectrical" />

    <!-- Preconnect to external services for faster loading -->
    <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">
    <link rel="preconnect" href="https://www.googletagmanager.com">

    <!-- Optimized font loading with font-display swap -->
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap"
      rel="stylesheet"
      media="print"
      onload="this.media='all'"
    >
    <noscript>
      <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    </noscript>
    <!-- Google Maps is lazy loaded only when needed - see src/utils/googleMapsLoader.ts -->
    <title>Valley Electrical Contractors Dashboard</title>

    <!-- Schema.org Structured Data for SEO -->
    <script type="application/ld+json">
    [{
      "@context": "https://schema.org",
      "@type": "SoftwareApplication",
      "name": "Valley Electrical Contractors Dashboard",
      "applicationCategory": "BusinessApplication",
      "operatingSystem": "Web",
      "offers": {
        "@type": "Offer",
        "price": "0",
        "priceCurrency": "ZAR"
      },
      "provider": {
        "@type": "Organization",
        "name": "Valley Electrical Contractors",
        "url": "https://valleyelectrical.co.za",
        "address": {
          "@type": "PostalAddress",
          "addressCountry": "ZA"
        }
      },
      "description": "Professional electrical services dashboard for managing projects, quotes, inspections, and client communications in South Africa.",
      "featureList": [
        "Project Management",
        "Quote Generation",
        "Inspection Management",
        "Client Communications",
        "Asset Tracking",
        "Schedule Management"
      ]
    },
    {
      "@context": "https://schema.org",
      "@type": "LocalBusiness",
      "@id": "https://valleyelectrical.co.za",
      "name": "Valley Electrical Contractors",
      "image": "https://app.valleyelectrical.co.za/pwa/splash/app-landing-desktop.webp",
      "description": "Professional electrical services and contracting in South Africa. Specializing in electrical installations, inspections, and maintenance.",
      "url": "https://valleyelectrical.co.za",
      "telephone": "+27-XX-XXX-XXXX",
      "address": {
        "@type": "PostalAddress",
        "addressCountry": "ZA",
        "addressRegion": "South Africa"
      },
      "geo": {
        "@type": "GeoCoordinates",
        "addressCountry": "ZA"
      },
      "priceRange": "$$",
      "sameAs": [
        "https://app.valleyelectrical.co.za"
      ]
    }]
    </script>
    <style>
      /* PWA Splash Screen */
      #splash-screen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #ffffff;
        display: flex; /* Always show splash screen on load */
        align-items: center;
        justify-content: center;
        z-index: 9999;
        transition: opacity 0.3s ease-out;
      }

      #splash-screen.fade-out {
        opacity: 0;
        pointer-events: none;
      }

      /* Default: hide both images */
      #splash-screen img {
        display: none;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
      }

      /* Mobile splash screen - show on screens ≤ 600px */
      @media (max-width: 600px) {
        #splash-screen img[src*="mobile"] {
          display: block;
        }
      }

      /* Desktop splash screen - show on screens > 600px */
      @media (min-width: 601px) {
        #splash-screen img[src*="desktop"] {
          display: block;
          width: 100%;
          height: 100%;
          -o-object-fit: cover;
             object-fit: cover;
        }
      }

      /* Mobile Bottom Navigation - Only show in PWA mode */
      .mobile-bottom-nav {
        display: none; /* Hidden by default for browser users */
      }

      /* Show bottom nav only on mobile PWA (standalone mode) */
      @media (display-mode: standalone) and (max-width: 768px) {
        .mobile-bottom-nav {
          display: block;
        }
      }

      /* iOS standalone mode */
      .ios-pwa .mobile-bottom-nav {
        display: block;
      }

      /* Mobile Top Navigation - Only show in PWA mode */
      .mobile-pwa-nav {
        display: none; /* Hidden by default for browser users */
      }

      /* Show top nav only on mobile PWA (standalone mode) */
      @media (display-mode: standalone) and (max-width: 768px) {
        .mobile-pwa-nav {
          display: block;
        }
      }

      /* iOS standalone mode */
      .ios-pwa .mobile-pwa-nav {
        display: block;
      }

      /* Mobile Browser Navigation - Show by default, hide in PWA */
      .mobile-browser-nav {
        display: block; /* Show by default for browser users */
      }

      /* Hide browser nav on mobile PWA (standalone mode) */
      @media (display-mode: standalone) and (max-width: 768px) {
        .mobile-browser-nav {
          display: none !important;
        }
      }

      /* iOS standalone mode - hide browser nav */
      .ios-pwa .mobile-browser-nav {
        display: none !important;
      }

      /* Add bottom padding to main content when bottom nav is visible */
      @media (display-mode: standalone) and (max-width: 768px) {
        body {
          padding-bottom: 120px; /* Height of bottom nav (96px) + safe area */
        }
      }

      .ios-pwa body {
        padding-bottom: 120px;
      }
    </style>
    <script>
      // Add iOS PWA class for bottom navigation
      if (window.navigator.standalone && /iPhone|iPad|iPod/i.test(navigator.userAgent)) {
        document.addEventListener('DOMContentLoaded', function() {
          document.documentElement.classList.add('ios-pwa');
        });
      }
    </script>
    <script type="module" crossorigin src="/assets/index-Bm4iQh9I.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/rolldown-runtime-jxEyR9vv.js">
    <link rel="modulepreload" crossorigin href="/assets/pdf-Bkvkvyk2.js">
    <link rel="modulepreload" crossorigin href="/assets/charts-Dfy1ckt6.js">
    <link rel="modulepreload" crossorigin href="/assets/query-Be1rjWsg.js">
    <link rel="modulepreload" crossorigin href="/assets/qrcode-CF5nin6i.js">
    <link rel="modulepreload" crossorigin href="/assets/file-utils-DDsjbMls.js">
    <link rel="modulepreload" crossorigin href="/assets/icons-pOPHdibY.js">
    <link rel="modulepreload" crossorigin href="/assets/react-vendor-BdLNFj-Y.js">
    <link rel="modulepreload" crossorigin href="/assets/router-xnl75HNn.js">
    <link rel="modulepreload" crossorigin href="/assets/supabase-x3n163R_.js">
    <link rel="modulepreload" crossorigin href="/assets/supabase-BwaKBD5F.js">
    <link rel="modulepreload" crossorigin href="/assets/analytics-CbM0DPTb.js">
    <link rel="modulepreload" crossorigin href="/assets/SnackbarContext-Cs5LQthZ.js">
    <link rel="modulepreload" crossorigin href="/assets/Select-CGF-VVDP.js">
    <link rel="modulepreload" crossorigin href="/assets/ProfileService-a3nFhNYN.js">
    <link rel="modulepreload" crossorigin href="/assets/notificationService-BC-whRBM.js">
    <link rel="modulepreload" crossorigin href="/assets/AuthContext-Cz12G2RZ.js">
    <link rel="modulepreload" crossorigin href="/assets/PWAContext-B6u5UqsA.js">
    <link rel="modulepreload" crossorigin href="/assets/ThemeContext-C_LRyj5I.js">
    <link rel="modulepreload" crossorigin href="/assets/shared-jwGvYKTp.js">
    <link rel="modulepreload" crossorigin href="/assets/templateService-Dd4m_KW7.js">
    <link rel="modulepreload" crossorigin href="/assets/hooks-DeuUHmVm.js">
    <link rel="modulepreload" crossorigin href="/assets/actionActivityService-Cx_dNKAh.js">
    <link rel="modulepreload" crossorigin href="/assets/capabilities-CYnurUHb.js">
    <link rel="stylesheet" crossorigin href="/assets/index-BEp9CVch.css">
  </head>
  <body>
    <!-- PWA Splash Screen -->
    <div id="splash-screen">
      <picture>
        <source srcset="/pwa/splash/app-landing-desktop.webp" type="image/webp" media="(min-width: 601px)" />
        <source srcset="/pwa/splash/app-landing-mobile.webp" type="image/webp" media="(max-width: 600px)" />
        <source srcset="/pwa/splash/app-landing-desktop.png" type="image/png" media="(min-width: 601px)" />
        <img src="/pwa/splash/app-landing-mobile.png" alt="Valley Electrical Contractors" width="600" height="1298" loading="eager" />
      </picture>
    </div>

    <div id="root"></div>
    <div id="modal-root"></div>
  </body>
</html>
