// hero-engine.jsx — Feroot PageScanner animated hero.
// One config-driven, self-looping scene: a sensitive web form gets scanned,
// hidden trackers light up as a beam sweeps down, then the real PageScanner
// panel slides in and organizes them — ending in a controlled, compliance-aware
// final state. Reads window.VENDORS / window.VendorBadge.
//
// cfg = {
//   duration: seconds per loop (default 10)
//   reveal:   'beam' | 'peel'      // how pins enter
//   counter:  'chip' | 'center'    // detected-count placement on the page
// }

const { VENDORS, VendorBadge, FerootShield } = window;
const FEROOT_ORANGE = '#F9542B';

// ---- math helpers -------------------------------------------------------
const clamp01 = (x) => (x < 0 ? 0 : x > 1 ? 1 : x);
const smooth = (a, b, t) => {
  const x = clamp01((t - a) / (b - a));
  return x * x * (3 - 2 * x);
};
const lerp = (a, b, t) => a + (b - a) * t;

// pins: vertical position (fraction of body), which side they hang on
const PINS = [
  { id: 'quora',    py: 0.18, side: 'right' },
  { id: 'tiktok',   py: 0.31, side: 'left'  },
  { id: 'meta',     py: 0.45, side: 'right' },
  { id: 'hotjar',   py: 0.58, side: 'left'  },
  { id: 'linkedin', py: 0.62, side: 'right' },
  { id: 'ga',       py: 0.74, side: 'right' },
  { id: 'jquery',   py: 0.87, side: 'left'  },
];
const PANEL_ORDER = ['meta', 'tiktok', 'hotjar', 'ga', 'quora', 'linkedin', 'jquery'];

// ---- the form (rendered once) -------------------------------------------
function FormField({ label, value, sensitive, half, glass = false }) {
  return (
    <div style={{ flex: half ? '1 1 0' : '1 1 100%', minWidth: 0 }}>
      <div style={{ fontSize: 10.5, fontWeight: 700, color: glass ? 'rgba(109,60,206,.7)' : 'var(--fg-subtle)', textTransform: 'uppercase', letterSpacing: '.04em', marginBottom: 5, display: 'flex', alignItems: 'center', gap: 5 }}>
        {label}
        {sensitive && <i className="fa-solid fa-circle-info" style={{ fontSize: 9, color: 'var(--primary)' }}></i>}
      </div>
      <div style={{
        height: 30, borderRadius: 7,
        border: glass ? '1px solid rgba(255,255,255,0.7)' : '1px solid var(--border-default)',
        background: glass ? 'rgba(255,255,255,0.55)' : 'var(--white)',
        backdropFilter: glass ? 'blur(8px)' : 'none',
        display: 'flex', alignItems: 'center', padding: '0 10px',
        fontSize: 11.5, color: value ? 'var(--fg-default)' : 'var(--gray-400)', fontFamily: 'var(--font-body)',
      }}>{value}</div>
    </div>
  );
}

function SceneForm({ company = 'Meridian Health', brandInitial = 'M', subtitle = 'Member enrollment · Step 2 of 3', glass = false }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 11, height: '100%' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 1 }}>
        <div style={{ width: 26, height: 26, borderRadius: 7, background: 'var(--feroot-navy)', display: 'grid', placeItems: 'center', color: '#fff', fontWeight: 800, fontSize: 13, fontFamily: 'var(--font-display)' }}>{brandInitial}</div>
        <div>
          <div style={{ fontSize: 13, fontWeight: 800, color: 'var(--fg-strong)', fontFamily: 'var(--font-display)', lineHeight: 1 }}>{company}</div>
          <div style={{ fontSize: 10, color: 'var(--fg-subtle)' }}>{subtitle}</div>
        </div>
        <span style={{ marginLeft: 'auto', fontSize: 9.5, fontWeight: 700, color: 'var(--green-dark)', background: 'var(--green-lighter)', padding: '3px 8px', borderRadius: 999, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
          <i className="fa-solid fa-lock" style={{ fontSize: 8 }}></i>Secure
        </span>
      </div>

      <FormField label="Full legal name" value="Dana R. Whitfield" glass={glass} />
      <div style={{ display: 'flex', gap: 10 }}>
        <FormField label="Date of birth" value="04 / 18 / 1987" half sensitive glass={glass} />
        <FormField label="Sex assigned at birth" value="Female" half glass={glass} />
      </div>
      <FormField label="Social Security Number" value="•••  ••  4471" sensitive glass={glass} />
      <FormField label="Primary diagnosis / conditions" value="Type 2 diabetes, hypertension" sensitive glass={glass} />
      <div style={{ display: 'flex', gap: 10 }}>
        <FormField label="Member ID" value="MRD-90-22817" half />
        <FormField label="Plan tier" value="Gold PPO" half />
      </div>
      <FormField label="Card number" value="4242  4242  4242  4242" sensitive />
      <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ height: 32, flex: 1, borderRadius: 20, background: 'var(--primary)', color: '#fff', display: 'grid', placeItems: 'center', fontSize: 12, fontWeight: 700 }}>Submit application</div>
      </div>
    </div>
  );
}

