/* screen-brand-wizards.jsx — Brief wizard (4 steps) + Campaign new */
/* global React, AppSidebar, AppTopbar, useRouter, useT, Counter, Pill, Icon, Avatar, MatchCircle */

function ScreenBrandBriefNew() {
  const { t } = useT();
  const { go } = useRouter();
  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({
    title: 'New product launch',
    product: '',
    goal: 'awareness',
    platforms: ['tiktok'],
    age: [18, 34],
    gender: 'female',
    geo: ['HCM'],
    categories: ['skincare'],
    budget: 10000,
    startDate: '2026-05-20',
    endDate: '2026-06-17',
    kolCount: 5,
  });

  const steps = [t('wizard.step1'), t('wizard.step2'), t('wizard.step3'), t('wizard.step4')];

  const next = () => step < 3 ? setStep(step + 1) : go('brand-briefs');
  const prev = () => step > 0 ? setStep(step - 1) : go('brand-briefs');

  return (
    <div className="app-shell">
      <AppSidebar portal="brand" active="brand-briefs" />
      <main className="main" style={{ paddingBottom: 120 }}>
        <AppTopbar showNewBrief={false} />

        <div className="row items-center gap-6 muted mb-4" style={{ fontSize: 12 }}>
          <a onClick={() => go('brand-briefs')} style={{ cursor: 'pointer' }}>{t('brand.briefs.title')}</a>
          <span>·</span>
          <span className="bold" style={{ color: 'var(--ink)' }}>{t('brand.briefs.new')}</span>
        </div>

        <h1 className="page-title">{t('brand.briefs.new')}</h1>
        <div className="page-subtitle">Tell us your goal — AI will turn it into a shortlist in 6 seconds.</div>

        {/* Stepper */}
        <div className="row items-center" style={{ marginTop: 32, marginBottom: 32, maxWidth: 720 }}>
          {steps.map((s, i) => (
            <React.Fragment key={i}>
              <div className="row items-center gap-8" style={{ flex: 'none' }}>
                <div style={{
                  width: 32, height: 32, borderRadius: 999,
                  background: i < step ? 'var(--mint)' : i === step ? 'var(--ink)' : 'var(--bg-soft)',
                  color: i <= step ? (i < step ? 'var(--ink)' : 'white') : 'var(--ink-soft)',
                  display: 'grid', placeItems: 'center',
                  fontWeight: 800, fontSize: 13, fontFamily: 'Space Grotesk',
                  transition: 'background .3s, color .3s'
                }}>
                  {i < step ? Icon.check : i + 1}
                </div>
                <span className="bold" style={{
                  fontSize: 13,
                  color: i === step ? 'var(--ink)' : 'var(--ink-soft)'
                }}>{s}</span>
              </div>
              {i < steps.length - 1 && (
                <div style={{
                  flex: 1, height: 2, margin: '0 14px',
                  background: 'var(--bg-soft)', borderRadius: 999, position: 'relative', overflow: 'hidden'
                }}>
                  <div style={{
                    position: 'absolute', inset: 0,
                    background: 'var(--mint)',
                    transformOrigin: 'left',
                    transform: `scaleX(${i < step ? 1 : 0})`,
                    transition: 'transform .4s ease'
                  }} />
                </div>
              )}
            </React.Fragment>
          ))}
        </div>

        {/* Step content */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 18, alignItems: 'flex-start' }}>
          <div className="card-elevated" style={{ padding: 28 }}>
            {step === 0 && <StepBasics data={data} setData={setData} />}
            {step === 1 && <StepRequirements data={data} setData={setData} />}
            {step === 2 && <StepBudget data={data} setData={setData} />}
            {step === 3 && <StepReview data={data} />}
          </div>
          <WizardPreview data={data} step={step} />
        </div>

        {/* Sticky footer */}
        <div style={{
          position: 'fixed', bottom: 0, left: 264, right: 0,
          background: 'rgba(255,255,255,0.92)',
          backdropFilter: 'blur(12px)',
          borderTop: '1px solid var(--line)',
          padding: '14px 32px',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          zIndex: 20
        }}>
          <button className="btn btn-ghost" onClick={prev}>{step === 0 ? t('common.cancel') : '← ' + t('common.back')}</button>
          <div className="muted" style={{ fontSize: 12 }}>Step {step + 1} of {steps.length}</div>
          <button className="btn btn-primary" onClick={next}>
            {step === 3 ? <>{t('common.publish')} {Icon.spark}</> : <>{t('common.next')} {Icon.arrow}</>}
          </button>
        </div>
      </main>
    </div>
  );
}

