// Walkthrough Scenes Part A: Intro, Dashboard, Brand Kit, Chat, Agents, Missions, Leads, CRM
// Shared styles imported from window.wtStyles

const S = {
  scene: { position:'absolute', inset:0, display:'flex', flexDirection:'column', overflow:'hidden' },
  caption: { position:'absolute', bottom:0, left:0, right:0, padding:'14px 24px', background:'linear-gradient(transparent, rgba(0,0,0,0.85))', display:'flex', alignItems:'center', justifyContent:'space-between' },
  captionText: { fontSize:'13px', color:'#22d3ee', fontWeight:600, fontFamily:'ui-monospace, SFMono-Regular, Menlo, monospace', letterSpacing:'0.05em' },
  cat: { fontSize:'9px', fontWeight:600, letterSpacing:'0.14em', textTransform:'uppercase', fontFamily:'ui-monospace, SFMono-Regular, Menlo, monospace', color:'#22d3ee', marginBottom:'2px' },
  title: { fontSize:'22px', fontWeight:700, color:'#f5f5f5', letterSpacing:'-0.02em', lineHeight:1.15 },
  desc: { fontSize:'12px', color:'#888', lineHeight:1.5, maxWidth:'380px' },
  card: { background:'#141414', border:'1px solid #222', borderRadius:'8px' },
  field: { background:'#0a0a0a', border:'1px solid #222', borderRadius:'5px', padding:'6px 10px', fontSize:'11px', color:'#f5f5f5' },
  mono: { fontFamily:'ui-monospace, SFMono-Regular, Menlo, monospace' },
  tag: { display:'inline-flex', padding:'2px 8px', borderRadius:'3px', fontSize:'9px', fontWeight:500, letterSpacing:'0.08em', textTransform:'uppercase', background:'rgba(34,211,238,0.12)', color:'#22d3ee', border:'1px solid rgba(34,211,238,0.25)' },
  good: '#10b981', warn: '#f59e0b', accent: '#22d3ee', bad: '#ef4444', plum: '#a78bfa',
};

// helper: fade in based on progress threshold
function F({ at, p, children, style }) {
  return <div style={{ ...style, opacity: p > at ? 1 : 0, transition: 'opacity 0.4s' }}>{children}</div>;
}

// ─── INTRO ───
function WTIntro({ p }) {
  return (
    <div style={{ ...S.scene, alignItems:'center', justifyContent:'center', textAlign:'center', gap:'18px', background:'#000' }}>
      <F at={0.05} p={p}>
        <svg width="64" height="64" viewBox="0 0 80 80" fill="none">
          <path d="M 22 8 L 22 60 C 22 68, 28 72, 36 72 L 56 72 C 64 72, 68 68, 68 60 L 68 44 C 68 36, 64 32, 56 32 L 42 32 C 36 32, 34 36, 34 42 L 34 50" stroke="#22d3ee" strokeWidth="9" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </F>
      <F at={0.15} p={p}>
        <div style={{ fontSize:'38px', fontWeight:700, color:'#f5f5f5', letterSpacing:'-0.03em', lineHeight:1.1 }}>
          Every tool.<br/>One workspace.
        </div>
      </F>
      <F at={0.3} p={p}>
        <div style={{ fontSize:'15px', color:'#888', maxWidth:'440px', lineHeight:1.5 }}>
          A complete walkthrough of LooperHQ — CRM, AI agents, site builder, social, SEO, voice, and 30+ more tools.
        </div>
      </F>
      <F at={0.5} p={p} style={{ marginTop:'8px' }}>
        <div style={{ ...S.mono, fontSize:'12px', color:'#22d3ee', letterSpacing:'0.12em', textTransform:'uppercase' }}>
          The AI-Native Business OS
        </div>
      </F>
    </div>
  );
}

