/* eslint-disable */
/* JCK 2026 Sales Playbook — view components.
   Two views: Demo (script flow, every stage) + PricingAll (prices & offers). */
const { useState, useEffect, useMemo, useRef } = React;
const Icon = window.Icon;
const PB = window.PLAYBOOK;

/* ------------------- small helpers ------------------- */
function ViewHeader({ eyebrow, title, lead, right }) {
  return (
    <div className="view-header" style={{display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 24, flexWrap: 'wrap'}}>
      <div style={{maxWidth: 760}}>
        {eyebrow && <div className="eyebrow">{eyebrow}</div>}
        <h1 className="h1">{title}</h1>
        {lead && <p className="lead">{lead}</p>}
      </div>
      {right}
    </div>
  );
}
function StageIcon({ stage, size = 16 }) {
  return <Icon name={stage.icon || 'Circle'} size={size}/>;
}

/* ------------------- StreamRow renders one demo step ------------------- */
function StreamRow({ step }) {
  if (step.kind === 'say') return (
    <div className="stream-row say-row">
      {step.label && <div className="say-label">{step.label}</div>}
      {step.text}
    </div>
  );
  if (step.kind === 'do') return (
    <div className="stream-row do-row">
      <Icon name="Hand" size={14}/> {step.text}
    </div>
  );
  if (step.kind === 'tonality') return (
    <div className="stream-row tone-row">
      <Icon name="Flame" size={22} style={{color: '#c98800', flexShrink: 0, marginTop: 2}}/>
      <div>
        <div className="tonality-label">Tonality</div>
        <div className="tonality-text">{step.text}</div>
      </div>
    </div>
  );
  if (step.kind === 'trial') return (
    <div className="stream-row trial-row">
      <Icon name="Target" size={16}/> {step.text}
    </div>
  );
  return null;
}

/* ============================================================
   DEMO — every stage in sequence
   ============================================================ */
