/* atoms.jsx — shared primitives for the BLAST ONCE site variations.
Adapted from BlastBoard atoms — red accent, light/cream surfaces. */
const { useState, useEffect, useRef } = React;
/* ─── Icons (Phosphor-style, single stroke, currentColor) ─────────── */
const boStrokeFor = (w) => (w === 'bold' ? 2.25 : w === 'regular' ? 1.75 : 1.5);
const BoIcon = ({ size = 16, weight, children, style }) => (
);
const BoIcons = {
ArrowRight: (p) => ,
ArrowDown: (p) => ,
ArrowUpRight: (p) => ,
Phone: (p) => ,
Mail: (p) => ,
MapPin: (p) => ,
Drill: (p) => ,
HardHat: (p) => ,
Shield: (p) => ,
Mountain: (p) => ,
Compass: (p) => ,
Clipboard: (p) => ,
Pen: (p) => ,
Quotes: (p) => ,
Check: (p) => ,
Spark: (p) => ,
Menu: (p) => ,
};
/* ─── Logo / Wordmark ────────────────────────────────────────────────
Real logo PNG when sized large; CSS wordmark for nav-scale use. */
function BoLogo({ height = 36, mode = 'image' }) {
if (mode === 'image') {
return (
);
}
// wordmark fallback — split treatment matching the logo nameplate
const px = height;
return (
BLAST
ONCE
);
}
/* ─── Eyebrow ────────────────────────────────────────────────────────
Capsule with red dot + uppercase tracked label. */
function BoEyebrow({ children, tone = 'light' }) {
const dark = tone === 'dark';
return (
{children}
);
}
/* ─── Bezel — the signature card frame ───────────────────────────── */
function BoBezel({ children, size = 'lg', style = {}, padding }) {
const outerR = size === 'lg' ? 32 : 24;
const pad = padding ?? (size === 'lg' ? 6 : 4);
return (
);
}
/* ─── CTAs ─────────────────────────────────────────────────────────── */
function BoPrimaryCTA({ href = '#contact', children, onClick, size = 'md' }) {
const [hover, setHover] = useState(false);
const big = size === 'lg';
return (
setHover(true)} onMouseLeave={() => setHover(false)}
style={{
display: 'inline-flex', alignItems: 'center', gap: 4,
background: 'var(--bo-red)', color: '#fff',
borderRadius: 9999,
padding: big ? '10px 10px 10px 28px' : '8px 8px 8px 24px',
font: `600 ${big ? 16 : 15}px var(--font-sans)`,
letterSpacing: '-0.01em',
boxShadow: hover ? 'var(--bo-shadow-red-strong)' : 'var(--bo-shadow-red)',
textDecoration: 'none',
transition: 'box-shadow 500ms var(--ease-magnetic)',
}}
>
{children}
);
}
function BoSecondaryCTA({ href = '#', children, dark = false }) {
const [hover, setHover] = useState(false);
return (
setHover(true)} onMouseLeave={() => setHover(false)}
style={{
display: 'inline-flex', alignItems: 'center', gap: 8,
border: `1px solid ${dark ? 'rgba(255,255,255,0.18)' : 'var(--bo-hair)'}`,
background: dark
? (hover ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.04)')
: (hover ? 'var(--ink-50)' : '#fff'),
color: dark ? '#fff' : 'var(--ink-900)',
borderRadius: 9999, padding: '10px 22px',
font: '500 15px var(--font-sans)', letterSpacing: '-0.01em',
whiteSpace: 'nowrap',
textDecoration: 'none',
transition: 'background 500ms var(--ease-magnetic)',
}}
>
{children}
);
}
/* ─── Hairline kicker row ───────────────────────────────────────── */
function BoKickers({ items, color }) {
return (
{items.map((label, i) => (
{label}
{i < items.length - 1 && (
)}
))}
);
}
/* ─── Icon container (rounded tile) ────────────────────────────── */
function BoIconTile({ children, size = 44, tone = 'ink' }) {
const tones = {
ink: { bg: 'var(--ink-900)', fg: '#fff' },
red: { bg: 'var(--bo-red)', fg: '#fff' },
cream: { bg: 'var(--bo-cream-2)', fg: 'var(--ink-900)' },
paper: { bg: '#fff', fg: 'var(--ink-900)', ring: true },
}[tone];
return (
{children}
);
}
Object.assign(window, {
BoIcons, BoLogo, BoEyebrow, BoBezel,
BoPrimaryCTA, BoSecondaryCTA, BoKickers, BoIconTile,
});