// ─── DASHBOARD ───
function WTDashboard({ p }) {
  const stats = [
    { label:'Unread', value:'3', color:S.accent },
    { label:'Missions', value:'2', color:S.good },
    { label:'Credits today', value:'148', color:S.good },
    { label:'Balance', value:'4,820', color:S.accent },
  ];
  const tiles = [
    { name:'Quick Chat', sub:'Multi-LLM', border:S.accent },
    { name:'Spawn Mission', sub:'Autonomous agent', border:S.warn },
    { name:'Discover Leads', sub:'Apollo + GitHub', border:S.accent },
    { name:'Market Research', sub:'Census + BLS', border:S.good },
  ];
  const pipeline = [
    { label:'Leads', val:'247', sub:'18 hot' },
    { label:'Open deals', val:'12', sub:'4 won' },
    { label:'Sequences', val:'3', sub:'41 enrolled' },
    { label:'Sites', val:'2', sub:'deployed' },
    { label:'Workflows', val:'5', sub:'firing' },
    { label:'Agents', val:'3', sub:'configured' },
  ];
  return (
    <div style={{ ...S.scene, padding:'16px 20px', gap:'10px' }}>
      <div><div style={S.cat}>workspace</div><div style={S.title}>Your command center</div></div>
      <F at={0.1} p={p}>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:'6px' }}>
          {tiles.map((t,i) => (
            <div key={i} style={{ ...S.card, padding:'10px', borderWidth:'2px', borderColor:t.border+'66' }}>
              <div style={{ fontSize:'11px', fontWeight:700, color:'#f5f5f5' }}>{t.name}</div>
              <div style={{ fontSize:'9px', color:'#888', marginTop:'2px' }}>{t.sub}</div>
            </div>
          ))}
        </div>
      </F>
      <F at={0.25} p={p}>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:'6px' }}>
          {stats.map((s,i) => (
            <div key={i} style={{ ...S.card, padding:'10px' }}>
              <div style={{ fontSize:'8px', color:'#888', textTransform:'uppercase', ...S.mono }}>{s.label}</div>
              <div style={{ fontSize:'20px', fontWeight:700, color:s.color, marginTop:'2px' }}>{s.value}</div>
            </div>
          ))}
        </div>
      </F>
      <F at={0.45} p={p}>
        <div style={{ ...S.card, padding:'12px', flex:1 }}>
          <div style={{ fontSize:'11px', fontWeight:700, color:'#f5f5f5', marginBottom:'8px' }}>What's running for you</div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:'5px' }}>
            {pipeline.map((p,i) => (
              <div key={i} style={{ background:'#0a0a0a', border:'1px solid #222', borderRadius:'5px', padding:'8px' }}>
                <div style={{ fontSize:'8px', color:'#888', textTransform:'uppercase', ...S.mono }}>{p.label}</div>
                <div style={{ fontSize:'16px', fontWeight:700, color:'#f5f5f5' }}>{p.val}</div>
                <div style={{ fontSize:'7px', color:'#888' }}>{p.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </F>
      <div style={S.caption}><span style={S.captionText}>Everything in one dashboard — no tab-switching</span></div>
    </div>
  );
}

// ─── BRAND KIT ───
function WTBrandKit({ p }) {
  const colors = [{c:'#22d3ee',l:'Primary'},{c:'#a78bfa',l:'Accent'},{c:'#0a0a0a',l:'BG'},{c:'#f5f5f5',l:'Ink'},{c:'#888',l:'Mute'}];
  return (
    <div style={{ ...S.scene, padding:'16px 20px', gap:'10px' }}>
      <div><div style={S.cat}>foundation</div><div style={S.title}>🎨 Brand kit — logo, colors, voice</div><div style={S.desc}>AI generates your logo, picks harmonious colors, locks in your tone of voice.</div></div>
      <div style={{ display:'flex', gap:'14px' }}>
        <F at={0.1} p={p}>
          <div style={{ width:'90px', height:'90px', borderRadius:'12px', ...S.card, display:'flex', alignItems:'center', justifyContent:'center', position:'relative' }}>
            <svg width="40" height="40" viewBox="0 0 80 80" fill="none"><path d="M 22 8 L 22 60 C 22 68, 28 72, 36 72 L 56 72 C 64 72, 68 68, 68 60 L 68 44 C 68 36, 64 32, 56 32 L 42 32 C 36 32, 34 36, 34 42 L 34 50" stroke="#22d3ee" strokeWidth="9" strokeLinecap="round" strokeLinejoin="round"/></svg>
            <div style={{ position:'absolute', bottom:'4px', right:'6px', fontSize:'7px', color:S.good, ...S.mono }}>FLUX AI</div>
          </div>
        </F>
        <F at={0.2} p={p} style={{ flex:1 }}>
          <div style={{ fontSize:'8px', color:'#888', textTransform:'uppercase', ...S.mono, marginBottom:'4px' }}>Palette</div>
          <div style={{ display:'flex', gap:'5px' }}>
            {colors.map((c,i) => (
              <div key={i} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:'2px' }}>
                <div style={{ width:'30px', height:'30px', borderRadius:'5px', background:c.c, border:'1px solid rgba(255,255,255,0.1)' }}/>
                <div style={{ fontSize:'7px', color:'#888', ...S.mono }}>{c.l}</div>
              </div>
            ))}
          </div>
        </F>
      </div>
      <F at={0.35} p={p}>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'6px' }}>
          <div style={{ ...S.card, padding:'10px' }}><div style={{ fontSize:'8px', color:'#888', ...S.mono }}>Heading</div><div style={{ fontSize:'14px', fontWeight:700, color:'#f5f5f5' }}>Inter</div></div>
          <div style={{ ...S.card, padding:'10px' }}><div style={{ fontSize:'8px', color:'#888', ...S.mono }}>Body</div><div style={{ fontSize:'14px', color:'#f5f5f5' }}>Inter</div></div>
        </div>
      </F>
      <F at={0.5} p={p}>
        <div><div style={{ fontSize:'8px', color:'#888', textTransform:'uppercase', ...S.mono, marginBottom:'4px' }}>Voice</div>
        <div style={{ display:'flex', gap:'4px' }}>{['Professional','Technical','Concise','Friendly'].map(v => <span key={v} style={S.tag}>{v}</span>)}</div></div>
      </F>
      <F at={0.65} p={p}>
        <div style={{ ...S.card, padding:'10px', display:'flex', alignItems:'center', gap:'8px' }}>
          <span style={{ color:S.accent }}>✦</span>
          <span style={{ fontSize:'11px', color:'#f5f5f5', fontWeight:500 }}>Every site, ad, email, and card auto-inherits this kit</span>
        </div>
      </F>
      <div style={S.caption}><span style={S.captionText}>Define once → applied everywhere automatically</span></div>
    </div>
  );
}

