// Section 4b — Marketing & Sales (admin sub-page)
function AdminMarketingSales() {
  const revenueData = [
    { label: 'Mon', revenue: 28400, bookings: 12 },
    { label: 'Tue', revenue: 34200, bookings: 14 },
    { label: 'Wed', revenue: 41800, bookings: 18 },
    { label: 'Thu', revenue: 38400, bookings: 16 },
    { label: 'Fri', revenue: 52600, bookings: 22 },
    { label: 'Sat', revenue: 64200, bookings: 27 },
    { label: 'Sun', revenue: 71800, bookings: 31 },
    { label: 'Mon', revenue: 48200, bookings: 19 },
    { label: 'Tue', revenue: 56400, bookings: 23 },
    { label: 'Wed', revenue: 62800, bookings: 26 },
    { label: 'Thu', revenue: 58200, bookings: 24 },
    { label: 'Fri', revenue: 74600, bookings: 30 },
    { label: 'Sat', revenue: 84200, bookings: 34 },
    { label: 'Sun', revenue: 79400, bookings: 32 },
  ];
  const channels = [
    { label: 'Direct', value: 38, conv: 4.2, spend: 0 },
    { label: 'Organic search', value: 24, conv: 2.8, spend: 0 },
    { label: 'Instagram', value: 18, conv: 3.4, spend: 12400 },
    { label: 'Editorial', value: 12, conv: 5.1, spend: 8200 },
    { label: 'Referral', value: 8, conv: 6.4, spend: 0 },
  ];
  const campaigns = [
    { name: 'Wellness reset · Q2', channel: 'Instagram', spend: 4200, rev: 38400, roas: 9.1, status: 'live' },
    { name: 'Honeymoon edit · May',  channel: 'Editorial', spend: 6800, rev: 71200, roas: 10.5, status: 'live' },
    { name: 'Sidemen rice fields',    channel: 'Newsletter', spend: 0,    rev: 22800, roas: '—',  status: 'live' },
    { name: 'Ubud retreats · revival',channel: 'Instagram', spend: 2400, rev: 8400,  roas: 3.5,  status: 'paused' },
    { name: 'Family compounds',       channel: 'Editorial', spend: 1800, rev: 14200, roas: 7.9,  status: 'draft' },
  ];

  return (
    <div>
      {/* KPI strip */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: dashGap() }}>
        <Panel>
          <Sans size={10} weight={600} ls={0.14} upper color={C_TLB.mid}>Gross bookings · 14d</Sans>
          <div style={{ marginTop: 12 }}><Money value={894200} size={32} weight={600} /></div>
          <div style={{ marginTop: 14, display: 'flex', alignItems: 'center', gap: 10 }}>
            <SparkArea values={revenueData.map(d => d.revenue)} width={120} height={36} />
            <Sans size={11} color={C_TLB.deep} style={{ fontVariantNumeric: 'tabular-nums' }}>+18.2%</Sans>
          </div>
        </Panel>
        <Panel>
          <Sans size={10} weight={600} ls={0.14} upper color={C_TLB.mid}>Bookings · 14d</Sans>
          <div style={{ marginTop: 12, fontFamily: F_TLB.ui, fontSize: 32, fontWeight: 600, letterSpacing: '-0.02em', fontVariantNumeric: 'tabular-nums' }}>328</div>
          <div style={{ marginTop: 14, display: 'flex', alignItems: 'center', gap: 10 }}>
            <SparkArea values={revenueData.map(d => d.bookings)} width={120} height={36} />
            <Sans size={11} color={C_TLB.deep} style={{ fontVariantNumeric: 'tabular-nums' }}>+11.4%</Sans>
          </div>
        </Panel>
        <Panel>
          <Sans size={10} weight={600} ls={0.14} upper color={C_TLB.mid}>Avg booking value</Sans>
          <div style={{ marginTop: 12 }}><Money value={2726} size={32} weight={600} /></div>
          <Sans size={11} color={C_TLB.mid} style={{ marginTop: 14, fontVariantNumeric: 'tabular-nums' }}>5.7 nights · ADR $478</Sans>
        </Panel>
        <Panel>
          <Sans size={10} weight={600} ls={0.14} upper color={C_TLB.mid}>Blended ROAS</Sans>
          <div style={{ marginTop: 12, fontFamily: F_TLB.ui, fontSize: 32, fontWeight: 600, letterSpacing: '-0.02em', fontVariantNumeric: 'tabular-nums' }}>8.4×</div>
          <Sans size={11} color={C_TLB.mid} style={{ marginTop: 14, fontVariantNumeric: 'tabular-nums' }}>Spend $20.6k · rev $174k</Sans>
        </Panel>
      </div>

      {/* Revenue chart */}
      <div style={{ marginTop: dashGap() }}>
        <Panel>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 18 }}>
            <div>
              <Display size={22} italic weight={400}>Gross bookings.</Display>
              <Sans size={12} color={C_TLB.mid} style={{ marginTop: 4 }}>Last 14 days · USD · daily</Sans>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <Chip>7d</Chip><Chip active>14d</Chip><Chip>30d</Chip><Chip>90d</Chip>
            </div>
          </div>
          <AreaChart data={revenueData} keys={['revenue']} height={260} formatY={(v) => `$${(v/1000).toFixed(0)}k`} highlightIdx={12} />
        </Panel>
      </div>

      {/* Channels + campaigns */}
      <div style={{ marginTop: dashGap(), display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: dashGap() }}>
        <Panel>
          <Display size={22} italic weight={400} style={{ marginBottom: 16 }}>Acquisition channels.</Display>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {channels.map((c, i) => (
              <div key={c.label}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
                  <Sans size={13} weight={500}>{c.label}</Sans>
                  <Sans size={11} color={C_TLB.mid} style={{ fontVariantNumeric: 'tabular-nums' }}>{c.value}% · conv {c.conv}%</Sans>
                </div>
                <div style={{ height: 8, background: C_TLB.offWhite, borderRadius: 100, overflow: 'hidden' }}>
                  <div style={{ width: `${c.value*2.6}%`, height: '100%', background: i === 0 ? C_TLB.ink : C_TLB.deep, borderRadius: 100 }} />
                </div>
              </div>
            ))}
          </div>
        </Panel>

        <Panel pad={0}>
          <div style={{ padding: '20px 24px', borderBottom: `1px solid ${C_TLB.border}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <Display size={22} italic weight={400}>Live campaigns.</Display>
            <Button size="sm" variant="secondary">+ New campaign</Button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 100px 110px 110px 80px 80px', gap: 14, padding: '14px 24px', borderBottom: `1px solid ${C_TLB.border}`, background: C_TLB.offWhite }}>
            {['Campaign', 'Channel', 'Spend', 'Revenue', 'ROAS', ''].map(h => <Sans key={h} size={9} weight={600} ls={0.14} upper color={C_TLB.mid}>{h}</Sans>)}
          </div>
          {campaigns.map((c, i) => (
            <div key={c.name} style={{ display: 'grid', gridTemplateColumns: '1.6fr 100px 110px 110px 80px 80px', gap: 14, padding: '16px 24px', borderBottom: `1px solid ${C_TLB.border}`, alignItems: 'center' }}>
              <div>
                <Sans size={13} weight={600}>{c.name}</Sans>
                <span style={{ display: 'inline-block', marginTop: 4, padding: '2px 8px', borderRadius: 100, background: c.status === 'live' ? C_TLB.ink : c.status === 'paused' ? C_TLB.chip : C_TLB.offWhite, color: c.status === 'live' ? C_TLB.white : C_TLB.deep, fontFamily: F_TLB.ui, fontSize: 9, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', border: c.status === 'draft' ? `1px solid ${C_TLB.border}` : 'none' }}>{c.status}</span>
              </div>
              <Sans size={12} color={C_TLB.deep}>{c.channel}</Sans>
              <Money value={c.spend} size={14} weight={500} />
              <Money value={c.rev} size={14} weight={600} />
              <Sans size={13} weight={600} style={{ fontVariantNumeric: 'tabular-nums' }}>{typeof c.roas === 'number' ? `${c.roas}×` : c.roas}</Sans>
              <Sans size={11} color={C_TLB.mid} style={{ textDecoration: 'underline', textUnderlineOffset: 4, cursor: 'pointer' }}>Open</Sans>
            </div>
          ))}
        </Panel>
      </div>

      {/* Funnel + cohorts */}
      <div style={{ marginTop: dashGap(), display: 'grid', gridTemplateColumns: '1fr 1fr', gap: dashGap() }}>
        <Panel>
          <Display size={22} italic weight={400} style={{ marginBottom: 16 }}>Sales funnel · 14d.</Display>
          {[
            { stage: 'Visit', n: 84200, pct: 100 },
            { stage: 'Villa view', n: 28400, pct: 34 },
            { stage: 'Inquiry', n: 4280, pct: 5.1 },
            { stage: 'Quote sent', n: 3120, pct: 3.7 },
            { stage: 'Booking', n: 328, pct: 0.39 },
          ].map((f, i) => (
            <div key={i} style={{ marginTop: i ? 12 : 0 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
                <Sans size={13} weight={500}>{f.stage}</Sans>
                <Sans size={12} color={C_TLB.mid} style={{ fontVariantNumeric: 'tabular-nums' }}>{f.n.toLocaleString()} · {f.pct}%</Sans>
              </div>
              <div style={{ height: 28, background: C_TLB.offWhite, borderRadius: 6, overflow: 'hidden' }}>
                <div style={{ width: `${Math.max(2, f.pct)}%`, minWidth: 28, height: '100%', background: C_TLB.ink, borderRadius: 6 }} />
              </div>
            </div>
          ))}
        </Panel>
        <Panel>
          <Display size={22} italic weight={400} style={{ marginBottom: 16 }}>Top destinations.</Display>
          {[
            { name: 'Ubud',    rev: 248400, share: 28 },
            { name: 'Canggu',  rev: 186200, share: 21 },
            { name: 'Tabanan', rev: 142800, share: 16 },
            { name: 'Sidemen', rev: 98400,  share: 11 },
            { name: 'Munduk',  rev: 64200,  share: 7 },
          ].map((d, i) => (
            <div key={d.name} style={{ display: 'grid', gridTemplateColumns: '32px 120px 1fr 110px', gap: 14, padding: '12px 0', borderTop: i ? `1px solid ${C_TLB.border}` : 'none', alignItems: 'center' }}>
              <span style={{ fontFamily: F_TLB.display, fontStyle: 'italic', fontSize: 18, color: C_TLB.mid }}>{String(i+1).padStart(2,'0')}</span>
              <Sans size={14} weight={500}>{d.name}</Sans>
              <div style={{ height: 6, background: C_TLB.offWhite, borderRadius: 100 }}>
                <div style={{ width: `${d.share*3}%`, height: '100%', background: C_TLB.ink, borderRadius: 100 }} />
              </div>
              <div style={{ textAlign: 'right' }}><Money value={d.rev} size={14} weight={600} /></div>
            </div>
          ))}
        </Panel>
      </div>
    </div>
  );
}

// Section 4c — Orchestration (design tokens, social, marketing automation)
function AdminOrchestration() {
  const [tab, setTab] = React.useState('design');
  const tabs = [
    { key: 'design', label: 'Design system' },
    { key: 'social', label: 'Social' },
    { key: 'automation', label: 'Automation' },
    { key: 'integrations', label: 'Integrations' },
  ];
  return (
    <div>
      <div style={{ marginBottom: dashGap() }}>
        <SubTabs tabs={tabs} active={tab} onChange={setTab} />
      </div>
      {tab === 'design' && <OrchDesign />}
      {tab === 'social' && <OrchSocial />}
      {tab === 'automation' && <OrchAutomation />}
      {tab === 'integrations' && <OrchIntegrations />}
    </div>
  );
}

function OrchDesign() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: dashGap() }}>
      <Panel>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 18 }}>
          <Display size={22} italic weight={400}>Design tokens.</Display>
          <Sans size={11} color={C_TLB.mid}>Synced to repo · last push 2h ago</Sans>
        </div>
        {[
          { token: 'color/ink',     value: '#141414', use: 'Body, primary CTA' },
          { token: 'color/border',  value: '#e5e5e5', use: 'Hairlines' },
          { token: 'radius/pill',   value: '100',     use: 'Buttons, chips' },
          { token: 'radius/card',   value: '18',      use: 'Panels' },
          { token: 'radius/input',  value: '12',      use: 'Inputs' },
          { token: 'font/display',  value: 'Playfair', use: 'H1–H3, italic' },
          { token: 'font/ui',       value: 'Plus Jakarta', use: 'UI, body, numerics' },
        ].map((t, i) => (
          <div key={t.token} style={{ display: 'grid', gridTemplateColumns: '1fr 140px 1.2fr 90px', gap: 14, padding: '14px 0', borderTop: i ? `1px solid ${C_TLB.border}` : 'none', alignItems: 'center' }}>
            <Sans size={12} weight={600} style={{ fontFamily: 'ui-monospace, monospace' }}>{t.token}</Sans>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              {t.token.startsWith('color') && <span style={{ width: 18, height: 18, borderRadius: 4, background: t.value, border: `1px solid ${C_TLB.border}` }} />}
              <Sans size={12} style={{ fontFamily: 'ui-monospace, monospace', fontVariantNumeric: 'tabular-nums' }}>{t.value}</Sans>
            </div>
            <Sans size={12} color={C_TLB.mid}>{t.use}</Sans>
            <Sans size={11} color={C_TLB.mid} style={{ textDecoration: 'underline', textUnderlineOffset: 4, cursor: 'pointer', textAlign: 'right' }}>Edit</Sans>
          </div>
        ))}
      </Panel>

      <Panel>
        <Display size={22} italic weight={400} style={{ marginBottom: 16 }}>Brand assets.</Display>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
          {['Wordmark', 'Crest', 'Photo set · Ubud', 'Photo set · Canggu', 'Email header', 'IG template'].map((a, i) => (
            <div key={a} style={{ aspectRatio: '1', border: `1px solid ${C_TLB.border}`, borderRadius: 12, background: i % 2 === 0 ? C_TLB.offWhite : C_TLB.white, padding: 14, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', cursor: 'pointer' }}>
              <Sans size={9} weight={600} ls={0.14} upper color={C_TLB.muted}>v{2+i}.0</Sans>
              <Sans size={12} weight={500} style={{ fontFamily: F_TLB.display, fontStyle: 'italic', fontSize: 16 }}>{a}</Sans>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 18, padding: 16, background: C_TLB.offWhite, borderRadius: 12 }}>
          <Sans size={10} weight={600} ls={0.14} upper color={C_TLB.mid}>BANNED IN PRODUCTION</Sans>
          <div style={{ marginTop: 10, display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {['Gold', 'Terracotta', 'Cream', 'Inter', 'Cormorant', 'Times'].map(b => (
              <span key={b} style={{ padding: '4px 10px', border: `1px solid ${C_TLB.border}`, borderRadius: 100, fontFamily: F_TLB.ui, fontSize: 10, fontWeight: 600, color: C_TLB.mid, textDecoration: 'line-through' }}>{b}</span>
            ))}
          </div>
        </div>
      </Panel>
    </div>
  );
}

function OrchSocial() {
  const followers = [
    { label: 'W1', ig: 84200, tt: 12400, pin: 8400 },
    { label: 'W2', ig: 86400, tt: 13800, pin: 8600 },
    { label: 'W3', ig: 88200, tt: 15400, pin: 8800 },
    { label: 'W4', ig: 91400, tt: 18200, pin: 9100 },
    { label: 'W5', ig: 94800, tt: 22400, pin: 9400 },
    { label: 'W6', ig: 98200, tt: 28600, pin: 9700 },
    { label: 'W7', ig: 102400, tt: 34800, pin: 10200 },
    { label: 'W8', ig: 108600, tt: 42400, pin: 10800 },
  ];
  const posts = [
    { ts: 'Today · 16:00', plat: 'Instagram', kind: 'Carousel', caption: 'A week in the rice terraces · Sidemen', status: 'scheduled' },
    { ts: 'Today · 19:30', plat: 'TikTok',    kind: 'Video',    caption: 'Sunrise at Sumeru · 28s',          status: 'scheduled' },
    { ts: 'Tomorrow · 09:00', plat: 'Pinterest', kind: 'Idea pin', caption: 'Quiet for two · Munduk',         status: 'draft' },
    { ts: 'Fri · 17:00',    plat: 'Newsletter', kind: 'Editorial', caption: 'Wellness reset · 6 nights',       status: 'in review' },
    { ts: 'Sat · 11:00',    plat: 'Instagram',  kind: 'Reel',     caption: 'Chef Komang · 6-course tasting',  status: 'scheduled' },
  ];
  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: dashGap() }}>
        {[
          { label: 'Instagram', value: '108.6k', delta: '+5.7% · 30d' },
          { label: 'TikTok',    value: '42.4k',  delta: '+89% · 30d' },
          { label: 'Pinterest', value: '10.8k',  delta: '+5.8% · 30d' },
          { label: 'Newsletter', value: '24.2k', delta: '+2.1% · 30d' },
        ].map(s => (
          <Panel key={s.label}>
            <Sans size={10} weight={600} ls={0.14} upper color={C_TLB.mid}>{s.label}</Sans>
            <div style={{ marginTop: 12, fontFamily: F_TLB.ui, fontSize: 30, fontWeight: 600, letterSpacing: '-0.02em', fontVariantNumeric: 'tabular-nums' }}>{s.value}</div>
            <Sans size={11} color={C_TLB.deep} style={{ marginTop: 8, fontVariantNumeric: 'tabular-nums' }}>{s.delta}</Sans>
          </Panel>
        ))}
      </div>

      <div style={{ marginTop: dashGap() }}>
        <Panel>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 24, marginBottom: 18, flexWrap: 'wrap' }}>
            <div style={{ minWidth: 0 }}>
              <Display size={22} italic weight={400} style={{ whiteSpace: 'nowrap' }}>Audience growth.</Display>
              <Sans size={12} color={C_TLB.mid} style={{ marginTop: 4 }}>Followers · weekly · 8 weeks</Sans>
            </div>
            <div style={{ display: 'flex', gap: 14, flexShrink: 0 }}>
              {[{ k: 'ig', l: 'Instagram' }, { k: 'tt', l: 'TikTok' }, { k: 'pin', l: 'Pinterest' }].map((s, i) => (
                <div key={s.k} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ width: 8, height: 8, background: i === 0 ? C_TLB.ink : i === 1 ? C_TLB.deep : C_TLB.mid }} />
                  <Sans size={11} color={C_TLB.deep}>{s.l}</Sans>
                </div>
              ))}
            </div>
          </div>
          <AreaChart data={followers} keys={['ig', 'tt', 'pin']} height={260} formatY={(v) => `${(v/1000).toFixed(0)}k`} />
        </Panel>
      </div>

      <div style={{ marginTop: dashGap(), display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: dashGap() }}>
        <Panel pad={0}>
          <div style={{ padding: '20px 24px', borderBottom: `1px solid ${C_TLB.border}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <Display size={22} italic weight={400}>Content calendar.</Display>
            <Button size="sm" variant="secondary">+ Schedule post</Button>
          </div>
          {posts.map((p, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '180px 110px 1fr 120px', gap: 14, padding: '16px 24px', borderBottom: `1px solid ${C_TLB.border}`, alignItems: 'center' }}>
              <Sans size={12} color={C_TLB.deep} style={{ fontVariantNumeric: 'tabular-nums' }}>{p.ts}</Sans>
              <Sans size={12} weight={600}>{p.plat}</Sans>
              <div>
                <Sans size={13}>{p.caption}</Sans>
                <Sans size={11} color={C_TLB.mid} style={{ marginTop: 2 }}>{p.kind}</Sans>
              </div>
              <span style={{ padding: '4px 10px', borderRadius: 100, background: p.status === 'scheduled' ? C_TLB.ink : C_TLB.chip, color: p.status === 'scheduled' ? C_TLB.white : C_TLB.deep, fontFamily: F_TLB.ui, fontSize: 9, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase', justifySelf: 'start' }}>{p.status}</span>
            </div>
          ))}
        </Panel>
        <Panel>
          <Display size={22} italic weight={400} style={{ marginBottom: 16 }}>Top posts · 30d.</Display>
          {[
            { cap: 'Sumeru sunrise · reel', plat: 'IG', reach: 482000, eng: 8.4 },
            { cap: 'Six nights, volcanic Bali', plat: 'IG', reach: 318000, eng: 6.2 },
            { cap: 'Driver, villa, repeat', plat: 'TT', reach: 1240000, eng: 12.8 },
            { cap: 'Honeymoon edit', plat: 'Pin', reach: 84200, eng: 4.1 },
          ].map((p, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '40px 1fr 90px 60px', gap: 12, padding: '12px 0', borderTop: i ? `1px solid ${C_TLB.border}` : 'none', alignItems: 'center' }}>
              <span style={{ width: 36, height: 36, background: C_TLB.chip, borderRadius: 8 }} />
              <div>
                <Sans size={13} weight={500}>{p.cap}</Sans>
                <Sans size={11} color={C_TLB.mid}>{p.plat}</Sans>
              </div>
              <Sans size={12} style={{ fontVariantNumeric: 'tabular-nums', textAlign: 'right' }}>{(p.reach/1000).toFixed(0)}k</Sans>
              <Sans size={12} weight={600} style={{ fontVariantNumeric: 'tabular-nums', textAlign: 'right' }}>{p.eng}%</Sans>
            </div>
          ))}
        </Panel>
      </div>
    </div>
  );
}