function StepBasics({ data, setData }) {
  return (
    <div>
      <div className="title-md mb-2">Tell us about your campaign</div>
      <div className="muted mb-6" style={{ fontSize: 13 }}>The more specific you are, the better the AI shortlist gets.</div>

      <label className="label">Campaign title</label>
      <input className="input" value={data.title} onChange={e => setData({ ...data, title: e.target.value })} placeholder="e.g. Vitamin C Skin Glow · Q2 Launch" />

      <label className="label mt-4" style={{ marginTop: 18 }}>Product or service</label>
      <input className="input" value={data.product} onChange={e => setData({ ...data, product: e.target.value })} placeholder="e.g. SkinDream Serum 10% · 30ml" />

      <label className="label" style={{ marginTop: 18 }}>What&rsquo;s the main goal?</label>
      <div className="row gap-8" style={{ flexWrap: 'wrap', marginTop: 6 }}>
        {[
          { v: 'awareness', l: 'Awareness', e: '👀', d: 'Reach new audiences' },
          { v: 'consideration', l: 'Consideration', e: '🤔', d: 'Drive interest' },
          { v: 'conversion', l: 'Conversion', e: '💸', d: 'Sales & sign-ups' },
          { v: 'loyalty', l: 'Loyalty', e: '❤️', d: 'Repeat & advocacy' },
        ].map(g => (
          <button key={g.v} onClick={() => setData({ ...data, goal: g.v })} style={{
            flex: '1 1 calc(50% - 4px)', minWidth: 180,
            padding: 14,
            border: '2px solid ' + (data.goal === g.v ? 'var(--ink)' : 'var(--line)'),
            background: data.goal === g.v ? 'var(--ink)' : 'white',
            color: data.goal === g.v ? 'white' : 'var(--ink)',
            borderRadius: 14, textAlign: 'left',
            display: 'flex', alignItems: 'center', gap: 12,
            fontFamily: 'inherit', cursor: 'pointer', transition: 'all .2s'
          }}>
            <span style={{ fontSize: 24 }}>{g.e}</span>
            <div>
              <div className="bold" style={{ fontSize: 13 }}>{g.l}</div>
              <div style={{ fontSize: 11, opacity: 0.7 }}>{g.d}</div>
            </div>
          </button>
        ))}
      </div>
    </div>
  );
}

