Feature Comparison Matrix

Hover any cell for detail {[2,1,0].map(s => (

{CFG[s].lbl}

))} ))} {ROWS.map((row, ri) => ( {row.s.map((score, ci) => { const cfg = CFG[score]; const active = tip?.r===ri && tip?.c===ci; return ( ); })} ))}

{COLS.map((c,ci) => (	{ci===0?"⭐ "+c:c}
{row.f}	{ const cr = e.currentTarget.getBoundingClientRect(); const pr = ref.current?.getBoundingClientRect(); setTip({ r:ri, c:ci, score, tip:row.t[ci], comp:COLS[ci], x: cr.left-(pr?.left??0)+cr.width/2, y: cr.top-(pr?.top??0) }); }} onMouseLeave={() => setTip(null)} style={{ padding:"clamp(3px,0.7cqh,7px) clamp(3px,0.6cqw,7px)", textAlign:"center", background: ci===0?"var(--pitch-accent-subtle)":"transparent" }} > {cfg.icon}

{COLS.map((c,ci) => (

{ci===0?"⭐ "+c:c}

{row.f}

{ const cr = e.currentTarget.getBoundingClientRect(); const pr = ref.current?.getBoundingClientRect(); setTip({ r:ri, c:ci, score, tip:row.t[ci], comp:COLS[ci], x: cr.left-(pr?.left??0)+cr.width/2, y: cr.top-(pr?.top??0) }); }} onMouseLeave={() => setTip(null)} style={{ padding:"clamp(3px,0.7cqh,7px) clamp(3px,0.6cqw,7px)", textAlign:"center", background: ci===0?"var(--pitch-accent-subtle)":"transparent" }} > {cfg.icon}

{tip && (

{tip.comp} · {CFG[tip.score].lbl}

{tip.tip}

)}

);

	⭐ Us	Rival A	Rival B	Rival C	Rival D
Real-time Sync	●	◑	●	○	◑
AI Recommendations	●	○	◑	◑	○
Custom Integrations	●	●	◑	○	◑
Granular Permissions	●	◑	○	●	◑
Offline Mode	●	○	◑	○	●
White-labelling	●	◑	○	◑	○
Analytics Dashboard	●	●	◑	◑	○
SOC 2 / GDPR	●	●	●	◑	○