// VisitorPulse — HOKA edition
// Clusters: Race·Speed / Cushion·Comfort / Trail·Adventure / Style·Everyday / Apparel·Gear

function _hokaClusterProducts(filterFn, limit) {
  return (window.PRODUCTS || []).filter(filterFn).slice(0, limit || 4).map(p => p.id);
}

const CLUSTERS = [
  {
    id: 'race-speed',
    label: 'Race · Speed · Performance',
    short: 'Race · Speed',
    color: '#E63946',
    angle: -30,
    products: _hokaClusterProducts(p => p.cats.includes('race-shoe') || p.cats.includes('performance')),
  },
  {
    id: 'cushion-comfort',
    label: 'Max Cushion · Recovery · Plush',
    short: 'Cushion · Comfort',
    color: '#0072CE',
    angle: 50,
    products: _hokaClusterProducts(p => p.cats.includes('max-cushion') || p.cats.includes('plush')),
  },
  {
    id: 'trail-adventure',
    label: 'Trail · Adventure · Outdoor',
    short: 'Trail · Adventure',
    color: '#D89251',
    angle: -150,
    products: _hokaClusterProducts(p => p.cats.includes('trail-shoe') || p.cats.includes('trail')),
  },
  {
    id: 'style-everyday',
    label: 'Everyday · Fitness · Style',
    short: 'Everyday · Style',
    color: '#A7A0EB',
    angle: -90,
    products: _hokaClusterProducts(p => p.cats.includes('everyday-shoe') || p.cats.includes('fitness-shoe')),
  },
  {
    id: 'apparel-gear',
    label: 'Apparel · Socks · Gear',
    short: 'Apparel · Gear',
    color: '#7AAB7C',
    angle: 130,
    products: _hokaClusterProducts(p => p.cats.some(c => ['top','bottom','sock','accessory','sports-bra'].includes(c))),
  },
];

const REST_R = 42;
const NEAR_R = 15;

const PERSONA_AFFINITY = {
  'sprint-queen':   { 'race-speed': 1.00, 'apparel-gear': 0.72, 'style-everyday': 0.40, 'cushion-comfort': 0.22, 'trail-adventure': 0.15 },
  'comfort-runner': { 'cushion-comfort': 1.00, 'apparel-gear': 0.65, 'style-everyday': 0.55, 'trail-adventure': 0.35, 'race-speed': 0.18 },
  'speed-racer':    { 'race-speed': 1.00, 'apparel-gear': 0.62, 'cushion-comfort': 0.48, 'style-everyday': 0.45, 'trail-adventure': 0.30 },
};

const PRODUCT_TO_CLUSTER = (() => {
  const map = {};
  for (const c of CLUSTERS) for (const pid of c.products) map[pid] = c.id;
  return map;
})();

