/**
* vault-rank-avatars.jsx
*
* Static-SVG ports of the rank icons from `frontend/components/RankIcon.tsx`.
* The app version is heavily animated via react-native-reanimated; these are
* the equivalent designs at rest, suitable for the marketing site's vanilla
* React stack.
*
* Exposed as `window.GA` so `avatar.jsx`'s glyph delegate finds them.
*
* → Addicted (cracked phone + red dot)
* → Scroller (stacked cards + arrows)
* → Seeker (faceted octagonal compass)
* → Lucid (open eye + iris)
* → Clairvoyant (octahedron + orbit rings)
*/
function GA({ glyph }) {
switch (glyph) {
case 'phone': return ;
case 'feed': return ;
case 'compass': return ;
case 'eye': return ;
case 'crystal': return ;
default: return ;
}
}
// ── Addicted ─────────────────────────────────────────────────────────────
function AddictedSVG() {
return (
);
}
// ── Scroller ─────────────────────────────────────────────────────────────
function ScrollerSVG() {
return (
);
}
// ── Seeker ───────────────────────────────────────────────────────────────
function SeekerSVG() {
// 8-vertex octagonal ring on radius 20, offset by -22.5° so flats top/right.
const facetPoints = Array.from({ length: 8 }, (_, i) => {
const a = (i * 45 - 22.5) * Math.PI / 180;
return `${24 + Math.cos(a) * 20},${24 + Math.sin(a) * 20}`;
}).join(' ');
const spokes = Array.from({ length: 8 }, (_, i) => {
const a = (i * 45 - 22.5) * Math.PI / 180;
const x = 24 + Math.cos(a) * 20;
const y = 24 + Math.sin(a) * 20;
return ;
});
return (
);
}
// ── Lucid ────────────────────────────────────────────────────────────────
function LucidSVG() {
return (
);
}
// ── Clairvoyant ──────────────────────────────────────────────────────────
function ClairvoyantSVG() {
return (
);
}
window.GA = GA;