// ─── QUICK CHAT ───
function WTChat({ p }) {
  const models = [
    { name:'Claude Sonnet 4.5', cost:'~10/turn', active:true },
    { name:'GPT-4o', cost:'~10/turn' },
    { name:'Gemini 2.0 Flash', cost:'~1/turn' },
    { name:'Perplexity Sonar Pro', cost:'~10/turn' },
    { name:'o1 (Deep Think)', cost:'~50/turn' },
  ];
  return (
    <div style={{ ...S.scene, padding:'16px 20px', gap:'8px' }}>
      <div><div style={S.cat}>ai chat</div><div style={S.title}>💬 Multi-LLM quick chat</div><div style={S.desc}>Route to Claude, GPT-4o, Gemini, Perplexity, o1 — pick per-message. BYOK on every provider.</div></div>
      <div style={{ display:'flex', gap:'10px', flex:1 }}>
        {/* Model picker */}
        <F at={0.1} p={p} style={{ width:'140px' }}>
          <div style={{ ...S.card, padding:'8px', height:'100%' }}>
            <div style={{ fontSize:'8px', color:'#888', textTransform:'uppercase', ...S.mono, marginBottom:'6px' }}>Model</div>
            {models.map((m,i) => (
              <div key={i} style={{ padding:'5px 6px', borderRadius:'4px', marginBottom:'2px', background:m.active ? 'rgba(34,211,238,0.1)' : 'transparent', border:m.active ? '1px solid rgba(34,211,238,0.3)' : '1px solid transparent' }}>
                <div style={{ fontSize:'9px', fontWeight:m.active ? 700 : 400, color:m.active ? '#22d3ee' : '#f5f5f5' }}>{m.name}</div>
                <div style={{ fontSize:'7px', color:'#888', ...S.mono }}>{m.cost}</div>
              </div>
            ))}
          </div>
        </F>
        {/* Chat area */}
        <div style={{ flex:1, display:'flex', flexDirection:'column', gap:'8px' }}>
          <F at={0.2} p={p} style={{ flex:1, display:'flex', flexDirection:'column', gap:'6px' }}>
            <div style={{ alignSelf:'flex-end', background:'#22d3ee', color:'#000', padding:'8px 12px', borderRadius:'10px 10px 2px 10px', fontSize:'11px', fontWeight:500, maxWidth:'75%' }}>
              Analyze our top 10 competitors and draft a positioning statement
            </div>
            <div style={{ alignSelf:'flex-start', ...S.card, padding:'10px', maxWidth:'80%', fontSize:'10px', color:'#f5f5f5', lineHeight:1.5 }}>
              <div style={{ display:'flex', alignItems:'center', gap:'4px', marginBottom:'4px' }}>
                <div style={{ width:'12px', height:'12px', borderRadius:'50%', background:'rgba(34,211,238,0.15)', display:'flex', alignItems:'center', justifyContent:'center' }}>
                  <span style={{ fontSize:'6px', color:S.accent }}>●</span>
                </div>
                <span style={{ fontSize:'8px', fontWeight:600, color:S.accent, ...S.mono }}>Claude Sonnet 4.5</span>
              </div>
              I'll research your competitors across key dimensions and draft a differentiated positioning statement.<br/><br/>
              <span style={{ color:S.accent }}>→ Searching web:</span> "AI business tools SaaS competitors 2026"<br/>
              <span style={{ color:S.accent }}>→ Found:</span> 14 direct competitors analyzed<br/><br/>
              <span style={{ fontWeight:600 }}>Positioning draft:</span> "The only AI workspace where CRM, sites, agents, and analytics share one brain — so every tool makes every other tool smarter."
            </div>
          </F>
          {/* Input */}
          <div style={{ display:'flex', gap:'6px', alignItems:'center' }}>
            <div style={{ flex:1, ...S.field, display:'flex', alignItems:'center', gap:'6px' }}>
              <span style={{ color:'#888' }}>Ask anything…</span>
            </div>
            <div style={{ width:'28px', height:'28px', borderRadius:'6px', background:S.accent, display:'flex', alignItems:'center', justifyContent:'center' }}>
              <span style={{ color:'#000', fontSize:'12px' }}>↑</span>
            </div>
          </div>
        </div>
      </div>
      <div style={S.caption}><span style={S.captionText}>Vision · voice · artifacts · web search · knowledge base</span></div>
    </div>
  );
}

