// Plassic marketing — shared atoms + helpers (browser globals)
const { useState, useEffect, useRef, useMemo } = React;
// =====================================================
// Score band helpers (per design-system handoff README)
// 80–100 Clean (teal) | 60–79 Low (kraft outlined) | 30–59 Mediocre (coral) | 0–29 High (jungle inverse)
// =====================================================
function bandFor(score) {
if (score >= 80) return 'clean';
if (score >= 60) return 'low';
if (score >= 30) return 'medium';
return 'high';
}
function verdictFor(score) {
return { clean: 'CLEAN', low: 'LOW', medium: 'MEDIOCRE', high: 'HIGH' }[bandFor(score)];
}
function pillClassFor(score) {
return { clean: 'cln', low: 'lo', medium: 'med', high: 'hi' }[bandFor(score)];
}
// =====================================================
// Counting number — per motion spec: 0 → final over 600ms, ease-out cubic
// =====================================================
function CountUp({ to, dur = 600 }) {
const [n, setN] = useState(0);
useEffect(() => {
const start = performance.now();
let raf;
const tick = (t) => {
const p = Math.min(1, (t - start) / dur);
const eased = 1 - Math.pow(1 - p, 3); // ease-out cubic
setN(Math.round(to * eased));
if (p < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [to, dur]);
return <>{n};
}
// =====================================================
// SVG icons (24x24, 1.5px stroke, currentColor) — drop-in
// =====================================================
const Icon = {
share: () => ,
arrow: () => ,
scan: () => ,
search: () => ,
apple: () => ,
android: () => ,
chevR: () => ,
chevL: () => ,
close: () => ,
plus: () => ,
download: () => ,
trendUp: () => ,
send: () => ,
barcode: () => ,
};
// =====================================================
// Plassic wordmark (small, inline)
// =====================================================
function Wordmark({ size = 18 }) {
// simplified — full marketing wordmark would use the bundled wordmark.svg
return (
PLA
{[0.55, 0.91, 0.7, 0.85, 0.6].map((o, i) => (
))}
IC
);
}
// =====================================================
// Doc bar (header on every page) — no fixed positioning per brief
// =====================================================
function DocBar({ crumb, onNav, page }) {
return (
);
}
// =====================================================
// Smart App Banner (iOS) — simulated visually
// =====================================================
function SmartBanner({ visible, onDismiss }) {
if (!visible) return null;
return (
Plassic
Free · Plastic scanner
);
}
// =====================================================
// Subnav (page picker) — visible across the site
// =====================================================
function Subnav({ page, onNav }) {
const items = [
{ p: '/', l: 'Home' },
{ p: '/wall', l: 'Brand wall' },
{ p: '/challenge', l: 'Challenge' },
{ p: '/scan/coles-mascara', l: 'Share page' },
{ p: '/methodology',l: 'Methodology' },
{ p: '/premium', l: 'Premium' },
];
const isActive = (p) => p === '/' ? page === '/' : page.startsWith(p);
return (
);
}
// =====================================================
// Footer
// =====================================================
function Foot({ onNav }) {
return (
);
}
// =====================================================
// Receipt-style "QR" (graphic — never a real QR scan target)
// =====================================================
function FauxQR({ size = 44, fg = 'currentColor', bg = 'transparent' }) {
// deterministic pixel pattern — looks barcode-y but stylized
const cells = 9;
const pattern = useMemo(() => {
const s = "110100111101100101101111010110111011001110011011010110110101111010";
return Array.from({ length: cells * cells }, (_, i) => s[i % s.length] === '1');
}, []);
return (
);
}
// expose
Object.assign(window, {
bandFor, verdictFor, pillClassFor,
CountUp, Icon, Wordmark, DocBar, SmartBanner, Subnav, Foot, FauxQR,
});