function StepRequirements({ data, setData }) {
  const togglePlatform = (p) => {
    const has = data.platforms.includes(p);
    setData({ ...data, platforms: has ? data.platforms.filter(x => x !== p) : [...data.platforms, p] });
  };
  const toggleCat = (c) => {
    const has = data.categories.includes(c);
    setData({ ...data, categories: has ? data.categories.filter(x => x !== c) : [...data.categories, c] });
  };
  return (
    <div>
      <div className="title-md mb-2">Who&rsquo;s the audience?</div>
      <div className="muted mb-6" style={{ fontSize: 13 }}>Pick platforms, demographics &amp; categories — AI does the rest.</div>

      <label className="label">Platforms</label>
      <div className="row gap-8" style={{ marginTop: 6 }}>
        {[
          { v: 'tiktok', l: 'TikTok', icon: Icon.tiktok, c: '#002B50' },
          { v: 'instagram', l: 'Instagram', icon: Icon.instagram, c: '#FF6FA3' },
          { v: 'youtube', l: 'YouTube', icon: Icon.youtube, c: '#FF4444' },
        ].map(p => {
          const sel = data.platforms.includes(p.v);
          return (
            <button key={p.v} onClick={() => togglePlatform(p.v)} style={{
              flex: 1, padding: 14,
              border: '2px solid ' + (sel ? p.c : 'var(--line)'),
              background: sel ? p.c : 'white',
              color: sel ? 'white' : 'var(--ink)',
              borderRadius: 14,
              display: 'flex', alignItems: 'center', gap: 10,
              fontFamily: 'inherit', cursor: 'pointer'
            }}>
              {p.icon}
              <span className="bold" style={{ fontSize: 13 }}>{p.l}</span>
              {sel && <span style={{ marginLeft: 'auto' }}>{Icon.check}</span>}
            </button>
          );
        })}
      </div>

      <label className="label" style={{ marginTop: 20 }}>Age range</label>
      <div style={{ padding: '24px 14px 16px', background: 'var(--bg-soft)', borderRadius: 14, position: 'relative' }}>
        <div style={{ height: 6, background: 'white', borderRadius: 999, position: 'relative' }}>
          <div style={{
            position: 'absolute',
            left: ((data.age[0] - 13) / (65 - 13) * 100) + '%',
            right: (100 - (data.age[1] - 13) / (65 - 13) * 100) + '%',
            top: 0, bottom: 0, background: 'linear-gradient(90deg, var(--cyan), var(--indigo))', borderRadius: 999
          }} />
          {[0, 1].map(i => (
            <div key={i} style={{
              position: 'absolute',
              left: `calc(${(data.age[i] - 13) / (65 - 13) * 100}% - 10px)`,
              top: -7,
              width: 20, height: 20, borderRadius: 999,
              background: 'white',
              border: '3px solid var(--ink)',
              cursor: 'grab'
            }} />
          ))}
        </div>
        <div className="row items-center justify-between mt-3" style={{ fontSize: 11, color: 'var(--ink-soft)' }}>
          <span>13</span>
          <span className="font-display bold tabular" style={{ fontSize: 18, color: 'var(--ink)' }}>{data.age[0]}–{data.age[1]} yrs</span>
          <span>65+</span>
        </div>
      </div>

      <label className="label" style={{ marginTop: 20 }}>Gender skew</label>
      <div className="row gap-8" style={{ marginTop: 6 }}>
        {[
          { v: 'female', l: 'Female-leaning' },
          { v: 'male', l: 'Male-leaning' },
          { v: 'balanced', l: 'Balanced' },
        ].map(g => (
          <button key={g.v} onClick={() => setData({ ...data, gender: g.v })} style={{
            flex: 1, padding: '10px 14px',
            borderRadius: 999,
            border: '1.5px solid ' + (data.gender === g.v ? 'var(--ink)' : 'var(--line)'),
            background: data.gender === g.v ? 'var(--ink)' : 'white',
            color: data.gender === g.v ? 'white' : 'var(--ink)',
            fontSize: 12, fontWeight: 700, fontFamily: 'inherit', cursor: 'pointer'
          }}>{g.l}</button>
        ))}
      </div>

      <label className="label" style={{ marginTop: 20 }}>Categories</label>
      <div className="row gap-6 mt-2" style={{ flexWrap: 'wrap' }}>
        {['skincare', 'beauty', 'fashion', 'lifestyle', 'wellness', 'food', 'tech', 'fitness', 'parenting', 'travel'].map(c => {
          const sel = data.categories.includes(c);
          return (
            <button key={c} onClick={() => toggleCat(c)} style={{
              padding: '8px 14px',
              borderRadius: 999,
              border: '1.5px solid ' + (sel ? 'var(--ink)' : 'var(--line)'),
              background: sel ? 'var(--ink)' : 'white',
              color: sel ? 'white' : 'var(--ink)',
              fontSize: 12, fontWeight: 700, fontFamily: 'inherit', cursor: 'pointer'
            }}>{c}</button>
          );
        })}
      </div>
    </div>
  );
}

