function CampaignPanel({ state, onOpenAssets, openStepModal }) {
  const s = state.step;
  const brandReady = s !== STEPS.INTRO && s !== STEPS.BRAND_FORM;
  const budgetReady = [STEPS.MODE_DONE, STEPS.RESEARCHING, STEPS.SUBREDDIT_PICK, STEPS.SUBREDDIT_DONE, STEPS.STAFF, STEPS.STAFF_DONE, STEPS.CALENDAR, STEPS.CALENDAR_DONE, STEPS.CONFIRM, STEPS.ACTIVE].includes(s);
  const planStarted = [STEPS.SUBREDDIT_PICK, STEPS.SUBREDDIT_DONE, STEPS.STAFF, STEPS.STAFF_DONE, STEPS.CALENDAR, STEPS.CALENDAR_DONE, STEPS.CONFIRM, STEPS.ACTIVE].includes(s);

  const subsDone = [STEPS.SUBREDDIT_DONE, STEPS.STAFF, STEPS.STAFF_DONE, STEPS.CALENDAR, STEPS.CALENDAR_DONE, STEPS.CONFIRM, STEPS.ACTIVE].includes(s);
  const staffDone = [STEPS.STAFF_DONE, STEPS.CALENDAR, STEPS.CALENDAR_DONE, STEPS.CONFIRM, STEPS.ACTIVE].includes(s);
  const calDone = [STEPS.CALENDAR_DONE, STEPS.CONFIRM, STEPS.ACTIVE].includes(s);
  const contentDone = [STEPS.CONFIRM, STEPS.ACTIVE].includes(s);

  const campaignStatus = s === STEPS.ACTIVE ? 'active' : 'draft';

  return (
    <aside className="rail">
      <div className="rail-header">
        <div className="rail-title">
          Campaign
          <StatusPill status={campaignStatus}>{campaignStatus === 'active' ? 'Running' : 'Draft'}</StatusPill>
        </div>
        <button className="btn ghost sm"><I.Gear style={{width:13, height:13}} /></button>
      </div>

      <div className="rail-scroll">
        {/* 1. Brand assets card */}
        <div className="panel-card" data-locked={!brandReady || undefined} data-done={brandReady || undefined}
             data-clickable={brandReady || undefined}
             onClick={brandReady ? onOpenAssets : undefined}>
          <div className="panel-head">
            <div className="left">
              <div className="step-num">{brandReady ? <I.Check /> : 1}</div>
              <div>
                <div className="title">Brand assets</div>
                <div className="meta">{brandReady ? 'Pulled from ' + state.brand.url : 'Waiting for brand info'}</div>
              </div>
            </div>
            {brandReady && <I.Arrow style={{color:'var(--fg-subtle)'}} />}
          </div>
          {brandReady && (
            <div className="panel-body">
              <div className="brand-row">
                <div className="brand-logo-sq" style={{background: BRAND.logoBg}}>{BRAND.logoLetter}</div>
                <div>
                  <div className="name">{state.brand.name}</div>
                  <div className="url">{state.brand.url}</div>
                </div>
              </div>
              <div className="tiny muted" style={{marginBottom:6}}>Assets · 6 images, 2 videos, brand palette</div>
              <div className="asset-grid">
                {BRAND.images.slice(0, 4).map((im, i) => (
                  <ImagePlaceholder key={i} hue={im.hue} video={im.type==='video'} />
                ))}
              </div>
            </div>
          )}
          {!brandReady && (
            <div className="panel-body" style={{color:'var(--fg-subtle)', fontSize:12, display:'flex', alignItems:'center', gap:6}}>
              <I.Lock /> Starts when you share your brand
            </div>
          )}
        </div>

        {/* 2. Budget & control — clickable to edit */}
        <div className="panel-card" data-locked={!budgetReady || undefined} data-done={budgetReady || undefined}
             data-editable={budgetReady || undefined}
             onClick={budgetReady ? () => openStepModal('budget') : undefined}>
          <div className="panel-head">
            <div className="left">
              <div className="step-num">{budgetReady ? <I.Check /> : 2}</div>
              <div>
                <div className="title">Budget & control</div>
                <div className="meta">{budgetReady ? 'Tap to edit' : 'Pick channels & control mode'}</div>
              </div>
            </div>
            {budgetReady && <I.Edit style={{color:'var(--fg-subtle)'}} />}
          </div>
          {budgetReady && (
            <div className="panel-body">
              <div className="stack-sm">
                {state.plans.map(pid => {
                  const p = PLANS.find(x => x.id === pid);
                  const Icon = I[p.icon];
                  return (
                    <div key={p.id} style={{display:'flex', alignItems:'center', gap:10, padding:'8px 10px', background:'var(--bg-sunken)', borderRadius:'var(--radius-sm)', border:'1px solid var(--border)'}}>
                      <Icon />
                      <div style={{flex:1}}>
                        <div style={{fontSize:13, fontWeight:500}}>{p.name}</div>
                        <div className="mono tiny subtle">{p.price} · {p.priceNote}</div>
                      </div>
                    </div>
                  );
                })}
                <div style={{display:'flex', alignItems:'center', gap:8, padding:'8px 10px', background:'var(--bg-sunken)', borderRadius:'var(--radius-sm)', border:'1px solid var(--border)'}}>
                  <div style={{width:24, height:24, borderRadius:6, background:'var(--accent-soft)', display:'grid', placeItems:'center', color:'var(--accent-fg)'}}>
                    <I.Gear style={{width:12, height:12}} />
                  </div>
                  <div style={{flex:1}}>
                    <div style={{fontSize:12.5, fontWeight:500}}>{CONTROL_MODES.find(m=>m.id===state.mode).name}</div>
                    <div className="tiny subtle">Customize per action</div>
                  </div>
                </div>
              </div>
            </div>
          )}
          {!budgetReady && (
            <div className="panel-body" style={{color:'var(--fg-subtle)', fontSize:12, display:'flex', alignItems:'center', gap:6}}>
              <I.Lock /> Unlocks after brand
            </div>
          )}
        </div>

        {/* 3. Marketing plan — each check row is clickable */}
        <div className="panel-card" data-locked={!planStarted || undefined} data-done={contentDone || undefined}>
          <div className="panel-head">
            <div className="left">
              <div className="step-num">{contentDone ? <I.Check /> : 3}</div>
              <div>
                <div className="title">Marketing plan</div>
                <div className="meta">
                  {contentDone ? 'Tap a step to edit' :
                   planStarted ? `Building — ${[subsDone, staffDone, calDone, contentDone].filter(Boolean).length}/4 steps` :
                   'Unlocks after control mode'}
                </div>
              </div>
            </div>
          </div>
          {planStarted && (
            <div className="panel-body">
              <div className="checklist">
                <div className="check-row" data-checked={subsDone} onClick={() => subsDone && openStepModal('subs')}>
                  <div className="check-box">{subsDone && <I.Check />}</div>
                  <span className="label">Target subreddits</span>
                  <span className="count">{state.selectedSubs.length}</span>
                </div>
                <div className="check-row" data-checked={staffDone} onClick={() => staffDone && openStepModal('staff')}>
                  <div className="check-box">{staffDone && <I.Check />}</div>
                  <span className="label">Operator staff</span>
                  <span className="count">6</span>
                </div>
                <div className="check-row" data-checked={calDone} onClick={() => calDone && openStepModal('calendar')}>
                  <div className="check-box">{calDone && <I.Check />}</div>
                  <span className="label">30-day calendar</span>
                  <span className="count">30d</span>
                </div>
                <div className="check-row" data-checked={contentDone} onClick={() => contentDone && openStepModal('content')}>
                  <div className="check-box">{contentDone && <I.Check />}</div>
                  <span className="label">Content drafts</span>
                  <span className="count">{contentDone ? '18' : '—'}</span>
                </div>
              </div>
            </div>
          )}
          {!planStarted && (
            <div className="panel-body" style={{color:'var(--fg-subtle)', fontSize:12, display:'flex', alignItems:'center', gap:6}}>
              <I.Lock /> Unlocks after control mode
            </div>
          )}
        </div>

        {/* Launch card */}
        {contentDone && (
          <button className="btn accent lg" style={{width:'100%', padding:'12px', justifyContent:'center'}}
            disabled={s === STEPS.ACTIVE}>
            {s === STEPS.ACTIVE ? <><I.Play /> Campaign running</> : <>Confirm & launch <I.Arrow /></>}
          </button>
        )}
      </div>
    </aside>
  );
}

Object.assign(window, { CampaignPanel });