// var-process.jsx — Process section: 2-3 flow/connector variations.
// Keep current structure (Assess · Design · Install · Operate).
// Focus: better visual flow, clearer progression, subtle connectors.
const STEPS = [
{ num: '01', icon: 'search', title: 'Assess', copy: 'A site visit and utility analysis establish the baseline — loads, tariffs, building conditions, and interconnection capacity.', artifact: 'Assessment report + facility-specific baseline model', window: 'FEASIBILITY' },
{ num: '02', icon: 'drafting-compass', title: 'Design', copy: 'Engineered system design aligns generation, storage, and load management with actual facility usage and financial targets.', artifact: 'System design + incentives, IRR, payback, and project lifecycle cash flow model', window: 'TECHNICAL PROPOSAL' },
{ num: '03', icon: 'hard-hat', title: 'Install', copy: 'Regulatory approvals, construction, commissioning, and utility coordination are executed to meet schedule and interconnection requirements.', artifact: 'Commissioned system + utility interconnection sign-off + as-built documentation', window: 'IMPLEMENTATION' },
{ num: '04', icon: 'activity', title: 'Operate', copy: 'Monitoring, service, and performance reviews ensure systems operate as designed and continue to meet financial and operational targets over time.', artifact: 'Verified M&V reports + annual performance reviews + ESG documentation', window: 'COMMERCIAL OPERATION' }];
const PROCESS_HEAD = <>Four phases. One team. Long-term reliability.;
const PROCESS_SUB = 'From initial assessment through ongoing system operation, each phase delivers a defined output — from audit and financial model to commissioned systems and ongoing operations & maintenance.';
// ============================================================
// Version A — TIGHTER CONNECTOR, VERTICAL RHYTHM
// Same 4-column structure as current, but with a thicker, segmented
// connector line and window-tags for each step. Clearer progression.
// ============================================================
const ProcessVersionA = () =>
{/* Segmented connector bar — each segment filled, gap between, tick at each step */}
{[0, 1, 2, 3].map((i) =>
{i === 3 &&
}
)}
{STEPS.map((s) =>
STEP {s.num}{s.window}
{s.title}
{s.copy}
DELIVERABLE
{s.artifact}
)}
;
// ============================================================
// Version B — NUMBERED SPINE (vertical-meets-horizontal)
// Big numerals aligned on a left rail; icon badges; arrow chevrons
// between columns make progression unmistakable.
// ============================================================
const ProcessVersionB = () =>
{STEPS.map((s, i) =>
{s.num}{s.window}
{s.title}
{s.copy}
DELIVERABLE
{s.artifact}
{i < 3 &&
}
)}
;
// ============================================================
// Version C — RAIL + NUMBERED TIMELINE
// Horizontal rail with numbered nodes; step copy below each node
// aligned on a tighter vertical rhythm. Windows shown prominently.
// ============================================================
const ProcessVersionC = () =>
{/* Timeline header — window labels on a continuous rail */}
{STEPS.map((s) =>
{/* Node */}
{s.window}
STEP {s.num}
)}
{/* Step bodies — full-width row below the rail */}
{STEPS.map((s) =>
{s.title}
{/* Description region — fixed min-height so the divider + deliverable align across all four steps */}