/* global React */ const { useMemo } = React; // ---------- Window chrome wrapper for product screenshots ---------- function ProductChrome({ title, breadcrumb, stage, dark = true, children, density = "normal" }) { const bg = dark ? "#221547" : "#fff"; const stroke = dark ? "rgba(255,255,255,0.08)" : "var(--n-200)"; const headerBg = dark ? "#1a1138" : "var(--n-50)"; const text = dark ? "rgba(255,255,255,0.92)" : "var(--aubergine)"; const subtext = dark ? "rgba(255,255,255,0.45)" : "var(--n-500)"; return (
{breadcrumb}
{stage && ( {stage} )}
{children}
); } // ---------- HERO: Energy Structuring (dark, dense, alive) ---------- function HeroProductScreen({ compact = false }) { // synthetic 96-bar typical-day curve (15-min intervals) const bars = useMemo(() => { const arr = []; for (let i = 0; i < 96; i++) { const t = i / 96; // base + working-hours hump + small noise const hump = Math.max(0, Math.sin((t - 0.27) * Math.PI * 1.45)); const evening = Math.max(0, 0.3 * Math.exp(-Math.pow((t - 0.78) / 0.06, 2))); const noise = ((i * 9301 + 49297) % 233) / 233 * 0.07; arr.push(0.18 + hump * 0.68 + evening + noise); } return arr; }, []); const peakIdx = bars.indexOf(Math.max(...bars)); if (compact) { return (
{/* Stage chips (replaces sidebar) */}
{[["01", true], ["02"], ["03"], ["04"]].map(([n, active]) => ( {n} ))}
{/* Title */}
TYPICAL DAY · 15-MIN SIMULATION
Load profile, weekday
{/* Chart */}
{bars.map((v, i) => { const isPeak = i === peakIdx; return (
); })}
00:0012:0024:00
{/* Metrics stacked vertically */}
{[ ["resolved_peak", "386.4 kW", true], ["billed_peak", "392.0 kW"], ["reconciliation", "−1.4%"], ].map(([k, v, hi]) => (
{k} {v}
))}
{/* Validation */}
check.peak_reconciliation Pass
); } return (
{/* Sidebar */}
project_id
JNO-2026-0418
{/* Main */}
TYPICAL DAY · 15-MIN SIMULATION
Load profile, weekday
{/* Chart */}
{bars.map((v, i) => { const isPeak = i === peakIdx; return (
{isPeak && (
386.4 kW
)}
); })}
00:0006:0012:0018:0024:00
{/* Asset rows */}
{/* Validation bar */}
check.peak_reconciliation within ±5% tolerance
Pass
); } function SideStage({ n, label, active }) { return (
{n} {label}
); } function Metric({ label, value, unit, highlight }) { return (
{label} {value}{unit && {unit}}
); } function AssetRow({ name, kw, pct }) { return (
{name}
{kw} kW {pct}
); } // ---------- STAGE 01: load builder + curve (compact card) ---------- function Stage01Screen() { const bars = useMemo(() => Array.from({ length: 48 }, (_, i) => { const t = i / 48; const hump = Math.max(0, Math.sin((t - 0.27) * Math.PI * 1.45)); return 0.22 + hump * 0.7 + ((i * 7919) % 113) / 113 * 0.06; }), []); const peakIdx = bars.indexOf(Math.max(...bars)); return (
Load builder Peak reconciled
{/* asset list */}
{[ ["HVAC, main hall", "142.0", "16h"], ["Production line A", "98.3", "12h"], ["Compressors (x4)", "71.2", "20h"], ["Lighting + aux.", "74.9", "14h"], ].map(([n, kw, h]) => (
{n} {kw} kW {h}
))}
{/* mini chart */}
{bars.map((v, i) => (
))}
); } // ---------- STAGE 02: Bill of Materials ---------- function Stage02Screen() { const rows = [ { cat: "MODULE", model: "Tiger Neo 72HC-570W", mfr: "Jinko Solar", qty: "487", spec: "570 W" }, { cat: "INVERTER", model: "SUN-50K-SG05LP3-EU", mfr: "Deye", qty: "4", spec: "50 kW" }, { cat: "BATTERY", model: "Tower-Max", mfr: "Dyness", qty: "10", spec: "20.48 kWh" }, ]; const cols = "78px 1fr 34px 64px 42px 78px"; return (
Category Model / Mfr. Qty Key Spec Doc Actions
{rows.map((r) => (
{r.cat} {r.model} {r.mfr} {r.qty} {r.spec} + Add Edit Remove
))}
); } // ---------- STAGE 03: Site feasibility ---------- function SiteField({ label, req, children }) { return (
{label} {req}
{children}
); } function SiteSelect({ placeholder = "Select…" }) { return (
{placeholder}
); } function SiteSeg({ options, active }) { return (
{options.map((o) => ( {o} ))}
); } function SiteSection({ n, title, children }) { return (
SECTION {n} {title}
{children}
); } function Stage03Screen() { return (
Site & Roof Assessment Save Section
); } function Row({ k, v, highlight }) { return (
{k} {v}
); } // ---------- STAGE 04: KYC ---------- function Stage04Screen() { const items = [ ["ID verification, signatory", "passed"], ["Site address, geocoded", "passed"], ["Ownership confirmation", "passed"], ["Business registration, RC", "passed"], ["Tax identification", "passed"], ["Authorised representative", "passed"], ]; return (
Diligence checks Project complete
{items.map(([label]) => (
{label} pass
))}
Project sealed. Bankable package ready. JNO-2026-0418
); } function CheckGlyph() { return ( ); } // ---------- Real screenshot in light window chrome ---------- function ScreenshotFrame({ src, alt, breadcrumb, stage, caption }) { return (
{alt} {caption && ( {caption} )}
); } Object.assign(window, { HeroProductScreen, Stage01Screen, Stage02Screen, Stage03Screen, Stage04Screen, ScreenshotFrame, });