// "Mission Control" — enhanced hero compass with live data streams, achievements, notifications
const CompassLive = ({ size = 480 }) => {
  const W = 480, cx = W/2, cy = W/2;
  return (
    <svg viewBox={`0 0 ${W} ${W}`} width="100%" height="auto" style={{maxWidth: size}} className="block" aria-hidden="true">
      <defs>
        <radialGradient id="cg-halo" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="rgb(var(--primary))" stopOpacity=".28"/>
          <stop offset="55%" stopColor="rgb(var(--primary))" stopOpacity=".04"/>
          <stop offset="100%" stopColor="rgb(var(--primary))" stopOpacity="0"/>
        </radialGradient>
        <linearGradient id="nl2" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="rgb(var(--primary))"/>
          <stop offset="100%" stopColor="rgb(var(--primary))" stopOpacity=".18"/>
        </linearGradient>
        <linearGradient id="sl2" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="rgb(var(--fg))" stopOpacity=".15"/>
          <stop offset="100%" stopColor="rgb(var(--fg))" stopOpacity=".5"/>
        </linearGradient>
        <linearGradient id="streamGrad" x1="0" x2="1">
          <stop offset="0" stopColor="rgb(var(--primary))" stopOpacity="0"/>
          <stop offset=".5" stopColor="rgb(var(--primary))" stopOpacity=".8"/>
          <stop offset="1" stopColor="rgb(var(--primary))" stopOpacity="0"/>
        </linearGradient>
        <filter id="soft"><feGaussianBlur stdDeviation=".6"/></filter>
      </defs>

      <circle cx={cx} cy={cy} r={W*0.46} fill="url(#cg-halo)"/>

      {/* Outermost source-label ring: 1С · Банк · ЕДО · Госреестры · Скоринг */}
      <g fontFamily="Geist, Inter, sans-serif" fontWeight="600" fontSize="9" fill="rgb(var(--muted-fg))" letterSpacing=".18em">
        {[
          {a:-90, l:"1С"}, {a:-18, l:"БАНК"}, {a:54, l:"ЕДО"},
          {a:126, l:"ГОСРЕЕСТРЫ"}, {a:198, l:"СКОРИНГ"}, {a:-90+360, l:"1С"},
        ].slice(0,5).map((t,i)=>{
          const r = W*0.45;
          const x = cx + Math.cos(t.a*Math.PI/180)*r;
          const y = cy + Math.sin(t.a*Math.PI/180)*r;
          return <text key={i} x={x} y={y} textAnchor="middle">{t.l}</text>;
        })}
      </g>

      {/* Orbits */}
      <g stroke="rgb(var(--border))" fill="none">
        <circle cx={cx} cy={cy} r={W*0.42} strokeDasharray="1 7"/>
        <circle cx={cx} cy={cy} r={W*0.33} strokeDasharray="2 6"/>
        <circle cx={cx} cy={cy} r={W*0.24}/>
        <circle cx={cx} cy={cy} r={W*0.165}/>
      </g>

      {/* Rotating bezel with ticks + a highlighted arc */}
      <g style={{transformOrigin:`${cx}px ${cy}px`, animation:"spinSlow 80s linear infinite"}}>
        <g stroke="rgb(var(--fg))" opacity=".3">
          {Array.from({length:72}).map((_,i)=>{
            const a = (i*360/72)*Math.PI/180;
            const r1 = W*0.4, r2 = i%6===0 ? W*0.37 : W*0.385;
            return <line key={i} x1={cx+r1*Math.cos(a)} y1={cy+r1*Math.sin(a)} x2={cx+r2*Math.cos(a)} y2={cy+r2*Math.sin(a)}/>;
          })}
        </g>
        <path d={describeArc(cx, cy, W*0.4, -30, 50)} fill="none" stroke="rgb(var(--primary))" strokeWidth="2" opacity=".85"/>
      </g>

      {/* Reverse-spinning inner ring */}
      <g style={{transformOrigin:`${cx}px ${cy}px`, animation:"spinSlow 50s linear infinite reverse"}} stroke="rgb(var(--fg))" opacity=".25">
        {Array.from({length:36}).map((_,i)=>{
          const a=(i*360/36)*Math.PI/180;
          const r1=W*0.3, r2=i%3===0?W*0.28:W*0.29;
          return <line key={i} x1={cx+r1*Math.cos(a)} y1={cy+r1*Math.sin(a)} x2={cx+r2*Math.cos(a)} y2={cy+r2*Math.sin(a)}/>;
        })}
      </g>

      {/* Metric halo — 4 gauges at N/E/S/W */}
      {[
        {a:-90, l:"СРОК",   v:"47",  delta:"−11"},
        {a:0,   l:"ПРОСР.", v:"8,2М", delta:"−18%"},
        {a:90,  l:"CASH",  v:"+4,8М",delta:"сег."},
        {a:180, l:"РИСК",  v:"12",  delta:"−3"},
      ].map((g,i)=>{
        const r = W*0.45;
        const x = cx + Math.cos(g.a*Math.PI/180)*r;
        const y = cy + Math.sin(g.a*Math.PI/180)*r;
        const up = g.a===-90 || g.a===180;
        const pw = 66, ph = 36;
        return (
          <g key={i} transform={`translate(${x - pw/2} ${y - ph/2})`}>
            <rect width={pw} height={ph} rx="6" fill="rgb(var(--card))" stroke="rgb(var(--border))" opacity=".96"/>
            <text x={pw/2} y="13" textAnchor="middle" fontFamily="Geist, Inter" fontSize="7.5" fontWeight="600" fill="rgb(var(--muted-fg))" letterSpacing=".14em">{g.l}</text>
            <text x={pw/2} y="25" textAnchor="middle" fontFamily="Geist, Inter" fontSize="13" fontWeight="600" fill="rgb(var(--fg))">{g.v}</text>
            <text x={pw/2} y="33" textAnchor="middle" fontFamily="Geist, Inter" fontSize="7" fill="rgb(16 185 129)">{g.delta}</text>
          </g>
        );
      })}

      {/* Data streams — curved paths with traveling dots */}
      {[
        {fromA:-135, label:"1С"},
        {fromA:-50,  label:"СБЕР"},
        {fromA:30,   label:"ДИАДОК"},
        {fromA:110,  label:"ЕФРСБ"},
        {fromA:-200, label:"ФОКУС"},
      ].map((s,i)=>{
        const ro = W*0.44, ri = W*0.18;
        const x1 = cx + Math.cos(s.fromA*Math.PI/180)*ro;
        const y1 = cy + Math.sin(s.fromA*Math.PI/180)*ro;
        const x2 = cx + Math.cos(s.fromA*Math.PI/180)*ri;
        const y2 = cy + Math.sin(s.fromA*Math.PI/180)*ri;
        const mx = (x1+x2)/2 + Math.cos((s.fromA+60)*Math.PI/180)*20;
        const my = (y1+y2)/2 + Math.sin((s.fromA+60)*Math.PI/180)*20;
        const path = `M${x1} ${y1} Q${mx} ${my} ${x2} ${y2}`;
        return (
          <g key={i}>
            <path d={path} stroke="url(#streamGrad)" strokeWidth="1.2" fill="none" opacity=".7"/>
            <circle r="2" fill="rgb(var(--primary))">
              <animateMotion dur={`${2.4 + i*0.6}s`} begin={`${i*0.5}s`} repeatCount="indefinite" path={path}/>
              <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;.1;.9;1" dur={`${2.4 + i*0.6}s`} begin={`${i*0.5}s`} repeatCount="indefinite"/>
            </circle>
          </g>
        );
      })}

      {/* Cardinal letters */}
      <g fontFamily="Geist, Inter, sans-serif" fontWeight="700" fill="rgb(var(--fg))" opacity=".5" textAnchor="middle" fontSize="12">
        <text x={cx} y={cy-W*0.22}>N</text>
        <text x={cx+W*0.22} y={cy+4}>E</text>
        <text x={cx} y={cy+W*0.235}>S</text>
        <text x={cx-W*0.22} y={cy+4}>W</text>
      </g>

      {/* Needle */}
      <g style={{transformOrigin:`${cx}px ${cy}px`, animation:"needleSwing 7s ease-in-out infinite"}}>
        <polygon points={`${cx},${cy-W*0.25} ${cx+14},${cy} ${cx},${cy+14} ${cx-14},${cy}`} fill="url(#nl2)"/>
        <polygon points={`${cx},${cy+W*0.25} ${cx+14},${cy} ${cx},${cy-14} ${cx-14},${cy}`} fill="url(#sl2)"/>
        <circle cx={cx} cy={cy} r="11" fill="rgb(var(--bg))" stroke="rgb(var(--primary))" strokeWidth="2"/>
        <circle cx={cx} cy={cy} r="4" fill="rgb(var(--primary))">
          <animate attributeName="r" values="3.5;4.8;3.5" dur="2s" repeatCount="indefinite"/>
        </circle>
      </g>

      {/* Data-ping rings (periodic) */}
      {[0,1,2].map(i=>(
        <circle key={i} cx={cx} cy={cy} r="12" fill="none" stroke="rgb(var(--primary))" opacity="0">
          <animate attributeName="r" from="12" to={W*0.4} dur="4s" begin={`${i*1.3}s`} repeatCount="indefinite"/>
          <animate attributeName="opacity" values=".5;0" dur="4s" begin={`${i*1.3}s`} repeatCount="indefinite"/>
        </circle>
      ))}
    </svg>
  );
};

