);
/* Gateway = a checkpoint arch. Block-template packets enter from the left lane,
pass under a stone-cut archway where declared fields are inspected against
the policy threshold strip, and exit stamped/verdicted on the right.
Architecture: portcullis frame + lintel + base plinth + inspection lane. */
const GatewayIllustration = ({ color }) => {
const [tick, setTick] = React.useState(0);
React.useEffect(() => {
const id = setInterval(() => setTick(t => t + 1), 60);
return () => clearInterval(id);
}, []);
// Sliding row of declared-field tags being inspected (purely visual).
const tags = ["coinbase_value", "merkle_root", "weight", "sigops", "tx_count", "fee_avg", "header"];
// Packet positions (0..1 along the lane). When a packet is under the arch,
// it dims and the lintel scan-line crosses it.
const packets = [0, 1, 2, 3].map(i => {
const phase = ((tick * 0.014) + i * 0.27) % 1;
return { id: i, t: phase };
});
return (
);
};
/* Shield = concentric protective form. Block bytes sit inside; three rings of inscriptions
represent Class S, D, M. Click a class to highlight its ring + show its detail card. */
const ShieldIllustration = ({ color, shieldClass, setShieldClass, setAutoRotate }) => {
const classes = {
S: { label: "Class S · structural", desc: "Header version, weight bound, sigops bound", phase: "Phase 1", count: "7 reserved (Phase 1.5)" },
D: { label: "Class D · declared vs derived", desc: "Re-derive coinbase, merkle, witness, tx_count from raw bytes", phase: "Phase 1", count: "22 reason codes (Class S + D + M)" },
M: { label: "Class M · mempool ground truth", desc: "Cross-reference template tx set vs operator's bitcoind", phase: "Phase 2", count: "4 metrics · fail-stale state machine" },
};
const c = classes[shieldClass];
const ringConfig = {
S: { r: 110, label: "S · structural" },
D: { r: 86, label: "D · declared vs derived" },
M: { r: 62, label: "M · mempool ground truth" },
};
return (