// VisitorPulse — 90 Degree by Reflex edition.
// Same logic as the template; retuned for an apparel catalog and 3 personas.

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

const CLUSTERS = [
  {
    id: 'studio',
    label: 'Studio · Pilates · Yoga',
    short: 'Studio · Pilates',
    color: '#A7A0EB',
    angle: -150,
    products: _ndrClusterProducts(p =>
      p.gender === 'women' && (p.cats.includes('legging') || p.cats.includes('bra') || p.cats.includes('butter') || p.cats.includes('lux'))
    ),
  },
  {
    id: 'run-train',
    label: 'Run · Train',
    short: 'Run · Train',
    color: '#B23B2E',
    angle: 50,
    products: _ndrClusterProducts(p =>
      p.gender === 'women' && (p.cats.includes('run') || p.cats.includes('lightstreme') || (p.cats.includes('short') && !p.cats.includes('set')))
    ),
  },
  {
    id: 'sets',
    label: 'Matching sets',
    short: 'Sets · Matchy',
    color: '#D89251',
    angle: -90,
    products: _ndrClusterProducts(p =>
      p.cats.includes('set') && p.gender === 'women'
    ),
  },
  {
    id: 'lounge-travel',
    label: 'Lounge · Travel',
    short: 'Lounge · Travel',
    color: '#2D5843',
    angle: 130,
    products: _ndrClusterProducts(p =>
      p.cats.includes('cozy') || p.cats.includes('jogger') || p.cats.includes('hoodie') || p.cats.includes('travel')
    ),
  },
  {
    id: 'mens',
    label: "Men's Performance",
    short: "Men's Perf",
    color: '#1C1C1C',
    angle: -30,
    products: _ndrClusterProducts(p =>
      p.gender === 'men' && (p.cats.includes('performance') || p.cats.includes('tee') || p.cats.includes('jogger') || p.cats.includes('short'))
    ),
  },
];

const REST_R = 42;
const NEAR_R = 15;

