<!DOCTYPE html>
<html lang="en" class="no-js">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Primary Meta Tags (Nasaka IEBC) -->
    <title>Nasaka IEBC — Find & Verify IEBC Offices Across Kenya</title>
    <meta name="description" content="Nasaka IEBC helps Kenyans locate, verify and engage with IEBC service points. Interactive maps, directions, verification and civic reporting for trustworthy electoral access." />
    <meta name="author" content="Nasaka IEBC / CEKA" />
    <link rel="canonical" href="https://recall254.vercel.app" />

    <!-- Theme color for browser UI -->
    <meta name="theme-color" content="#0b63c6" />
    <meta name="msapplication-TileColor" content="#0b63c6" />

    <!-- Open Graph / Facebook (multiple images — social platforms will typically pick one) -->
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="Nasaka IEBC" />
    <meta property="og:url" content="https://recall254.vercel.app/" />
    <meta property="og:title" content="Nasaka IEBC — Locate & Verify IEBC Offices in Kenya" />
    <meta property="og:description" content="Interactive finder for IEBC registration and service points — maps, directions, verification and crowdsourced reporting to improve voter access." />

    <!-- OG images (variants) -->
    <meta property="og:image" content="https://recall254.vercel.app/nasaka-logo-white.png" />
    <meta property="og:image:alt" content="Nasaka IEBC — white background, blue text" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />

    <meta property="og:image" content="https://recall254.vercel.app/nasaka-logo-black.png" />
    <meta property="og:image:alt" content="Nasaka IEBC — black background, white text" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />

    <meta property="og:image" content="https://recall254.vercel.app/nasaka-logo-blue.png" />
    <meta property="og:image:alt" content="Nasaka IEBC — blue background, white text" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />

    <meta property="og:image" content="https://recall254.vercel.app/nasaka-logo-bnw.png" />
    <meta property="og:image:alt" content="Nasaka IEBC — black & white" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@CivicEdKenya" />
    <meta name="twitter:creator" content="@CivicEdKenya" />
    <meta name="twitter:title" content="Nasaka IEBC — Locate & Verify IEBC Offices" />
    <meta name="twitter:description" content="Find IEBC registration points and official offices across Kenya. Map-based finder with verification and reporting features." />
    <meta name="twitter:image" content="https://recall254.vercel.app/nasaka-logo-white.png" />
    <meta name="twitter:image:alt" content="Nasaka IEBC share preview" />

    <!-- Reddit & TikTok -->
    <meta name="twitter:app:name:iphone" content="Nasaka IEBC" />

    <!-- Favicon & Apple / PWA - Default to blue logo -->
    <link rel="icon" href="/nasaka-logo-blue.png" />
    <link rel="apple-touch-icon" href="/nasaka-logo-round-blacknblue.png" />
    <link rel="manifest" href="/site.webmanifest" />

    <!-- SVG Favicon for modern browsers -->
    <link rel="icon" type="image/svg+xml" href="/nasaka.svg" fetchpriority="low" />

    <!-- Structured Data -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "name": "Nasaka IEBC",
      "url": "https://recall254.vercel.app",
      "description": "Nasaka IEBC helps Kenyans locate and verify IEBC offices, access directions, and report civic issues to improve electoral access.",
      "publisher": {
        "@type": "Organization",
        "name": "CEKA – Civic Education Kenya App"
      }
    }
    </script>

    <!-- Stylesheets -->
    <link href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" rel="stylesheet" crossorigin="anonymous" />

    <!-- Client-side helper: dynamic icon selection based on platform and theme -->
    <script>
      (function () {
        try {
          const params = new URLSearchParams(location.search);
          const platform = params.get('platform');
          const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

          // Enhanced icon selection logic
          const pickIcons = (platform, prefersDark) => {
            if (platform === 'tiktok') {
              return {
                favicon: '/nasaka-logo-round-blacknblue.png',
                appleTouch: '/nasaka-logo-round-blacknblue.png',
                ogImage: '/nasaka-logo-blue.png',
                themeColor: '#0b63c6'
              };
            }
            
            if (platform === 'reddit') {
              return {
                favicon: '/nasaka-logo-round-bnw.png',
                appleTouch: '/nasaka-logo-round-bnw.png',
                ogImage: '/nasaka-logo-bnw.png',
                themeColor: '#1c1c1c'
              };
            }

            if (prefersDark) {
              return {
                favicon: '/nasaka-logo-white.png',
                appleTouch: '/nasaka-logo-round-black.png',
                ogImage: '/nasaka-logo-black.png',
                themeColor: '#111827'
              };
            }

            // Light mode default
            return {
              favicon: '/nasaka-logo-blue.png',
              appleTouch: '/nasaka-logo-round-blacknblue.png',
              ogImage: '/nasaka-logo-white.png',
              themeColor: '#0b63c6'
            };
          };

          const icons = pickIcons(platform, prefersDark);
          
          // Update favicon and apple touch icon
          const updateLink = (rel, href, type = null) => {
            let el = document.querySelector(`link[rel="${rel}"]`);
            if (!el) {
              el = document.createElement('link');
              el.rel = rel;
              if (type) el.type = type;
              document.head.appendChild(el);
            }
            el.href = href;
          };

          // Update PNG favicon
          updateLink('icon', icons.favicon);
          
          // Update SVG favicon for modern browsers
          updateLink('icon', '/nasaka.svg', 'image/svg+xml');
          
          // Update apple touch icon
          updateLink('apple-touch-icon', icons.appleTouch);

          // Update theme color
          const metaTheme = document.querySelector('meta[name="theme-color"]');
          if (metaTheme) metaTheme.content = icons.themeColor;

          // Update msapplication tile color
          const msTileColor = document.querySelector('meta[name="msapplication-TileColor"]');
          if (msTileColor) msTileColor.content = icons.themeColor;

          // Update social meta images
          const setMeta = (name, content, property = false) => {
            let selector = property ? `meta[property="${name}"]` : `meta[name="${name}"]`;
            let m = document.querySelector(selector);
            if (!m) {
              m = document.createElement('meta');
              if (property) m.setAttribute('property', name); 
              else m.setAttribute('name', name);
              document.head.appendChild(m);
            }
            m.content = content;
          };
          
          // Update Twitter image
          setMeta('twitter:image', icons.ogImage);
          
          // Update all OG images to use the selected one
          const ogImages = document.querySelectorAll('meta[property="og:image"]');
          ogImages.forEach(meta => {
            meta.content = icons.ogImage;
          });

          // Dynamic SVG color based on theme
          const updateSvgColor = () => {
            const svgLink = document.querySelector('link[rel="icon"][type="image/svg+xml"]');
            if (svgLink) {
              fetch(svgLink.href)
                .then(response => response.text())
                .then(svgText => {
                  // Create a temporary div to parse SVG
                  const tempDiv = document.createElement('div');
                  tempDiv.innerHTML = svgText;
                  const svgElement = tempDiv.querySelector('svg');
                  
                  if (svgElement) {
                    // Set SVG fill color based on theme
                    const paths = svgElement.querySelectorAll('path');
                    paths.forEach(path => {
                      if (prefersDark) {
                        path.setAttribute('fill', '#ffffff');
                      } else {
                        path.setAttribute('fill', '#0b63c6');
                      }
                    });
                    
                    // Create blob URL for the modified SVG
                    const modifiedSvg = new XMLSerializer().serializeToString(svgElement);
                    const blob = new Blob([modifiedSvg], { type: 'image/svg+xml' });
                    const url = URL.createObjectURL(blob);
                    
                    // Update SVG favicon
                    svgLink.href = url;
                  }
                })
                .catch(error => console.error('Error updating SVG color:', error));
            }
          };

          // Update SVG color dynamically
          updateSvgColor();

        } catch (e) { 
          console.error('Icon selection error:', e);
        }
      })();
    </script>

    <!-- Robots -->
    <meta name="robots" content="index, follow" />
    <script type="module" crossorigin src="/assets/index-sBhaARV2.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/vendor-CYdgtbvQ.js">
    <link rel="modulepreload" crossorigin href="/assets/ui-mjc_G5S6.js">
    <link rel="modulepreload" crossorigin href="/assets/utils-jCCPu3GA.js">
    <link rel="modulepreload" crossorigin href="/assets/leaflet-DqHbUX2j.js">
    <link rel="stylesheet" crossorigin href="/assets/index-CEDOCHON.css">
  </head>

  <body>
    <!-- JavaScript Fallback for Non-JS Agents -->
    <noscript>
      <div style="padding: 2rem; text-align: center;">
        <h1>Nasaka IEBC: Locate & Verify IEBC Offices Across Kenya</h1>
        <p>This platform helps Kenyan citizens find official IEBC registration centers, verify office locations, and access electoral services with interactive maps and directions.</p>
        <p><a href="https://recall254.vercel.app">Visit Nasaka IEBC</a></p>
      </div>
    </noscript>

    <!-- React Root -->
    <div id="root"></div>

    <!-- Remove no-js class if JavaScript is enabled -->
    <script>
      document.documentElement.classList.remove("no-js");
    </script>
  </body>
</html>
