<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.svg?v=3" type="image/svg+xml" />
    <link rel="alternate icon" href="/favicon.ico?v=3" sizes="any" />
    <link rel="shortcut icon" href="/favicon.ico?v=3" />
    <!-- recraft.ng is served by this same shell: show Recraft's icon there. The
         edge middleware (functions/_recraft-head.ts) already rewrites these for
         every request it sees; this covers a shell served without it. -->
    <script>(function(){var h=location.hostname;if(h!=='recraft.ng'&&h!=='www.recraft.ng')return;
    var q=function(s){return document.querySelector(s)};var i=q('link[rel="icon"]');if(i){i.href='/logos/recraft/favicon-32.png';i.type='image/png';}
    ['link[rel="alternate icon"]','link[rel="shortcut icon"]'].forEach(function(s){var e=q(s);if(e)e.href='/logos/recraft/favicon.ico';});
    var m=q('link[rel="mask-icon"]');if(m)m.remove();document.documentElement.classList.add('recraft-theme');
    document.addEventListener('DOMContentLoaded',function(){var a=q('link[rel="apple-touch-icon"]');if(a)a.href='/logos/recraft/apple-touch-icon.png';
    var t=q('meta[name="apple-mobile-web-app-title"]');if(t)t.content='Recraft';var c=q('meta[name="theme-color"]');if(c)c.content='#F7C618';
    var mf=q('link[rel="manifest"]');if(mf)mf.href='/logos/recraft/site.webmanifest';});})();</script>

    <!-- Enhanced Mobile Viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover" />
    
    <!-- Mobile Web App -->
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <meta name="apple-mobile-web-app-title" content="WorkCentral" />
    
    <!-- iOS App Icon -->
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=3" />
    
    <!-- Prevent auto-formatting -->
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="date=no" />
    <meta name="format-detection" content="address=no" />
    <meta name="format-detection" content="email=no" />
    
    <!-- Google Tag Manager: WorkCentral's container, so not on Recraft (recraft.ng,
         or a first load of /recraft on workcentral.io). Its tags are managed outside
         the repo and can draw widgets over Recraft's calls to action; Recraft
         needs its own container if it wants tags. src/test/recraft-no-floating-clutter.test.ts -->
    <script>(function(w,d,s,l,i){var h=location.hostname,p=location.pathname;
    if(h==='recraft.ng'||h==='www.recraft.ng'||p==='/recraft'||p.indexOf('/recraft/')===0)return;w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-NZSJMDKH');</script>
    <!-- End Google Tag Manager -->
    
    <!-- Google Site Verification -->
    <meta name="google-site-verification" content="GqeBRzteveGtc3d0GYHoDzOGSIDNXpzqKxWuzjzXJbY" />
    
    <title>WorkCentral - Complete Business Suite & Workspace Solutions</title>
    <!-- The edge middleware (functions/_middleware.ts) rewrites this per route; it
         can only rewrite a tag that exists, so it must stay in the shell. -->
    <meta name="description" content="Transform your business with WorkCentral's comprehensive business management suite, workspace solutions, and industry-specific tools." />
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://workcentral.io/" />
    <meta property="og:title" content="WorkCentral - Complete Business Suite & Workspace Solutions" />
    <meta property="og:description" content="Transform your business with WorkCentral's comprehensive business management suite, workspace solutions, and industry-specific tools." />
    <meta property="og:image" content="https://workcentral.io/assets/images/social/workcentral-og.jpg" />
    <meta property="og:image:secure_url" content="https://workcentral.io/assets/images/social/workcentral-og.jpg" />
    <meta property="og:image:alt" content="WorkCentral workspace and meeting room in Lagos" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:type" content="image/jpeg" />

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="https://workcentral.io/" />
    <meta property="twitter:title" content="WorkCentral - Complete Business Suite & Workspace Solutions" />
    <meta property="twitter:description" content="Transform your business with WorkCentral's comprehensive business management suite, workspace solutions, and industry-specific tools." />
    <meta property="twitter:image" content="https://workcentral.io/assets/images/social/workcentral-og.jpg" />

    <!-- Canonical URL managed by react-helmet-async per page -->
    
    <!-- Structured Data -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "SoftwareApplication",
      "name": "WorkCentral",
      "description": "Complete business management suite with workspace solutions",
      "url": "https://workcentral.io",
      "image": "https://workcentral.io/assets/images/social/workcentral-og.jpg",
      "applicationCategory": "BusinessApplication",
      "operatingSystem": "Web",
      "offers": {
        "@type": "Offer",
        "price": "0",
        "priceCurrency": "USD",
        "description": "Free trial available"
      }
    }
    </script>
    
    <!-- Google Fonts -->
    <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=Inter+Tight:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Zoho PageSense must never block SPA bootstrap. Load it asynchronously on
         production hosts only; preview deployments are for QA and do not need analytics. -->
    <script>
      (function () {
        var productionHosts = ['workcentral.io', 'www.workcentral.io', 'app.workcentral.io', 'portal.workcentral.io'];
        if (productionHosts.indexOf(location.hostname) === -1) return;
        var script = document.createElement('script');
        script.src = 'https://cdn.pagesense.io/js/workcentral/eb6d05d361ca4402bd57b99c4bb5e1a2.js';
        script.async = true;
        document.head.appendChild(script);
      })();
    </script>
    
    <!-- DNS prefetch for external resources -->
    <link rel="preconnect" href="https://hlfjigpwjrxxjowzealr.supabase.co" crossorigin />
    <link rel="dns-prefetch" href="//hlfjigpwjrxxjowzealr.supabase.co" />
    <link rel="dns-prefetch" href="//fonts.googleapis.com" />
    <link rel="dns-prefetch" href="//www.googletagmanager.com" />
    <link rel="dns-prefetch" href="//cdn.pagesense.io" />
    
    <!-- Theme color -->
    <meta name="theme-color" content="#f7db15" />
    
    <!-- Robots -->
    <meta name="robots" content="index, follow" />
    <meta name="googlebot" content="index, follow" />
    <script type="module" crossorigin src="/assets/index-CajjDnzJ.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-DYndF1Sn.css">
  <link rel="manifest" href="/manifest.webmanifest"><script id="vite-plugin-pwa:register-sw" src="/registerSW.js"></script></head>
  <body>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NZSJMDKH"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    
    <div id="root">
      <div id="wc-bootstrap" role="status" aria-live="polite" style="min-height:100vh;display:flex;align-items:center;justify-content:center;font-family:Inter,Arial,sans-serif;color:#27272a;background:#fff;">
        <div style="text-align:center;padding:24px;">
          <div style="width:36px;height:36px;margin:0 auto 16px;border:4px solid #f4f4f5;border-top-color:#eab308;border-radius:9999px;animation:wc-spin 0.9s linear infinite;"></div>
          <strong>Loading WorkCentral…</strong>
          <div id="wc-bootstrap-detail" style="margin-top:8px;font-size:13px;color:#71717a;">Preparing the secure portal.</div>
        </div>
      </div>
    </div>
    <style>@keyframes wc-spin{to{transform:rotate(360deg)}}</style>
    <script>
      /* Bootstrap watchdog (inline, runs even if the app's main chunk fails to load).
         React replaces #wc-bootstrap after mounting. If the shell is still present
         after 12s, reload once with a cache buster; after that, show a visible recovery
         message instead of leaving the user on a silent white screen. */
      (function () {
        var KEY = '__wc_boot_reload_at';
        window.addEventListener('load', function () {
          setTimeout(function () {
            var bootstrap = document.getElementById('wc-bootstrap');
            if (!bootstrap) return;
            var last = 0;
            try { last = Number(sessionStorage.getItem(KEY) || 0); } catch (e) {}
            if (Date.now() - last >= 60000) {
              try { sessionStorage.setItem(KEY, String(Date.now())); } catch (e) {}
              location.replace(location.pathname + (location.search ? location.search + '&' : '?') + '_r=' + Date.now());
              return;
            }
            var detail = document.getElementById('wc-bootstrap-detail');
            if (detail) detail.textContent = 'The portal is taking longer than expected. Refresh the page or open the latest preview deployment.';
          }, 12000);
        });
      })();
    </script>
  </body>
</html>