const PERSONA_AFFINITY = {
  pilates:      { studio: 1.00, sets: 0.55, 'lounge-travel': 0.30, 'run-train': 0.20, mens: 0.05 },
  runner:       { 'run-train': 1.00, sets: 0.40, studio: 0.35, 'lounge-travel': 0.20, mens: 0.05 },
  'mens-active':{ mens: 1.00, 'lounge-travel': 0.55, 'run-train': 0.45, sets: 0.15, studio: 0.05 },
};

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 = {
  pilates: {
    primaryCluster: 'studio',
    bars: ['Butter / Lux fabric', 'Leggings / tights', 'Sports bras', 'Matching sets', 'Seamless', 'Under $50'],
    barKey: ['butter', 'legging', 'bra', 'set', 'seamless', 'under-25'],
    perStep: {
      welcome: { bars: [0.40, 0.36, 0.30, 0.26, 0.20, 0.34], events: [
        { kind: 'PAGE VIEW', label: 'Women New-In PLP', val: '67 items' },
      ]},
      plp:     { bars: [0.64, 0.56, 0.46, 0.40, 0.32, 0.42], events: [
        { kind: 'DWELL', label: 'Butter Tech Veloria Set', val: '12s' },
        { kind: 'HOVER', label: 'Lux Florence Skort 2PK', val: 'hover 2×' },
      ]},
      search:  { bars: [0.78, 0.66, 0.56, 0.50, 0.40, 0.46], events: [
        { kind: 'SEARCH', label: '"butery soft leggins" (typo)', val: 'mal-rank' },
      ]},
      pdp:     { bars: [0.88, 0.78, 0.66, 0.58, 0.46, 0.52], events: [
        { kind: 'DWELL', label: 'Buttery Soft Legging PDP', val: '22s' },
        { kind: 'ADD INTENT', label: 'Hi-rise · black · M', val: 'cart 1×' },
      ]},
      merch:   { bars: [0.94, 0.86, 0.74, 0.64, 0.52, 0.56], events: [
        { kind: 'BUNDLE', label: '+ Seamless Maelis Bra', val: 'open' },
      ]},
    },
  },
  runner: {
    primaryCluster: 'run-train',
    bars: ['Lightstreme / perf', 'Shorts', 'Racerback tanks', 'Hi-rise waistband', 'Seamless', 'Run / train tag'],
    barKey: ['lightstreme', 'short', 'tank', 'waistband', 'seamless', 'run'],
    perStep: {
      welcome: { bars: [0.36, 0.40, 0.34, 0.28, 0.24, 0.34], events: [
        { kind: 'PAGE VIEW', label: 'Women New-In PLP', val: '67 items' },
      ]},
      plp:     { bars: [0.60, 0.66, 0.54, 0.46, 0.40, 0.52], events: [
        { kind: 'DWELL', label: 'Lux Veda Tank & Running Short Set', val: '10s' },
        { kind: 'HOVER', label: '3 PK Ribbed Racerback Tank', val: 'hover 3×' },
      ]},
      search:  { bars: [0.72, 0.76, 0.64, 0.58, 0.50, 0.62], events: [
        { kind: 'SEARCH', label: '"what to wear running outside"', val: 'mal-rank' },
      ]},
      pdp:     { bars: [0.82, 0.86, 0.72, 0.66, 0.58, 0.70], events: [
        { kind: 'DWELL', label: '2 in 1 Running Short PDP', val: '18s' },
        { kind: 'ADD INTENT', label: 'Hi-rise · sage · S', val: 'cart 2×' },
      ]},
      merch:   { bars: [0.92, 0.92, 0.80, 0.74, 0.64, 0.76], events: [
        { kind: 'BUNDLE', label: '+ Seamless Bridgett Tee 2PK', val: 'open' },
      ]},
    },
  },
  'mens-active': {
    primaryCluster: 'mens',
    bars: ["Men's gender", 'Performance fabric', 'Tees', 'Joggers', 'Shorts', 'Outdoor / travel'],
    barKey: ['men', 'performance', 'tee', 'jogger', 'short', 'travel'],
    perStep: {
      welcome: { bars: [0.46, 0.34, 0.32, 0.28, 0.30, 0.24], events: [
        { kind: 'PAGE VIEW', label: 'Men New-In PLP', val: '66 items' },
      ]},
      plp:     { bars: [0.68, 0.54, 0.50, 0.46, 0.48, 0.38], events: [
        { kind: 'DWELL', label: "Men's Pique Track Short Sleeve Tee", val: '11s' },
        { kind: 'HOVER', label: "Mens Warp 8.5\" Short", val: 'hover 2×' },
      ]},
      search:  { bars: [0.78, 0.66, 0.62, 0.56, 0.60, 0.50], events: [
        { kind: 'SEARCH', label: '"golf joggers"', val: 'mal-rank' },
      ]},
      pdp:     { bars: [0.86, 0.76, 0.72, 0.66, 0.70, 0.58], events: [
        { kind: 'DWELL', label: 'Tricot Elite Jogger PDP', val: '20s' },
        { kind: 'ADD INTENT', label: 'Black · L', val: 'cart 1×' },
      ]},
      merch:   { bars: [0.92, 0.86, 0.80, 0.74, 0.78, 0.66], events: [
        { kind: 'BUNDLE', label: "+ Men's Cationic Hooded Shirt", val: 'open' },
      ]},
    },
  },
};