// ─── CUSTOM AGENTS ───
function WTAgents({ p }) {
  const agents = [
    { emoji:'🎯', name:'Lead Qualifier', model:'Claude Sonnet', skills:3, desc:'Scores inbound leads against ICP' },
    { emoji:'📝', name:'Content Writer', model:'GPT-4o', skills:2, desc:'Brand-voice blog posts + social' },
    { emoji:'📊', name:'Data Analyst', model:'o1', skills:4, desc:'Deep-think analysis of metrics' },
  ];
  return (
    <div style={{ ...S.scene, padding:'16px 20px', gap:'10px' }}>
      <div><div style={S.cat}>ai agents</div><div style={S.title}>🤖 Custom agents</div><div style={S.desc}>Build specialized AI agents with custom instructions, default models, and attached skills.</div></div>
      <div style={{ display:'flex', flexDirection:'column', gap:'6px', flex:1 }}>
        {agents.map((a,i) => (
          <F key={i} at={0.15 + i*0.2} p={p}>
            <div style={{ ...S.card, padding:'14px', display:'flex', gap:'12px', alignItems:'center' }}>
              <div style={{ fontSize:'28px' }}>{a.emoji}</div>
              <div style={{ flex:1 }}>
                <div style={{ fontSize:'14px', fontWeight:700, color:'#f5f5f5' }}>{a.name}</div>
                <div style={{ fontSize:'10px', color:'#888', marginTop:'2px' }}>{a.desc}</div>
              </div>
              <div style={{ textAlign:'right' }}>
                <div style={{ fontSize:'9px', color:S.accent, ...S.mono }}>{a.model}</div>
                <div style={{ fontSize:'8px', color:'#888', ...S.mono }}>{a.skills} skills</div>
              </div>
            </div>
          </F>
        ))}
      </div>
      <F at={0.7} p={p}>
        <div style={{ ...S.card, padding:'10px', display:'flex', alignItems:'center', gap:'8px', borderColor:'rgba(34,211,238,0.3)' }}>
          <span style={S.tag}>+ New agent</span>
          <span style={{ fontSize:'10px', color:'#888' }}>Name it, set instructions, pick model + skills, toggle KB</span>
        </div>
      </F>
      <div style={S.caption}><span style={S.captionText}>Each agent remembers its role across every conversation</span></div>
    </div>
  );
}

