// Reusable UI: Logo, icons, buttons, section frames.
// Shared utility — gives every section a consistent editorial frame.
const { useState, useEffect, useMemo, useRef, useCallback } = React;
// ─── Logo ───────────────────────────────────────────────────────────────
// Original mark: two interlocking rounded-square frames — like a chain link,
// expressing "Commit" (bond) + "biz" (a transactional connection). NOT a copy
// of the existing logo; original geometric mark.
function CBLogo({ size = 28, mono = false }) {
const fg = mono ? "currentColor" : "var(--brand)";
return (
commitbiz
);
}
// ─── Icons (geometric line, 1.5px) ──────────────────────────────────────
const IconSet = {
formation: ,
licensing: ,
visa: ,
bank: ,
ledger: ,
tax: ,
shield: ,
advisory: ,
arrow: ,
arrowUpRight: ,
check: ,
phone: ,
whatsapp: ,
mail: ,
globe: ,
menu: ,
close: ,
pin: ,
arrowL: ,
};
const SERVICE_ICON = {
"company-formation": "formation",
"trade-licensing": "licensing",
"visa-pro": "visa",
"corporate-banking": "bank",
"accounting-audit": "ledger",
"vat-corporate-tax": "tax",
"compliance": "shield",
"advisory": "advisory",
};
// ─── Buttons ────────────────────────────────────────────────────────────
function CBButton({ kind = "primary", icon, children, onClick, href, as, className = "" }) {
const Tag = href ? "a" : "button";
const props = href ? { href } : { onClick, type: "button" };
return (
{children}
{icon && {IconSet[icon]}}
);
}
// ─── Section frame ──────────────────────────────────────────────────────
function Section({ id, tone = "paper", children, label, screen }) {
return (
);
}
function SectionHead({ eyebrow, title, sub, align = "left", actions, num }) {
return (
);
}
// expose
Object.assign(window, { CBLogo, IconSet, SERVICE_ICON, CBButton, Section, SectionHead });