// Arc helper
function polarToCartesian(cx, cy, r, a) {
  const rad = (a-90)*Math.PI/180;
  return { x: cx + r*Math.cos(rad), y: cy + r*Math.sin(rad) };
}
function describeArc(cx, cy, r, start, end) {
  const s = polarToCartesian(cx, cy, r, end);
  const e = polarToCartesian(cx, cy, r, start);
  const large = end - start <= 180 ? "0" : "1";
  return `M ${s.x} ${s.y} A ${r} ${r} 0 ${large} 0 ${e.x} ${e.y}`;
}

// Floating toast-style notifications that cycle around the compass
const HeroToasts = () => {
  const [idx, setIdx] = React.useState(0);
  const toasts = [
    {side:"tl", tone:"rose",    t:"21:14", head:"ЕФРСБ", body:"Новое дело: ООО «Техпром-МСК»", icon:"alert"},
    {side:"tr", tone:"emerald", t:"21:12", head:"Автосверка", body:"Разнесено 12 платежей · 4,8 М ₽", icon:"check"},
    {side:"bl", tone:"amber",   t:"21:09", head:"Претензия", body:"Отправлена в Диадок · «Стройтэк»", icon:"mail"},
    {side:"br", tone:"primary", t:"21:04", head:"Стоп-правило", body:"Заблокирована отгрузка на 340 к ₽", icon:"shield"},
    {side:"tl", tone:"emerald", t:"20:58", head:"Скоринг", body:"«Ромашка»: B → A", icon:"up"},
    {side:"tr", tone:"sky",     t:"20:51", head:"Срок оплаты", body:"47 дн, −11 за месяц", icon:"chart"},
  ];
  React.useEffect(()=>{
    const id = setInterval(()=>setIdx(i=>(i+1)%toasts.length), 2800);
    return ()=>clearInterval(id);
  },[]);
  const cur = toasts[idx];
  const tones = {
    rose:"border-rose-500/40 bg-rose-50 dark:bg-rose-950/30 text-rose-700 dark:text-rose-300",
    emerald:"border-emerald-500/40 bg-emerald-50 dark:bg-emerald-950/30 text-emerald-700 dark:text-emerald-300",
    amber:"border-amber-500/40 bg-amber-50 dark:bg-amber-950/30 text-amber-700 dark:text-amber-300",
    primary:"border-primary/40 bg-primary/5 text-primary",
    sky:"border-sky-500/40 bg-sky-50 dark:bg-sky-950/30 text-sky-700 dark:text-sky-300",
  };
  const positions = {
    tl:"top-0 left-0", tr:"top-4 right-0",
    bl:"bottom-8 left-0", br:"bottom-0 right-2",
  };
  const IconMap = {
    alert: <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M12 9v4M12 17h.01M12 3l10 18H2L12 3z" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>,
    check: <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M4 12l6 6 10-12" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>,
    mail:  <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" strokeWidth="2"/><path d="M3 7l9 6 9-6" stroke="currentColor" strokeWidth="2"/></svg>,
    shield:<svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M12 3l8 3v6c0 4.5-3.2 8-8 9-4.8-1-8-4.5-8-9V6l8-3z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"/></svg>,
    up:    <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M5 16l6-6 4 4 5-8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>,
    chart: <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M4 20V8M10 20V4M16 20v-8M22 20V14" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>,
  };
  return (
    <>
      {Object.keys(positions).map(pos => {
        const active = cur.side === pos;
        return (
          <div key={pos}
            className={`absolute ${positions[pos]} z-20 rounded-lg border ${tones[cur.tone]} px-3 py-2 text-[11px] font-medium shadow-lg backdrop-blur-md max-w-[220px] transition-all duration-500 ${active?"opacity-100 translate-y-0 scale-100":"opacity-0 pointer-events-none translate-y-2 scale-95"}`}
            style={{transitionTimingFunction:"cubic-bezier(.2,.7,.2,1.2)"}}>
            {active && (
              <>
                <div className="flex items-center gap-1.5">
                  {IconMap[cur.icon]}
                  <span className="text-[10px] uppercase tracking-[0.14em] opacity-80">{cur.head}</span>
                  <span className="ml-auto text-[10px] tabular opacity-60">{cur.t}</span>
                </div>
                <div className="mt-1 text-[12px] font-medium text-foreground leading-tight">{cur.body}</div>
              </>
            )}
          </div>
        );
      })}
    </>
  );
};

