// ScrollJob v2 — Admin extras: Feature flags · A/B experiments · Email template builder
// Uses AdminFrame from v2-admin.jsx (already on window).

// Each Babel script has its own scope — pull admin helpers from window.
const AdminFrameRef = () => window.AdminFrame;

// ─── 1) FEATURE FLAGS ────────────────────────────────────────────────────
function V2AdminFlagsScreen() {
  const flags = [
    { key: 'scrolljob/new_design/v2_homepage', desc: 'Show v2 homepage to users',
      values: { uk: true, us: false, de: false, fr: false, pl: false, nl: false, be: false, bg: false, rs: false, es: false, it: false, in: false },
      changedBy: 'Olha D.', changedAt: '2h ago' },
    { key: 'scrolljob/swipe/show_match_pct',     desc: 'Render match % on swipe cards',
      values: { uk: true, us: true, de: true, fr: true, pl: true, nl: true, be: true, bg: true, rs: true, es: true, it: true, in: true },
      changedBy: 'Mariia K.', changedAt: '1d ago' },
    { key: 'jobhub/employer/featured_upsell',    desc: 'Show Featured boost upsell during post flow',
      values: { uk: true, us: true, de: false, fr: false, pl: false, nl: false, be: false, bg: false, rs: false, es: false, it: false, in: false },
      changedBy: 'Ihor G.', changedAt: '3d ago' },
    { key: 'jobhub/seeker/one_click_apply',      desc: 'Surface 1-click apply when profile complete',
      values: { uk: true, us: false, de: false, fr: false, pl: false, nl: false, be: false, bg: false, rs: false, es: false, it: false, in: false },
      changedBy: 'Olha D.', changedAt: '5d ago' },
    { key: 'jobhub/email/weekly_digest_v2',      desc: 'New template for weekly digest',
      values: { uk: false, us: false, de: false, fr: false, pl: false, nl: false, be: false, bg: false, rs: false, es: false, it: false, in: false },
      changedBy: 'Mariia K.', changedAt: '6d ago' },
  ];
  const regions = ['uk', 'us', 'de', 'fr', 'pl', 'nl', 'be', 'bg', 'rs', 'es', 'it', 'in'];
  const AF = AdminFrameRef();
  return (
    <AF active="settings" breadcrumbs={['Admin', 'Settings', 'Feature flags']}>
      <header style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 22, flexWrap: 'wrap', gap: 12,
      }}>
        <div>
          <h1 style={{ margin: '0 0 4px', fontSize: 22, fontWeight: 700, color: V2.ink, letterSpacing: '-0.02em' }}>
            Feature flags
          </h1>
          <p style={{ margin: 0, fontSize: 13.5, color: V2.muted }}>
            42 flags · per-region values · changes audit-logged · ⌘K to search
          </p>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <V2Button variant="secondary" size="sm">All flags JSON</V2Button>
          <V2Button variant="primary" size="sm" icon="plus">New flag</V2Button>
        </div>
      </header>

      {/* Search + filter */}
      <div style={{
        background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rMd,
        padding: 12, marginBottom: 14, display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap',
      }}>
        <div style={{ position: 'relative', flex: 1, minWidth: 320 }}>
          <Icon name="search" size={15} color={V2.muted}
                style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)' }} />
          <input placeholder="Search by key (e.g. scrolljob/new_design/*)" style={{
            width: '100%', padding: '8px 12px 8px 34px',
            background: V2.bgAlt, border: `1px solid ${V2.line}`, borderRadius: 8,
            fontSize: 13, color: V2.ink, fontFamily: V2.font, outline: 'none', boxSizing: 'border-box',
          }} />
        </div>
        {[['scrolljob/*', false], ['jobhub/*', false], ['Active anywhere', true], ['Off everywhere', false]].map(([t, on]) => (
          <button key={t} style={{
            padding: '7px 12px', borderRadius: 999, fontSize: 12.5, fontWeight: 600,
            border: `1px solid ${on ? V2.primary : V2.line}`,
            background: on ? V2.primarySoft : '#fff',
            color: on ? V2.primaryInk : V2.text,
            cursor: 'pointer', fontFamily: V2.font,
          }}>{t}</button>
        ))}
      </div>

      {/* Flag table */}
      <div style={{
        background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rMd, overflow: 'hidden',
      }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
          <thead>
            <tr style={{ background: V2.bgAlt, borderBottom: `1px solid ${V2.line}` }}>
              <th style={tHead(280, 'left')}>Flag</th>
              {regions.map((r) => (
                <th key={r} style={tHead(40, 'center')}>{r.toUpperCase()}</th>
              ))}
              <th style={tHead(140, 'left')}>Last changed</th>
            </tr>
          </thead>
          <tbody>
            {flags.map((f, i) => (
              <tr key={f.key} style={{
                borderBottom: i < flags.length - 1 ? `1px solid ${V2.lineSoft}` : 'none',
                background: i === 0 ? V2.primarySoft + '40' : '#fff',
              }}>
                <td style={{ padding: '14px', verticalAlign: 'top' }}>
                  <code style={{ fontFamily: V2.fontMono, fontSize: 12.5, color: V2.primary, fontWeight: 600 }}>{f.key}</code>
                  <div style={{ fontSize: 12, color: V2.muted, marginTop: 3 }}>{f.desc}</div>
                </td>
                {regions.map((r) => {
                  const v = f.values[r];
                  return (
                    <td key={r} style={{ padding: '14px 4px', textAlign: 'center', verticalAlign: 'top' }}>
                      <span style={{
                        display: 'inline-block', width: 22, height: 14, borderRadius: 999, position: 'relative',
                        background: v ? V2.primary : V2.lineStrong, cursor: 'pointer',
                      }}>
                        <span style={{
                          position: 'absolute', top: 1, left: v ? 9 : 1,
                          width: 12, height: 12, borderRadius: '50%', background: '#fff',
                          transition: 'left .15s ease',
                        }} />
                      </span>
                    </td>
                  );
                })}
                <td style={{ padding: '14px', verticalAlign: 'top', fontSize: 12.5, color: V2.muted }}>
                  {f.changedBy}
                  <div style={{ fontSize: 11.5, color: V2.faint, marginTop: 2 }}>{f.changedAt}</div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Side sheet preview — for the first row */}
      <div style={{
        marginTop: 22, background: '#fff', border: `1px solid ${V2.primaryRing}`,
        borderRadius: V2.rLg, padding: 22, position: 'relative',
        boxShadow: V2.shadowMd,
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 16 }}>
          <div>
            <h2 style={{ margin: '0 0 4px', fontSize: 16, fontWeight: 700, color: V2.ink, letterSpacing: '-0.01em', fontFamily: V2.fontMono }}>
              scrolljob/new_design/v2_homepage
            </h2>
            <p style={{ margin: 0, fontSize: 13, color: V2.muted }}>
              Show v2 homepage to users. Boolean flag, default false.
            </p>
          </div>
          <V2Button variant="primary" size="sm" iconRight="arrow-right">Flip flag…</V2Button>
        </div>
        <h3 style={{
          fontSize: 11, fontWeight: 700, color: V2.muted, textTransform: 'uppercase', letterSpacing: '0.08em', margin: '0 0 10px',
        }}>History timeline</h3>
        {[
          ['enabled in UK',  'Olha D.', '2 hours ago',  'Promoted from staging — confidence test'],
          ['created',        'Olha D.', '1 day ago',    'Initial rollout flag for v2 redesign'],
        ].map(([what, who, when, note], i, arr) => (
          <div key={i} style={{
            display: 'flex', gap: 12, padding: '12px 0',
            borderBottom: i < arr.length - 1 ? `1px solid ${V2.lineSoft}` : 'none',
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: V2.primary, marginTop: 6, flexShrink: 0 }} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13.5, color: V2.text }}>
                <strong style={{ color: V2.ink }}>{who}</strong> · {what}
              </div>
              <div style={{ fontSize: 12, color: V2.muted, marginTop: 2 }}>{when} · "{note}"</div>
            </div>
          </div>
        ))}
      </div>
    </AF>
  );
}

