/* global React */ // components.jsx — Logo variants, Bottle SVG, Nav, Footer, Marquee, etc. // ────────────────────────────────────────────────────────────────────────── // LOGOS — three lockup variations // ────────────────────────────────────────────────────────────────────────── function LogoWordmark({ size = 18, weight = 600 }) { // Pure wordmark return ( Protocol ); } function LogoTechnical({ size = 18, weight = 600 }) { // Wordmark + version metadata return ( Protocol v.01 / 2025 ); } function LogoStamp({ size = 18 }) { // Stamp-style: P inside a ring with metadata const D = size * 2.4; return ( Protocol ); } function Logo({ variant = 'wordmark', size = 18 }) { if (variant === 'technical') return ; if (variant === 'stamp') return ; return ; } // ────────────────────────────────────────────────────────────────────────── // BOTTLE — schematic vector bottle with full label // ────────────────────────────────────────────────────────────────────────── function Bottle({ product, h = 280, dark = false, asLabel = false }) { // Bottle is drawn at a base height of 360, scaled to h. // Width is proportional. const W = 140, H = 360; const scale = h / H; const bg = dark ? '#1c1c1c' : '#f7f6f3'; const stroke = dark ? '#444' : '#0a0a0a'; const labelBg = dark ? '#0a0a0a' : '#fafaf7'; const labelInk = dark ? '#fafafa' : '#0a0a0a'; const labelMid = dark ? 'rgba(250,250,250,.55)' : 'rgba(10,10,10,.55)'; return ( ); } // crude word-wrap for SVG labels function wrapText(str, maxChars) { const words = String(str).split(' '); const lines = []; let cur = ''; for (const w of words) { if ((cur + ' ' + w).trim().length > maxChars) { lines.push(cur); cur = w; } else { cur = (cur + ' ' + w).trim(); } } if (cur) lines.push(cur); return lines.slice(0, 3); } // ────────────────────────────────────────────────────────────────────────── // REFILL POUCH — secondary packaging // ────────────────────────────────────────────────────────────────────────── function Pouch({ product, h = 280 }) { const W = 180, H = 280; const scale = h / H; return ( {/* main pouch body — slightly trapezoid */} {/* sealed crimp top */} {/* notch */} {/* label content */} REFILL · 1L {product.batch} {product.id} {product.name} {wrapText(product.actives, 28).map((line, i) => ( {line} ))} PROTOCOL · LONDON · 2026 FOR USE WITH STARTER VESSEL N°{product.id} REFILL ); } // ────────────────────────────────────────────────────────────────────────── // MOLECULAR / MECHANISM DIAGRAM // ────────────────────────────────────────────────────────────────────────── function MechanismDiagram() { // Generic enzyme-cleavage schematic return ( {/* fibre */} [1] BOUND SOIL FIBRE SUBSTRATE {/* soil molecule */} PROTEINACEOUS SOIL {/* arrow 1 */} PROTEASE {/* enzyme step */} [2] HYDROLYSIS FIBRE SUBSTRATE PEPTIDE FRAGMENTS {/* scissors line */} {/* arrow 2 */} SUSPEND {/* free state */} [3] RINSE CLEAN SOIL → SOLUTION {/* baseline */} FIG. 01 / MECHANISM OF ACTION PROTOCOL 01 / PROTEASE-BASED HYDROLYSIS ); } // ────────────────────────────────────────────────────────────────────────── // COMPOSITION BAR — stacked horizontal bar showing % composition // ────────────────────────────────────────────────────────────────────────── function CompositionBar({ pct, accent }) { const entries = Object.entries(pct); const total = entries.reduce((a, [, v]) => a + v, 0); return (
{entries.map(([k, v], i) => (
))}
{entries.map(([k, v], i) => (
{k.replace(/([A-Z])/g, ' $1').toUpperCase()} {v.toFixed(1)}%
))}
); } // ────────────────────────────────────────────────────────────────────────── // MARQUEE // ────────────────────────────────────────────────────────────────────────── function Marquee({ items }) { const track = items.map((item, i) => ( {item} / )); return (
{track}
); } // ────────────────────────────────────────────────────────────────────────── // NAV + FOOTER // ────────────────────────────────────────────────────────────────────────── function Nav({ route, setRoute, logoVariant, dense }) { const links = [ { id: 'home', label: 'Index' }, { id: 'products', label: 'Products' }, { id: 'ingredients', label: 'Ingredients' }, { id: 'journal', label: 'Journal' }, { id: 'identity', label: 'Identity' }, ]; return (
); } function Footer({ logoVariant }) { const cols = [ { title: 'Products', items: ['01 Biological', '02 Non-Biological', '03 Oxidiser', '04 Conditioner', '05 Pre-Treat', '06 Wool & Silk'] }, { title: 'Information', items: ['Ingredients Index', 'Mechanisms', 'Compatibility', 'Safety Data Sheets'] }, { title: 'Protocol', items: ['Journal', 'Refill Service', 'Subscription', 'Trade Accounts'] }, { title: 'Company', items: ['Manifesto', 'Laboratory', 'Press', 'Contact'] }, ]; return ( ); } // ────────────────────────────────────────────────────────────────────────── // EXPORT // ────────────────────────────────────────────────────────────────────────── Object.assign(window, { Logo, LogoWordmark, LogoTechnical, LogoStamp, Bottle, Pouch, MechanismDiagram, CompositionBar, Marquee, Nav, Footer, });