// ─────────────────────────────────────────────────────────────────────────────
// Hero visual variants: "tree" (default), "constellation", "orbit"
// All variants share the Drasil-Nova cosmology: trunk/roots + three stars
// representing the three SaaS products.
// ─────────────────────────────────────────────────────────────────────────────
const PRODUCTS = [
{ key: "agri", label: "Drasil Agri", hue: 155, note: "I", x: 120, y: 90 },
{ key: "karttly", label: "Karttly", hue: 340, note: "II", x: 380, y: 60 },
{ key: "trade", label: "Trade Worx", hue: 200, note: "III", x: 100, y: 250 },
{ key: "cvready", label: "CV Ready", hue: 75, note: "IV", x: 260, y: 180 },
];
function Starfield({ count = 60, seed = 1 }) {
const stars = React.useMemo(() => {
const rng = (i) => ((Math.sin(i * 9301 + seed * 49297) * 233280) % 1 + 1) % 1;
return Array.from({ length: count }, (_, i) => ({
x: rng(i) * 100,
y: rng(i + 100) * 100,
r: 0.4 + rng(i + 200) * 1.2,
o: 0.3 + rng(i + 300) * 0.7,
d: 2 + rng(i + 400) * 4,
dl: rng(i + 500) * 3,
}));
}, [count, seed]);
return (
<>
{stars.map((s, i) => (
))}
);
}
// ───── Variant 1: the Tree ─────────────────────────────────────────────────
function TreeVariant() {
return (
);
}
// ───── Variant 2: Constellation ────────────────────────────────────────────
function ConstellationVariant() {
return (
);
}
function ProductStar({ x, y, label, note, hue, size = 1, faint = false }) {
const r = 22 * size;
const color = `oklch(${faint ? 0.5 : 0.82} ${faint ? 0.04 : 0.14} ${hue})`;
return (
{note} · {label}
);
}
// ───── Variant 3: Orbit ────────────────────────────────────────────────────
function OrbitVariant() {
return (
);
}
function HeroVisual({ variant = "tree" }) {
const Comp = variant === "constellation" ? ConstellationVariant
: variant === "orbit" ? OrbitVariant
: TreeVariant;
return (
);
}
Object.assign(window, { HeroVisual, Starfield });