const PERSONA_NARRATIVE = {
  'sprint-queen': {
    primaryCluster: 'race-speed',
    bars: ['Race shoes', 'Performance', 'Responsive', 'Run top', 'Sports bra', 'Race socks'],
    barKey: ['race-shoe','performance','responsive','top','sports-bra','sock'],
    perStep: {
      welcome: { bars: [0.42, 0.36, 0.30, 0.24, 0.20, 0.28], events: [{ kind: 'PAGE VIEW', label: 'Road Runner PLP', val: '7 items' }] },
      plp:     { bars: [0.66, 0.58, 0.50, 0.38, 0.32, 0.42], events: [{ kind: 'DWELL', label: 'Rocket X 3', val: '18s' }, { kind: 'HOVER', label: 'Cielo Road', val: 'hover 3×' }] },
      search:  { bars: [0.80, 0.70, 0.62, 0.48, 0.40, 0.52], events: [{ kind: 'SEARCH', label: '"max cushon shoe" (typo)', val: 'mal-rank' }] },
      pdp:     { bars: [0.90, 0.80, 0.72, 0.58, 0.52, 0.62], events: [{ kind: 'DWELL', label: 'Skyward X PDP', val: '22s' }, { kind: 'ADD INTENT', label: 'Race Day Bra + Socks', val: 'cart 2×' }] },
      merch:   { bars: [0.96, 0.88, 0.80, 0.66, 0.60, 0.70], events: [{ kind: 'BUNDLE', label: '+ Race Day Split Short', val: 'open' }] },
    },
  },
  'comfort-runner': {
    primaryCluster: 'cushion-comfort',
    bars: ['Max cushion', 'Plush ride', 'Everyday trainer', 'Recovery', 'Run tights', 'Outwear'],
    barKey: ['max-cushion','plush','everyday-shoe','recovery','bottom','outwear'],
    perStep: {
      welcome: { bars: [0.40, 0.38, 0.34, 0.28, 0.22, 0.20], events: [{ kind: 'PAGE VIEW', label: 'Road Runner PLP', val: '7 items' }] },
      plp:     { bars: [0.64, 0.60, 0.54, 0.46, 0.36, 0.32], events: [{ kind: 'DWELL', label: 'Skyward X', val: '16s' }, { kind: 'HOVER', label: 'Stinson 7', val: 'hover 2×' }] },
      search:  { bars: [0.76, 0.72, 0.64, 0.58, 0.46, 0.42], events: [{ kind: 'SEARCH', label: '"what shoe good for bad knees"', val: 'mal-rank' }] },
      pdp:     { bars: [0.86, 0.82, 0.74, 0.68, 0.56, 0.52], events: [{ kind: 'DWELL', label: 'Skyward X PDP', val: '20s' }, { kind: 'ADD INTENT', label: '+ Recovery Hoodie', val: 'cart 1×' }] },
      merch:   { bars: [0.94, 0.90, 0.82, 0.76, 0.64, 0.60], events: [{ kind: 'BUNDLE', label: '+ Novafly Tight', val: 'open' }] },
    },
  },
  'speed-racer': {
    primaryCluster: 'race-speed',
    bars: ['Performance', 'Responsive', 'Race shoes', 'Run shorts', 'Run top', 'Socks'],
    barKey: ['performance','responsive','race-shoe','bottom','top','sock'],
    perStep: {
      welcome: { bars: [0.44, 0.40, 0.38, 0.30, 0.26, 0.32], events: [{ kind: 'PAGE VIEW', label: 'Road Runner PLP', val: '9 items' }] },
      plp:     { bars: [0.68, 0.62, 0.58, 0.46, 0.38, 0.50], events: [{ kind: 'DWELL', label: 'Mach 7', val: '14s' }, { kind: 'HOVER', label: 'Mach X 3', val: 'hover 3×' }] },
      search:  { bars: [0.80, 0.74, 0.70, 0.56, 0.46, 0.60], events: [{ kind: 'SEARCH', label: '"running shoe"', val: 'mal-rank' }] },
      pdp:     { bars: [0.90, 0.84, 0.78, 0.66, 0.54, 0.68], events: [{ kind: 'DWELL', label: 'Bondi 9 PDP', val: '19s' }, { kind: 'ADD INTENT', label: '+ Glide 5" Short', val: 'cart 1×' }] },
      merch:   { bars: [0.96, 0.90, 0.86, 0.74, 0.62, 0.76], events: [{ kind: 'BUNDLE', label: '+ Airolite Tank', val: 'open' }] },
    },
  },
};

const PERSONA_CONTEXT = {
  'sprint-queen':   { visitorId: 'usr_4821', returning: '1st visit · no account', device: 'Desktop · Mac · 1680w', referrer: 'google.com · "hoka race shoes"', location: 'Boston, MA', time: 'Sat 7:14a · morning' },
  'comfort-runner': { visitorId: 'usr_7293', returning: '2nd visit · no account', device: 'iOS 17 · 390w · mobile', referrer: 'instagram.com · organic', location: 'Seattle, WA', time: 'Sun 11:32a · morning' },
  'speed-racer':    { visitorId: 'usr_3506', returning: '1st visit · no account', device: 'Android · 412w · mobile', referrer: 'google.com · "hoka running shoes men"', location: 'Austin, TX', time: 'Wed 6:45a · morning' },
};

const STEP_ORDER    = ['welcome', 'plp', 'search', 'pdp', 'merch'];
const STEP_LABELS   = { welcome: 'Cold start', plp: 'PLP', search: 'Search', pdp: 'PDP', merch: 'Merch' };
const STEP_IMG_FLOOR    = { welcome: 0.00, plp: 0.20, search: 0.55, pdp: 0.80, merch: 0.92 };
const STEP_BLUR_CEILING = { welcome: 18,   plp: 5,    search: 2.5,  pdp: 1.0,  merch: 0.5 };
const STEP_BASE_DEF     = { welcome: 0.12, plp: 0.42, search: 0.70, pdp: 0.92, merch: 0.99 };