function tHead(width, align) {
  return {
    width, textAlign: align,
    padding: '10px 12px', color: V2.muted, fontWeight: 700,
    fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.06em', whiteSpace: 'nowrap',
  };
}

// ─── 2) A/B EXPERIMENTS ─────────────────────────────────────────────────
function V2AdminExperimentsScreen() {
  const experiments = [
    { name: 'Apply form — reduce fields',         status: 'running',   start: '8 days ago', traffic: '50/50', metric: 'Apply rate', delta: '+12.4%', sig: 0.03, exposures: 4218 },
    { name: 'Swipe card — show match %',           status: 'running',   start: '14 days ago', traffic: '50/50', metric: 'Save rate',  delta: '+8.1%',  sig: 0.04, exposures: 12480 },
    { name: 'Job list — vs. infinite scroll',       status: 'concluded', start: '38 days ago', traffic: '50/50', metric: 'Job views',  delta: '+22.0%', sig: 0.01, exposures: 38214 },
    { name: 'Resume builder — guided vs free-form', status: 'concluded', start: '60 days ago', traffic: '33/33/34', metric: 'Completion', delta: '+18.4%', sig: 0.02, exposures: 8214 },
    { name: 'Pricing page — proof strip top vs bottom', status: 'draft',  start: '—',        traffic: 'Not started', metric: 'Click-to-pricing', delta: '—', sig: null, exposures: 0 },
  ];
  const AF = AdminFrameRef();
  return (
    <AF active="settings" breadcrumbs={['Admin', 'Settings', 'A/B experiments']}>
      <header style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 22, flexWrap: 'wrap', gap: 12,
      }}>
        <div>
          <h1 style={{ margin: '0 0 4px', fontSize: 22, fontWeight: 700, color: V2.ink, letterSpacing: '-0.02em' }}>
            Experiments
          </h1>
          <p style={{ margin: 0, fontSize: 13.5, color: V2.muted }}>
            5 total · 2 running · 2 concluded · 1 draft
          </p>
        </div>
        <V2Button variant="primary" size="sm" icon="plus">Create experiment</V2Button>
      </header>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 22 }}>
        <V2Stat label="Running" value="2" icon="play" />
        <V2Stat label="Concluded · 30d" value="6" delta="+12% apply rate avg." icon="check" />
        <V2Stat label="Exposures · 30d" value="148k" sub="Across all experiments" icon="user" />
        <V2Stat label="Promotion rate" value="58%" sub="Variants that beat control" icon="trending" />
      </div>

      <div style={{
        background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rMd, overflow: 'hidden', marginBottom: 22,
      }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
          <thead>
            <tr style={{ background: V2.bgAlt, borderBottom: `1px solid ${V2.line}` }}>
              <th style={tHead(300, 'left')}>Experiment</th>
              <th style={tHead(110, 'left')}>Status</th>
              <th style={tHead(120, 'left')}>Started</th>
              <th style={tHead(110, 'left')}>Traffic</th>
              <th style={tHead(160, 'left')}>Primary metric</th>
              <th style={tHead(110, 'right')}>Delta</th>
              <th style={tHead(120, 'left')}>Significance</th>
            </tr>
          </thead>
          <tbody>
            {experiments.map((e, i) => (
              <tr key={e.name} style={{
                borderBottom: i < experiments.length - 1 ? `1px solid ${V2.lineSoft}` : 'none',
                background: i === 0 ? V2.primarySoft + '40' : '#fff',
              }}>
                <td style={{ padding: '12px 14px', color: V2.ink, fontWeight: 600 }}>{e.name}</td>
                <td style={{ padding: '12px 14px' }}>
                  <V2Badge size="sm" tone={
                    e.status === 'running' ? 'primary' : e.status === 'concluded' ? 'success' : 'neutral'
                  }>{e.status}</V2Badge>
                </td>
                <td style={{ padding: '12px 14px', color: V2.muted, fontSize: 12.5 }}>{e.start}</td>
                <td style={{ padding: '12px 14px', color: V2.text, fontFamily: V2.fontMono, fontSize: 12 }}>{e.traffic}</td>
                <td style={{ padding: '12px 14px', color: V2.text }}>{e.metric}</td>
                <td style={{
                  padding: '12px 14px', textAlign: 'right', fontWeight: 700,
                  color: e.delta === '—' ? V2.muted : e.delta.startsWith('+') ? V2.success : V2.danger,
                }}>{e.delta}</td>
                <td style={{ padding: '12px 14px', fontSize: 12, fontFamily: V2.fontMono, color: V2.text }}>
                  {e.sig != null ? `p=${e.sig}` : '—'}
                  {e.sig != null && e.sig < 0.05 && (
                    <span style={{ marginLeft: 6, padding: '1px 6px', background: V2.successBg, color: V2.success, borderRadius: 4, fontFamily: V2.font, fontSize: 11, fontWeight: 700 }}>SIG</span>
                  )}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Experiment detail — first row expanded */}
      <div style={{
        background: '#fff', border: `1px solid ${V2.primaryRing}`,
        borderRadius: V2.rLg, padding: 22, boxShadow: V2.shadowMd,
      }}>
        <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 18, gap: 14, flexWrap: 'wrap' }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
              <h2 style={{ margin: 0, fontSize: 17, fontWeight: 700, color: V2.ink, letterSpacing: '-0.01em' }}>
                Apply form — reduce fields
              </h2>
              <V2Badge tone="primary" size="sm">running · day 8 of 14</V2Badge>
            </div>
            <p style={{ margin: 0, fontSize: 13, color: V2.muted }}>
              Variant B removes 3 optional fields from the standard apply form. Hypothesis: applies +10% with no quality drop.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <V2Button variant="secondary" size="sm">Pause</V2Button>
            <V2Button variant="primary" size="sm" iconRight="arrow-right">Promote B to 100%</V2Button>
          </div>
        </header>

        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 18 }}>
          {/* Variants bar chart */}
          <div>
            <h3 style={{ margin: '0 0 12px', fontSize: 13, fontWeight: 700, color: V2.ink }}>Apply rate by variant</h3>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {[
                { name: 'A · Control',  rate: 4.2, count: 2_108, color: V2.lineStrong },
                { name: 'B · Treatment', rate: 4.7, count: 2_110, color: V2.primary, winner: true },
              ].map((v) => (
                <div key={v.name}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6, fontSize: 13 }}>
                    <span style={{ fontWeight: 600, color: V2.ink, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                      {v.name}
                      {v.winner && <V2Badge tone="success" size="sm" icon="check">Winning</V2Badge>}
                    </span>
                    <span style={{ color: V2.muted, fontVariantNumeric: 'tabular-nums' }}>{v.count.toLocaleString()} exposures</span>
                  </div>
                  <div style={{ position: 'relative', height: 24, background: V2.bgAlt, borderRadius: 6, overflow: 'hidden' }}>
                    <div style={{
                      width: `${(v.rate / 6) * 100}%`, height: '100%', background: v.color,
                      transition: 'width .3s ease',
                    }} />
                    <span style={{
                      position: 'absolute', left: `calc(${(v.rate / 6) * 100}% + 10px)`, top: 4,
                      fontSize: 13, fontWeight: 700, color: V2.ink, fontVariantNumeric: 'tabular-nums',
                    }}>{v.rate}%</span>
                  </div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 14, padding: 12, background: V2.successBg, border: `1px solid ${V2.successLine}`, borderRadius: V2.rMd, display: 'flex', gap: 10, alignItems: 'center' }}>
              <Icon name="check" size={16} color={V2.success} />
              <div style={{ fontSize: 12.5, color: V2.text }}>
                <strong style={{ color: V2.ink }}>p = 0.03</strong> · result is statistically significant. Safe to promote B.
              </div>
            </div>
          </div>

          {/* Variant comparison */}
          <div>
            <h3 style={{ margin: '0 0 12px', fontSize: 13, fontWeight: 700, color: V2.ink }}>Form changes in B</h3>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 8 }}>
              {[
                ['Removed', '"How did you hear about us?"'],
                ['Removed', '"Years of experience" (text)'],
                ['Removed', '"Cover letter" (textarea, now optional)'],
                ['Kept',    '"Right to work in UK?"'],
                ['Kept',    'Resume upload'],
              ].map(([action, label], i) => (
                <li key={i} style={{
                  display: 'flex', alignItems: 'center', gap: 10,
                  padding: '8px 12px', background: V2.bgAlt, borderRadius: V2.rMd,
                  fontSize: 12.5,
                }}>
                  <V2Badge tone={action === 'Removed' ? 'danger' : 'success'} size="sm">{action}</V2Badge>
                  <span style={{ color: V2.text }}>{label}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </AF>
  );
}

// ─── 3) EMAIL TEMPLATE BUILDER ──────────────────────────────────────────
function V2AdminEmailScreen() {
  const templates = [
    { key: 'welcome',         label: 'Welcome email',           active: true,  sent: 1842,   open: 62, click: 24 },
    { key: 'alert',           label: 'New match alert',                       sent: 142_018, open: 48, click: 18 },
    { key: 'apply-conf',      label: 'Apply confirmation',                    sent: 12_480,  open: 78, click: 12 },
    { key: 'employer-notif',  label: 'Employer · new applicant',              sent: 4_218,   open: 71, click: 28 },
    { key: 'weekly-digest',   label: 'Weekly digest',                         sent: 38_214,  open: 32, click: 8  },
    { key: 'interview-inv',   label: 'Interview invitation',                  sent: 612,     open: 84, click: 42 },
    { key: 'unsubscribe-conf',label: 'Unsubscribe confirmation',              sent: 218,     open: 12, click: 0  },
  ];
  const AF = AdminFrameRef();
  return (
    <AF active="blog" breadcrumbs={['Admin', 'Emails', 'Templates']}>
      <header style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 22, flexWrap: 'wrap', gap: 12,
      }}>
        <div>
          <h1 style={{ margin: '0 0 4px', fontSize: 22, fontWeight: 700, color: V2.ink, letterSpacing: '-0.02em' }}>
            Email templates
          </h1>
          <p style={{ margin: 0, fontSize: 13.5, color: V2.muted }}>
            7 templates · 198k sent in last 30 days · 98.7% delivery rate
          </p>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <V2Button variant="secondary" size="sm" icon="eye">Send test</V2Button>
          <V2Button variant="primary" size="sm" icon="plus">New template</V2Button>
        </div>
      </header>

      <div style={{ display: 'grid', gridTemplateColumns: '280px minmax(0, 1fr)', gap: 18, alignItems: 'start' }}>
        {/* Template list */}
        <aside style={{
          background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg, padding: 8,
          position: 'sticky', top: 80,
        }}>
          {templates.map((t) => (
            <button key={t.key} style={{
              width: '100%', display: 'block', padding: '10px 12px', borderRadius: V2.rMd,
              background: t.active ? V2.primarySoft : 'transparent',
              border: `1px solid ${t.active ? V2.primaryRing : 'transparent'}`,
              cursor: 'pointer', fontFamily: V2.font, textAlign: 'left', marginBottom: 4,
            }}>
              <div style={{ fontSize: 13.5, fontWeight: t.active ? 700 : 600, color: t.active ? V2.primaryInk : V2.ink }}>
                {t.label}
              </div>
              <div style={{ fontSize: 11.5, color: V2.muted, marginTop: 4 }}>
                {t.sent.toLocaleString()} sent · open {t.open}% · click {t.click}%
              </div>
            </button>
          ))}
        </aside>

        {/* Editor */}
        <section style={{
          background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg, overflow: 'hidden',
        }}>
          <header style={{
            padding: '14px 22px', borderBottom: `1px solid ${V2.line}`,
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          }}>
            <h2 style={{ margin: 0, fontSize: 15, fontWeight: 700, color: V2.ink }}>Welcome email</h2>
            <V2Badge tone="success" size="sm">Published · v6</V2Badge>
          </header>

          {/* Tabs */}
          <div style={{ display: 'flex', gap: 6, padding: '0 22px', borderBottom: `1px solid ${V2.line}` }}>
            {[['subject', 'Subject (2)', true], ['body', 'HTML body'], ['plain', 'Plain body'], ['stats', 'Stats · 30d']].map(([k, l, on]) => (
              <a key={k} style={{
                padding: '12px 14px',
                borderBottom: `2px solid ${on ? V2.primary : 'transparent'}`,
                color: on ? V2.primary : V2.muted,
                fontWeight: on ? 700 : 500, fontSize: 13,
                marginBottom: -1, textDecoration: 'none',
              }}>{l}</a>
            ))}
          </div>

          {/* Subject editor */}
          <div style={{ padding: 22 }}>
            <h3 style={{ margin: '0 0 12px', fontSize: 13, fontWeight: 700, color: V2.ink }}>
              Subject A/B test · 2 variants
            </h3>
            {[
              { v: 'A', subj: 'Welcome to ScrollJob, {{ user.first_name }}', traffic: 50, open: 60, winner: false },
              { v: 'B', subj: '{{ user.first_name }}, your job search just got faster', traffic: 50, open: 64, winner: true },
            ].map((v) => (
              <div key={v.v} style={{
                background: V2.bgAlt, border: `1px solid ${v.winner ? V2.primaryRing : V2.line}`,
                borderRadius: V2.rMd, padding: 14, marginBottom: 10,
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10, marginBottom: 10 }}>
                  <div style={{ flex: 1 }}>
                    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                      <span style={{
                        padding: '3px 9px', background: '#fff', border: `1px solid ${V2.line}`,
                        borderRadius: 6, fontSize: 11, fontWeight: 700, color: V2.text,
                      }}>{v.v}</span>
                      {v.winner && <V2Badge tone="success" size="sm" icon="check">Winning · open {v.open}%</V2Badge>}
                    </div>
                  </div>
                  <span style={{ fontSize: 12, color: V2.muted, fontFamily: V2.fontMono }}>
                    {v.traffic}% traffic
                  </span>
                </div>
                <input defaultValue={v.subj} style={{
                  width: '100%', padding: '10px 12px', border: `1px solid ${V2.line}`,
                  borderRadius: 8, fontSize: 13.5, outline: 'none', fontFamily: V2.font,
                  color: V2.ink, background: '#fff', boxSizing: 'border-box',
                }} />
              </div>
            ))}
            <V2Button variant="ghost" size="sm" icon="plus">Add variant</V2Button>

            {/* HTML body preview */}
            <h3 style={{ margin: '24px 0 12px', fontSize: 13, fontWeight: 700, color: V2.ink }}>
              HTML body preview
            </h3>
            <div style={{
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14,
            }}>
              <div style={{
                background: V2.ink, color: '#E2E8F0', borderRadius: V2.rMd, padding: 16,
                fontFamily: V2.fontMono, fontSize: 12, lineHeight: 1.6, overflow: 'auto',
              }}>
                <code>{'<h1>Welcome, {{ user.first_name }}</h1>'}</code><br />
                <code>{'<p>ScrollJob makes job hunting fast.</p>'}</code><br />
                <code>{'<a href="{{ cta.url }}">Find jobs →</a>'}</code><br /><br />
                <span style={{ color: V2.faint }}>Available variables:</span><br />
                <code style={{ color: '#5EEAD4' }}>{'{{ user.first_name }} {{ user.last_name }}'}</code><br />
                <code style={{ color: '#5EEAD4' }}>{'{{ user.email }} {{ user.region }}'}</code><br />
                <code style={{ color: '#5EEAD4' }}>{'{{ cta.url }} {{ unsubscribe_url }}'}</code>
              </div>
              <div style={{
                background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rMd, padding: 22,
              }}>
                <h2 style={{ margin: '0 0 10px', fontSize: 22, color: V2.ink, fontWeight: 700, letterSpacing: '-0.02em' }}>
                  Welcome, Emma
                </h2>
                <p style={{ margin: '0 0 14px', fontSize: 14, color: V2.text, lineHeight: 1.6 }}>
                  ScrollJob makes job hunting fast. Search 68,000+ live jobs, swipe through matches and save what looks good.
                </p>
                <V2Button variant="primary" size="md" iconRight="arrow-right">Find jobs</V2Button>
                <div style={{ fontSize: 11, color: V2.muted, marginTop: 18 }}>
                  Sent to emma.carter@example.com · <a style={{ color: V2.primary }}>Unsubscribe</a>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </AF>
  );
}

Object.assign(window, {
  V2AdminFlagsScreen, V2AdminExperimentsScreen, V2AdminEmailScreen,
});