/* global React */
// ============================================
// QUIROMANTE — Shared visual components
// Starfield, animated hand, icons, sacred geometry
// ============================================
const { useEffect, useMemo, useRef, useState } = React;
// --- Starfield background ----------------------------------
function Starfield({ count = 60 }) {
const stars = useMemo(() => {
const arr = [];
for (let i = 0; i < count; i++) {
arr.push({
id: i,
top: Math.random() * 100,
left: Math.random() * 100,
size: Math.random() > 0.85 ? "lg" : "",
gold: Math.random() > 0.92,
dur: 3 + Math.random() * 4,
delay: Math.random() * 4,
});
}
return arr;
}, [count]);
return (
{stars.map((s) => (
))}
);
}
// --- Wordmark ----------------------------------------------
function Wordmark() {
return (
Quiromante
);
}
// --- Icons -------------------------------------------------
const Icon = {
Camera: (p) => (
),
Lock: (p) => (
),
ShieldCheck: (p) => (
),
Sparkle: (p) => (
),
Stars: (p) => (
),
ArrowLeft: (p) => (
),
ArrowRight: (p) => (
),
Share: (p) => (
),
WhatsApp: (p) => (
),
Lifeline: (p) => (
),
Heartline: (p) => (
),
Fate: (p) => (
),
Gift: (p) => (
),
Moon: (p) => (
),
Pix: (p) => (
),
Card: (p) => (
),
};
// --- Hand SVG: open palm with glowing chiromantic lines ----
function MysticHand({ size = 280, animated = true }) {
return (
);
}
// --- Sacred geometry (loading screen centerpiece) ----------
function SacredGeometry({ size = 240 }) {
return (
);
}
// --- Decorative divider with star --------------------------
function Divider({ label = "✦" }) {
return (
{label}
);
}
// Expose to other Babel scripts
Object.assign(window, {
Starfield,
Wordmark,
Icon,
MysticHand,
SacredGeometry,
Divider,
});