function Demo({ nav, script }) {
  const DEMO_IDS_MAX = [
    'openers', 'qualify',
    'max-demo', 'gemcam-demo', 'jewelry-intelligence', 'collections',
    'trial-soft', 'trial-hard',
    'objections', 'signals', 'downsell',
    'close-again'
  ];
  const DEMO_IDS_GLB = [
    'openers', 'qualify',
    'glb-demo', 'gemcam-demo', 'jewelry-intelligence', 'collections',
    'trial-soft', 'trial-hard',
    'objections', 'signals', 'downsell',
    'close-again'
  ];
  const DEMO_IDS = script === 'glb' ? DEMO_IDS_GLB : DEMO_IDS_MAX;
  const stages = script === 'glb' ? PB.STAGES_GLB : PB.STAGES;
  const demoStages = DEMO_IDS.map(id => stages.find(s => s.id === id)).filter(Boolean);

  const [stageIdx, setStageIdx] = useState(0);
  const [customer, setCustomer] = useState('new'); // new | existing
  const [checked, setChecked] = useState({});

  useEffect(() => { setStageIdx(0); setCustomer('new'); setChecked({}); }, [script]);

  const stage = demoStages[stageIdx];
  const sideData = (stage[customer] && stage[customer].kind === 'same-as-new')
    ? stage.new : stage[customer];

  // For sticky right rail — only meaningful for demo-steps stages
  let firstTrial = null;
  const doSteps = [];
  if (sideData && sideData.kind === 'demo-steps') {
    sideData.steps.forEach(st => {
      if (st.kind === 'do') doSteps.push(st);
      if (st.kind === 'trial' && !firstTrial) firstTrial = st.text;
    });
  }

  const toggleCheck = (key) => setChecked(prev => ({ ...prev, [key]: !prev[key] }));
  const progress = ((stageIdx + 1) / demoStages.length) * 100;

  /* ----- phase groups for the journey rail ----- */
  const phases = script === 'glb' ? [
    { id: 'open', label: 'Open', icon: 'Phone', ids: ['openers', 'qualify'] },
    { id: 'demo', label: 'Demo', icon: 'Camera', ids: ['glb-demo', 'gemcam-demo', 'jewelry-intelligence', 'collections'] },
    { id: 'trials', label: 'Trials', icon: 'Smile', ids: ['trial-soft'] },
    { id: 'close', label: 'Close', icon: 'Target', ids: ['trial-hard'] },
    { id: 'handle', label: 'Handle', icon: 'GitFork', ids: ['objections', 'signals', 'downsell'] },
    { id: 'close-again', label: 'Close again', icon: 'Target', ids: ['close-again'] }
  ] : [
    { id: 'open', label: 'Open', icon: 'Phone', ids: ['openers', 'qualify'] },
    { id: 'demo', label: 'Demo', icon: 'Camera', ids: ['max-demo', 'gemcam-demo', 'jewelry-intelligence', 'collections'] },
    { id: 'trials', label: 'Trials', icon: 'Smile', ids: ['trial-soft'] },
    { id: 'close', label: 'Close', icon: 'Target', ids: ['trial-hard'] },
    { id: 'handle', label: 'Handle', icon: 'GitFork', ids: ['objections', 'signals', 'downsell'] },
    { id: 'close-again', label: 'Close again', icon: 'Target', ids: ['close-again'] }
  ];
  const phaseOf = (sid) => phases.find(p => p.ids.includes(sid));

  return (
    <div className="view">
      {/* HERO — mindset + journey */}
      <DemoHero nav={nav} script={script}/>

      {/* JOURNEY rail */}
      <DemoJourney
        demoStages={demoStages}
        stageIdx={stageIdx}
        setStageIdx={setStageIdx}
        phases={phases}
      />

      {/* DETAIL */}
      <div className="demo-shell" id="demo-detail" style={{marginTop: 36}}>
        <aside className="demo-stages">
          <div style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 8px 10px'}}>
            <h4 style={{margin: 0}}>Stages</h4>
            <div className="demo-mode-toggle" style={{padding: 2, height: 26}}>
              <button className={customer === 'new' ? 'active' : ''} style={{padding: '3px 8px', fontSize: 11}}
                onClick={() => setCustomer('new')}>New</button>
              <button className={customer === 'existing' ? 'active' : ''} style={{padding: '3px 8px', fontSize: 11}}
                onClick={() => setCustomer('existing')}>Exist.</button>
            </div>
          </div>
          {demoStages.map((s, i) => {
            const ph = phaseOf(s.id);
            return (
              <div key={s.id}
                className={'demo-stage-item' + (i === stageIdx ? ' active' : '') + (i < stageIdx ? ' done' : '')}
                onClick={() => setStageIdx(i)}>
                <div className="num">{i < stageIdx ? <Icon name="Check" size={11}/> : (i+1)}</div>
                <div style={{display: 'flex', flexDirection: 'column', minWidth: 0}}>
                  <span style={{whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}>{s.shortLabel || s.label}</span>
                  {ph && <span style={{fontSize: 10, color: 'var(--muted-ink)', letterSpacing: '0.06em', textTransform: 'uppercase'}}>{ph.label}</span>}
                </div>
              </div>
            );
          })}
        </aside>

        <div className="demo-main">
          <div className="demo-header">
            <div className="step-num">{String(stageIdx+1).padStart(2,'0')}</div>
            <div style={{flex: 1, minWidth: 0}}>
              <div style={{display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap'}}>
                <div className="step-title">{stage.label}</div>
                {(() => {
                  const ph = phaseOf(stage.id);
                  return ph ? <span className="pill pill-teal"><Icon name={ph.icon} size={11}/> {ph.label}</span> : null;
                })()}
              </div>
              <div className="step-meta">{stage.short || stage.sub}</div>
            </div>
            <div className="demo-mode-toggle" style={{flexShrink: 0}}>
              <button className={customer === 'new' ? 'active' : ''} onClick={() => setCustomer('new')}>
                <Icon name="Users" size={11} style={{display:'inline', marginRight: 4}}/> New
              </button>
              <button className={customer === 'existing' ? 'active' : ''} onClick={() => setCustomer('existing')}>
                <Icon name="Briefcase" size={11} style={{display:'inline', marginRight: 4}}/> Existing
              </button>
            </div>
          </div>

          <div className="demo-progress">
            <div className="demo-progress-bar" style={{width: progress + '%'}}/>
          </div>

          {/* Inline notes banner — full-width, above the body */}
          {stage.notes && stage.notes.length > 0 && (
            <div style={{
              marginTop: 18,
              padding: '14px 18px',
              background: 'linear-gradient(90deg, #fff8e6, #ffffff)',
              border: '1px solid #f0d171',
              borderLeft: '3px solid #c98800',
              borderRadius: 10,
              display: 'flex',
              gap: 12,
              alignItems: 'flex-start'
            }}>
              <Icon name="Lightbulb" size={18} style={{color: '#c98800', flexShrink: 0, marginTop: 1}}/>
              <div style={{flex: 1, minWidth: 0}}>
                <div style={{fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#8a5300', fontWeight: 700, marginBottom: 4}}>Notes</div>
                <div style={{fontSize: 13.5, color: 'var(--ink)', lineHeight: 1.5}}>
                  {stage.notes.map((n, i) => (
                    <div key={i} style={{paddingTop: i > 0 ? 6 : 0}}>{n}</div>
                  ))}
                </div>
              </div>
            </div>
          )}

          <div style={{marginTop: 22}}/>

          {(() => {
            const hasAside = doSteps.length > 0 || !!firstTrial;
            return (
              <div className={'demo-grid' + (hasAside ? '' : ' full')}>
                <DemoBody stage={stage} sideData={sideData} customer={customer}
                  checked={checked} toggleCheck={toggleCheck} nav={nav} script={script}/>

                {hasAside && (
                  <aside className="demo-side">
                    {doSteps.length > 0 && (
                      <div className="demo-side-card">
                        <h5><Icon name="Eye" size={12}/> What to show</h5>
                        <div className="checks">
                          {doSteps.map((s, i) => {
                            const key = stage.id+':do:'+customer+':'+i;
                            const isChecked = !!checked[key];
                            return (
                              <div key={i} className={'check-row' + (isChecked ? ' checked' : '')}
                                onClick={() => toggleCheck(key)}>
                                <div className="check-box">{isChecked && <Icon name="Check" size={11}/>}</div>
                                <span className="check-label">{s.text}</span>
                              </div>
                            );
                          })}
                        </div>
                      </div>
                    )}

                    {firstTrial && (
                      <div className="demo-side-card" style={{background: 'var(--teal-soft)', borderColor: 'var(--teal-soft-2)'}}>
                        <h5 style={{color: '#0c6f7c'}}><Icon name="Target" size={12}/> Trial close prompt</h5>
                        <div style={{fontSize: 14.5, fontWeight: 600, color: 'var(--ink)', lineHeight: 1.45}}>
                          "{firstTrial}"
                        </div>
                      </div>
                    )}
                  </aside>
                )}
              </div>
            );
          })()}

          <div className="demo-nav">
            <button className="btn" disabled={stageIdx === 0}
              onClick={() => setStageIdx(Math.max(0, stageIdx - 1))}>
              <Icon name="ChevronLeft" size={14}/> Previous
            </button>
            <div style={{fontSize: 12, color: 'var(--muted-ink)'}}>
              Stage {stageIdx+1} of {demoStages.length}
            </div>
            <button className="btn btn-primary" disabled={stageIdx === demoStages.length - 1}
              onClick={() => setStageIdx(Math.min(demoStages.length - 1, stageIdx + 1))}>
              Next stage <Icon name="ChevronRight" size={14}/>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ------- Demo hero: title + mindset (icon-led, no boxes) ------- */
function DemoHero({ nav, script }) {
  return (
    <div style={{marginBottom: 36}}>
      <div className="eyebrow">JCK 2026 Sales Playbook</div>
      {script === 'glb' ? (
        <h1 className="h1" style={{fontSize: 42, marginBottom: 10, maxWidth: 880}}>
          The GemLightbox <span style={{color: 'var(--teal)'}}>→ Downsell Standalone</span>
        </h1>
      ) : (
        <h1 className="h1" style={{fontSize: 42, marginBottom: 10, maxWidth: 880}}>
          Max / GemCam Pro <span style={{color: 'var(--teal)'}}>→ Downsell GemLightbox</span>
        </h1>
      )}
      <p className="lead" style={{marginBottom: 28}}>
        Every line, offer, objection and FAQ — verbatim from the source script, organised as a flow you can scan on the booth floor.
      </p>

      {/* MINDSET — unified panel, three traits side by side */}
      <div className="mindset-panel">
        <div className="mindset-panel-label">
          <Icon name="Sparkle" size={14}/>
          <span>{PB.MINDSET.intro}</span>
        </div>
        <div className="mindset-panel-row">
          {[
            { icon: 'Crown', text: PB.MINDSET.points[0] },
            { icon: 'Brain', text: PB.MINDSET.points[1] },
            { icon: 'Flame', text: PB.MINDSET.points[2] }
          ].map((m, i) => (
            <React.Fragment key={i}>
              <div className="mindset-trait">
                <Icon name={m.icon} size={28} stroke={1.6}/>
                <div className="mindset-trait-text">{m.text}</div>
              </div>
              {i < 2 && <div className="mindset-divider"/>}
            </React.Fragment>
          ))}
        </div>
      </div>

      <div className="mindset-notes">
        {PB.MINDSET.notes.map((n, i) => (
          <div key={i} className="mindset-note">
            <Icon name={i === 0 ? 'Compass' : 'Stethoscope'} size={18} style={{color: 'var(--teal)', flexShrink: 0}}/>
            <div>
              <span style={{color: 'var(--muted-ink)', fontSize: 13}}>{n.label} </span>
              <span style={{fontSize: 14, fontWeight: 600, color: 'var(--ink)'}}>{n.value}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ------- Reusable journey rail ------- */
function JourneyRail({ stages, stageIdx, setStageIdx, phases, phaseColors, scrollTargetId, title, hint }) {
  const grouped = phases.map(p => ({
    phase: p,
    stages: stages
      .map((s, i) => ({ s, i }))
      .filter(({ s }) => p.ids.includes(s.id))
  })).filter(g => g.stages.length);

  return (
    <div className="journey-wrap">
      <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 16}}>
        <h2 className="h2">{title}</h2>
        <div style={{fontSize: 12, color: 'var(--muted-ink)'}}>{hint || 'Click any stage to jump in'}</div>
      </div>

      <div className="journey-rail-v3">
        {grouped.map((g, gi) => (
          <div key={g.phase.id} className="journey-phase"
            style={{'--phase-color': phaseColors[g.phase.id]}}>
            <div className="journey-phase-head">
              <Icon name={g.phase.icon} size={11}/> {g.phase.label}
            </div>
            <div className="journey-phase-steps">
              {g.stages.map(({ s, i }, idx) => {
                const active = i === stageIdx;
                return (
                  <button key={s.id}
                    className={'journey-step-v3' + (active ? ' active' : '')}
                    onClick={() => {
                      setStageIdx(i);
                      setTimeout(() => document.getElementById(scrollTargetId)?.scrollIntoView({behavior: 'smooth', block: 'start'}), 50);
                    }}>
                    <div className="js-icon-v3">
                      <Icon name={s.icon || 'Circle'} size={20}/>
                      <span className="js-badge">{i+1}</span>
                    </div>
                    <div className="js-label-v3">{s.shortLabel || s.label}</div>
                  </button>
                );
              })}
            </div>
            {gi < grouped.length - 1 && <div className="journey-phase-arrow"><Icon name="ChevronRight" size={16}/></div>}
          </div>
        ))}
      </div>
    </div>
  );
}

/* ------- Demo journey wrapper ------- */
function DemoJourney({ demoStages, stageIdx, setStageIdx, phases }) {
  const phaseColors = {
    open: '#1C3248', demo: '#20A9B9',
    trials: '#1f8a5b', close: '#0c6f7c',
    handle: '#b07a08', 'close-again': '#0c6f7c'
  };
  return <JourneyRail
    stages={demoStages} stageIdx={stageIdx} setStageIdx={setStageIdx}
    phases={phases} phaseColors={phaseColors}
    scrollTargetId="demo-detail" title="The sales journey"/>;
}

/* ------- Demo body: different renderers per stage kind ------- */
function DemoBody({ stage, sideData, customer, checked, toggleCheck, nav, script }) {
  if (!sideData) return null;

  if (sideData.kind === 'bullets') {
    const heading = sideData.heading || 'What to say — pick one';
    return (
      <div className="demo-card-large">
        <div className="eyebrow" style={{marginBottom: 12}}>
          <Icon name="Mic" size={11} style={{display: 'inline', marginRight: 5}}/> {heading}
        </div>
        <ul style={{listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 6}}>
          {sideData.items.map((it, i) => {
            const key = stage.id+':'+customer+':'+i;
            const isChecked = !!checked[key];
            return (
              <li key={i} className={'check-row' + (isChecked ? ' checked' : '')}
                onClick={() => toggleCheck(key)}
                style={{display: 'flex', alignItems: 'flex-start', gap: 12, fontSize: 16, lineHeight: 1.5, cursor: 'pointer', padding: '12px 0', borderBottom: '1px solid var(--line-2)'}}>
                <div className="check-box" style={{marginTop: 3}}>{isChecked && <Icon name="Check" size={12}/>}</div>
                <span className="check-label" style={{fontSize: 16}}>{it}</span>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }

  if (sideData.kind === 'demo-steps') {
    return (
      <div className="demo-card-large">
        <div className="script-stream">
          {sideData.steps.map((st, i) => <StreamRow key={i} step={st}/>)}
        </div>
      </div>
    );
  }

  if (sideData.kind === 'trial-closes') {
    return (
      <div className="demo-card-large">
        <div style={{display: 'flex', flexDirection: 'column', gap: 24}}>
          <div>
            <div className="eyebrow" style={{marginBottom: 10, display: 'flex', alignItems: 'center', gap: 6}}>
              <Icon name="Smile" size={12}/> Soft closes
            </div>
            <div style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 8}}>
              {sideData.soft.map((t, i) => <div key={i} className="say" style={{fontSize: 14}}>{t}</div>)}
            </div>
          </div>
          <div>
            <div className="eyebrow" style={{marginBottom: 10, color: 'var(--midnight)', display: 'flex', alignItems: 'center', gap: 6}}>
              <Icon name="Target" size={12}/> Hard closes
            </div>
            <div style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 8}}>
              {sideData.hard.map((t, i) => (
                <div key={i} className="say" style={{fontSize: 14, borderLeftColor: 'var(--midnight)'}}>{t}</div>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (sideData.kind === 'objections') {
    const O = PB.OBJECTIONS;
    return (
      <div className="demo-card-large">
        {/* ===== Objection library — verbatim from the Objection handling & trial close source ===== */}
        {O.library && (
          <div>
            <div className="eyebrow" style={{marginBottom: 12, display: 'flex', alignItems: 'center', gap: 6}}>
              <Icon name="BookOpen" size={12}/> Objection library — verbatim responses by category
            </div>
            <div className="obj-library">
              {O.library.map(cat => (
                <div key={cat.id} className="obj-cat">
                  <div className="obj-cat-title">
                    {cat.starredTitle && <span className="obj-star" aria-hidden="true">⭐</span>}
                    {cat.title}
                  </div>
                  <div className="obj-cat-items">
                    {cat.items.map((it, i) => (
                      <div key={i} className={'obj-item' + (it.starred ? ' starred' : '')}>
                        {it.starred && <span className="obj-star" aria-hidden="true">⭐</span>}
                        <div className="obj-item-text">{it.text}</div>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* ===== Trial Close ===== */}
        {O.trialClose && (
          <div style={{marginTop: 28}}>
            <div className="eyebrow" style={{marginBottom: 12, display: 'flex', alignItems: 'center', gap: 6}}>
              <Icon name="Smile" size={12}/> Trial Close
            </div>
            <div className="obj-list">
              {O.trialClose.map((t, i) => (
                <div key={i} className="obj-list-item"><div className="obj-list-dot"/><div style={{whiteSpace: 'pre-line'}}>{t}</div></div>
              ))}
            </div>
          </div>
        )}

        {/* ===== Close ===== */}
        {O.close && (
          <div style={{marginTop: 24}}>
            <div className="eyebrow" style={{marginBottom: 12, display: 'flex', alignItems: 'center', gap: 6}}>
              <Icon name="CheckCircle" size={12}/> Close
            </div>
            <div className="obj-list">
              {O.close.map((t, i) => (
                <div key={i} className="obj-list-item"><div className="obj-list-dot"/><div>{t}</div></div>
              ))}
            </div>
          </div>
        )}

        {/* ===== Urgency / Scarcity ===== */}
        {(O.urgency || O.scarcity) && (
          <div className="obj-pair" style={{marginTop: 24}}>
            {O.urgency && (
              <div className="obj-pair-card urgency">
                <div className="obj-pair-label"><Icon name="Clock" size={14}/> Urgency</div>
                <div className="obj-pair-text">{O.urgency}</div>
              </div>
            )}
            {O.scarcity && (
              <div className="obj-pair-card scarcity">
                <div className="obj-pair-label"><Icon name="AlertTriangle" size={14}/> Scarcity</div>
                <div className="obj-pair-text">{O.scarcity}</div>
              </div>
            )}
          </div>
        )}

        {/* ===== "See the machine in person" rebuttal ===== */}
        {O.seeInPerson && (
          <div style={{marginTop: 24}}>
            <div className="eyebrow" style={{marginBottom: 8}}>{O.seeInPerson.label}</div>
            <div style={{fontSize: 13, color: 'var(--muted-ink)', marginBottom: 8}}>{O.seeInPerson.trigger}</div>
            <div className="obj-quote">{O.seeInPerson.quote}</div>
          </div>
        )}

        {/* ===== Fixing No-Shows & Improving Meeting Quality ===== */}
        {O.noShows && (
          <div style={{marginTop: 24}}>
            <div className="eyebrow" style={{marginBottom: 8, display: 'flex', alignItems: 'center', gap: 6}}>
              <Icon name="UserCheck" size={12}/> {O.noShows.title}
            </div>
            <div style={{fontSize: 14, lineHeight: 1.55, color: 'var(--ink)', marginBottom: 10}}>{O.noShows.instruction}</div>
            <div className="obj-quote">{O.noShows.quote}</div>
          </div>
        )}

        {/* ===== Moneyback Guarantee — Objection Handling ===== */}
        {O.moneyback && (
          <div style={{marginTop: 24}}>
            <div className="eyebrow" style={{marginBottom: 8, display: 'flex', alignItems: 'center', gap: 6}}>
              <Icon name="RotateCcw" size={12}/> {O.moneyback.title}
            </div>
            <div style={{fontSize: 14, lineHeight: 1.55, color: 'var(--ink)', marginBottom: 10}}>
              <strong>Objection:</strong> {O.moneyback.objection}
            </div>
            <div className="obj-quote">
              <div style={{marginBottom: O.moneyback.bullets ? 10 : 0}}>{O.moneyback.response}</div>
              {O.moneyback.bullets && (
                <ul style={{margin: '0 0 10px 0', paddingLeft: 20, lineHeight: 1.6}}>
                  {O.moneyback.bullets.map((b, i) => (
                    <li key={i} style={{marginBottom: 4}}>{b}</li>
                  ))}
                </ul>
              )}
              {O.moneyback.closing && <div>{O.moneyback.closing}</div>}
            </div>
          </div>
        )}
      </div>
    );
  }

  if (sideData.kind === 'signals') {
    const S = PB.SIGNALS;
    return (
      <div className="signals-grid">
        <div className="signal-panel warn">
          <div className="sp-header">
            <div className="sp-icon"><Icon name="Frown" size={22}/></div>
            <div>
              <div className="sp-title">{S.noBudget.title}</div>
              <div className="sp-sub">If you see these — skip offers, go to downsell</div>
            </div>
          </div>
          <div className="signal-list">
            {S.noBudget.items.map((t, i) => (
              <div key={i} className="signal-item"><div className="si-dot"/><div>{t}</div></div>
            ))}
          </div>
        </div>
        <div className="signal-panel good">
          <div className="sp-header">
            <div className="sp-icon"><Icon name="Smile" size={22}/></div>
            <div>
              <div className="sp-title">{S.hasBudget.title}</div>
              <div className="sp-sub">If you see these — lead with the Elite Kit offer</div>
            </div>
          </div>
          <div className="signal-list">
            {S.hasBudget.items.map((t, i) => (
              <div key={i} className="signal-item"><div className="si-dot"/><div>{t}</div></div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  if (sideData.kind === 'downsell') {
    /* GLB script: linear recommendation (no big-pieces yes/no question) */
    if (script === 'glb') {
      const d = PB.DOWNSELL_GLB;
      return (
        <div className="demo-card-large" style={{padding: '28px 32px'}}>
          <div className="eyebrow" style={{marginBottom: 18, display: 'flex', alignItems: 'center', gap: 6}}>
            <Icon name="GitFork" size={12}/> Down-selling recommendation
          </div>
          <div className="say" style={{fontSize: 14, marginBottom: 12}}>
            <span className="say-label"><Icon name="Mic" size={10} style={{display: 'inline', marginRight: 4}}/>Sales says</span>
            {d.text}
          </div>
          <div className="bubble customer" style={{maxWidth: 'none', alignSelf: 'stretch'}}>
            <div className="bubble-label">Customer</div>
            {d.cust}
          </div>
          <div className="bubble sales" style={{maxWidth: 'none', alignSelf: 'stretch', marginTop: 8}}>
            <div className="bubble-label">Sales</div>
            {d.salesPrice}
          </div>
          <div className="pill pill-warn" style={{marginTop: 12}}>
            <Icon name="ArrowRight" size={11}/> {d.fallback}
          </div>
        </div>
      );
    }

    /* MAX script: yes/no decision tree */
    const d = PB.DOWNSELL;
    return (
      <div className="demo-card-large" style={{padding: '28px 32px'}}>
        <div className="eyebrow" style={{marginBottom: 18, display: 'flex', alignItems: 'center', gap: 6}}>
          <Icon name="GitFork" size={12}/> Decision tree
        </div>
        <div style={{display: 'flex', justifyContent: 'center', marginBottom: 28}}>
          <div className="tree-node q" style={{maxWidth: 480}}>
            <div className="tn-icon"><Icon name="HelpCircle" size={20}/></div>
            <div>
              <div className="tn-label">Sales Question 1</div>
              <div className="tn-text">{d.question}</div>
            </div>
          </div>
        </div>

        <div className="tree-branches">
          <div className="tree-branch">
            <div className="tree-branch-label yes">Customer says YES</div>
            <div className="card card-pad" style={{background: 'white', borderColor: 'var(--teal)', borderTop: '3px solid var(--teal)'}}>
              <div className="eyebrow" style={{marginBottom: 8}}>{d.yes.label}</div>
              <div className="say" style={{fontSize: 14, marginBottom: 12}}>
                <span className="say-label"><Icon name="Mic" size={10} style={{display: 'inline', marginRight: 4}}/>Sales says</span>
                {d.yes.text}
              </div>
              <div className="bubble customer" style={{maxWidth: 'none', alignSelf: 'stretch'}}>
                <div className="bubble-label">Customer</div>
                {d.yes.cust}
              </div>
              <div className="bubble sales" style={{maxWidth: 'none', alignSelf: 'stretch', marginTop: 8}}>
                <div className="bubble-label">Sales</div>
                {d.yes.salesPrice}
              </div>
              <div className="pill pill-warn" style={{marginTop: 12}}>
                <Icon name="ArrowRight" size={11}/> {d.yes.fallback}
              </div>
            </div>
          </div>

          <div className="tree-branch">
            <div className="tree-branch-label no">Customer says NO</div>
            <div className="card card-pad" style={{background: 'white', borderColor: 'var(--midnight)', borderTop: '3px solid var(--midnight)'}}>
              <div className="eyebrow" style={{marginBottom: 8, color: 'var(--midnight)'}}>{d.no.label}</div>
              <div className="say" style={{fontSize: 14, marginBottom: 12, borderLeftColor: 'var(--midnight)'}}>
                <span className="say-label" style={{color: 'var(--midnight)'}}><Icon name="Mic" size={10} style={{display: 'inline', marginRight: 4}}/>Sales says</span>
                {d.no.text}
              </div>
              <div className="bubble customer" style={{maxWidth: 'none', alignSelf: 'stretch'}}>
                <div className="bubble-label">Customer</div>
                {d.no.cust}
              </div>
              <div className="bubble sales" style={{maxWidth: 'none', alignSelf: 'stretch', background: 'var(--midnight)', marginTop: 8}}>
                <div className="bubble-label">Sales</div>
                <span style={{whiteSpace: 'pre-wrap'}}>{d.no.salesPrice}</span>
              </div>
              <div className="pill pill-warn" style={{marginTop: 12}}>
                <Icon name="ArrowRight" size={11}/> {d.no.fallback}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (sideData.kind === 'faqs') {
    return (
      <div className="demo-card-large">
        <div className="eyebrow" style={{marginBottom: 12, display: 'flex', alignItems: 'center', gap: 6}}>
          <Icon name="HelpCircle" size={12}/> Common customer questions
        </div>
        <div style={{display: 'grid', gap: 16}}>
          {PB.FAQS.map((f, i) => (
            <div key={i} style={{display: 'flex', alignItems: 'flex-start', gap: 14, padding: '6px 0'}}>
              <div style={{width: 40, height: 40, borderRadius: 10, background: 'var(--teal-soft)', color: 'var(--teal)', display: 'grid', placeItems: 'center', flexShrink: 0}}>
                <Icon name="HelpCircle" size={20}/>
              </div>
              <div style={{flex: 1}}>
                <div className="eyebrow" style={{fontSize: 10}}>If customer asks</div>
                <div className="faq-q" style={{fontSize: 17}}>{f.q}</div>
                <div className="faq-a">{f.a}</div>
                <div className="faq-stage"><Icon name="Target" size={11} style={{display: 'inline', marginRight: 4}}/> {f.stage}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  return null;
}

/* ============================================================
   PRICING & OFFERS — combined page
   ============================================================ */
function PriceCard({ p, dark, accent }) {
  return (
    <div className={'price-card' + (p.featured ? ' featured' : '') + (dark ? ' dark' : '')}>
      {p.featured && <div className="pc-tag">Featured</div>}
      <div style={{display: 'flex', alignItems: 'center', gap: 12}}>
        <div style={{
          width: 44, height: 44, borderRadius: 11,
          background: dark ? 'rgba(32,169,185,.2)' : 'var(--teal-soft)',
          color: dark ? 'var(--teal)' : 'var(--teal)',
          display: 'grid', placeItems: 'center', flexShrink: 0
        }}>
          <Icon name={accent || 'Box'} size={22}/>
        </div>
        <div style={{flex: 1, minWidth: 0}}>
          <div className="pc-name">{p.name}</div>
          <div className="pc-meta">{p.sub}</div>
        </div>
      </div>
      <div className="pc-prices">
        <div className="pc-show-price">{p.showPrice}</div>
        {p.listPrice && <div className="pc-strike">{p.listPrice}</div>}
        {p.save && <span className="pc-save">{p.save}</span>}
      </div>
      <div className="pc-includes">{p.includes}</div>
      <div className="pc-script">
        <div className="say-label" style={{color: 'var(--teal)', display: 'block', marginBottom: 6}}>
          <Icon name="Mic" size={10} style={{display: 'inline', marginRight: 4}}/>What to say (verbatim)
        </div>
        <span style={{whiteSpace: 'pre-wrap'}}>{p.script}</span>
      </div>
      {p.cta && <div style={{fontSize: 11, color: 'var(--muted-ink)', fontStyle: 'italic', textAlign: 'right'}}>{p.cta}</div>}
    </div>
  );
}

function OfferSet({ set, tone, icon }) {
  return (
    <div className="card card-pad" style={{padding: '24px 26px'}}>
      <div style={{display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16}}>
        <div style={{
          width: 40, height: 40, borderRadius: 11,
          background: tone === 'dark' ? 'var(--midnight)' : 'var(--teal-soft)',
          color: tone === 'dark' ? 'var(--teal)' : 'var(--teal)',
          display: 'grid', placeItems: 'center'
        }}>
          <Icon name={icon || 'Gift'} size={20}/>
        </div>
        <h3 className="h3">{set.title}</h3>
      </div>

      {[set.offer1, set.offer2, set.offer3].map((o, i) => (
        <div key={i} style={{
          borderTop: i > 0 ? '1px solid var(--line)' : 'none',
          paddingTop: i > 0 ? 18 : 0,
          paddingBottom: i < 2 ? 18 : 0,
          display: 'flex', gap: 18
        }}>
          <div style={{
            width: 38, height: 38, borderRadius: 10,
            background: i === 0 ? 'var(--success-soft)' : (i === 1 ? 'var(--teal-soft)' : 'var(--warn-soft)'),
            color: i === 0 ? 'var(--success)' : (i === 1 ? '#0c6f7c' : '#8a5300'),
            display: 'grid', placeItems: 'center', flexShrink: 0
          }}>
            <Icon name={i === 0 ? 'Gift' : (i === 1 ? 'Sparkles' : 'DollarSign')} size={18}/>
          </div>
          <div style={{flex: 1, minWidth: 0}}>
            <div style={{display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4}}>
              <span style={{fontSize: 11, fontWeight: 700, color: 'var(--muted-ink)', letterSpacing: '0.06em'}}>OFFER {i+1}</span>
              <span style={{fontSize: 15, fontWeight: 700}}>{o.label.replace(/^Sales Support Offer \d+\s*/, '')}</span>
            </div>
            {o.trigger && (
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                padding: '4px 10px', background: 'var(--bg-2)', borderRadius: 6,
                fontSize: 12, color: 'var(--muted-ink)', marginBottom: 10
              }}>
                <Icon name="MessageCircle" size={11}/> {o.trigger}
              </div>
            )}
            <div className="pc-script" style={{whiteSpace: 'pre-wrap'}}>{o.text}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

function PricingAll({ nav, script }) {
  const MAX_PRICING_STAGES = [
    // Elite Kit Max
    { id: 'eliteMax-price',  label: 'GemLightbox Max Elite Kit',     shortLabel: 'Price',   icon: 'Tag',         short: 'Featured bundle — $6,999 all-in',                     kind: 'price', priceKey: 'eliteMax' },
    { id: 'eliteMax-offer1', label: 'Sales Support Offer 1',          shortLabel: 'Offer 1', icon: 'Gift',        short: '50 free GemStudio credits — $400 value',              kind: 'offer', source: 'MAX_OFFERS', subset: 'eliteKit', offerKey: 'offer1' },
    { id: 'eliteMax-offer2', label: 'Sales Support Offer 2',          shortLabel: 'Offer 2', icon: 'Sparkles',    short: '+50 more = 100 credits / $600 value',                 kind: 'offer', source: 'MAX_OFFERS', subset: 'eliteKit', offerKey: 'offer2' },
    { id: 'eliteMax-offer3', label: 'Sales Support Offer 3',          shortLabel: 'Offer 3', icon: 'DollarSign',  short: '$500 discount — close at $6,499 (manager check)',     kind: 'offer', source: 'MAX_OFFERS', subset: 'eliteKit', offerKey: 'offer3' },

    // Max Only
    { id: 'maxOnly-price',   label: 'GemLightbox Max Only',           shortLabel: 'Price',   icon: 'Tag',         short: 'Limited-time show price — $4,999',                    kind: 'price', priceKey: 'maxOnly' },
    { id: 'maxOnly-offer1',  label: 'Sales Support Offer 1',          shortLabel: 'Offer 1', icon: 'Gift',        short: '50 free GemStudio credits — $400 value',              kind: 'offer', source: 'MAX_OFFERS', subset: 'standalone', offerKey: 'offer1' },
    { id: 'maxOnly-offer2',  label: 'Sales Support Offer 2',          shortLabel: 'Offer 2', icon: 'Sparkles',    short: '+50 more = 100 credits / $600 value',                 kind: 'offer', source: 'MAX_OFFERS', subset: 'standalone', offerKey: 'offer2' },
    { id: 'maxOnly-offer3',  label: 'Sales Support Offer 3',          shortLabel: 'Offer 3', icon: 'DollarSign',  short: '$500 discount — close at $4,499 (manager check)',     kind: 'offer', source: 'MAX_OFFERS', subset: 'standalone', offerKey: 'offer3' },

    // GLB Kit
    { id: 'glbKit-price',    label: 'GemLightbox Kit',                shortLabel: 'Price',   icon: 'Tag',         short: 'Downsell path — $4,498 all-in',                       kind: 'price', priceKey: 'glbKit' },
    { id: 'glbKit-offer1',   label: 'Sales Support Offer 1',          shortLabel: 'Offer 1', icon: 'Gift',        short: '50 free GemStudio credits — $300 value',              kind: 'offer', source: 'GLB_OFFERS', subset: 'eliteKit', offerKey: 'offer1' },
    { id: 'glbKit-offer2',   label: 'Sales Support Offer 2',          shortLabel: 'Offer 2', icon: 'Sparkles',    short: '+50 more = 100 credits / $600 value',                 kind: 'offer', source: 'GLB_OFFERS', subset: 'eliteKit', offerKey: 'offer2' },
    { id: 'glbKit-offer3',   label: 'Sales Support Offer 3',          shortLabel: 'Offer 3', icon: 'DollarSign',  short: '$500 discount — close at $3,998 (manager check)',     kind: 'offer', source: 'GLB_OFFERS', subset: 'eliteKit', offerKey: 'offer3' },

    // GLB Only
    { id: 'glbOnly-price',   label: 'GemLightbox (standalone)',       shortLabel: 'Price',   icon: 'Tag',         short: 'Smartphone path — $1,999',                            kind: 'price', priceKey: 'glbOnly' },
    { id: 'glbOnly-offer1',  label: 'Sales Support Offer 1',          shortLabel: 'Offer 1', icon: 'Gift',        short: '50 free GemStudio credits — $300 value',              kind: 'offer', source: 'GLB_OFFERS', subset: 'standalone', offerKey: 'offer1' },
    { id: 'glbOnly-offer2',  label: 'Sales Support Offer 2',          shortLabel: 'Offer 2', icon: 'Sparkles',    short: '+50 more = 100 credits / $600 value',                 kind: 'offer', source: 'GLB_OFFERS', subset: 'standalone', offerKey: 'offer2' },
    { id: 'glbOnly-offer3',  label: 'Sales Support Offer 3',          shortLabel: 'Offer 3', icon: 'Sparkle',     short: 'Free GemSparkle (valued at $449) — manager check',    kind: 'offer', source: 'GLB_OFFERS', subset: 'standalone', offerKey: 'offer3' },

    // Existing
    { id: 'existing',        label: 'Existing customer offers',       shortLabel: 'Existing',icon: 'Users',       short: 'Trade-ins, Diamond Status, and stacking rules',       kind: 'existing' }
  ];

  const GLB_PRICING_STAGES = [
    // GLB Elite Kit
    { id: 'glbElite-price',  label: 'GemLightbox Elite Kit',          shortLabel: 'Price',   icon: 'Tag',         short: 'Featured bundle — $4,498 all-in',                     kind: 'price', priceKey: 'eliteKit' },
    { id: 'glbElite-offer1', label: 'Sales Support Offer 1',          shortLabel: 'Offer 1', icon: 'Gift',        short: '50 free GemStudio credits — $300 value',              kind: 'offer', source: 'GLB_OFFERS', subset: 'eliteKit', offerKey: 'offer1' },
    { id: 'glbElite-offer2', label: 'Sales Support Offer 2',          shortLabel: 'Offer 2', icon: 'Sparkles',    short: '+50 more = 100 credits / $600 value',                 kind: 'offer', source: 'GLB_OFFERS', subset: 'eliteKit', offerKey: 'offer2' },
    { id: 'glbElite-offer3', label: 'Sales Support Offer 3',          shortLabel: 'Offer 3', icon: 'DollarSign',  short: '$500 discount — close at $3,998 (manager check)',     kind: 'offer', source: 'GLB_OFFERS', subset: 'eliteKit', offerKey: 'offer3' },

    // GLB Only
    { id: 'glbStand-price',  label: 'GemLightbox Only',               shortLabel: 'Price',   icon: 'Tag',         short: 'Smartphone path — $1,999',                            kind: 'price', priceKey: 'glbOnly' },
    { id: 'glbStand-offer1', label: 'Sales Support Offer 1',          shortLabel: 'Offer 1', icon: 'Gift',        short: '50 free GemStudio credits — $300 value',              kind: 'offer', source: 'GLB_OFFERS', subset: 'standalone', offerKey: 'offer1' },
    { id: 'glbStand-offer2', label: 'Sales Support Offer 2',          shortLabel: 'Offer 2', icon: 'Sparkles',    short: '+50 more = 100 credits / $600 value',                 kind: 'offer', source: 'GLB_OFFERS', subset: 'standalone', offerKey: 'offer2' },
    { id: 'glbStand-offer3', label: 'Sales Support Offer 3',          shortLabel: 'Offer 3', icon: 'Sparkle',     short: 'Free GemSparkle (valued at $449) — manager check',    kind: 'offer', source: 'GLB_OFFERS', subset: 'standalone', offerKey: 'offer3' },

    // Existing (GLB)
    { id: 'existing-glb',    label: 'Existing customer offers',       shortLabel: 'Existing',icon: 'Users',       short: 'Trade-ins, Diamond Status, and stacking rules',       kind: 'existing-glb' }
  ];

  const MAX_PHASES = [
    { id: 'eliteMax', label: 'Elite Kit · $6,999', icon: 'Award',    ids: ['eliteMax-price', 'eliteMax-offer1', 'eliteMax-offer2', 'eliteMax-offer3'] },
    { id: 'maxOnly',  label: 'Max Only · $4,999', icon: 'Box',      ids: ['maxOnly-price',  'maxOnly-offer1',  'maxOnly-offer2',  'maxOnly-offer3'] },
    { id: 'glbKit',   label: 'GLB Kit · $4,498',  icon: 'Camera',   ids: ['glbKit-price',   'glbKit-offer1',   'glbKit-offer2',   'glbKit-offer3'] },
    { id: 'glbOnly',  label: 'GLB · $1,999',      icon: 'Phone',    ids: ['glbOnly-price',  'glbOnly-offer1',  'glbOnly-offer2',  'glbOnly-offer3'] },
    { id: 'existing', label: 'Existing',           icon: 'Users',    ids: ['existing'] }
  ];

  const GLB_PHASES = [
    { id: 'glbElite', label: 'Elite Kit · $4,498', icon: 'Award',   ids: ['glbElite-price', 'glbElite-offer1', 'glbElite-offer2', 'glbElite-offer3'] },
    { id: 'glbStand', label: 'GLB Only · $1,999',  icon: 'Camera',  ids: ['glbStand-price', 'glbStand-offer1', 'glbStand-offer2', 'glbStand-offer3'] },
    { id: 'existing', label: 'Existing',            icon: 'Users',   ids: ['existing-glb'] }
  ];

  const pricingStages = script === 'glb' ? GLB_PRICING_STAGES : MAX_PRICING_STAGES;
  const phases = script === 'glb' ? GLB_PHASES : MAX_PHASES;

  const phaseColors = script === 'glb' ? {
    'glbElite': '#0c6f7c',
    'glbStand': '#1f8a5b',
    'existing': '#5b6a7d'
  } : {
    'eliteMax': '#0c6f7c',
    'maxOnly':  '#1C3248',
    'glbKit':   '#b07a08',
    'glbOnly':  '#1f8a5b',
    'existing': '#5b6a7d'
  };
  const phaseOf = (sid) => phases.find(p => p.ids.includes(sid));

  const [stageIdx, setStageIdx] = useState(0);
  const [customer, setCustomer] = useState('new');

  useEffect(() => { setStageIdx(0); }, [script]);

  const stage = pricingStages[stageIdx];
  const progress = ((stageIdx + 1) / pricingStages.length) * 100;
  const currentPhase = phaseOf(stage.id);
  const phasePrice = script === 'glb' ? {
    'glbElite': '$4,498',
    'glbStand': '$1,999'
  }[currentPhase?.id] : {
    'eliteMax': '$6,999',
    'maxOnly':  '$4,999',
    'glbKit':   '$4,498',
    'glbOnly':  '$1,999'
  }[currentPhase?.id];

  return (
    <div className="view">
      {/* HERO */}
      <div style={{marginBottom: 28}}>
        <div className="eyebrow">Pricing &amp; Offers</div>
        <h1 className="h1" style={{fontSize: 42, marginBottom: 10, maxWidth: 880}}>
          Pricing &amp; offers
        </h1>
        <p className="lead">
          {script === 'glb'
            ? 'Two products. For each: the price, the verbatim quote, and the three-step Sales Support Offer ladder.'
            : 'Four products. For each: the price, the verbatim quote, and the three-step Sales Support Offer ladder.'}
        </p>
      </div>

      {/* DETAIL */}
      <div className="demo-shell" id="pricing-detail" style={{marginTop: 36}}>
        <aside className="demo-stages">
          <div style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 8px 10px'}}>
            <h4 style={{margin: 0}}>Steps</h4>
            <div className="demo-mode-toggle" style={{padding: 2, height: 26}}>
              <button className={customer === 'new' ? 'active' : ''} style={{padding: '3px 8px', fontSize: 11}}
                onClick={() => setCustomer('new')}>New</button>
              <button className={customer === 'existing' ? 'active' : ''} style={{padding: '3px 8px', fontSize: 11}}
                onClick={() => setCustomer('existing')}>Exist.</button>
            </div>
          </div>
          {phases.map(ph => {
            const phStages = pricingStages.map((s, i) => ({s, i})).filter(({s}) => ph.ids.includes(s.id));
            return (
              <div key={ph.id} style={{marginBottom: 12}}>
                <div style={{fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--muted-ink)', fontWeight: 700, padding: '8px 10px 4px'}}>
                  {ph.label}
                </div>
                {phStages.map(({s, i}) => (
                  <div key={s.id}
                    className={'demo-stage-item' + (i === stageIdx ? ' active' : '')}
                    onClick={() => setStageIdx(i)}>
                    <div className="num">{i+1}</div>
                    <span style={{whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}>{s.shortLabel || s.label}</span>
                  </div>
                ))}
              </div>
            );
          })}
        </aside>

        <div className="demo-main">
          <div className="demo-header">
            <div className="step-num">{String(stageIdx+1).padStart(2,'0')}</div>
            <div style={{flex: 1, minWidth: 0}}>
              <div style={{display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap'}}>
                <div className="step-title">{stage.label}</div>
                {currentPhase && <span className="pill pill-teal"><Icon name={currentPhase.icon} size={11}/> {currentPhase.label}</span>}
              </div>
              <div className="step-meta">{stage.short}</div>
            </div>
            <div className="demo-mode-toggle" style={{flexShrink: 0}}>
              <button className={customer === 'new' ? 'active' : ''} onClick={() => setCustomer('new')}>
                <Icon name="Users" size={11} style={{display:'inline', marginRight: 4}}/> New
              </button>
              <button className={customer === 'existing' ? 'active' : ''} onClick={() => setCustomer('existing')}>
                <Icon name="Briefcase" size={11} style={{display:'inline', marginRight: 4}}/> Existing
              </button>
            </div>
          </div>

          <div className="demo-progress">
            <div className="demo-progress-bar" style={{width: progress + '%'}}/>
          </div>

          <div style={{marginTop: 22}}/>

          <div className="demo-grid">
            <PricingBody stage={stage} customer={customer} currentPhase={currentPhase} phasePrice={phasePrice} script={script}/>

            <aside className="demo-side">
              {/* Product context card */}
              {currentPhase && phasePrice && (
                <div className="demo-side-card" style={{background: 'var(--midnight)', borderColor: 'var(--midnight)', color: 'white'}}>
                  <h5 style={{color: 'var(--teal)'}}><Icon name={currentPhase.icon} size={12}/> Current product</h5>
                  <div style={{fontSize: 17, fontWeight: 700, color: 'white', marginBottom: 4}}>{currentPhase.label.split(' · ')[0]}</div>
                  <div style={{fontSize: 26, fontWeight: 800, color: 'var(--teal)', letterSpacing: '-0.02em', fontVariantNumeric: 'tabular-nums'}}>{phasePrice}</div>
                </div>
              )}

              {/* Offer ladder mini-stepper */}
              {currentPhase && currentPhase.ids.length === 4 && (
                <div className="demo-side-card">
                  <h5><Icon name="Layers" size={12}/> The offer ladder</h5>
                  <div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
                    {currentPhase.ids.map((sid, j) => {
                      const idx = pricingStages.findIndex(x => x.id === sid);
                      const s = pricingStages[idx];
                      const active = idx === stageIdx;
                      return (
                        <div key={sid}
                          onClick={() => setStageIdx(idx)}
                          style={{
                            display: 'flex', alignItems: 'center', gap: 10,
                            padding: '7px 10px',
                            borderRadius: 8,
                            background: active ? 'var(--teal-soft)' : 'transparent',
                            cursor: 'pointer',
                            fontSize: 12.5
                          }}>
                          <div style={{
                            width: 22, height: 22, borderRadius: '50%',
                            background: active ? 'var(--teal)' : 'var(--bg-2)',
                            color: active ? 'white' : 'var(--muted-ink)',
                            display: 'grid', placeItems: 'center',
                            fontWeight: 700, fontSize: 11, flexShrink: 0
                          }}>{j+1}</div>
                          <span style={{fontWeight: active ? 700 : 500, color: active ? '#0c6f7c' : 'var(--ink)'}}>
                            {s.shortLabel}
                          </span>
                        </div>
                      );
                    })}
                  </div>
                </div>
              )}

              {/* Existing customer reminder when toggled */}
              {customer === 'existing' && (
                <div className="demo-side-card" style={{background: 'var(--teal-soft)', borderColor: 'var(--teal-soft-2)'}}>
                  <h5 style={{color: '#0c6f7c'}}><Icon name="Users" size={12}/> Existing customer</h5>
                  {script === 'glb' ? (
                    <ul className="bullet-list" style={{gap: 6}}>
                      <li style={{fontSize: 12.5}}>$500 off: GLB Pro → New GemLightbox</li>
                      <li style={{fontSize: 12.5}}>$500 off: GemCam → GemCam Pro</li>
                      <li style={{fontSize: 12.5}}>Trade-in &amp; Offer 3 cannot combine</li>
                      <li style={{fontSize: 12.5}}>Diamond Status: upgrade for $1,499</li>
                      <li style={{fontSize: 12.5}}>GemCam + GLB stacks: $1,000 off</li>
                    </ul>
                  ) : (
                    <ul className="bullet-list" style={{gap: 6}}>
                      <li style={{fontSize: 12.5}}>$500 off: GLB Pro → Max trade-in</li>
                      <li style={{fontSize: 12.5}}>$500 off: GemCam → GemCam Pro trade-in</li>
                      <li style={{fontSize: 12.5}}>Trade-in &amp; Offer 3 cannot combine</li>
                      <li style={{fontSize: 12.5}}>GemCam + GLB stacks: $1,000 off</li>
                    </ul>
                  )}
                </div>
              )}

              {/* Note for offer-3 stages */}
              {stage.id.endsWith('-offer3') && (
                <div className="demo-side-card" style={{background: 'var(--warn-soft)', borderColor: '#f0d171'}}>
                  <h5 style={{color: '#8a5300'}}><Icon name="AlertTriangle" size={12}/> Manager approval</h5>
                  <div style={{fontSize: 13, lineHeight: 1.5, color: 'var(--ink)'}}>
                    Confirm with manager first. Don't promise the deal up front — frame it as something you'll <em>try</em> to secure.
                  </div>
                </div>
              )}
            </aside>
          </div>

          <div className="demo-nav">
            <button className="btn" disabled={stageIdx === 0}
              onClick={() => setStageIdx(Math.max(0, stageIdx - 1))}>
              <Icon name="ChevronLeft" size={14}/> Previous
            </button>
            <div style={{fontSize: 12, color: 'var(--muted-ink)'}}>
              Step {stageIdx+1} of {pricingStages.length}
            </div>
            <button className="btn btn-primary" disabled={stageIdx === pricingStages.length - 1}
              onClick={() => setStageIdx(Math.min(pricingStages.length - 1, stageIdx + 1))}>
              Next step <Icon name="ChevronRight" size={14}/>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* PricingBody — renders the main detail area for each pricing stage */
function PricingBody({ stage, customer, currentPhase, phasePrice, script }) {
  const P = script === 'glb' ? PB.PRICING_GLB : PB.PRICING;

  if (stage.kind === 'price') {
    const p = P[stage.priceKey];
    return (
      <div className="demo-card-large" style={{padding: '28px 30px'}}>
        <div className="eyebrow" style={{marginBottom: 16, display: 'flex', alignItems: 'center', gap: 6}}>
          <Icon name="Tag" size={11}/> Price &amp; verbatim script
        </div>

        {/* Price hero */}
        <div style={{display: 'flex', alignItems: 'center', gap: 22, padding: '20px 24px', background: 'linear-gradient(135deg, #f6fbfc, #ffffff)', border: '1px solid var(--line)', borderRadius: 12, marginBottom: 22}}>
          <div style={{width: 64, height: 64, borderRadius: 14, background: 'var(--teal-soft)', color: 'var(--teal)', display: 'grid', placeItems: 'center', flexShrink: 0}}>
            <Icon name={currentPhase?.icon || stage.icon} size={32}/>
          </div>
          <div style={{flex: 1, minWidth: 0}}>
            <div style={{fontSize: 13, color: 'var(--muted-ink)', fontWeight: 500}}>{p.sub}</div>
            <div style={{display: 'flex', alignItems: 'baseline', gap: 12, marginTop: 4, flexWrap: 'wrap'}}>
              <div style={{fontSize: 38, fontWeight: 800, letterSpacing: '-0.02em', color: 'var(--ink)', fontVariantNumeric: 'tabular-nums'}}>
                {p.showPrice}
              </div>
              {p.listPrice && <div style={{fontSize: 17, textDecoration: 'line-through', color: 'var(--muted-ink)'}}>{p.listPrice}</div>}
              {p.save && <span className="pc-save">{p.save}</span>}
            </div>
            <div style={{fontSize: 12.5, color: 'var(--muted-ink)', marginTop: 6}}>{p.includes}</div>
          </div>
        </div>

        {/* Verbatim script */}
        <div className="pc-script" style={{fontSize: 15, lineHeight: 1.6, padding: '18px 20px'}}>
          <div className="say-label" style={{color: 'var(--teal)', display: 'block', marginBottom: 8}}>
            <Icon name="Mic" size={10} style={{display: 'inline', marginRight: 4}}/> What to say (verbatim)
          </div>
          <span style={{whiteSpace: 'pre-wrap'}}>{p.script}</span>
        </div>

        {/* Existing customer trade-in callout */}
        {customer === 'existing' && (
          <div style={{marginTop: 14, padding: '12px 16px', background: 'var(--teal-soft)', border: '1px solid var(--teal-soft-2)', borderRadius: 10, fontSize: 13.5, display: 'flex', alignItems: 'flex-start', gap: 10}}>
            <Icon name="Users" size={16} style={{color: 'var(--teal)', flexShrink: 0, marginTop: 2}}/>
            <div>
              {script === 'glb'
                ? <><strong>Existing customer trade-ins:</strong> $500 off GemLightbox Pro → New GemLightbox · $500 off GemCam → GemCam Pro · Diamond Status: upgrade for $1,499.</>
                : <><strong>Existing customer trade-ins:</strong> $500 off GemLightbox Pro → Max · $500 off GemCam → GemCam Pro · stacking GemCam + GLB = $1,000 off.</>
              }
            </div>
          </div>
        )}

        {/* Payment terms callout */}
        {(stage.priceKey === 'eliteMax' || stage.priceKey === 'glbKit' || script === 'glb') && (
          <div style={{marginTop: 14, padding: '12px 16px', background: 'var(--warn-soft)', border: '1px solid #f0d171', borderRadius: 10, fontSize: 13, display: 'flex', alignItems: 'flex-start', gap: 10}}>
            <Icon name="AlertTriangle" size={16} style={{color: '#8a5300', flexShrink: 0, marginTop: 2}}/>
            <div>Credit card payments are handled by a secure external provider, with only a small processing fee of 3.1% applied.</div>
          </div>
        )}
      </div>
    );
  }

  if (stage.kind === 'offer') {
    const set = PB[stage.source];
    const offer = set[stage.subset][stage.offerKey];
    const offerNum = stage.offerKey.replace('offer', '');

    return (
      <div className="demo-card-large" style={{padding: '28px 30px'}}>
        <div className="eyebrow" style={{marginBottom: 14, display: 'flex', alignItems: 'center', gap: 6}}>
          <Icon name="Gift" size={11}/> {stage.label} — verbatim
        </div>

        {/* Trigger pill (when offer 2 or 3 — they have triggers) */}
        {offer.trigger && (
          <div style={{
            display: 'flex', alignItems: 'flex-start', gap: 10,
            padding: '12px 16px', background: 'var(--bg-2)', borderRadius: 10,
            fontSize: 13.5, color: 'var(--ink)', marginBottom: 18,
            border: '1px solid var(--line)'
          }}>
            <Icon name="MessageCircle" size={16} style={{color: 'var(--muted-ink)', flexShrink: 0, marginTop: 1}}/>
            <div>
              <div style={{fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--muted-ink)', marginBottom: 3}}>Customer trigger</div>
              {offer.trigger}
            </div>
          </div>
        )}

        {/* Offer number + price context */}
        <div style={{display: 'flex', alignItems: 'center', gap: 14, marginBottom: 16, padding: '14px 16px', background: 'white', border: '1px solid var(--line)', borderRadius: 10}}>
          <div style={{
            width: 44, height: 44, borderRadius: 12,
            background: offerNum === '1' ? 'var(--success-soft)' : (offerNum === '2' ? 'var(--teal-soft)' : 'var(--warn-soft)'),
            color: offerNum === '1' ? 'var(--success)' : (offerNum === '2' ? '#0c6f7c' : '#8a5300'),
            display: 'grid', placeItems: 'center',
            fontWeight: 800, fontSize: 18, flexShrink: 0
          }}>
            #{offerNum}
          </div>
          <div style={{flex: 1, minWidth: 0}}>
            <div style={{fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--muted-ink)', fontWeight: 700}}>
              On {currentPhase?.label.split(' · ')[0]}{phasePrice ? ' (' + phasePrice + ')' : ''}
            </div>
            <div style={{fontSize: 15.5, fontWeight: 700, color: 'var(--ink)', marginTop: 2}}>{stage.short}</div>
          </div>
        </div>

        {/* Verbatim script */}
        <div className="pc-script" style={{fontSize: 15, lineHeight: 1.65, padding: '18px 20px', whiteSpace: 'pre-wrap'}}>
          <div className="say-label" style={{color: 'var(--teal)', display: 'block', marginBottom: 8}}>
            <Icon name="Mic" size={10} style={{display: 'inline', marginRight: 4}}/> What to say (verbatim)
          </div>
          {offer.text}
        </div>

        {/* Existing customer note for offer 3s */}
        {customer === 'existing' && stage.id.endsWith('-offer3') && (
          <div style={{marginTop: 14, padding: '12px 16px', background: 'var(--danger-soft)', border: '1px solid #efb5b5', borderRadius: 10, fontSize: 13, display: 'flex', alignItems: 'flex-start', gap: 10}}>
            <Icon name="AlertTriangle" size={16} style={{color: 'var(--danger)', flexShrink: 0, marginTop: 2}}/>
            <div><strong>Existing customers:</strong> Trade-in and Sales Support Offer 3 cannot be combined.</div>
          </div>
        )}
      </div>
    );
  }

  if (stage.kind === 'existing') {
    return (
      <div className="demo-card-large" style={{padding: '28px 30px'}}>
        <div className="eyebrow" style={{marginBottom: 14, display: 'flex', alignItems: 'center', gap: 6}}>
          <Icon name="Users" size={11}/> Existing customer offers — verbatim
        </div>
        <div style={{display: 'flex', flexDirection: 'column'}}>
          {PB.EXISTING_OFFERS.map((o, i) => (
            <div key={i} style={{
              display: 'flex', gap: 18, alignItems: 'flex-start',
              padding: '18px 4px',
              borderBottom: i < PB.EXISTING_OFFERS.length - 1 ? '1px solid var(--line-2)' : 'none',
            }}>
              <div style={{
                width: 36, height: 36, borderRadius: 10,
                background: i === 2 ? 'var(--danger-soft)' : (i === 4 ? 'var(--warn-soft)' : (i === 3 ? 'linear-gradient(135deg, var(--teal), var(--teal-2))' : 'var(--teal-soft)')),
                color: i === 2 ? 'var(--danger)' : (i === 4 ? '#8a5300' : (i === 3 ? 'white' : 'var(--teal)')),
                display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 14, flexShrink: 0
              }}>
                {i === 3 ? <Icon name="Award" size={18}/> : o.letter}
              </div>
              <div style={{flex: 1, fontSize: 14.5, lineHeight: 1.55, paddingTop: 6}}>
                {i === 3 && <span className="pill pill-teal" style={{marginRight: 8}}><Icon name="Award" size={10}/> Diamond Status</span>}
                {i === 2 && <span className="pill pill-danger" style={{marginRight: 8}}>Cannot combine</span>}
                {i === 4 && <span className="pill pill-warn" style={{marginRight: 8}}>Stacking rule</span>}
                {o.text}
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  if (stage.kind === 'existing-glb') {
    return (
      <div className="demo-card-large" style={{padding: '28px 30px'}}>
        <div className="eyebrow" style={{marginBottom: 14, display: 'flex', alignItems: 'center', gap: 6}}>
          <Icon name="Users" size={11}/> Existing customer offers — verbatim
        </div>
        <div style={{display: 'flex', flexDirection: 'column'}}>
          {PB.EXISTING_OFFERS_GLB.map((o, i) => (
            <div key={i} style={{
              display: 'flex', gap: 18, alignItems: 'flex-start',
              padding: '18px 4px',
              borderBottom: i < PB.EXISTING_OFFERS_GLB.length - 1 ? '1px solid var(--line-2)' : 'none',
            }}>
              <div style={{
                width: 36, height: 36, borderRadius: 10,
                background: i === 2 ? 'var(--danger-soft)' : (i === 4 ? 'var(--warn-soft)' : (i === 3 ? 'linear-gradient(135deg, var(--teal), var(--teal-2))' : 'var(--teal-soft)')),
                color: i === 2 ? 'var(--danger)' : (i === 4 ? '#8a5300' : (i === 3 ? 'white' : 'var(--teal)')),
                display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 14, flexShrink: 0
              }}>
                {i === 3 ? <Icon name="Award" size={18}/> : o.letter}
              </div>
              <div style={{flex: 1, fontSize: 14.5, lineHeight: 1.55, paddingTop: 6}}>
                {i === 3 && <span className="pill pill-teal" style={{marginRight: 8}}><Icon name="Award" size={10}/> Diamond Status</span>}
                {i === 2 && <span className="pill pill-danger" style={{marginRight: 8}}>Cannot combine</span>}
                {i === 4 && <span className="pill pill-warn" style={{marginRight: 8}}>Stacking rule</span>}
                {o.text}
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  return null;
}

function SectionLabel({ icon, eyebrow, title, sub }) {
  return (
    <div style={{display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18}}>
      <div style={{
        width: 44, height: 44, borderRadius: 11,
        background: 'var(--teal-soft)', color: 'var(--teal)',
        display: 'grid', placeItems: 'center', flexShrink: 0
      }}>
        <Icon name={icon} size={22}/>
      </div>
      <div>
        <div className="eyebrow">{eyebrow}</div>
        <div style={{fontSize: 22, fontWeight: 700, letterSpacing: '-0.01em'}}>{title}</div>
        {sub && <div style={{fontSize: 13, color: 'var(--muted-ink)', marginTop: 2, maxWidth: 720}}>{sub}</div>}
      </div>
    </div>
  );
}

window.PB_VIEWS = { Demo, PricingAll };