<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <!-- Cache: let browser cache static assets (Vite adds hashes to filenames) -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  <meta name="description"
    content="AI instantly shows you the best suppliers ranked by price, location, speed, and quality. Suppliers compete with quotes. Escrow and logistics built in. All through one chat." />
  <meta name="extension-protection" content="active" />
  <title>AFRIKONI - You talk. Africa delivers.</title>

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://afrikoni.com/" />
  <meta property="og:title" content="AFRIKONI - You talk. Africa delivers." />
  <meta property="og:description"
    content="AI instantly shows you the best suppliers ranked by price, location, speed, and quality. Suppliers compete with quotes. Escrow and logistics built in. All through one chat." />
  <meta property="og:image" content="/og-image.jpg?v=4" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:type" content="image/jpeg" />

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:url" content="https://afrikoni.com/" />
  <meta name="twitter:title" content="AFRIKONI - You talk. Africa delivers." />
  <meta name="twitter:description"
    content="AI instantly shows you the best suppliers ranked by price, location, speed, and quality. Suppliers compete with quotes. Escrow and logistics built in. All through one chat." />
  <meta name="twitter:image" content="/og-image.jpg?v=4" />
  <meta name="twitter:image:alt" content="Afrikoni - You talk. Africa delivers." />

  <!-- Favicons - Afrikoni Logo (Official Brand Icon) -->
  <link rel="icon" href="/favicon.ico?v=3" />
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=3" />
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=3" />
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=3" />
  <link rel="manifest" href="/site.webmanifest?v=3" />
  <!-- Theme Color -->
  <meta name="theme-color" content="#603813" />
  <meta name="msapplication-TileColor" content="#603813" />
  <meta name="msapplication-TileImage" content="/android-chrome-192x192.png?v=3" />

  <!-- Fonts: Only Inter (primary) + Cairo (Arabic) — others removed to cut 500ms+ load time -->
  <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:wght@400;500;600;700&family=Cairo:wght@400;600;700&display=swap" rel="stylesheet">


  <!-- DNS prefetch for Supabase API calls -->
  <link rel="dns-prefetch" href="https://wmjxiazhvjaadzdsroqa.supabase.co">
  <link rel="preconnect" href="https://wmjxiazhvjaadzdsroqa.supabase.co" crossorigin>

  <!-- Google Analytics 4 will be loaded dynamically via main.jsx -->

  <!-- Extension Protection: Suppress extension noise that clogs logs -->
  <script>
    window.addEventListener('error', e => {
      if (e.message?.includes('extensionAdapter') || e.message?.includes('message channel closed')) {
        e.stopImmediatePropagation();
      }
    }, true);
  </script>
  <style>
    /* Critical CSS Variables - Inline to prevent FOUC
       Must match :root[data-theme="cream"] in index.css (default theme) */
    :root {
      --os-bg: #F7F3ED;
      --os-surface: rgba(250, 247, 242, 0.9);
      --os-surface-solid: #FAF7F2;
      --os-stroke: rgba(138, 122, 100, 0.18);
      --os-text-primary: #1A1A1A;
      --os-text-secondary: #7A7268;
      --os-accent: #C19A6B;
      --os-accent-dark: #A57E52;
      --os-success: #0C6F6F;
      --os-error: #E2725B;
    }

    html,
    body {
      background-color: var(--os-bg);
      color: var(--os-text-primary);
      margin: 0;
      padding: 0;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    /* Prevent content flash */
    #root {
      min-height: 100vh;
    }
  </style>
  <script type="module" crossorigin src="/assets/index-1775240789768.qLfMg7jR.js"></script>
  <link rel="modulepreload" crossorigin href="/assets/vendor-react-1775240789768.CaZl4t64.js">
  <link rel="modulepreload" crossorigin href="/assets/vendor-date-1775240789768.CbKStYiN.js">
  <link rel="modulepreload" crossorigin href="/assets/jspdf-1775240789768.CvyyJxHl.js">
  <link rel="modulepreload" crossorigin href="/assets/supabase-1775240789768.tpZRh_Cs.js">
  <link rel="stylesheet" crossorigin href="/assets/index-1775240789768.DUS3MX8d.css">
</head>

<body>
  <div id="root">
    <!-- Static loading shell shown before React mounts — prevents blank white page on slow connections -->
    <div id="static-loader"
      style="position:fixed;inset:0;background:var(--os-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;font-family:'Inter',-apple-system,sans-serif;">
      <div style="margin-bottom:28px;position:relative;">
        <div
          style="width:52px;height:52px;border:3px solid rgba(193,154,107,0.15);border-top-color:var(--os-accent);border-radius:50%;animation:afspin 0.85s linear infinite;">
        </div>
      </div>
      <p style="color:var(--os-accent);font-size:10px;font-weight:700;letter-spacing:0.35em;text-transform:uppercase;margin:0;">
        AFRIKONI</p>
      <style>
        @keyframes afspin {
          to {
            transform: rotate(360deg)
          }
        }
      </style>
    </div>
  </div>
</body>

</html>