/* global React */
const { useEffect, useMemo, useRef, useState } = React;
/* ============================================================
Logo glyph — abstract layered-data tree
============================================================ */
window.RevGlyph = function RevGlyph({ size = 36 }) {
return (
);
};
/* Wordmark with tagline — for footer (light) and hero/centerpiece (dark) */
window.RevWordmark = function RevWordmark({ variant = 'light', height = 48 }) {
const src = variant === 'dark'
? 'assets/logo-dark-stacked.png'
: 'assets/logo-light.png';
return (
);
};
/* ============================================================
Satellite / soil-scan map — full-bleed hero visual
Generates a procedural orchard-block map with NDVI-style
color cells. Animated scan-line passes over.
============================================================ */
window.SatelliteMap = function SatelliteMap({ accent = '#83B535', mode = 'ndvi', seed: seedOffset }) {
// Pick a random offset once per mount unless one is provided
const offset = useMemo(() => seedOffset ?? Math.floor(Math.random() * 100000), [seedOffset]);
// Unique ID per instance to avoid duplicate SVG defs IDs
const uid = useMemo(() => Math.random().toString(36).slice(2, 7), []);
// Pick a feature block label that varies per load
const featureBlock = useMemo(() => {
const blocks = [
{ name: 'B-04 · GALA', ha: '12.4 ha', ndvi: '0.71', canopy: '84%' },
{ name: 'A-12 · BRAEBURN', ha: '8.2 ha', ndvi: '0.66', canopy: '78%' },
{ name: 'C-07 · PACKHAMS', ha: '15.1 ha', ndvi: '0.74', canopy: '88%' },
{ name: 'D-02 · CRIPPS PINK', ha: '9.6 ha', ndvi: '0.69', canopy: '81%' },
{ name: 'E-09 · ROSY GLOW', ha: '11.0 ha', ndvi: '0.72', canopy: '85%' },
{ name: 'F-15 · FORELLE', ha: '6.8 ha', ndvi: '0.64', canopy: '76%' },
{ name: 'B-21 · GOLDEN DEL.', ha: '13.5 ha', ndvi: '0.70', canopy: '83%' },
{ name: 'A-03 · FUJI', ha: '10.2 ha', ndvi: '0.73', canopy: '86%' },
];
return blocks[offset % blocks.length];
}, [offset]);
// Generate a grid of orchard "blocks" of varying shapes, varied by seed
const blocks = useMemo(() => {
const seed = (n) => {
let x = Math.sin((n + offset) * 9301 + 49297) * 233280;
return x - Math.floor(x);
};
const arr = [];
let id = 0;
// Organic block shapes by combining adjacent cells
const cols = 24, rows = 14;
const grid = Array.from({length: rows}, () => Array(cols).fill(null));
let blockId = 0;
for (let r = 0; r < rows; r++) {
for (let c = 0; c < cols; c++) {
if (grid[r][c] !== null) continue;
const w = Math.floor(seed(id++) * 4) + 2;
const h = Math.floor(seed(id++) * 3) + 2;
const ndvi = seed(id++);
for (let dr = 0; dr < h && r+dr < rows; dr++) {
for (let dc = 0; dc < w && c+dc < cols; dc++) {
if (grid[r+dr][c+dc] === null) grid[r+dr][c+dc] = blockId;
}
}
arr.push({ id: blockId, r, c, w, h, ndvi });
blockId++;
}
}
return arr;
}, [offset]);
// NDVI color ramp (low = red/brown, high = bright green)
const ndviColor = (v) => {
if (v < 0.25) return '#5A3B1F';
if (v < 0.40) return '#8C6232';
if (v < 0.55) return '#A89548';
if (v < 0.70) return '#7A9C32';
if (v < 0.85) return '#5C9A2D';
return '#2D7A1F';
};
return (
);
};
/* ============================================================
Tree-level dot-density visual (alt hero)
============================================================ */
window.TreeDots = function TreeDots({ accent = '#83B535' }) {
const dots = useMemo(() => {
const arr = [];
const cols = 60, rows = 32;
let id = 0;
const seed = (n) => { let x = Math.sin(n * 9301 + 49297) * 233280; return x - Math.floor(x); };
for (let r = 0; r < rows; r++) {
for (let c = 0; c < cols; c++) {
const v = seed(id++);
// some "rows" follow real orchard rows
const xj = (seed(id++) - 0.5) * 4;
const yj = (seed(id++) - 0.5) * 4;
arr.push({ x: c * 20 + 10 + xj, y: r * 20 + 10 + yj, v });
}
}
return arr;
}, []);
const color = (v) => {
if (v < 0.25) return '#5A3B1F';
if (v < 0.45) return '#8C6232';
if (v < 0.6) return '#A89548';
if (v < 0.75) return '#7A9C32';
if (v < 0.9) return '#5C9A2D';
return '#2D7A1F';
};
return (
);
};
/* ============================================================
Mini map widget — for cards
============================================================ */
window.MiniMap = function MiniMap({ accent = '#83B535', variant = 'ndvi' }) {
// Real soil/yield scan imagery
if (variant === 'soil') {
return (
);
}
if (variant === 'yield') {
return (
);
}
const seed = (n) => { let x = Math.sin(n * 9301 + 49297) * 233280; return x - Math.floor(x); };
const cells = useMemo(() => {
const arr = [];
let id = 0;
for (let r = 0; r < 14; r++) {
for (let c = 0; c < 22; c++) {
arr.push({ r, c, v: seed(id++ + (variant === 'soil' ? 99 : variant === 'yield' ? 200 : 0)) });
}
}
return arr;
}, [variant]);
const ramp = (v) => {
if (variant === 'soil') {
// soil EC ramp (blue -> tan)
if (v < 0.3) return '#7A9CB8';
if (v < 0.55) return '#A8A878';
if (v < 0.75) return '#C4AC74';
return '#5A4A2A';
}
if (variant === 'yield') {
if (v < 0.25) return '#7A4438';
if (v < 0.5) return '#C4A038';
if (v < 0.75) return '#7A9C32';
return '#2D7A1F';
}
if (v < 0.3) return '#5A3B1F';
if (v < 0.5) return '#8C6232';
if (v < 0.7) return '#7A9C32';
return '#2D7A1F';
};
return (
);
};
/* ============================================================
Fruit growth curve — sigmoidal (logistic) with predicted tail
============================================================ */
window.TimeSeries = function TimeSeries({ accent = '#83B535', height = 160, instanceId = '' }) {
// Unique ID per instance to avoid duplicate SVG gradient IDs
const uid = React.useMemo(() => instanceId || Math.random().toString(36).slice(2, 7), [instanceId]);
const gradId = `tsGrad-${uid}`;
// Logistic / sigmoid: y = L / (1 + e^(-k(t - t0)))
// Domain: weeks 0..28 from full bloom; current = week ~18 (about 65%)
const W = 480;
const top = 16;
const bottom = height - 22;
const usableH = bottom - top;
const N = 60;
const currentIdx = Math.round(N * (18 / 28)); // ~week 18 of 28
const { actual, predicted, dots } = useMemo(() => {
const k = 0.42; // steepness
const t0 = 13; // inflection week
const L = 1; // asymptote (normalised)
const sigmoid = (t) => L / (1 + Math.exp(-k * (t - t0)));
const all = [];
for (let i = 0; i <= N; i++) {
const week = (i / N) * 28;
const base = sigmoid(week);
// tiny field noise only on observed segment, none on prediction
const noise = i <= currentIdx ? (Math.sin(i * 1.9) * 0.012 + Math.sin(i * 0.7) * 0.008) : 0;
const v = Math.max(0, Math.min(1, base + noise));
const x = (i / N) * W;
const y = bottom - v * usableH;
all.push({ x, y, week });
}
const actualPts = all.slice(0, currentIdx + 1);
const predictedPts = all.slice(currentIdx);
// Weekly observation dots only on the actual segment
const dotPts = [];
for (let w = 1; w <= 18; w++) {
const idx = Math.round((w / 28) * N);
if (all[idx]) dotPts.push(all[idx]);
}
return { actual: actualPts, predicted: predictedPts, dots: dotPts };
}, [height]);
const toPath = (pts) => pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ');
const actualPath = toPath(actual);
const predictedPath = toPath(predicted);
const lastActual = actual[actual.length - 1];
const fillPath = `M0,${bottom} ${actualPath.replace(/^M/, 'L')} L${lastActual.x.toFixed(1)},${bottom} Z`;
// Target asymptote line
const targetY = top + 4;
return (
);
};
/* ============================================================
Fruit size distribution histogram
============================================================ */
window.SizeDistribution = function SizeDistribution({ accent = '#83B535' }) {
const bars = [
{ label: '60mm', val: 8, target: false },
{ label: '65mm', val: 18, target: false },
{ label: '70mm', val: 28, target: true },
{ label: '75mm', val: 30, target: true },
{ label: '80mm', val: 12, target: true },
{ label: '85mm', val: 4, target: false },
];
const max = 32;
return (
);
};
/* ============================================================
Soil EC profile cross-section
============================================================ */
window.SoilProfile = function SoilProfile() {
const layers = [
{ d: '0–25cm', cells: [0.3, 0.5, 0.8, 0.7, 0.4, 0.3, 0.5, 0.6, 0.7, 0.5, 0.4, 0.3] },
{ d: '25–50cm', cells: [0.4, 0.6, 0.9, 0.8, 0.5, 0.4, 0.6, 0.7, 0.8, 0.6, 0.5, 0.4] },
{ d: '50–90cm', cells: [0.5, 0.7, 0.95, 0.9, 0.6, 0.5, 0.7, 0.8, 0.9, 0.7, 0.6, 0.5] },
];
const ramp = (v) => {
if (v < 0.4) return '#C4AC74';
if (v < 0.6) return '#A89548';
if (v < 0.8) return '#7A6B38';
return '#3D3520';
};
return (
);
};
/* ============================================================
Calibration scatter
============================================================ */
window.CalibrationScatter = function CalibrationScatter({ accent = '#83B535' }) {
const points = useMemo(() => {
const arr = [];
const seed = (n) => { let x = Math.sin(n * 9301 + 49297) * 233280; return x - Math.floor(x); };
for (let i = 0; i < 60; i++) {
const x = seed(i) * 100;
const y = x * 0.85 + (seed(i + 100) - 0.5) * 18;
arr.push({ x, y });
}
return arr;
}, []);
return (
);
};
/* ============================================================
Variable rate prescription map preview
============================================================ */
window.VRMap = function VRMap({ accent = '#83B535' }) {
const seed = (n) => { let x = Math.sin(n * 9301 + 49297) * 233280; return x - Math.floor(x); };
const cells = useMemo(() => {
const arr = [];
let id = 5;
for (let r = 0; r < 12; r++) {
for (let c = 0; c < 18; c++) {
const z = Math.floor(seed(id++) * 4);
arr.push({ r, c, z });
}
}
return arr;
}, []);
const zoneColor = ['#3D5A1F', '#5C9A2D', '#A89548', '#C46A38'];
const zoneLabel = ['LOW', 'STD', 'MED', 'HIGH'];
return (
);
};
/* ============================================================
Camera/scout illustration (line diagram)
============================================================ */
window.ScoutDiagram = function ScoutDiagram({ accent = '#83B535' }) {
return (
);
};
/* ============================================================
Generic placeholder image with label
============================================================ */
window.ImgPlaceholder = function ImgPlaceholder({ label, tone = 'warm', icon = 'orchard' }) {
const bg = tone === 'warm' ? 'var(--paper-warm)' : 'var(--charcoal)';
const fg = tone === 'warm' ? 'var(--muted)' : 'rgba(255,255,255,0.55)';
return (
);
};
Object.assign(window, {
RevGlyph: window.RevGlyph,
RevWordmark: window.RevWordmark,
SatelliteMap: window.SatelliteMap,
TreeDots: window.TreeDots,
MiniMap: window.MiniMap,
TimeSeries: window.TimeSeries,
SizeDistribution: window.SizeDistribution,
SoilProfile: window.SoilProfile,
CalibrationScatter: window.CalibrationScatter,
VRMap: window.VRMap,
ScoutDiagram: window.ScoutDiagram,
ImgPlaceholder: window.ImgPlaceholder,
});