// VisitorPulse — Wiha edition. Same logic as the Cookware Co. template,
// retuned for Wiha's catalog and 3 personas (electrician / mechanic / maker).
//
// Three layers:
//   1. Collapsed rail (charcoal pill, right edge) — mini vector viz + definition %
//   2. Expanded panel (full-screen overlay) — User Context + Adaptive Profile + 2D Vector Space
//
// Progressive definition (blurry → sharp) across welcome → plp → search → pdp → merch.
// Hearts pull the visitor dot toward the matching cluster + boost cluster definition.

// ---------- Cluster taxonomy (Wiha) ----------
function _wihaClusterProducts(filterFn, limit) {
  return (window.PRODUCTS || []).filter(filterFn).slice(0, limit || 4).map(p => p.id);
}

const CLUSTERS = [
  {
    id: 'insulated',
    label: 'Insulated · VDE 1000V',
    short: 'Insulated · VDE',
    color: '#1C71B6',           // Wiha blue
    angle: -30,                  // upper-right
    products: _wihaClusterProducts(p => p.cats.includes('insulated')),
  },
  {
    id: 'torque-fleet',
    label: 'Torque · Sockets · Ratchets',
    short: 'Torque · Fleet',
    color: '#D52027',           // Wiha red
    angle: 50,                   // lower-right
    products: _wihaClusterProducts(p =>
      p.cats.includes('torque') || p.cats.includes('socket') || p.cats.includes('ratchet')
    ),
  },
  {
    id: 'precision-edc',
    label: 'EDC · Precision · Knife',
    short: 'EDC · Precision',
    color: '#A7A0EB',           // lavender
    angle: -150,                 // upper-left
    products: _wihaClusterProducts(p =>
      p.cats.includes('edc') || p.cats.includes('precision') || p.cats.includes('knife')
    ),
  },
  {
    id: 'bits-go',
    label: 'Bits · GoBox · Color-coded',
    short: 'Bits · GoBox',
    color: '#D89251',           // sunset
    angle: -90,                  // top
    products: _wihaClusterProducts(p =>
      p.cats.includes('go-system') || p.cats.includes('color-coded') || p.cats.includes('bit')
    ),
  },
  {
    id: 'kits-storage',
    label: 'Tray Sets · Workstations · Storage',
    short: 'Kits · Storage',
    color: '#7AAB7C',           // green
    angle: 130,                  // lower-left
    products: _wihaClusterProducts(p =>
      p.cats.includes('workstation') || p.cats.includes('t-handle') ||
      p.cats.includes('l-key') || p.cats.includes('storage')
    ),
  },
];

const REST_R = 42;
const NEAR_R = 15;

// Per-persona affinity to each cluster (0–1).
const PERSONA_AFFINITY = {
  electrician: { insulated: 1.00, 'kits-storage': 0.55, 'bits-go': 0.40, 'torque-fleet': 0.20, 'precision-edc': 0.08 },
  mechanic:    { 'torque-fleet': 1.00, 'bits-go': 0.75, 'kits-storage': 0.55, insulated: 0.20, 'precision-edc': 0.15 },
  maker:       { 'precision-edc': 1.00, 'bits-go': 0.70, 'kits-storage': 0.25, 'torque-fleet': 0.20, insulated: 0.08 },
};

// Map any product id → cluster id (for heart-driven drift)
const PRODUCT_TO_CLUSTER = (() => {
  const map = {};
  for (const c of CLUSTERS) for (const pid of c.products) map[pid] = c.id;
  return map;
})();