// ─── AI MISSIONS ───
function WTMissions({ p }) {
  const events = [
    { type:'think', c:S.accent, l:'THINKING', t:"I'll search Apollo for SaaS companies, score them, and enroll high-fit leads…" },
    { type:'tool', c:S.warn, l:'TOOL · apollo_search', t:'{"query": "SaaS Austin TX", "funding": "series_a", "limit": 50}' },
    { type:'result', c:S.good, l:'RESULT ✓', t:'Found 63 companies. Filtering to top 50 by relevance…' },
    { type:'tool', c:S.warn, l:'TOOL · lead_score', t:'Scoring 50 leads against ICP: dev-tools, 10-100 employees' },
    { type:'tool', c:S.warn, l:'TOOL · sequence_enroll', t:'Enrolling 18 leads (score ≥ 70) into "Series A outreach"' },
    { type:'result', c:S.good, l:'COMPLETE ✓', t:'18 leads enrolled. 5 CRM deals created. Full report attached.' },
  ];
  return (
    <div style={{ ...S.scene, padding:'16px 20px', gap:'8px' }}>
      <div><div style={S.cat}>autonomous agents</div><div style={S.title}>🚀 AI Missions</div><div style={S.desc}>Long-running agents with tool use, sub-agents, web search, file I/O. 47 templates or describe any goal.</div></div>
      <div style={{ ...S.card, padding:'8px 12px' }}>
        <div style={{ display:'flex', alignItems:'center', gap:'6px' }}>
          <div style={{ width:'6px', height:'6px', borderRadius:'50%', background:S.good }}/>
          <span style={{ fontSize:'11px', fontWeight:700, color:'#f5f5f5' }}>Lead enrichment pipeline</span>
          <span style={{ fontSize:'8px', color:S.good, ...S.mono, marginLeft:'auto' }}>RUNNING</span>
        </div>
      </div>
      <div style={{ display:'flex', flexDirection:'column', gap:'5px', flex:1 }}>
        {events.map((e,i) => (
          <F key={i} at={i*0.14} p={p}>
            <div style={{ borderLeft:`2px solid ${e.c}`, paddingLeft:'10px' }}>
              <div style={{ fontSize:'8px', fontWeight:600, color:e.c, ...S.mono }}>{e.l}</div>
              <div style={{ fontSize:'10px', color:'#f5f5f5', opacity:0.8, marginTop:'1px', lineHeight:1.4 }}>{e.t}</div>
            </div>
          </F>
        ))}
      </div>
      <F at={0.85} p={p}>
        <div style={{ display:'flex', gap:'14px', fontSize:'9px', color:'#888', ...S.mono, borderTop:'1px solid #222', paddingTop:'6px' }}>
          <span>⏱ 2m 34s</span><span>🔄 12 turns</span><span>💰 34 credits</span><span style={{ color:S.good }}>● Live</span>
        </div>
      </F>
      <div style={S.caption}><span style={S.captionText}>Runs autonomously for minutes to hours — real artifacts, live progress</span></div>
    </div>
  );
}