function StepBudget({ data, setData }) {
  return (
    <div>
      <div className="title-md mb-2">{t_alias('Budget & timeline')}</div>
      <div className="muted mb-6" style={{ fontSize: 13 }}>Set spend cap and campaign window — AI will recommend KOL mix.</div>

      <label className="label">Total budget cap</label>
      <div style={{ padding: '20px 18px', background: 'var(--bg-soft)', borderRadius: 14 }}>
        <div className="row items-center justify-between mb-2">
          <span className="cap-label">$1K</span>
          <span className="font-display bold tabular" style={{ fontSize: 36, color: 'var(--ink)' }}>${data.budget.toLocaleString()}</span>
          <span className="cap-label">$50K</span>
        </div>
        <input type="range" min="1000" max="50000" step="500"
          value={data.budget}
          onChange={(e) => setData({ ...data, budget: +e.target.value })}
          style={{ width: '100%', accentColor: 'var(--cyan)', height: 4 }} />

        <div className="row items-center justify-between mt-3" style={{ fontSize: 12 }}>
          <span className="muted">Expected KOL count:</span>
          <span className="bold tabular">{Math.round(data.budget / 2200)} – {Math.round(data.budget / 1200)}</span>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginTop: 18 }}>
        <div>
          <label className="label">Start date</label>
          <input type="date" className="input" value={data.startDate} onChange={(e) => setData({ ...data, startDate: e.target.value })} />
        </div>
        <div>
          <label className="label">End date</label>
          <input type="date" className="input" value={data.endDate} onChange={(e) => setData({ ...data, endDate: e.target.value })} />
        </div>
      </div>

      <label className="label" style={{ marginTop: 18 }}>Number of KOLs</label>
      <div className="row gap-8" style={{ marginTop: 6 }}>
        {[3, 5, 8, 12, 20].map(n => (
          <button key={n} onClick={() => setData({ ...data, kolCount: n })} style={{
            flex: 1, padding: 12,
            borderRadius: 12,
            border: '1.5px solid ' + (data.kolCount === n ? 'var(--ink)' : 'var(--line)'),
            background: data.kolCount === n ? 'var(--ink)' : 'white',
            color: data.kolCount === n ? 'white' : 'var(--ink)',
            fontFamily: 'inherit', cursor: 'pointer'
          }}>
            <div className="font-display bold tabular" style={{ fontSize: 22 }}>{n}</div>
            <div style={{ fontSize: 10, opacity: 0.7 }}>creators</div>
          </button>
        ))}
      </div>
    </div>
  );
}

function t_alias(s) { return s; } // tiny helper to make string look like a t() call