// ---------- Per-persona narrative (scripted but reacts to hearts) ----------
const PERSONA_NARRATIVE = {
  electrician: {
    primaryCluster: 'insulated',
    bars: ['Insulated · VDE', 'SlimLine system', 'Workstation kits', 'Multi-driver', 'Precision blades', 'Heavy duty'],
    barKey: ['insulated', 'slimline', 'workstation', 'multi-driver', 'precision', 'heavy-duty'],
    perStep: {
      welcome: { bars: [0.40, 0.32, 0.28, 0.22, 0.18, 0.20], events: [
        { kind: 'PAGE VIEW', label: 'New Tools PLP', val: '24 items' },
      ]},
      plp:     { bars: [0.62, 0.48, 0.42, 0.36, 0.28, 0.30], events: [
        { kind: 'DWELL', label: 'Insulated Torque Wrench', val: '14s' },
        { kind: 'HOVER', label: 'SlimLine Blade Set', val: 'hover 2×' },
      ]},
      search:  { bars: [0.76, 0.62, 0.52, 0.44, 0.32, 0.32], events: [
        { kind: 'SEARCH', label: '"insualted drivr" (typo)', val: 'mal-rank' },
      ]},
      pdp:     { bars: [0.86, 0.74, 0.62, 0.52, 0.36, 0.38], events: [
        { kind: 'DWELL', label: 'VDE Torque Wrench PDP', val: '24s' },
        { kind: 'ADD INTENT', label: '10-50 Nm 3/8" drive', val: 'cart 1×' },
      ]},
      merch:   { bars: [0.94, 0.82, 0.72, 0.58, 0.40, 0.42], events: [
        { kind: 'BUNDLE', label: '+ SoftFinish Cushion Set', val: 'open' },
      ]},
    },
  },
  mechanic: {
    primaryCluster: 'torque-fleet',
    bars: ['Torque control', 'Sockets · Impact', 'Color-coded', 'Ratchets', 'GoBox bit sets', 'Heavy duty'],
    barKey: ['torque', 'socket', 'color-coded', 'ratchet', 'go-system', 'heavy-duty'],
    perStep: {
      welcome: { bars: [0.38, 0.42, 0.36, 0.30, 0.28, 0.32], events: [
        { kind: 'PAGE VIEW', label: 'New Tools PLP', val: '24 items' },
      ]},
      plp:     { bars: [0.60, 0.62, 0.52, 0.46, 0.40, 0.48], events: [
        { kind: 'DWELL', label: '3pc Color Coded Nut Setter', val: '10s' },
        { kind: 'HOVER', label: '8pc 3/8" Impact Socket SAE', val: 'hover 3×' },
      ]},
      search:  { bars: [0.72, 0.74, 0.62, 0.58, 0.50, 0.54], events: [
        { kind: 'SEARCH', label: '"something for tightening engine bolts"', val: 'mal-rank' },
      ]},
      pdp:     { bars: [0.82, 0.84, 0.70, 0.66, 0.56, 0.58], events: [
        { kind: 'DWELL', label: 'Insulated Torque Wrench PDP', val: '16s' },
        { kind: 'ADD INTENT', label: '3/8" drive · metric', val: 'cart 2×' },
      ]},
      merch:   { bars: [0.92, 0.90, 0.78, 0.72, 0.62, 0.62], events: [
        { kind: 'BUNDLE', label: '+ 24pc GoStack TerminatorBlue', val: 'open' },
      ]},
    },
  },
  maker: {
    primaryCluster: 'precision-edc',
    bars: ['EDC · pocket', 'Precision (PicoFinish)', 'Knife maintenance', 'GoBox bits', 'Multi-bit drivers', 'Under $50'],
    barKey: ['edc', 'precision', 'knife', 'go-system', 'multi-driver', 'under-30'],
    perStep: {
      welcome: { bars: [0.42, 0.36, 0.40, 0.30, 0.26, 0.50], events: [
        { kind: 'PAGE VIEW', label: 'New Tools PLP', val: '24 items' },
      ]},
      plp:     { bars: [0.66, 0.56, 0.62, 0.46, 0.36, 0.58], events: [
        { kind: 'DWELL', label: '7pc EDC PokitPak', val: '12s' },
        { kind: 'HOVER', label: '32pc GoBox Torx Bit', val: 'hover 2×' },
      ]},
      search:  { bars: [0.78, 0.66, 0.72, 0.58, 0.42, 0.64], events: [
        { kind: 'SEARCH', label: '"color coded sockets"', val: 'mal-rank' },
      ]},
      pdp:     { bars: [0.86, 0.76, 0.80, 0.68, 0.50, 0.68], events: [
        { kind: 'DWELL', label: 'EDC PokitPak PDP', val: '20s' },
        { kind: 'ADD INTENT', label: 'Knife maintenance kit', val: 'cart 1×' },
      ]},
      merch:   { bars: [0.92, 0.84, 0.86, 0.74, 0.56, 0.72], events: [
        { kind: 'BUNDLE', label: '+ 61pc GoBox TerminatorBlue', val: 'open' },
      ]},
    },
  },
};

const PERSONA_CONTEXT = {
  electrician: {
    visitorId: 'usr_7301',
    returning: '1st visit · no account',
    device: 'Desktop · Mac · 1680w',
    referrer: 'google.com · "vde insulated drivers"',
    location: 'Houston, TX',
    time: 'Tue 9:42a · morning',
  },
  mechanic: {
    visitorId: 'usr_2845',
    returning: '1st visit · no account',
    device: 'iOS 17 · 390w · mobile',
    referrer: 'facebook.com · paid ad',
    location: 'Phoenix, AZ',
    time: 'Wed 4:18p · afternoon',
  },
  maker: {
    visitorId: 'usr_9162',
    returning: '1st visit · no account',
    device: 'Android · 412w · mobile',
    referrer: 'reddit.com · r/EDC organic',
    location: 'Portland, OR',
    time: 'Sat 8:54p · evening',
  },
};

// ---------- Step order (matches our App's step IDs) ----------
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 }) {
  // Pre-warm image cache
  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.electrician;
  const context = PERSONA_CONTEXT[persona.id] || PERSONA_CONTEXT.electrician;
  const stepData = narrative.perStep[effectiveStepId] || narrative.perStep.welcome;
  const affinityMap = PERSONA_AFFINITY[persona.id] || PERSONA_AFFINITY.electrician;

  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 (
    <>
      {/* Hidden image preloaders */}
      <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 />
          </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}
                  />
                </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>
      )}
    </>
  );
}

// ---------- SVG renderer ----------
function VectorSpaceSVG({ clusters, visitorPos, definition, compact = false, hearted = [], visitorTag = 'usr_7301', 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={`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 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 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 ? '#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 });