function VisitorPulse({ stepId, persona, favorites, expanded, setExpanded }) {
  React.useEffect(() => {
    if (!window.PRODUCTS) return;
    CLUSTERS.flatMap(c => c.products).forEach(pid => {
      const p = window.PRODUCTS.find(x => x.id === pid);
      if (!p?.img) return;
      const img = new Image(); img.src = p.img;
    });
  }, []);

  const currentStepOrd = Math.max(0, STEP_ORDER.indexOf(stepId));
  const [sliderOrd, setSliderOrd] = React.useState(currentStepOrd);
  React.useEffect(() => { setSliderOrd(currentStepOrd); }, [currentStepOrd]);
  const effectiveStepId = STEP_ORDER[Math.max(0, Math.min(STEP_ORDER.length - 1, sliderOrd))];
  const isScrubbing = sliderOrd !== currentStepOrd;

  const narrative  = PERSONA_NARRATIVE[persona.id] || PERSONA_NARRATIVE['sprint-queen'];
  const context    = PERSONA_CONTEXT[persona.id]   || PERSONA_CONTEXT['sprint-queen'];
  const stepData   = narrative.perStep[effectiveStepId] || narrative.perStep.welcome;
  const affinityMap= PERSONA_AFFINITY[persona.id]  || PERSONA_AFFINITY['sprint-queen'];

  const heartClusterCounts = React.useMemo(() => {
    const counts = {};
    for (const fid of (favorites || [])) {
      const cid = PRODUCT_TO_CLUSTER[fid];
      if (cid) counts[cid] = (counts[cid] || 0) + 1;
    }
    return counts;
  }, [favorites]);
  const heartTotal = Object.values(heartClusterCounts).reduce((s, v) => s + v, 0);

  const baseDef   = STEP_BASE_DEF[effectiveStepId] ?? 0.12;
  const definition= Math.min(0.99, baseDef + Math.min(0.32, heartTotal * 0.10));

  const computedClusters = React.useMemo(() => {
    return CLUSTERS.map(c => {
      const aff    = affinityMap[c.id] ?? 0.1;
      const hearts = heartClusterCounts[c.id] || 0;
      let pull     = Math.pow(aff, 1.4) * (0.40 + definition * 1.00) + hearts * 0.40;
      pull         = Math.max(0, Math.min(0.97, pull));
      const ang    = c.angle * Math.PI / 180;
      const dist   = REST_R - (REST_R - NEAR_R) * pull;
      return { ...c, pos: { x: 50 + Math.cos(ang) * dist, y: 50 + Math.sin(ang) * dist }, pull, affinity: aff, hearts, normDist: dist / REST_R };
    });
  }, [persona.id, definition, heartClusterCounts]);

  const visitorPos = { x: 50, y: 50 };

  const eventLog = React.useMemo(() => {
    const upto = STEP_ORDER.indexOf(effectiveStepId);
    const arr = [];
    for (let i = 0; i <= upto; i++) {
      const s = narrative.perStep[STEP_ORDER[i]];
      if (s) s.events.forEach(e => arr.push({ ...e, step: STEP_ORDER[i] }));
    }
    return arr.slice(-6);
  }, [effectiveStepId, persona.id]);

  return (
    <>
      <div aria-hidden="true" style={{ position:'absolute', width:1, height:1, overflow:'hidden', opacity:0, pointerEvents:'none', left:-9999, top:-9999 }}>
        {[...new Set(CLUSTERS.flatMap(c => c.products))].map(pid => {
          const p = (window.PRODUCTS || []).find(x => x.id === pid);
          if (!p?.img) return null;
          return <img key={pid} src={p.img} alt="" loading="eager" />;
        })}
      </div>

      {!expanded && (
        <button className="vp-rail" onClick={() => setExpanded(true)} title="Visitor Pulse · click to expand">
          <div className="vp-rail__mini">
            <VectorSpaceSVG clusters={computedClusters} visitorPos={visitorPos} definition={definition} stepId={effectiveStepId} compact />
          </div>
          <div className="vp-rail__label">VECTOR<span>·</span>384d</div>
          <div className="vp-rail__def">
            <div className="vp-rail__def-bar">
              <div className="vp-rail__def-fill" style={{ height: `${Math.round(definition * 100)}%` }} />
            </div>
            <div className="vp-rail__def-num">{Math.round(definition * 100)}%</div>
          </div>
          <div className="vp-rail__chev">‹</div>
        </button>
      )}

      {expanded && (
        <div className="vp-panel" role="dialog" aria-label="Visitor Pulse">
          <div className="vp-panel__head">
            <div className="vp-panel__head-l">
              <span className="vp-panel__eye">VISITOR PULSE</span>
              <span className="vp-panel__id">{context.visitorId} · {Math.round(definition * 100)}% defined</span>
            </div>
            <button className="vp-panel__close" onClick={() => setExpanded(false)} aria-label="Collapse">›</button>
          </div>

          <div className="vp-panel__body">
            <div className="vp-panel__col vp-panel__col--left">
              <div className="vp-card vp-card--dark vp-card--context">
                <div className="vp-card__eye">USER CONTEXT</div>
                <div className="vp-rows">
                  {[['RETURNING', context.returning], ['DEVICE', context.device], ['REFERRER', context.referrer], ['LOCATION', context.location], ['TIME', context.time]].map(([k, v]) => (
                    <div key={k} className="vp-row">
                      <span className="vp-row__k">{k}</span>
                      <span className="vp-row__v">{v}</span>
                    </div>
                  ))}
                </div>
              </div>
              <div className="vp-card vp-card--tracker">
                <div className="vp-card__eye vp-card__eye--tracker">
                  IN-SESSION BEHAVIOURS <span className="vp-card__eye-meta">· <span className="vp-dot" />{eventLog.length} events</span>
                </div>
                <div className="vp-events">
                  {eventLog.map((e, i) => (
                    <div key={i} className="vp-event">
                      <span className="vp-event__kind">{e.kind}</span>
                      <span className="vp-event__label">{e.label}</span>
                      <span className="vp-event__val">{e.val}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            <div className="vp-panel__col vp-panel__col--center">
              <div className="vp-card vp-card--cream">
                <div className="vp-card__eye vp-card__eye--cream">
                  VECTOR SPACE · 2D PROJECTION
                  <span style={{ marginLeft:10, color:'#9C9277', fontWeight:500, letterSpacing:'0.10em' }}>384 DIMS · UPDATED PER EVENT</span>
                </div>
                <div className="vp-space">
                  {currentStepOrd > 0 && (
                    <div className="vp-scrubber">
                      <div className="vp-scrubber__head">
                        <span className="vp-scrubber__eye">REPLAY PROGRESSION</span>
                        <span className="vp-scrubber__pos">
                          {STEP_LABELS[effectiveStepId]}
                          {isScrubbing && <span className="vp-scrubber__scrub">· scrubbing</span>}
                        </span>
                      </div>
                      <input type="range" className="vp-scrubber__range" min={0} max={currentStepOrd} step={1}
                        value={sliderOrd} onChange={e => setSliderOrd(Number(e.target.value))} />
                      <div className="vp-scrubber__ticks">
                        {STEP_ORDER.slice(0, currentStepOrd + 1).map((s, i) => (
                          <button key={s} type="button"
                            className={`vp-scrubber__tick ${i === sliderOrd ? 'is-active' : ''}`}
                            onClick={() => setSliderOrd(i)}>
                            {STEP_LABELS[s]}
                          </button>
                        ))}
                      </div>
                    </div>
                  )}
                  <VectorSpaceSVG clusters={computedClusters} visitorPos={visitorPos} definition={definition}
                    stepId={effectiveStepId} hearted={favorites || []} visitorTag={context.visitorId} />
                </div>
              </div>
            </div>

            <div className="vp-panel__col vp-panel__col--right">
              <div className="vp-card vp-card--dark">
                <div className="vp-card__eye vp-card__eye--top">ADAPTIVE PROFILE</div>
                <div className="vp-bars">
                  {narrative.bars.map((label, i) => {
                    const val  = stepData.bars[i] || 0;
                    const tone = ['lime','violet','rose','lime','violet','amber'][i % 6];
                    return (
                      <div key={i} className="vp-bar">
                        <div className="vp-bar__head">
                          <span className="vp-bar__label">{label}</span>
                          <span className={`vp-bar__val vp-bar__val--${tone}`}>{val.toFixed(2)}</span>
                        </div>
                        <div className="vp-bar__track">
                          <div className={`vp-bar__fill vp-bar__fill--${tone}`} style={{ width:`${val * 100}%` }} />
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

function VectorSpaceSVG({ clusters, visitorPos, definition, compact = false, hearted = [], visitorTag = 'usr_4821', stepId = 'plp' }) {
  const products  = window.PRODUCTS || [];
  const byId      = id => products.find(p => p.id === id);
  const stepFloor = STEP_IMG_FLOOR[stepId] ?? 0.16;
  const stepBlurMax = STEP_BLUR_CEILING[stepId] ?? 6;
  const lineOpacity = Math.max(0, (definition - 0.25) * 1.4);
  const visitorBlur = Math.max(0, (1 - definition) * 4);

  return (
    <svg viewBox="-8 -8 116 116" className={`vp-svg ${compact ? 'vp-svg--compact' : ''}`} preserveAspectRatio="xMidYMid meet">
      <circle cx={visitorPos.x} cy={visitorPos.y} r="36" className="vp-ring" />
      <circle cx={visitorPos.x} cy={visitorPos.y} r="24" className="vp-ring" />
      <circle cx={visitorPos.x} cy={visitorPos.y} r="14" className="vp-ring" />

      {clusters.map(c => (
        <line key={`l-${c.id}`}
          x1={visitorPos.x} y1={visitorPos.y} x2={c.pos.x} y2={c.pos.y}
          className="vp-line" stroke={c.color}
          strokeOpacity={Math.max(0.10, (c.pull ?? 0) * 0.75 + lineOpacity * 0.2)}
          strokeDasharray="1.4 1.6" style={{ transition: 'stroke-opacity 600ms ease' }} />
      ))}

      {clusters.map(c => {
        const pull         = c.pull ?? 0;
        const haloR        = compact ? 8.5 : 8 + pull * 5 + definition * 1.5;
        const imgOpacity   = stepId === 'welcome' ? 0 : Math.max(stepFloor, 0.40 + pull * 0.55);
        const blurAmt      = Math.min(stepBlurMax, (1 - pull) * 7);
        const labelOpacity = 0.35 + pull * 0.65;
        const heartedHere  = c.products.filter(pid => hearted.includes(pid));
        const otherHere    = c.products.filter(pid => !hearted.includes(pid));
        const pickIds      = [...heartedHere, ...otherHere].slice(0, compact ? 0 : 4);
        const productThumbs= pickIds.map(byId).filter(Boolean);
        const isTop        = c.pos.y < 50;
        const labelY       = isTop ? -haloR - 4.5 : haloR + 4.6;
        const dY           = isTop ? -haloR - 1.6 : haloR + 7.8;
        const distVisitor  = Math.sqrt(Math.pow(c.pos.x - visitorPos.x,2) + Math.pow(c.pos.y - visitorPos.y,2));

        return (
          <g key={c.id} className="vp-cluster" transform={`translate(${c.pos.x} ${c.pos.y})`}
            style={{ transition: 'transform 700ms cubic-bezier(.22,.61,.36,1)' }}>
            <ellipse rx={haloR * 1.18} ry={haloR * 0.92} fill={c.color} fillOpacity={0.08 + pull * 0.16} />
            <ellipse rx={haloR * 0.80} ry={haloR * 0.66} fill={c.color} fillOpacity={0.18 + pull * 0.22} />
            {productThumbs.map((p, i) => {
              const tx = (i % 2 - 0.5) * haloR * 0.42;
              const ty = (Math.floor(i / 2) - 0.5) * haloR * 0.42;
              const tr = 3.4 + pull * 1.0;
              const isHearted  = hearted.includes(p.id);
              const localBlur  = isHearted ? 0 : Math.min(6, blurAmt * (0.5 + ((i * 37) % 100) / 100 * 0.5));
              return (
                <g key={p.id} transform={`translate(${tx} ${ty})`}>
                  <circle r={tr + 0.5} fill={c.color} fillOpacity={0.22 + (1-pull) * 0.30} />
                  <foreignObject x={-tr} y={-tr} width={tr*2} height={tr*2} style={{ overflow:'visible' }}>
                    <img xmlns="http://www.w3.org/1999/xhtml" src={p.img} alt="" loading="eager" decoding="sync"
                      style={{ width:'100%', height:'100%', objectFit:'cover', borderRadius:'50%', display:'block',
                        filter:`blur(${localBlur}px)`, opacity: isHearted ? 1 : imgOpacity,
                        transition:'filter 600ms ease, opacity 600ms ease' }} />
                  </foreignObject>
                  <circle r={tr+0.3} fill="none" stroke={isHearted ? '#E55248' : c.color}
                    strokeWidth={isHearted ? '0.7' : '0.4'} strokeOpacity={isHearted ? 1 : 0.5 + pull * 0.5} />
                  {isHearted && <text x={tr*0.95} y={-tr*0.65} fontSize="3" textAnchor="middle" fill="#E55248">♥</text>}
                </g>
              );
            })}
            {!compact && (
              <text y={labelY} textAnchor="middle" className="vp-cluster__label"
                fill={c.color} fontSize="4.2" fontWeight="700" style={{ opacity: labelOpacity }}>
                {c.short}
              </text>
            )}
            {!compact && pull > 0.2 && (
              <text y={dY} textAnchor="middle" className="vp-cluster__d"
                fill={c.color} fontSize="2.6" style={{ opacity: 0.45 + pull * 0.45 }}>
                d={(distVisitor / REST_R).toFixed(2)} · n={c.products.length}
              </text>
            )}
          </g>
        );
      })}

      <defs>
        <radialGradient id="vp-visitor-glow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#ADEF9B" stopOpacity="0.55" />
          <stop offset="60%" stopColor="#3DBE85" stopOpacity="0.22" />
          <stop offset="100%" stopColor="#038362" stopOpacity="0" />
        </radialGradient>
        <radialGradient id="vp-visitor-body" cx="35%" cy="30%" r="75%">
          <stop offset="0%" stopColor="#9AE9C8" />
          <stop offset="35%" stopColor="#3DBE85" />
          <stop offset="80%" stopColor="#0C5A45" />
          <stop offset="100%" stopColor="#062F26" />
        </radialGradient>
        <radialGradient id="vp-visitor-spec" cx="30%" cy="22%" r="22%">
          <stop offset="0%" stopColor="#FFFFFF" stopOpacity="0.95" />
          <stop offset="100%" stopColor="#FFFFFF" stopOpacity="0" />
        </radialGradient>
      </defs>

      <g transform={`translate(${visitorPos.x} ${visitorPos.y})`} style={{ transition:'transform 700ms cubic-bezier(.22,.61,.36,1)' }}>
        <ellipse cx="0" cy={compact ? 3.6 : 5.6} rx={compact ? 3.6 : 5.6} ry={compact ? 0.8 : 1.2}
          fill="#06171F" fillOpacity={0.18} style={{ filter:'blur(1px)' }} />
        <circle r={compact ? 5 : 10} fill="url(#vp-visitor-glow)" />
        <circle r={compact ? 3 : 4.6} fill="url(#vp-visitor-body)" style={{ filter:`blur(${visitorBlur * 0.6}px)` }} />
        <circle r={compact ? 3 : 4.6} fill="none" stroke="#ADEF9B" strokeWidth="0.35" strokeOpacity="0.45" />
        <ellipse cx={compact ? -0.9 : -1.4} cy={compact ? -1.0 : -1.6}
          rx={compact ? 1.2 : 1.8} ry={compact ? 0.7 : 1.1} fill="url(#vp-visitor-spec)" />
        {!compact && (
          <>
            <text y={9.6} textAnchor="middle" fontSize="3.6" fontWeight="700" fill="#06171F"
              style={{ paintOrder:'stroke', stroke:'#FBF6E9', strokeWidth:0.8 }}>visitor</text>
            <text y={13} textAnchor="middle" fontSize="2.4" fontWeight="500" fill="#6E6657"
              style={{ paintOrder:'stroke', stroke:'#FBF6E9', strokeWidth:0.5, letterSpacing:'0.06em' }}>{visitorTag}</text>
          </>
        )}
      </g>
    </svg>
  );
}

Object.assign(window, { VisitorPulse });