/* global React */
// ===== Books In The Loop — shared SVG graphics & icons =====
const { useEffect, useRef, useState } = React;
// --- Logo mark: Books in the Loop "comet" mark — a tapered fading loop + planet dot.
// (Our chosen brand mark, lifted from the full logo. Single gold accent color.) ---
function LogoMark({ size = 34, color, dot, stroke }) {
const c = color || dot || "#d3a253";
// sweep: tail at upper-left (~10–11 o'clock) clockwise over the top to the
// head dot at lower-right (~4–5 o'clock).
const A0 = (205 * Math.PI) / 180; // tail
const A1 = (410 * Math.PI) / 180; // head (= 50°, one wrap past)
const CX = 100, CY = 100, R = 70, N = 110;
const dots = [];
for (let i = 0; i <= N; i++) {
const p = i / N; // 0 tail → 1 head
const a = A0 + (A1 - A0) * p;
const x = CX + R * Math.cos(a);
const y = CY + R * Math.sin(a);
const r = 0.45 + 3.1 * Math.pow(p, 1.7);
const o = 0.04 + 0.96 * Math.pow(p, 1.35);
dots.push();
}
const hx = CX + R * Math.cos(A1);
const hy = CY + R * Math.sin(A1);
return (
);
}
// --- Big animated orbit graphic for hero / process ---
function OrbitGraphic({ size = 460, variant = "default", spin = true }) {
const c = size / 2;
return (
);
}
// --- Compact orbit ring used behind centered hero text ---
function RingBehind({ size = 720, spin = true }) {
const c = size / 2;
return (
);
}
// --- Process orbit: 4 nodes around a ring, active node highlighted ---
function ProcessOrbit({ size = 420, active = 0, spin = true, onPick }) {
const c = size / 2;
const r = c - 46;
const nodes = [-90, 0, 90, 180]; // top, right, bottom, left
return (
);
}
// --- Line icon set ---
const Icon = ({ name, size = 22, stroke = "currentColor", sw = 1.6 }) => {
const p = { width: size, height: size, viewBox: "0 0 24 24", fill: "none",
stroke, strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round" };
const paths = {
ledger: <>,
reconcile: <>,
invoice: <>,
bill: <>,
payroll: <>,
report: <>,
cleanup: <>,
setup: <>,
tax1099: <>,
salestax: <>,
cashflow: <>,
handoff: <>,
mail: <>,
phone: <>,
pin: <>,
clock: <>,
check: ,
arrow: ,
shield: <>,
calendar: <>,
chat: <>,
};
return ;
};
Object.assign(window, { LogoMark, OrbitGraphic, RingBehind, ProcessOrbit, Icon });