function OrchAutomation() {
  const flows = [
    { name: 'Welcome series', trigger: 'Sign-up', steps: 4, sent: 1248, open: 64.2, click: 12.4, status: 'on' },
    { name: 'Abandoned inquiry', trigger: 'Inquiry · 24h idle', steps: 3, sent: 412, open: 71.8, click: 18.2, status: 'on' },
    { name: 'Post-stay journal', trigger: 'Check-out + 48h', steps: 2, sent: 318, open: 82.4, click: 28.6, status: 'on' },
    { name: 'Tier upgrade · Obsidian', trigger: 'Nights ≥ 25', steps: 5, sent: 24,  open: 91.2, click: 42.8, status: 'on' },
    { name: 'Lapsed guest · 90d', trigger: 'No activity 90d', steps: 4, sent: 612, open: 38.4, click: 4.2,  status: 'paused' },
  ];
  return (
    <div>
      <Panel pad={0}>
        <div style={{ padding: '20px 24px', borderBottom: `1px solid ${C_TLB.border}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <Display size={22} italic weight={400}>Marketing flows.</Display>
            <Sans size={12} color={C_TLB.mid} style={{ marginTop: 4 }}>Email + WhatsApp · triggered automations</Sans>
          </div>
          <Button size="sm" variant="secondary">+ New flow</Button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1.4fr 80px 90px 90px 90px 90px', gap: 14, padding: '14px 24px', borderBottom: `1px solid ${C_TLB.border}`, background: C_TLB.offWhite }}>
          {['Flow', 'Trigger', 'Steps', 'Sent', 'Open', 'Click', ''].map(h => <Sans key={h} size={9} weight={600} ls={0.14} upper color={C_TLB.mid}>{h}</Sans>)}
        </div>
        {flows.map((f, i) => (
          <div key={f.name} style={{ display: 'grid', gridTemplateColumns: '2fr 1.4fr 80px 90px 90px 90px 90px', gap: 14, padding: '16px 24px', borderBottom: `1px solid ${C_TLB.border}`, alignItems: 'center' }}>
            <div>
              <Sans size={13} weight={600}>{f.name}</Sans>
              <span style={{ display: 'inline-block', marginTop: 4, padding: '2px 8px', borderRadius: 100, background: f.status === 'on' ? C_TLB.ink : C_TLB.chip, color: f.status === 'on' ? C_TLB.white : C_TLB.deep, fontFamily: F_TLB.ui, fontSize: 9, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase' }}>{f.status}</span>
            </div>
            <Sans size={12} color={C_TLB.deep}>{f.trigger}</Sans>
            <Sans size={12} style={{ fontVariantNumeric: 'tabular-nums' }}>{f.steps}</Sans>
            <Sans size={12} style={{ fontVariantNumeric: 'tabular-nums' }}>{f.sent.toLocaleString()}</Sans>
            <Sans size={12} weight={600} style={{ fontVariantNumeric: 'tabular-nums' }}>{f.open}%</Sans>
            <Sans size={12} weight={600} style={{ fontVariantNumeric: 'tabular-nums' }}>{f.click}%</Sans>
            <Toggle on={f.status === 'on'} onChange={() => {}} />
          </div>
        ))}
      </Panel>

      <div style={{ marginTop: dashGap() }}>
        <Panel>
          <Display size={22} italic weight={400} style={{ marginBottom: 18 }}>Flow visualizer · Welcome series.</Display>
          <div style={{ display: 'flex', alignItems: 'center', gap: 0, overflowX: 'auto', paddingBlock: 12 }}>
            {[
              { kind: 'trigger', label: 'Sign-up', sub: 'Event' },
              { kind: 'wait',    label: 'Wait 5 min', sub: 'Delay' },
              { kind: 'send',    label: 'Welcome email', sub: '64% open' },
              { kind: 'wait',    label: 'Wait 2 days', sub: 'Delay' },
              { kind: 'branch',  label: 'Opened?', sub: 'Condition' },
              { kind: 'send',    label: 'Curated escapes · WA', sub: '38% click' },
              { kind: 'end',     label: 'Goal · inquiry', sub: 'Convert' },
            ].map((s, i, arr) => (
              <React.Fragment key={i}>
                <div style={{ minWidth: 160, padding: 14, border: `1px solid ${C_TLB.border}`, borderRadius: 12, background: s.kind === 'trigger' ? C_TLB.ink : s.kind === 'end' ? C_TLB.offWhite : C_TLB.white, color: s.kind === 'trigger' ? C_TLB.white : C_TLB.ink }}>
                  <Sans size={9} weight={600} ls={0.14} upper color={s.kind === 'trigger' ? 'rgba(255,255,255,0.7)' : C_TLB.mid}>{s.sub}</Sans>
                  <Sans size={13} weight={600} color={s.kind === 'trigger' ? C_TLB.white : C_TLB.ink} style={{ marginTop: 6 }}>{s.label}</Sans>
                </div>
                {i < arr.length - 1 && <div style={{ width: 28, height: 1, background: C_TLB.border, flexShrink: 0 }} />}
              </React.Fragment>
            ))}
          </div>
        </Panel>
      </div>
    </div>
  );
}

function OrchIntegrations() {
  const items = [
    { name: 'Stripe',    cat: 'Payments',   status: 'connected', sub: 'acct_1O… · live key' },
    { name: 'WhatsApp Business', cat: 'Messaging', status: 'connected', sub: 'Cloud API · BSP Twilio' },
    { name: 'Postmark',  cat: 'Email',      status: 'connected', sub: 'Server · transactional' },
    { name: 'Klaviyo',   cat: 'Marketing',  status: 'connected', sub: 'List · 24.2k members' },
    { name: 'Meta',      cat: 'Social',     status: 'connected', sub: 'IG · FB · 4 ad accts' },
    { name: 'TikTok Business', cat: 'Social', status: 'connected', sub: 'Ads · org. posting' },
    { name: 'Pinterest', cat: 'Social',     status: 'connected', sub: 'Catalog feed · daily' },
    { name: 'Algolia',   cat: 'Search',     status: 'connected', sub: 'Index · villas, escapes' },
    { name: 'Cloudflare', cat: 'CDN',       status: 'connected', sub: 'R2 · imagery · 99.98%' },
    { name: 'GA4',       cat: 'Analytics',  status: 'connected', sub: 'Web + app stream' },
    { name: 'Looker Studio', cat: 'BI',     status: 'available', sub: 'Connect to mirror data' },
    { name: 'Hubspot',   cat: 'CRM',        status: 'available', sub: 'Sales pipeline sync' },
  ];
  return (
    <Panel>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 18 }}>
        <Display size={22} italic weight={400}>Integrations.</Display>
        <Sans size={11} color={C_TLB.mid}>10 connected · 2 available</Sans>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
        {items.map(it => (
          <div key={it.name} style={{ padding: 18, border: `1px solid ${C_TLB.border}`, borderRadius: 12 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <Sans size={9} weight={600} ls={0.14} upper color={C_TLB.muted}>{it.cat}</Sans>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 6, height: 6, borderRadius: 99, background: it.status === 'connected' ? '#69d28a' : C_TLB.muted }} />
                <Sans size={10} weight={600} ls={0.12} upper color={C_TLB.mid}>{it.status}</Sans>
              </span>
            </div>
            <Display size={20} weight={500} style={{ marginTop: 12 }}>{it.name}</Display>
            <Sans size={11} color={C_TLB.mid} style={{ marginTop: 6, fontFamily: 'ui-monospace, monospace' }}>{it.sub}</Sans>
            <div style={{ marginTop: 14 }}>
              <Button size="sm" variant={it.status === 'connected' ? 'secondary' : 'primary'}>{it.status === 'connected' ? 'Configure' : 'Connect'}</Button>
            </div>
          </div>
        ))}
      </div>
    </Panel>
  );
}

Object.assign(window, { AdminMarketingSales, AdminOrchestration });