// B V2 — atomic components shared across sections.
// SectionShell — wraps every section with consistent vertical rhythm.
// Padding scales with viewport via clamp() so mobile gets tighter spacing
// than desktop without two separate components.
function BV2Section({ id, bg = 'paper', children, style = {} }) {
const bgColor = { paper: BV2.paper, paperAlt: BV2.paperAlt, paperDeep: BV2.paperDeep, ink: BV2.ink, greenLight: BV2.greenLight }[bg] || bg;
return (
{children}
);
}
// SectionHeader — eyebrow w/ section number, h2, optional sub.
// tone: 'green' (default), 'oxblood' (warning), 'greenLight' (dark bg via invert)
function BV2Header({ num, eyebrow, title, sub, align = 'left', invert = false, tone = 'green', maxWidth = 720 }) {
const accent = invert ? BV2.greenLight : (tone === 'oxblood' ? BV2.oxblood : BV2.green);
const ink = invert ? BV2.paper : BV2.ink;
const ink2 = invert ? BV2.ink5 : BV2.ink2;
return (
{num && {num} — }{eyebrow}
{title}
{sub &&
{typeof sub === 'string' ? bv2RenderBold(sub) : sub}
}
);
}
// Verified-cert pill (green check + text). Used in hero + a few credibility spots.
function BV2VerifiedPill({ text, tone = 'light' }) {
const dark = tone === 'dark';
return (
✓
{text}
);
}
// Monogram badge — single letter / digit in a square or rounded-square.
// Replaces ALL emoji icon usage in the design.
function BV2Mono({ ch, color = BV2.green, bg = BV2.greenLight, size = 36, rounded = false, weight = 800 }) {
return (
{ch}
);
}
// Number badge — circle with number. Used for situation cards, lawyer creds.
function BV2Num({ n, color = BV2.green, bg = BV2.greenLight, size = 40 }) {
return (
{n}
);
}
// Primary CTA button — dark with arrow.
function BV2BtnPrimary({ children, full, tone = 'ink', ...rest }) {
const bg = tone === 'green' ? BV2.greenAccent : BV2.ink;
return (
);
}
function BV2BtnSecondary({ children, full, tone = 'light', ...rest }) {
const dark = tone === 'dark';
return (
);
}
// Disclosure-style attribution tag — small dot indicator + source URL in mono.
function BV2Source({ url }) {
return (
{url}
↗
);
}
// Horizontal bar chart — used for 94% case viz + lawtalk case cards.
function BV2DataBar({ pct, label, sublabel, color = BV2.green, bg = BV2.ink5, height = 8, animate = true }) {
const [ref, inView] = useInView();
return (
{label}
{pct}%
{sublabel &&
{sublabel}
}
);
}
// Placeholder block (image stand-in). Aspect ratio controllable.
function BV2Ph({ label, ratio = '4 / 3', tone = 'light', style = {} }) {
return (
{label}
);
}
// Animated number that counts up when scrolled into view.
function BV2Counter({ value, suffix = '', style = {} }) {
const [ref, inView] = useInView();
const n = useCounter(value, inView);
return (
{n}{suffix}
);
}
// Mid-page CTA strip — visual punctuation between sections.
// `tone` chooses the bg: 'green' (default, light) or 'ink' (dark, hand-off into Contact).
function BV2MidCta({ eyebrow, title, tone = 'green' }) {
const m = useIsMobile();
const dark = tone === 'ink';
const bg = dark ? BV2.ink : BV2.greenLight;
const accent = dark ? BV2.greenLight : BV2.green;
const ink = dark ? BV2.paper : BV2.ink;
return (