// ---- the slide-in PageScanner panel (mirrors the real extension) --------
function ScannerPanel({ registerItem, registerCount, registerCompliance }) {
  const tabBase = { flex: '1 1 0', borderRadius: '10px 10px 0 0', padding: '7px 10px 9px', position: 'relative', minWidth: 0 };
  const pin = (active) => (
    <i className={(active ? 'fa-solid' : 'fa-regular') + ' fa-thumbtack'}
      style={{ position: 'absolute', top: 8, right: 9, fontSize: 9, color: active ? 'var(--primary)' : 'var(--gray-500)', transform: 'rotate(28deg)' }} />
  );

  return (
    <div style={{
      position: 'absolute', top: 0, right: 0, bottom: 0, width: 324,
      background: 'var(--primary-lightest)',
      borderLeft: '1px solid var(--primary-light)',
      boxShadow: 'var(--shadow-slide-over)',
      display: 'flex', flexDirection: 'column', overflow: 'hidden',
    }}>
      {/* feroot header */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '11px 14px 4px' }}>
        <FerootShield size={22} />
        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 18, color: 'var(--feroot-navy)', letterSpacing: '-.01em' }}>feroot</span>
        <span style={{ flex: 1 }} />
        <i className="fa-solid fa-gear" style={{ fontSize: 13, color: 'var(--gray-500)' }}></i>
        <i className="fa-solid fa-xmark" style={{ fontSize: 15, color: 'var(--gray-600)' }}></i>
      </div>

      {/* product label */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '4px 14px 9px' }}>
        <span style={{ width: 19, height: 19, borderRadius: 6, background: 'var(--primary)', display: 'grid', placeItems: 'center' }}>
          <i className="fa-solid fa-magnifying-glass" style={{ fontSize: 9, color: '#fff' }}></i>
        </span>
        <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--feroot-navy)' }}>Feroot PageScanner</span>
      </div>

      {/* compliance tabs */}
      <div style={{ display: 'flex', gap: 5, padding: '0 14px' }}>
        <div style={{ ...tabBase, background: 'var(--white)', boxShadow: '0 -1px 4px rgba(20,10,60,.05)' }}>
          <div style={{ fontSize: 11, fontWeight: 800, color: 'var(--primary-dark)' }}>Privacy &amp; Health</div>
          <div style={{ fontSize: 8.5, color: 'var(--fg-subtle)' }}>GDPR · CCPA · HIPAA</div>
          {pin(true)}
        </div>
        <div style={{ ...tabBase, background: 'var(--primary-lighter)' }}>
          <div style={{ fontSize: 11, fontWeight: 800, color: 'var(--fg-subtle)' }}>Payment Security</div>
          <div style={{ fontSize: 8.5, color: 'var(--fg-subtle)' }}>PCI-DSS 4.0.1</div>
          {pin(false)}
        </div>
      </div>

      {/* white content card */}
      <div style={{ flex: 1, margin: '0 14px 0', background: 'var(--white)', borderRadius: '0 0 10px 10px', padding: '12px 13px', display: 'flex', flexDirection: 'column', overflow: 'hidden', boxShadow: '0 6px 18px rgba(20,10,60,.06)' }}>
        {/* count + title */}
        <div ref={registerCount} style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 11 }}>
          <span data-panel-num style={{ width: 25, height: 25, borderRadius: 999, background: FEROOT_ORANGE, color: '#fff', display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 12.5, fontFamily: 'var(--font-display)', flex: 'none' }}>7</span>
          <div style={{ lineHeight: 1.15 }}>
            <div style={{ fontSize: 11.5, fontWeight: 800, color: 'var(--feroot-navy)' }}>Technologies, Products &amp; Vendors <i className="fa-solid fa-circle-info" style={{ fontSize: 8.5, color: 'var(--primary)' }}></i></div>
            <div style={{ fontSize: 9, color: 'var(--fg-subtle)' }}>trackers, pixels &amp; data brokers</div>
          </div>
        </div>

        {/* table header */}
        <div style={{ display: 'flex', alignItems: 'center', padding: '0 2px 6px', borderBottom: '1px solid var(--border-subtle)', fontSize: 9, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '.04em', color: 'var(--fg-subtle)' }}>
          <span style={{ flex: 1 }}>Name</span>
          <span>Category</span>
        </div>

        {/* rows */}
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {PANEL_ORDER.map((id) => {
            const v = VENDORS[id];
            const crit = v.sev === 'critical';
            return (
              <div key={id} ref={(el) => registerItem(id, el)} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 2px', borderBottom: '1px solid var(--border-subtle)' }}>
                <VendorBadge id={id} size={22} />
                <div style={{ flex: 1, minWidth: 0, display: 'flex', alignItems: 'center', gap: 6 }}>
                  {crit && <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--red)', flex: 'none' }} />}
                  <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--feroot-navy)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{v.name}</span>
                </div>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, background: 'var(--primary-lighter)', color: 'var(--primary)', border: '1px solid rgba(109,60,206,.14)', borderRadius: 999, padding: '3px 9px', fontSize: 9.5, fontWeight: 600, flex: 'none' }}>
                  <i className={'fa-solid ' + v.pill.icon} style={{ fontSize: 8 }}></i>{v.pill.label}
                </span>
              </div>
            );
          })}
        </div>
      </div>

      {/* footer */}
      <div ref={registerCompliance} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '9px 14px', opacity: 0 }}>
        <i className="fa-regular fa-comment-dots" style={{ fontSize: 12, color: 'var(--gray-500)' }}></i>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9.5, color: 'var(--gray-500)' }}>v2.62</span>
        <span style={{ flex: 1 }} />
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, height: 28, padding: '0 13px', borderRadius: 20, background: 'var(--primary-light)', color: 'var(--primary-dark)', fontSize: 10.5, fontWeight: 700 }}>
          <i className="fa-solid fa-up-right-from-square" style={{ fontSize: 9 }}></i>Export This Report
        </span>
      </div>
    </div>
  );
}