function StepReview({ data }) {
  return (
    <div>
      <div className="title-md mb-2">Look good?</div>
      <div className="muted mb-6" style={{ fontSize: 13 }}>One click publishes the brief and runs AI shortlist generation.</div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {[
          { l: 'Campaign title', v: data.title },
          { l: 'Goal', v: data.goal, pill: true, color: 'cyan' },
          { l: 'Platforms', v: data.platforms.join(', ') },
          { l: 'Audience', v: `${data.gender}, ${data.age[0]}–${data.age[1]} yrs, ${data.categories.join(' + ')}` },
          { l: 'Budget', v: '$' + data.budget.toLocaleString(), big: true },
          { l: 'Timeline', v: `${data.startDate} → ${data.endDate}` },
          { l: 'KOL count', v: data.kolCount + ' creators' },
        ].map((r, i) => (
          <div key={i} className="row items-center justify-between" style={{
            padding: '14px 18px',
            background: r.big ? 'var(--ink)' : 'var(--bg-soft)',
            color: r.big ? 'white' : 'var(--ink)',
            borderRadius: 14
          }}>
            <div className="cap-label" style={{ color: r.big ? 'rgba(255,255,255,0.6)' : 'var(--ink-soft)' }}>{r.l}</div>
            {r.pill
              ? <Pill variant={r.color}>{r.v}</Pill>
              : <div className={'bold ' + (r.big ? 'font-display tabular' : '')} style={{ fontSize: r.big ? 26 : 13 }}>{r.v}</div>}
          </div>
        ))}
      </div>

      <div className="card-elevated mt-6" style={{
        padding: 20,
        background: 'linear-gradient(135deg, #002B50, #1C1CC9)',
        color: 'white'
      }}>
        <div className="row items-center gap-12">
          <div className="orb orb-sm" />
          <div className="flex-1">
            <div className="cap-label" style={{ color: 'rgba(255,255,255,0.6)' }}>AI estimate</div>
            <div className="title-md" style={{ color: 'white' }}>~{Math.round(data.budget / 2200) * 5}+ matches in 6 seconds</div>
            <div className="muted" style={{ color: 'rgba(255,255,255,0.7)', fontSize: 12, marginTop: 4 }}>
              Based on similar past briefs and your audience parameters.
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function WizardPreview({ data, step }) {
  return (
    <div style={{ position: 'sticky', top: 24 }}>
      <div className="cap-label mb-2">Live preview</div>
      <div className="card-elevated" style={{ overflow: 'hidden', padding: 0 }}>
        <div style={{ height: 4, background: 'linear-gradient(90deg, #009CFF, #1C1CC9, #FF6FA3, #FEE960)' }} />
        <div style={{ padding: 20 }}>
          <div className="row items-center gap-8 mb-2">
            <Pill variant="lav">{data.goal}</Pill>
            <Pill variant="mint">{data.platforms.join(' · ')}</Pill>
          </div>
          <div className="font-display bold" style={{ fontSize: 18, letterSpacing: '-0.015em' }}>{data.title}</div>
          <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>{data.product || 'Product/service'}</div>
          <div style={{ height: 1, background: 'var(--line)', margin: '14px 0' }} />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            <div>
              <div className="cap-label" style={{ fontSize: 9 }}>Audience</div>
              <div className="bold" style={{ fontSize: 12 }}>{data.gender} · {data.age[0]}–{data.age[1]}</div>
            </div>
            <div>
              <div className="cap-label" style={{ fontSize: 9 }}>Budget</div>
              <div className="bold tabular" style={{ fontSize: 12 }}>${(data.budget / 1000).toFixed(0)}K</div>
            </div>
            <div>
              <div className="cap-label" style={{ fontSize: 9 }}>KOLs</div>
              <div className="bold tabular" style={{ fontSize: 12 }}>{data.kolCount}</div>
            </div>
            <div>
              <div className="cap-label" style={{ fontSize: 9 }}>Duration</div>
              <div className="bold" style={{ fontSize: 12 }}>28 days</div>
            </div>
          </div>
        </div>

        {/* Progress indicator */}
        <div style={{
          padding: 14, background: 'var(--bg-soft)',
          borderTop: '1px solid var(--line)'
        }}>
          <div className="cap-label">Completion</div>
          <div style={{ height: 4, borderRadius: 999, background: 'var(--line)', overflow: 'hidden', marginTop: 6 }}>
            <div style={{
              height: '100%', width: ((step + 1) / 4 * 100) + '%',
              background: 'var(--mint-deep)',
              borderRadius: 999,
              transition: 'width .4s'
            }} />
          </div>
          <div className="bold tabular mt-1" style={{ fontSize: 11 }}>{((step + 1) / 4 * 100).toFixed(0)}%</div>
        </div>
      </div>
    </div>
  );
}

// ── Campaign new (lightweight wizard, 3 steps) ──
function ScreenBrandCampaignNew() {
  const { t } = useT();
  const { go } = useRouter();
  const [step, setStep] = React.useState(0);
  const steps = ['Pick brief', 'Choose creators', 'Confirm & launch'];

  return (
    <div className="app-shell">
      <AppSidebar portal="brand" active="brand-campaigns" />
      <main className="main">
        <AppTopbar showNewBrief={false} />
        <div className="row items-center gap-6 muted mb-4" style={{ fontSize: 12 }}>
          <a onClick={() => go('brand-campaigns')} style={{ cursor: 'pointer' }}>{t('brand.campaigns.title')}</a>
          <span>·</span>
          <span className="bold" style={{ color: 'var(--ink)' }}>New campaign</span>
        </div>
        <h1 className="page-title">Launch a campaign</h1>
        <div className="page-subtitle">Pick a brief, lock in creators, set the timeline.</div>

        {/* Stepper */}
        <div className="row items-center mt-6 mb-6" style={{ maxWidth: 600 }}>
          {steps.map((s, i) => (
            <React.Fragment key={i}>
              <div className="row items-center gap-8">
                <div style={{
                  width: 30, height: 30, borderRadius: 999,
                  background: i < step ? 'var(--mint)' : i === step ? 'var(--ink)' : 'var(--bg-soft)',
                  color: i <= step ? (i < step ? 'var(--ink)' : 'white') : 'var(--ink-soft)',
                  display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 12
                }}>{i < step ? Icon.check : i + 1}</div>
                <span className="bold" style={{ fontSize: 13, color: i === step ? 'var(--ink)' : 'var(--ink-soft)' }}>{s}</span>
              </div>
              {i < 2 && <div style={{ flex: 1, height: 2, margin: '0 14px', background: i < step ? 'var(--mint)' : 'var(--bg-soft)' }} />}
            </React.Fragment>
          ))}
        </div>

        <div className="card-elevated" style={{ padding: 28 }}>
          {step === 0 && <CampaignStepBrief onPick={() => setStep(1)} />}
          {step === 1 && <CampaignStepCreators onContinue={() => setStep(2)} />}
          {step === 2 && <CampaignStepConfirm onLaunch={() => go('brand-campaigns')} />}
        </div>

        <div className="row justify-between mt-6">
          <button className="btn btn-ghost" onClick={() => step === 0 ? go('brand-campaigns') : setStep(step - 1)}>
            ← {step === 0 ? t('common.cancel') : t('common.back')}
          </button>
          {step < 2 && <button className="btn btn-primary" onClick={() => setStep(step + 1)}>{t('common.continue')} {Icon.arrow}</button>}
        </div>
      </main>
    </div>
  );
}

function CampaignStepBrief({ onPick }) {
  const briefs = [
    { id: 'B-2419', title: 'Vitamin C Skin Glow', kols: 24, budget: '$15K' },
    { id: 'B-2418', title: 'Tet 2026 Fashion Drop', kols: 18, budget: '$8K' },
    { id: 'B-2416', title: 'Sleep wellness pillow', kols: 32, budget: '$22K' },
  ];
  return (
    <div>
      <div className="title-md mb-2">Pick a published brief</div>
      <div className="muted mb-4" style={{ fontSize: 13 }}>Or skip to add creators manually.</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {briefs.map((b, i) => (
          <button key={b.id} onClick={onPick} className="row items-center gap-16" style={{
            padding: 14,
            border: '1px solid var(--line)',
            background: 'white', borderRadius: 14,
            fontFamily: 'inherit', textAlign: 'left', cursor: 'pointer',
            transition: 'border-color .2s, box-shadow .2s'
          }}>
            <div style={{
              width: 40, height: 40, borderRadius: 10,
              background: ['var(--cyan)', 'var(--pink-hot)', 'var(--mint-deep)'][i],
              color: 'white', display: 'grid', placeItems: 'center',
              fontFamily: 'Space Grotesk', fontWeight: 800
            }}>{b.id.slice(-2)}</div>
            <div className="flex-1">
              <div className="bold">{b.title}</div>
              <div className="muted" style={{ fontSize: 12 }}>{b.id} · {b.kols} AI matches · {b.budget}</div>
            </div>
            {Icon.arrow}
          </button>
        ))}
      </div>
    </div>
  );
}

function CampaignStepCreators({ onContinue }) {
  const list = [
    { n: 'Linh Châu', m: 94, sel: true },
    { n: 'Mai Vy', m: 88, sel: true },
    { n: 'Hà Giang', m: 84, sel: true },
    { n: 'Phương Anh', m: 78, sel: false },
    { n: 'Thảo Nhi', m: 75, sel: false },
  ];
  return (
    <div>
      <div className="title-md mb-2">Choose your creator roster</div>
      <div className="muted mb-4" style={{ fontSize: 13 }}>Top 5 AI matches pre-selected. Tap to toggle.</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {list.map((c, i) => (
          <div key={i} className="row items-center gap-12" style={{
            padding: 12,
            background: c.sel ? 'rgba(0,156,255,0.06)' : 'var(--bg-soft)',
            border: '2px solid ' + (c.sel ? 'var(--cyan)' : 'transparent'),
            borderRadius: 14
          }}>
            <input type="checkbox" defaultChecked={c.sel} style={{ width: 18, height: 18, accentColor: 'var(--cyan)' }} />
            <Avatar name={c.n} size={40} />
            <div className="flex-1">
              <div className="bold" style={{ fontSize: 13 }}>{c.n}</div>
              <div className="muted" style={{ fontSize: 11 }}>Micro · 482K · 6.2% ER</div>
            </div>
            <MatchCircle score={c.m} size={42} />
          </div>
        ))}
      </div>
    </div>
  );
}

function CampaignStepConfirm({ onLaunch }) {
  return (
    <div>
      <div className="title-md mb-2">Final check</div>
      <div className="muted mb-4" style={{ fontSize: 13 }}>Click launch to publish, send invites, and begin tracking.</div>
      <div style={{
        background: 'linear-gradient(135deg, #79FEE7, #009CFF)',
        color: 'var(--ink)', padding: 28, borderRadius: 18,
        position: 'relative', overflow: 'hidden'
      }}>
        <div className="font-display bold" style={{ fontSize: 28, letterSpacing: '-0.025em' }}>Vitamin C Skin Glow</div>
        <div style={{ fontSize: 14, marginTop: 4 }}>3 creators · $15K · 28 days · TikTok + IG</div>
        <div className="row gap-8 mt-6">
          <button className="btn btn-primary" onClick={onLaunch}>{Icon.spark} Launch campaign</button>
          <button className="btn btn-ghost">Save as draft</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenBrandBriefNew, ScreenBrandCampaignNew });