// Achievement badges that flash in periodically
const HeroAchievements = () => {
  const [shown, setShown] = React.useState(null);
  const ach = [
    {icon:"🎯", label:"Срок оплаты — лучший за 6 мес", tone:"emerald"},
    {icon:"🛡", label:"0 пропущенных ЕФРСБ", tone:"primary"},
    {icon:"⚡", label:"Автосверка 96%", tone:"sky"},
    {icon:"✓",  label:"Пилот завершён за 14 дн", tone:"amber"},
  ];
  React.useEffect(()=>{
    let i = 0;
    const cycle = ()=>{
      setShown(ach[i % ach.length]);
      i++;
      setTimeout(()=>setShown(null), 2600);
    };
    cycle();
    const id = setInterval(cycle, 4200);
    return ()=>clearInterval(id);
  },[]);
  if (!shown) return null;
  const tones = {
    emerald:"border-emerald-500/50 bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-300",
    primary:"border-primary/50 bg-primary/10 text-primary",
    sky:"border-sky-500/50 bg-sky-50 dark:bg-sky-950/40 text-sky-700 dark:text-sky-300",
    amber:"border-amber-500/50 bg-amber-50 dark:bg-amber-950/40 text-amber-700 dark:text-amber-300",
  };
  return (
    <div key={shown.label} className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-30 rounded-full border px-3 py-1.5 text-[11px] font-semibold shadow-xl backdrop-blur-md ${tones[shown.tone]}`}
      style={{animation:"popIn .5s cubic-bezier(.2,.7,.2,1.4)"}}>
      <span className="inline-flex items-center gap-1.5">
        <span className="text-[13px]">{shown.icon}</span>
        <span>{shown.label}</span>
      </span>
    </div>
  );
};

// LiveIcon — more animated icons to replace static ones
const LiveIcon = {
  Heartbeat: ({size=18}) => (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" aria-hidden="true">
      <path d="M3 12h4l2-4 3 8 2-6 2 2h5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"
        strokeDasharray="40" strokeDashoffset="40" style={{animation:"drawStroke 2s linear infinite"}}/>
    </svg>
  ),
  Radar: ({size=20}) => (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" aria-hidden="true">
      <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.4" opacity=".3"/>
      <circle cx="12" cy="12" r="5" stroke="currentColor" strokeWidth="1.4" opacity=".3"/>
      <circle cx="12" cy="12" r="1.5" fill="currentColor"/>
      <path d="M12 12 L 21 12 A 9 9 0 0 0 12 3 Z" fill="currentColor" opacity=".25" style={{transformOrigin:"12px 12px", animation:"spinSlow 3s linear infinite"}}/>
    </svg>
  ),
  Droplets: ({size=18}) => (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" aria-hidden="true">
      <path d="M12 3l5 7a5 5 0 1 1-10 0l5-7z" stroke="currentColor" strokeWidth="1.6" fill="currentColor" fillOpacity=".15"/>
      <circle cx="8" cy="18" r="2" fill="currentColor">
        <animate attributeName="cy" values="18;21;18" dur="1.6s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="1;0;1" dur="1.6s" repeatCount="indefinite"/>
      </circle>
      <circle cx="16" cy="19" r="1.5" fill="currentColor">
        <animate attributeName="cy" values="19;22;19" dur="2s" begin=".3s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="1;0;1" dur="2s" begin=".3s" repeatCount="indefinite"/>
      </circle>
    </svg>
  ),
  Inbox: ({size=20}) => (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" aria-hidden="true">
      <path d="M3 13l3-8h12l3 8v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-6z" stroke="currentColor" strokeWidth="1.6"/>
      <path d="M3 13h5l1 3h6l1-3h5" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/>
      <circle cx="18" cy="5" r="3" fill="rgb(244 63 94)">
        <animate attributeName="r" values="2.5;3.5;2.5" dur="1.4s" repeatCount="indefinite"/>
      </circle>
    </svg>
  ),
  Scale: ({size=20}) => (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" aria-hidden="true">
      <g style={{transformOrigin:"12px 6px", animation:"needleSwing 3s ease-in-out infinite"}}>
        <path d="M12 3v18" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
        <path d="M5 10h14" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
        <path d="M5 10l-2 4h4l-2-4z" stroke="currentColor" strokeWidth="1.4" fill="currentColor" fillOpacity=".15"/>
        <path d="M19 10l2 4h-4l2-4z" stroke="currentColor" strokeWidth="1.4" fill="currentColor" fillOpacity=".15"/>
      </g>
      <circle cx="12" cy="21" r="1.5" fill="currentColor"/>
    </svg>
  ),
  Growth: ({size=20}) => (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" aria-hidden="true">
      <path d="M3 20h18" stroke="currentColor" strokeWidth="1.4" opacity=".4"/>
      <path d="M3 17l6-6 4 4 8-9" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"
        strokeDasharray="40" strokeDashoffset="40" style={{animation:"drawStroke 1.6s ease forwards", animationIterationCount:"infinite"}}/>
      <circle r="2" fill="currentColor">
        <animateMotion dur="3s" repeatCount="indefinite" path="M3 17 L9 11 L13 15 L21 6"/>
      </circle>
    </svg>
  ),
  Network: ({size=20}) => (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" aria-hidden="true">
      <circle cx="12" cy="12" r="2" fill="currentColor"/>
      <circle cx="4" cy="5" r="1.8" stroke="currentColor" strokeWidth="1.4"/>
      <circle cx="20" cy="5" r="1.8" stroke="currentColor" strokeWidth="1.4"/>
      <circle cx="4" cy="19" r="1.8" stroke="currentColor" strokeWidth="1.4"/>
      <circle cx="20" cy="19" r="1.8" stroke="currentColor" strokeWidth="1.4"/>
      <line x1="5.5" y1="6.3" x2="10.5" y2="10.8" stroke="currentColor" strokeWidth="1.2" opacity=".5"/>
      <line x1="18.5" y1="6.3" x2="13.5" y2="10.8" stroke="currentColor" strokeWidth="1.2" opacity=".5"/>
      <line x1="5.5" y1="17.7" x2="10.5" y2="13.2" stroke="currentColor" strokeWidth="1.2" opacity=".5"/>
      <line x1="18.5" y1="17.7" x2="13.5" y2="13.2" stroke="currentColor" strokeWidth="1.2" opacity=".5"/>
      {[[5.5,6.3,10.5,10.8],[18.5,6.3,13.5,10.8],[5.5,17.7,10.5,13.2],[18.5,17.7,13.5,13.2]].map((p,i)=>(
        <circle key={i} r="1" fill="currentColor">
          <animateMotion dur="2.2s" begin={`${i*0.4}s`} repeatCount="indefinite"
            path={`M${p[0]} ${p[1]} L${p[2]} ${p[3]}`}/>
          <animate attributeName="opacity" values="0;1;0" dur="2.2s" begin={`${i*0.4}s`} repeatCount="indefinite"/>
        </circle>
      ))}
    </svg>
  ),
  Gavel: ({size=20}) => (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" aria-hidden="true">
      <g style={{transformOrigin:"14px 10px", animation:"gavelTap 1.8s ease-in-out infinite"}}>
        <rect x="6" y="3" width="12" height="4" rx="1" transform="rotate(45 12 5)" stroke="currentColor" strokeWidth="1.6" fill="currentColor" fillOpacity=".12"/>
        <rect x="9" y="6" width="6" height="2" rx="1" transform="rotate(45 12 7)" fill="currentColor"/>
      </g>
      <rect x="4" y="18" width="16" height="2" rx="1" fill="currentColor" opacity=".5"/>
      <rect x="8" y="15" width="8" height="3" rx="1" stroke="currentColor" strokeWidth="1.4" fill="none"/>
    </svg>
  ),
  Cash: ({size=20}) => (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" aria-hidden="true">
      <rect x="2" y="7" width="20" height="12" rx="2" stroke="currentColor" strokeWidth="1.6"/>
      <circle cx="12" cy="13" r="2.5" stroke="currentColor" strokeWidth="1.6"/>
      <path d="M12 11v4M10.5 12.5h3" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
      <circle cx="5" cy="13" r=".8" fill="currentColor"/>
      <circle cx="19" cy="13" r=".8" fill="currentColor"/>
      <path d="M2 7l4-2M22 7l-4-2" stroke="currentColor" strokeWidth="1.4" opacity=".5" strokeLinecap="round">
        <animate attributeName="opacity" values=".2;.7;.2" dur="2s" repeatCount="indefinite"/>
      </path>
    </svg>
  ),
  Fingerprint: ({size=20}) => (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
      <path d="M5 12a7 7 0 0 1 14 0v3M7.5 15.5c.5-3 1.5-4 4.5-4s4 1 4.5 4M9 18c0-2 1-3 3-3s3 1 3 3M12 4v3M5 9l2.5 1.5M19 9l-2.5 1.5">
        <animate attributeName="stroke-dashoffset" values="0;-80" dur="4s" repeatCount="indefinite"/>
      </path>
    </svg>
  ),
  BellRing: ({size=18}) => (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" aria-hidden="true">
      <g style={{transformOrigin:"12px 6px", animation:"bellRing 1.6s ease-in-out infinite"}}>
        <path d="M6 16V10a6 6 0 0 1 12 0v6l2 3H4l2-3z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/>
        <path d="M10 21a2 2 0 0 0 4 0" stroke="currentColor" strokeWidth="1.6"/>
      </g>
    </svg>
  ),
};

Object.assign(window, { CompassLive, HeroToasts, HeroAchievements, LiveIcon });