// ---- the full scene -----------------------------------------------------
function HeroScan(props) {
  const cfg = Object.assign({ duration: 10, reveal: 'beam', counter: 'chip' }, props.cfg || {});
  const accent = 'var(--primary)';

  const root = React.useRef(null);
  const els = React.useRef({ pins: {}, items: {} });
  const setRef = (k) => (el) => { els.current[k] = el; };
  const setPin = (id) => (el) => { els.current.pins[id] = el; };
  const setItem = (id, el) => { els.current.items[id] = el; };

  React.useEffect(() => {
    const reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    const dur = cfg.duration * 1000;

    const apply = (p) => {
      const e = els.current;
      const reset = 1 - smooth(0.93, 0.998, p);              // global fade-to-idle near loop end
      const arm = smooth(0.05, 0.13, p) * (1 - smooth(0.5, 0.6, p)) * reset;
      const scanStart = 0.14, scanEnd = 0.5;
      const scanRaw = clamp01((p - scanStart) / (scanEnd - scanStart));
      const scanLive = (p >= scanStart - 0.01 && p < scanEnd + 0.04) ? reset : 0;
      const panelP = smooth(0.46, 0.62, p) * reset;
      const compP = smooth(0.74, 0.86, p) * reset;

      // Feroot extension button pulse + "Scanning" label
      if (e.ferootRing) { e.ferootRing.style.opacity = arm; e.ferootRing.style.transform = `scale(${lerp(1, 2.3, smooth(0.05, 0.13, p))})`; }
      if (e.scanLabel) e.scanLabel.style.opacity = scanLive * (1 - smooth(0.44, 0.5, p));

      // beam
      if (e.beam) {
        e.beam.style.top = `${scanRaw * 100}%`;
        const edge = Math.min(smooth(scanStart, scanStart + 0.03, p), 1 - smooth(scanEnd - 0.03, scanEnd, p));
        e.beam.style.opacity = scanLive * edge;
      }
      // light scanned tint band (top-anchored, grows down)
      if (e.tint) {
        e.tint.style.height = `${scanRaw * 100}%`;
        e.tint.style.opacity = 0.5 * scanLive;
      }

      // pins
      let count = 0;
      PINS.forEach((pinDef) => {
        const node = e.pins[pinDef.id];
        if (!node) return;
        const cross = clamp01((scanRaw - pinDef.py) / 0.05);
        if (scanRaw >= pinDef.py) count++;
        node.style.opacity = cross * reset;
        if (cfg.reveal === 'peel') {
          node.style.transform = `translateY(${lerp(14, 0, cross)}px) scale(${lerp(0.6, 1, cross)}) rotate(${lerp(-6, 0, cross)}deg)`;
        } else {
          const pop = cross < 1 ? 1 + Math.sin(cross * Math.PI) * 0.18 : 1;
          node.style.transform = `scale(${lerp(0.4, pop, cross)})`;
        }
      });

      // floating counter (page)
      if (e.chip) {
        e.chip.style.opacity = smooth(0.12, 0.18, p) * reset;
        if (e.chipNum) e.chipNum.textContent = count;
      }
      if (e.center) {
        e.center.style.opacity = smooth(0.12, 0.18, p) * reset * (1 - smooth(0.5, 0.6, p));
        e.center.style.transform = `translate(-50%,-50%) scale(${lerp(0.9, 1, smooth(0.12, 0.3, p))})`;
        if (e.centerNum) e.centerNum.textContent = count;
      }

      // panel + contents
      if (e.panel) e.panel.style.transform = `translateX(${(1 - panelP) * 100}%)`;
      if (e.scrim) e.scrim.style.opacity = panelP * 0.14;
      if (e.panelNum) e.panelNum.textContent = count;
      PANEL_ORDER.forEach((id, i) => {
        const node = e.items[id];
        if (!node) return;
        const t = clamp01((panelP - 0.15 - i * 0.07) / 0.3);
        node.style.opacity = t;
        node.style.transform = `translateX(${lerp(16, 0, t)}px)`;
      });
      if (e.comp) { e.comp.style.opacity = compP; e.comp.style.transform = `translateY(${lerp(8, 0, compP)}px)`; }
    };

    if (reduced) { apply(0.82); return; }
    const t0 = performance.now();
    apply(0);
    const iv = setInterval(() => { apply(((performance.now() - t0) % dur) / dur); }, 1000 / 60);
    return () => clearInterval(iv);
  }, []);

  return (
    <div ref={root} style={{ position: 'absolute', inset: 0, background: 'transparent', overflow: 'hidden', fontFamily: 'var(--font-body)' }}>
      {/* browser window */}
      <div style={{ position: 'absolute', inset: 0, borderRadius: 14, background: 'var(--white)', boxShadow: 'none', display: 'flex', flexDirection: 'column', overflow: 'hidden', border: '2px solid rgba(20,10,60,.15)' }}>
        {/* chrome */}
        <div style={{ height: 38, flex: 'none', borderBottom: '1px solid var(--border-subtle)', display: 'flex', alignItems: 'center', gap: 8, padding: '0 12px', background: 'var(--gray-100)' }}>
          <span style={{ display: 'flex', gap: 6 }}>
            {['#ff5f57', '#febc2e', '#28c840'].map((c) => <span key={c} style={{ width: 10, height: 10, borderRadius: 999, background: c }} />)}
          </span>
          <div style={{ flex: 1, height: 24, margin: '0 6px', borderRadius: 999, background: 'var(--white)', border: '1px solid var(--border-default)', display: 'flex', alignItems: 'center', gap: 7, padding: '0 12px' }}>
            <i className="fa-solid fa-lock" style={{ fontSize: 9, color: 'var(--green-dark)' }}></i>
            <span style={{ fontSize: 11, color: 'var(--fg-muted)', fontFamily: 'var(--font-mono)' }}>{cfg.url || 'meridian-health.example/enroll'}</span>
          </div>
          {/* Feroot extension button */}
          <span style={{ position: 'relative', display: 'grid', placeItems: 'center', width: 26, height: 26 }}>
            <span ref={setRef('ferootRing')} style={{ position: 'absolute', inset: 0, borderRadius: 8, border: '2px solid var(--primary)', opacity: 0 }} />
            <FerootShield size={19} />
          </span>
        </div>

        {/* page body */}
        <div style={{ position: 'relative', flex: 1, overflow: 'hidden' }}>
          {/* glass: ambient blobs behind everything */}
          {cfg.glass && (
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(145deg, #f3eeff 0%, #ede6ff 40%, #e8f0ff 100%)', zIndex: 0 }}>
              <div style={{ position: 'absolute', width: 220, height: 220, borderRadius: '50%', background: 'radial-gradient(circle, rgba(109,60,206,.22) 0%, transparent 70%)', top: '-10%', right: '-5%', filter: 'blur(2px)' }} />
              <div style={{ position: 'absolute', width: 180, height: 180, borderRadius: '50%', background: 'radial-gradient(circle, rgba(48,166,217,.18) 0%, transparent 70%)', bottom: '5%', left: '-8%', filter: 'blur(2px)' }} />
              <div style={{ position: 'absolute', width: 120, height: 120, borderRadius: '50%', background: 'radial-gradient(circle, rgba(109,60,206,.12) 0%, transparent 70%)', bottom: '30%', right: '20%', filter: 'blur(1px)' }} />
            </div>
          )}
          <div style={{
            position: 'absolute', inset: 0,
            background: cfg.glass ? 'transparent' : 'var(--primary-lightest)',
            padding: '16px 18px',
            zIndex: 1,
            display: 'flex', flexDirection: 'column',
          }}>
            {cfg.glass ? (
              <div style={{
                flex: 1, borderRadius: 14,
                background: 'rgba(255,255,255,0.52)',
                backdropFilter: 'blur(18px)',
                WebkitBackdropFilter: 'blur(18px)',
                border: '1px solid rgba(255,255,255,0.8)',
                boxShadow: '0 8px 32px rgba(109,60,206,.10), inset 0 1px 0 rgba(255,255,255,.9)',
                padding: '14px 16px',
                overflow: 'hidden',
              }}>
                <SceneForm company={cfg.company} brandInitial={cfg.brandInitial} subtitle={cfg.subtitle} glass={true} />
              </div>
            ) : (
              <SceneForm company={cfg.company} brandInitial={cfg.brandInitial} subtitle={cfg.subtitle} />
            )}
          </div>

          {/* scanned tint band */}
          <div ref={setRef('tint')} style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 0, background: 'linear-gradient(180deg, rgba(109,60,206,.10), rgba(109,60,206,.02))', pointerEvents: 'none' }} />

          {/* scan beam */}
          <div ref={setRef('beam')} style={{ position: 'absolute', left: 0, right: 0, top: '0%', height: 2, opacity: 0, pointerEvents: 'none', zIndex: 6 }}>
            <div style={{ position: 'absolute', left: 0, right: 0, top: -34, height: 34, background: 'linear-gradient(180deg, transparent, rgba(109,60,206,.16))' }} />
            <div style={{ position: 'absolute', left: 0, right: 0, top: 0, height: 2, background: accent, boxShadow: '0 0 14px 2px rgba(109,60,206,.7)' }} />
          </div>

          {/* tracker pins */}
          {PINS.map((pinDef) => {
            const v = VENDORS[pinDef.id];
            const sevColor = v.sev === 'critical' ? 'var(--red)' : v.sev === 'warn' ? 'var(--yellow-dark)' : 'var(--secondary)';
            const left = pinDef.side === 'left';
            return (
              <div key={pinDef.id} ref={setPin(pinDef.id)} style={{
                position: 'absolute', top: `${pinDef.py * 100}%`,
                [left ? 'left' : 'right']: '6%',
                opacity: 0, zIndex: 7,
                display: 'flex', flexDirection: left ? 'row' : 'row-reverse', alignItems: 'center', gap: 7,
                transformOrigin: left ? 'left center' : 'right center',
              }}>
                <span style={{ position: 'relative', display: 'grid', placeItems: 'center' }}>
                  <span style={{ position: 'absolute', inset: -4, borderRadius: 11, border: `2px solid ${sevColor}`, opacity: 0.5 }} />
                  <VendorBadge id={pinDef.id} size={28} ring />
                </span>
                <span style={{
                  background: 'var(--white)', border: '1px solid var(--border-default)',
                  borderRadius: 8, padding: '4px 9px', boxShadow: '0 6px 16px rgba(20,10,60,.18)',
                  display: 'flex', flexDirection: 'column', lineHeight: 1.15, whiteSpace: 'nowrap',
                  textAlign: left ? 'left' : 'right',
                }}>
                  <span style={{ fontSize: 10.5, fontWeight: 800, color: 'var(--fg-strong)' }}>{v.name}</span>
                  <span style={{ fontSize: 9, color: sevColor, fontWeight: 700 }}>{v.reads}</span>
                </span>
              </div>
            );
          })}

          {/* center counter (variant) */}
          {cfg.counter === 'center' && (
            <div ref={setRef('center')} style={{ position: 'absolute', top: '42%', left: '50%', transform: 'translate(-50%,-50%)', opacity: 0, zIndex: 8, textAlign: 'center', pointerEvents: 'none' }}>
              <div ref={setRef('centerNum')} style={{ fontSize: 92, fontWeight: 800, fontFamily: 'var(--font-display)', color: 'var(--primary)', lineHeight: 0.9, letterSpacing: '-.03em', textShadow: '0 8px 30px rgba(109,60,206,.25)' }}>0</div>
              <div style={{ fontSize: 12, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '.12em', color: 'var(--primary-dark)' }}>trackers exposed</div>
            </div>
          )}

          {/* chip counter (variant) */}
          {cfg.counter !== 'center' && (
            <div ref={setRef('chip')} style={{ position: 'absolute', top: 12, left: 12, opacity: 0, zIndex: 8,
              background: 'var(--white)', border: '1px solid var(--border-default)',
              borderRadius: 10, padding: '7px 12px', boxShadow: '0 6px 16px rgba(20,10,60,.16)', display: 'flex', alignItems: 'center', gap: 9 }}>
              <span style={{ width: 7, height: 7, borderRadius: 999, background: 'var(--red)', boxShadow: '0 0 0 4px rgba(235,0,40,.16)' }} />
              <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
                <span style={{ fontSize: 9, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--fg-subtle)' }}>Trackers detected</span>
                <span ref={setRef('chipNum')} style={{ fontSize: 20, fontWeight: 800, fontFamily: 'var(--font-display)', color: 'var(--fg-strong)', marginTop: 2 }}>0</span>
              </span>
            </div>
          )}

          {/* scanning label */}
          <div ref={setRef('scanLabel')} style={{ position: 'absolute', top: 12, right: 12, opacity: 0, zIndex: 8,
            display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 10.5, fontWeight: 700,
            color: 'var(--primary-dark)', background: 'var(--primary-lightest)',
            border: '1px solid var(--primary-light)', borderRadius: 999, padding: '5px 11px' }}>
            <i className="fa-solid fa-magnifying-glass fa-fade" style={{ fontSize: 10 }}></i>Scanning page…
          </div>

          {/* panel scrim + panel */}
          <div ref={setRef('scrim')} style={{ position: 'absolute', inset: 0, background: '#000', opacity: 0, zIndex: 9, pointerEvents: 'none' }} />
          <div ref={setRef('panel')} style={{ position: 'absolute', inset: 0, zIndex: 10, transform: 'translateX(100%)' }}>
            <ScannerPanel
              registerItem={setItem}
              registerCount={(el) => { if (el) els.current.panelNum = el.querySelector('[data-panel-num]'); }}
              registerCompliance={setRef('comp')} />
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { HeroScan });