/* Size picker — pick the LE200 size. Three layout variants exposed via tweaks. */ function SizePicker({ config, setConfig, onNext, openRecommender, layout = 'ladder', personaStyle = 'script' }) { const models = window.LE200.MODELS; const [compareIds, setCompareIds] = useState([]); const toggleCompare = (id) => { setCompareIds((prev) => { if (prev.includes(id)) return prev.filter((x) => x !== id); if (prev.length >= 2) return [prev[1], id]; return [...prev, id]; }); }; const PersonaQuote = ({ m, big = false }) => { if (personaStyle === 'bubble') { return (
"{m.persona}"
); } if (personaStyle === 'clean') { return (
"{m.persona}"
); } return (
"{m.persona}"
); }; return (
{compareIds.length === 2 && }
} /> {/* ───── LAYOUT VARIANT: LADDER (default) ───── */} {layout === 'ladder' &&
{/* Scale label */}
Fig. 02 · Lineup elevation · drawn to relative scale
{models.map((m, i) => { const heightPct = 30 + m.capacity / 40 * 70; const selected = config.size === m.id; return (
{/* Compare checkbox */}
{m.btu.toLocaleString()} BTU {fmtUSD(m.price)}
); })}
} {/* ───── LAYOUT VARIANT: CARDS ───── */} {layout === 'cards' &&
{models.map((m) => { const selected = config.size === m.id; return (
setConfig({ size: m.id })}> {selected && }
{m.sku}
{m.capacity} cu ft
{fmtUSD(m.price)}
{m.sku}
{m.buyer}
BTU
{(m.btu / 1000).toFixed(0)}k
BURNERS
{m.burners}
STACK
{m.stacking.join('×')}"
); })}
} {/* ───── LAYOUT VARIANT: COMPARISON ROW ───── */} {layout === 'compare' &&
{models.map((m) => )} {[ ['Capacity', (m) => m.capacity + ' cu ft'], ['Setting area', (m) => m.settingArea + ' cu ft'], ['Stacking (in)', (m) => m.stacking.join(' × ')], ['Footprint (in)', (m) => m.footprint.join(' × ')], ['Max BTU/hr', (m) => m.btu.toLocaleString()], ['Burners', (m) => m.burners], ['Ship weight', (m) => m.shipWeight.toLocaleString() + ' lb'], ['Price', (m) => fmtUSD(m.price)]]. map(([k, fn], i) => {models.map((m) => )} )} {models.map((m) => )}
Spec
{k} {fn(m)}
Persona "{m.persona}"
} {/* SIDE-BY-SIDE COMPARE (when 2 selected) ----------------- */} {compareIds.length === 2 &&
{setConfig({ size: id });window.scrollTo({ top: 0, behavior: 'smooth' });}} />
} {/* NEXT bar ----------------------------------------------- */}
Selected
{config.size ? `LE200-${config.size} · ${window.LE200.MODELS.find((m) => m.id === config.size).capacity} cu ft` : 'Pick a size to continue'}