// ─── LEAD DISCOVERY ───
function WTLeadDiscovery({ p }) {
  const leads = [
    { name:'Sarah Chen', co:'TerraformIO', score:92, src:'Apollo' },
    { name:'Marcus Rivera', co:'StackPilot', score:88, src:'Apollo' },
    { name:'Priya Sharma', co:'DevBase', score:85, src:'GitHub' },
    { name:'Jake Morrison', co:'CloudNine AI', score:79, src:'Places' },
    { name:'Aisha Patel', co:'DataFlow', score:72, src:'Apollo' },
  ];
  return (
    <div style={{ ...S.scene, padding:'16px 20px', gap:'8px' }}>
      <div><div style={S.cat}>sales</div><div style={S.title}>🎯 Lead discovery</div><div style={S.desc}>Natural language search across Apollo, GitHub, Google Places, Reddit. AI scores every result.</div></div>
      <F at={0.1} p={p}>
        <div style={{ ...S.field, display:'flex', alignItems:'center', gap:'8px' }}>
          <span>🔍</span>
          <span style={{ fontSize:'11px' }}>SaaS founders Austin TX Series A 2025-2026</span>
          <span style={{ marginLeft:'auto', ...S.tag, fontSize:'8px' }}>Apollo + GitHub</span>
        </div>
      </F>
      <div style={{ ...S.card, flex:1, overflow:'hidden' }}>
        <div style={{ display:'grid', gridTemplateColumns:'2fr 1.5fr 0.6fr 0.6fr', padding:'8px 12px', borderBottom:'1px solid #222', fontSize:'8px', color:'#888', textTransform:'uppercase', ...S.mono }}>
          <span>Name</span><span>Company</span><span>Score</span><span>Source</span>
        </div>
        {leads.map((l,i) => (
          <F key={i} at={0.2 + i*0.12} p={p}>
            <div style={{ display:'grid', gridTemplateColumns:'2fr 1.5fr 0.6fr 0.6fr', padding:'7px 12px', borderBottom:'1px solid rgba(34,34,34,0.4)', alignItems:'center' }}>
              <div style={{ fontSize:'11px', fontWeight:600, color:'#f5f5f5' }}>{l.name}</div>
              <div style={{ fontSize:'10px', color:'#888' }}>{l.co}</div>
              <div style={{ fontSize:'13px', fontWeight:700, color:l.score >= 85 ? S.good : S.accent }}>{l.score}</div>
              <div style={{ fontSize:'8px', color:'#888', ...S.mono }}>{l.src}</div>
            </div>
          </F>
        ))}
      </div>
      <div style={S.caption}><span style={S.captionText}>Describe your ICP in plain English → scored results in seconds</span></div>
    </div>
  );
}

// ─── CRM + PIPELINE ───
function WTCrmPipeline({ p }) {
  const stages = [
    { name:'New', count:12, color:'#888', deals:['TerraformIO $45K','DevBase $28K'] },
    { name:'Qualified', count:8, color:S.accent, deals:['StackPilot $62K','CloudNine $35K'] },
    { name:'Proposal', count:4, color:S.warn, deals:['DataFlow $55K'] },
    { name:'Won', count:3, color:S.good, deals:['Acme Corp $120K'] },
  ];
  return (
    <div style={{ ...S.scene, padding:'16px 20px', gap:'8px' }}>
      <div><div style={S.cat}>sales</div><div style={S.title}>📊 CRM + deal pipeline</div><div style={S.desc}>Score-driven lead table + drag-and-drop kanban. Auto-enriched from every data source.</div></div>
      <F at={0.1} p={p}>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:'8px', flex:1 }}>
          {stages.map((s,i) => (
            <div key={i} style={{ ...S.card, padding:'10px', display:'flex', flexDirection:'column', gap:'6px' }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                <div style={{ fontSize:'11px', fontWeight:700, color:s.color }}>{s.name}</div>
                <div style={{ fontSize:'9px', color:'#888', ...S.mono }}>{s.count}</div>
              </div>
              {s.deals.map((d,j) => (
                <F key={j} at={0.2 + i*0.12 + j*0.08} p={p}>
                  <div style={{ background:'#0a0a0a', border:'1px solid #222', borderRadius:'5px', padding:'8px', fontSize:'10px', color:'#f5f5f5' }}>
                    {d}
                  </div>
                </F>
              ))}
            </div>
          ))}
        </div>
      </F>
      <div style={S.caption}><span style={S.captionText}>Leads from discovery auto-flow into pipeline with AI scoring</span></div>
    </div>
  );
}

Object.assign(window, { WTIntro, WTDashboard, WTBrandKit, WTChat, WTAgents, WTMissions, WTLeadDiscovery, WTCrmPipeline, S, F });