const PERSONA_CONTEXT = {
  pilates: {
    visitorId: 'usr_w308',
    returning: '1st visit · no account',
    device: 'iOS 17 · 390w · mobile',
    referrer: 'pinterest.com · "pilates outfit"',
    location: 'Brooklyn, NY',
    time: 'Tue 7:48a · morning',
  },
  runner: {
    visitorId: 'usr_w512',
    returning: '1st visit · no account',
    device: 'Android · 412w · mobile',
    referrer: 'instagram.com · Strava ad',
    location: 'Austin, TX',
    time: 'Sat 6:14a · early morning',
  },
  'mens-active': {
    visitorId: 'usr_m847',
    returning: '1st visit · no account',
    device: 'Desktop · Mac · 1680w',
    referrer: 'google.com · "golf joggers"',
    location: 'Denver, CO',
    time: 'Thu 8:22p · evening',
  },
};

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;
    const seen = new Set();
    CLUSTERS.flatMap(c => c.products).forEach(pid => {
      if (seen.has(pid)) return;
      seen.add(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.pilates;
  const context = PERSONA_CONTEXT[persona.id] || PERSONA_CONTEXT.pilates;
  const stepData = narrative.perStep[effectiveStepId] || narrative.perStep.welcome;
  const affinityMap = PERSONA_AFFINITY[persona.id] || PERSONA_AFFINITY.pilates;

  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 heartBoost = Math.min(0.32, heartTotal * 0.10);
  const definition = Math.min(0.99, baseDef + heartBoost);

  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 step = STEP_ORDER[i];
      const s = narrative.perStep[step];
      if (s) for (const e of s.events) arr.push({ ...e, step });
    }
    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 }}
      >
        {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 personaGender={persona.gender} />
          </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">
                  <div className="vp-row"><span className="vp-row__k">RETURNING</span><span className="vp-row__v">{context.returning}</span></div>
                  <div className="vp-row"><span className="vp-row__k">DEVICE</span><span className="vp-row__v">{context.device}</span></div>
                  <div className="vp-row"><span className="vp-row__k">REFERRER</span><span className="vp-row__v">{context.referrer}</span></div>
                  <div className="vp-row"><span className="vp-row__k">LOCATION</span><span className="vp-row__v">{context.location}</span></div>
                  <div className="vp-row"><span className="vp-row__k">TIME</span><span className="vp-row__v">{context.time}</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}
                    personaGender={persona.gender}
                  />
                </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_w308', stepId = 'plp', personaGender = null }) {
  const products = window.PRODUCTS || [];
  const byId = (id) => products.find(p => p.id === id);
  // Never show cross-gender thumbnails to a visitor — keep the vector space
  // visualization scoped to products this shopper could actually see.
  const inGender = (pid) => {
    if (!personaGender) return true;
    const p = byId(pid);
    return p && p.gender === personaGender;
  };
  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={`line-${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 naturalOpacity = 0.40 + pull * 0.55;
        const imgOpacity = stepId === 'welcome' ? 0 : Math.max(stepFloor, naturalOpacity);
        const blurAmt = Math.min(stepBlurMax, (1 - pull) * 7);
        const labelOpacity = 0.35 + pull * 0.65;
        const inCluster = c.products.filter(inGender);
        const heartedHere = inCluster.filter(pid => hearted.includes(pid));
        const otherHere = inCluster.filter(pid => !hearted.includes(pid));
        const pickIds = [...heartedHere, ...otherHere].slice(0, compact ? 0 : 4);
        const productThumbs = pickIds.map(byId).filter(Boolean);
        const distVisitor = Math.sqrt(Math.pow(c.pos.x - visitorPos.x, 2) + Math.pow(c.pos.y - visitorPos.y, 2));
        const isTop = c.pos.y < 50;
        const labelY = isTop ? -haloR - 4.5 : haloR + 4.6;
        const dY = isTop ? -haloR - 1.6 : haloR + 7.8;
        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 cols = 2;
              const col = i % cols;
              const row = Math.floor(i / cols);
              const gap = compact ? 0 : haloR * 0.42;
              const tx = (col - 0.5) * gap;
              const ty = (row - 0.5) * gap;
              const tr = compact ? 2.4 : 3.4 + pull * 1.0;
              const isHearted = hearted.includes(p.id);
              const variance = 0.5 + ((i * 37) % 100) / 100 * 0.5;
              const localBlur = isHearted ? 0 : Math.min(6, blurAmt * variance);
              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 ? '#B23B2E' : 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="#B23B2E">♥</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 });