// Walkthrough Scenes Part C: SEO, Workflows, Voice, Appointments, Analytics, KB, Integrations, Apps, Marketplace, ImageGen, Contracts, Settings, Outro

// ─── SEO RESEARCH ───
function WTSeo({ p }) {
  const keywords = [
    { kw:'ai crm tool', vol:'12.4K', diff:42, rank:3, intent:'Commercial' },
    { kw:'lead generation saas', vol:'8.1K', diff:58, rank:7, intent:'Commercial' },
    { kw:'marketing automation', vol:'22K', diff:71, rank:14, intent:'Informational' },
    { kw:'ai business tools', vol:'6.2K', diff:35, rank:2, intent:'Commercial' },
  ];
  return (
    <div style={{ ...S.scene, padding:'16px 20px', gap:'8px' }}>
      <div><div style={S.cat}>intelligence</div><div style={S.title}>📈 SEO research + rank tracking</div><div style={S.desc}>Keyword research, daily rank tracker, SERP intent classifier. BYOK DataForSEO + Similarweb.</div></div>
      <div style={{ ...S.card, flex:1, overflow:'hidden' }}>
        <div style={{ display:'grid', gridTemplateColumns:'2fr 0.8fr 0.6fr 0.5fr 0.8fr', padding:'8px 12px', borderBottom:'1px solid #222', fontSize:'8px', color:'#888', textTransform:'uppercase', ...S.mono }}>
          <span>Keyword</span><span>Volume</span><span>Difficulty</span><span>Rank</span><span>Intent</span>
        </div>
        {keywords.map((k,i) => (
          <F key={i} at={0.1 + i*0.15} p={p}>
            <div style={{ display:'grid', gridTemplateColumns:'2fr 0.8fr 0.6fr 0.5fr 0.8fr', padding:'8px 12px', borderBottom:'1px solid rgba(34,34,34,0.4)', alignItems:'center' }}>
              <div style={{ fontSize:'11px', fontWeight:600, color:'#f5f5f5', ...S.mono }}>{k.kw}</div>
              <div style={{ fontSize:'10px', color:'#888', ...S.mono }}>{k.vol}</div>
              <div style={{ fontSize:'10px', color:k.diff < 50 ? S.good : k.diff < 70 ? S.warn : S.bad, fontWeight:700 }}>{k.diff}</div>
              <div style={{ fontSize:'12px', fontWeight:700, color:k.rank <= 5 ? S.good : S.accent }}>#{k.rank}</div>
              <div style={{ fontSize:'9px', color:'#888' }}>{k.intent}</div>
            </div>
          </F>
        ))}
      </div>
      <div style={S.caption}><span style={S.captionText}>The Semrush + Ahrefs replacement — at API cost only</span></div>
    </div>
  );
}

// ─── WORKFLOWS ───
function WTWorkflows({ p }) {
  const workflows = [
    { trigger:'Lead score ≥ 70', action:'Enroll in "Series A outreach" sequence', status:'Active' },
    { trigger:'Widget captures email', action:'Create CRM lead + notify Slack', status:'Active' },
    { trigger:'Deal closed-won', action:'Spawn "onboarding kickoff" mission', status:'Active' },
    { trigger:'Competitor page changed', action:'Draft counter-campaign + alert team', status:'Paused' },
  ];
  return (
    <div style={{ ...S.scene, padding:'16px 20px', gap:'8px' }}>
      <div><div style={S.cat}>automation</div><div style={S.title}>⚡ Workflows</div><div style={S.desc}>When X happens, do Y automatically. Trigger → condition → action. Runs, missions, sequences, webhooks.</div></div>
      <div style={{ display:'flex', flexDirection:'column', gap:'5px', flex:1 }}>
        {workflows.map((w,i) => (
          <F key={i} at={0.1 + i*0.15} p={p}>
            <div style={{ ...S.card, padding:'12px', display:'flex', alignItems:'center', gap:'12px' }}>
              <div style={{ flex:1 }}>
                <div style={{ display:'flex', alignItems:'center', gap:'6px' }}>
                  <span style={{ fontSize:'10px', color:S.accent, fontWeight:600, ...S.mono }}>WHEN</span>
                  <span style={{ fontSize:'11px', color:'#f5f5f5', fontWeight:600 }}>{w.trigger}</span>
                </div>
                <div style={{ display:'flex', alignItems:'center', gap:'6px', marginTop:'4px' }}>
                  <span style={{ fontSize:'10px', color:S.warn, fontWeight:600, ...S.mono }}>THEN</span>
                  <span style={{ fontSize:'10px', color:'#888' }}>{w.action}</span>
                </div>
              </div>
              <div style={{ fontSize:'9px', color:w.status==='Active' ? S.good : '#888', ...S.mono }}>{w.status}</div>
            </div>
          </F>
        ))}
      </div>
      <div style={S.caption}><span style={S.captionText}>Autopilot mode — runs fire without your approval</span></div>
    </div>
  );
}

// ─── VOICE AGENT + APPOINTMENTS ───
function WTVoiceAppt({ p }) {
  return (
    <div style={{ ...S.scene, padding:'16px 20px', gap:'8px' }}>
      <div><div style={S.cat}>operations</div><div style={S.title}>📞 Voice agent + 📅 Appointments</div><div style={S.desc}>AI answers calls via Twilio. Transcribed, scored, booked. Calendly-style booking page built in.</div></div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'10px', flex:1 }}>
        <F at={0.1} p={p}>
          <div style={{ ...S.card, padding:'12px', display:'flex', flexDirection:'column', gap:'8px', height:'100%' }}>
            <div style={{ fontSize:'12px', fontWeight:700, color:'#f5f5f5' }}>📞 Voice Agent</div>
            <div style={{ ...S.field, display:'flex', alignItems:'center', gap:'6px' }}>
              <span style={{ fontSize:'11px' }}>+1 (512) 555-0147</span>
              <span style={{ ...S.tag, fontSize:'7px', marginLeft:'auto' }}>Twilio</span>
            </div>
            <div style={{ flex:1, display:'flex', flexDirection:'column', gap:'4px' }}>
              {[
                { caller:'Sarah Chen', dur:'2:34', intent:'High', score:88 },
                { caller:'Unknown', dur:'0:45', intent:'Low', score:22 },
                { caller:'Marcus R.', dur:'4:12', intent:'High', score:91 },
              ].map((c,i) => (
                <div key={i} style={{ background:'#0a0a0a', borderRadius:'4px', padding:'6px 8px', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                  <div><div style={{ fontSize:'10px', fontWeight:600, color:'#f5f5f5' }}>{c.caller}</div><div style={{ fontSize:'7px', color:'#888', ...S.mono }}>{c.dur}</div></div>
                  <div style={{ textAlign:'right' }}><div style={{ fontSize:'10px', fontWeight:700, color:c.score >= 70 ? S.good : '#888' }}>{c.score}</div><div style={{ fontSize:'7px', color:c.intent==='High' ? S.good : '#888' }}>{c.intent}</div></div>
                </div>
              ))}
            </div>
            <div style={{ fontSize:'8px', color:S.accent, ...S.mono }}>Recorded · transcribed · coaching notes</div>
          </div>
        </F>
        <F at={0.4} p={p}>
          <div style={{ ...S.card, padding:'12px', display:'flex', flexDirection:'column', gap:'8px', height:'100%' }}>
            <div style={{ fontSize:'12px', fontWeight:700, color:'#f5f5f5' }}>📅 Booking Page</div>
            <div style={{ background:'#0a0a0a', borderRadius:'6px', padding:'10px', flex:1, display:'flex', flexDirection:'column', gap:'6px' }}>
              <div style={{ textAlign:'center', fontSize:'13px', fontWeight:700, color:'#f5f5f5' }}>Book a consultation</div>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(5,1fr)', gap:'3px' }}>
                {['Mon','Tue','Wed','Thu','Fri'].map((d,i) => (
                  <div key={i} style={{ textAlign:'center', padding:'4px', borderRadius:'3px', background:i===1 ? 'rgba(34,211,238,0.15)' : 'transparent', border:i===1 ? '1px solid rgba(34,211,238,0.3)' : '1px solid #222' }}>
                    <div style={{ fontSize:'8px', color:'#888' }}>{d}</div>
                    <div style={{ fontSize:'10px', color:i===1 ? S.accent : '#f5f5f5', fontWeight:i===1 ? 700 : 400 }}>{12+i}</div>
                  </div>
                ))}
              </div>
              <div style={{ display:'flex', flexDirection:'column', gap:'3px' }}>
                {['9:00 AM','10:30 AM','2:00 PM'].map((t,i) => (
                  <div key={i} style={{ padding:'5px 8px', borderRadius:'4px', border:i===0 ? '1px solid rgba(34,211,238,0.4)' : '1px solid #222', background:i===0 ? 'rgba(34,211,238,0.08)' : 'transparent', fontSize:'10px', color:i===0 ? S.accent : '#f5f5f5', textAlign:'center' }}>{t}</div>
                ))}
              </div>
            </div>
            <div style={{ fontSize:'8px', color:S.good, ...S.mono }}>SMS reminder 24h before · review request after</div>
          </div>
        </F>
      </div>
      <div style={S.caption}><span style={S.captionText}>Every call qualified + booked — no human in the loop</span></div>
    </div>
  );
}

// ─── ANALYTICS ───
function WTAnalytics({ p }) {
  const stats = [
    { label:'Streak', value:'12 days', color:S.accent },
    { label:'Sessions (30d)', value:'847', color:'#f5f5f5' },
    { label:'Spend (30d)', value:'$34.20', color:S.accent },
    { label:'Retries', value:'3', color:'#f5f5f5' },
  ];
  return (
    <div style={{ ...S.scene, padding:'16px 20px', gap:'8px' }}>
      <div><div style={S.cat}>analytics</div><div style={S.title}>📊 Analytics + site traffic</div><div style={S.desc}>Activity heatmaps, skill effectiveness, ROI tracking, site visitor stream, SEO + a11y scores.</div></div>
      <F at={0.1} 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', ...S.mono, textTransform:'uppercase' }}>{s.label}</div>
              <div style={{ fontSize:'18px', fontWeight:700, color:s.color, marginTop:'2px' }}>{s.value}</div>
            </div>
          ))}
        </div>
      </F>
      <F at={0.3} p={p}>
        <div style={{ ...S.card, padding:'12px' }}>
          <div style={{ fontSize:'10px', fontWeight:700, color:'#f5f5f5', marginBottom:'6px' }}>Activity (last 90 days)</div>
          {/* Heatmap representation */}
          <div style={{ display:'flex', gap:'2px', flexWrap:'wrap' }}>
            {Array.from({length:91}, (_,i) => {
              const intensity = Math.random();
              const bg = intensity > 0.7 ? S.accent : intensity > 0.4 ? 'rgba(34,211,238,0.4)' : intensity > 0.15 ? 'rgba(34,211,238,0.15)' : '#141414';
              return <div key={i} style={{ width:'7px', height:'7px', borderRadius:'1px', background:bg }}/>;
            })}
          </div>
        </div>
      </F>
      <F at={0.55} p={p}>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'8px' }}>
          <div style={{ ...S.card, padding:'10px' }}>
            <div style={{ fontSize:'9px', fontWeight:700, color:'#f5f5f5', marginBottom:'4px' }}>Top skills by effectiveness</div>
            {['lead-discovery → 94','email-writer → 87','ad-copy-gen → 82'].map((s,i) => (
              <div key={i} style={{ fontSize:'9px', color:'#888', padding:'3px 0', borderBottom:'1px solid rgba(34,34,34,0.4)', ...S.mono }}>{s}</div>
            ))}
          </div>
          <div style={{ ...S.card, padding:'10px' }}>
            <div style={{ fontSize:'9px', fontWeight:700, color:'#f5f5f5', marginBottom:'4px' }}>Site traffic today</div>
            <div style={{ fontSize:'22px', fontWeight:700, color:S.accent }}>1,247</div>
            <div style={{ fontSize:'8px', color:'#888', ...S.mono }}>visitors · 68% organic</div>
          </div>
        </div>
      </F>
      <div style={S.caption}><span style={S.captionText}>GitHub-style heatmap + real-time site analytics + skill ROI</span></div>
    </div>
  );
}

// ─── KNOWLEDGE BASE + INTEGRATIONS ───
function WTKbIntegrations({ p }) {
  return (
    <div style={{ ...S.scene, padding:'16px 20px', gap:'8px' }}>
      <div><div style={S.cat}>platform</div><div style={S.title}>📚 Knowledge base + 🔌 Integrations</div><div style={S.desc}>Upload docs for RAG. Connect Apollo, Gmail, DataForSEO, Similarweb, Twilio — BYOK on every key.</div></div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'10px', flex:1 }}>
        <F at={0.1} p={p}>
          <div style={{ ...S.card, padding:'12px', display:'flex', flexDirection:'column', gap:'6px', height:'100%' }}>
            <div style={{ fontSize:'11px', fontWeight:700, color:'#f5f5f5' }}>📚 Knowledge Base</div>
            {[
              { name:'Product specs.pdf', size:'2.4 MB', status:'Indexed', tokens:'12K' },
              { name:'Brand guide.docx', size:'845 KB', status:'Indexed', tokens:'8K' },
              { name:'FAQ.md', size:'12 KB', status:'Indexed', tokens:'3K' },
            ].map((d,i) => (
              <div key={i} style={{ background:'#0a0a0a', borderRadius:'4px', padding:'7px 8px', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                <div><div style={{ fontSize:'10px', fontWeight:500, color:'#f5f5f5' }}>{d.name}</div><div style={{ fontSize:'7px', color:'#888', ...S.mono }}>{d.size} · {d.tokens} tokens</div></div>
                <div style={{ fontSize:'8px', color:S.good, ...S.mono }}>{d.status}</div>
              </div>
            ))}
            <div style={{ fontSize:'8px', color:S.accent, ...S.mono, marginTop:'auto' }}>Auto-retrieved by Missions + Chat</div>
          </div>
        </F>
        <F at={0.4} p={p}>
          <div style={{ ...S.card, padding:'12px', display:'flex', flexDirection:'column', gap:'6px', height:'100%' }}>
            <div style={{ fontSize:'11px', fontWeight:700, color:'#f5f5f5' }}>🔌 Connected APIs</div>
            {[
              { name:'Apollo', status:'Connected', color:S.good },
              { name:'Gmail OAuth', status:'Connected', color:S.good },
              { name:'DataForSEO', status:'Connected', color:S.good },
              { name:'Twilio', status:'Connected', color:S.good },
              { name:'Similarweb', status:'Not set', color:'#888' },
              { name:'Ayrshare', status:'Not set', color:'#888' },
            ].map((i,idx) => (
              <div key={idx} style={{ display:'flex', justifyContent:'space-between', padding:'4px 0', borderBottom:'1px solid rgba(34,34,34,0.4)', fontSize:'10px' }}>
                <span style={{ fontWeight:500, color:'#f5f5f5' }}>{i.name}</span>
                <span style={{ color:i.color, fontSize:'8px', ...S.mono }}>{i.status}</span>
              </div>
            ))}
            <div style={{ fontSize:'8px', color:'#888', ...S.mono, marginTop:'auto' }}>Each call metered as credits · confirm before run</div>
          </div>
        </F>
      </div>
      <div style={S.caption}><span style={S.captionText}>Your data + your API keys = zero markup, full control</span></div>
    </div>
  );
}

// ─── APP BUILDER + MARKETPLACE ───
function WTAppsMarketplace({ p }) {
  return (
    <div style={{ ...S.scene, padding:'16px 20px', gap:'8px' }}>
      <div><div style={S.cat}>platform</div><div style={S.title}>🧩 App builder + 🏬 Marketplace</div><div style={S.desc}>Describe a workflow → AI scaffolds tables, pages, forms. Browse community apps or publish yours (80% rev share).</div></div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'10px', flex:1 }}>
        <F at={0.1} p={p}>
          <div style={{ ...S.card, padding:'12px', display:'flex', flexDirection:'column', gap:'8px', height:'100%' }}>
            <div style={{ fontSize:'12px', fontWeight:700, color:'#f5f5f5' }}>🧩 App Builder</div>
            <div style={{ ...S.field, fontSize:'10px', lineHeight:1.5, flex:1 }}>
              "Build an app to track customer support tickets. Each ticket has a title, priority (low/med/high), status (open/in-progress/resolved), and assignee. Kanban view by status."
            </div>
            <div style={{ display:'flex', flexDirection:'column', gap:'3px' }}>
              {['✓ Data table: support_tickets','✓ Kanban view by status','✓ Form: new ticket','✓ Dashboard: open vs resolved'].map((s,i) => (
                <div key={i} style={{ fontSize:'9px', color:S.good, ...S.mono }}>{s}</div>
              ))}
            </div>
            <div style={{ background:S.accent, color:'#000', padding:'5px 10px', borderRadius:'4px', fontSize:'10px', fontWeight:600, textAlign:'center' }}>Generate app →</div>
          </div>
        </F>
        <F at={0.4} p={p}>
          <div style={{ ...S.card, padding:'12px', display:'flex', flexDirection:'column', gap:'6px', height:'100%' }}>
            <div style={{ fontSize:'12px', fontWeight:700, color:'#f5f5f5' }}>🏬 Marketplace</div>
            {[
              { name:'Lead Qualifier Pro', author:'@mike', installs:234, price:'Free' },
              { name:'Patient Intake Form', author:'@clinictools', installs:89, price:'$4.99' },
              { name:'Social Content Calendar', author:'@growth', installs:167, price:'Free' },
              { name:'Invoice Generator', author:'@biz', installs:56, price:'$9.99' },
            ].map((a,i) => (
              <div key={i} style={{ background:'#0a0a0a', borderRadius:'5px', padding:'8px', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                <div><div style={{ fontSize:'10px', fontWeight:600, color:'#f5f5f5' }}>{a.name}</div><div style={{ fontSize:'7px', color:'#888', ...S.mono }}>{a.author} · {a.installs} installs</div></div>
                <div style={{ ...S.tag, fontSize:'8px' }}>{a.price}</div>
              </div>
            ))}
            <div style={{ fontSize:'8px', color:S.accent, ...S.mono, marginTop:'auto' }}>Publish yours → earn 80% on every install</div>
          </div>
        </F>
      </div>
      <div style={S.caption}><span style={S.captionText}>No-code apps live inside your workspace — or sell them</span></div>
    </div>
  );
}

// ─── IMAGE GEN + CONTRACTS + LEGAL ───
function WTImageContracts({ p }) {
  return (
    <div style={{ ...S.scene, padding:'16px 20px', gap:'8px' }}>
      <div><div style={S.cat}>tools</div><div style={S.title}>🖼️ Image gen + 📄 Contracts + ⚖️ Legal</div><div style={S.desc}>FLUX image generation (~3 credits). Contract templates with AI fill. Privacy policy + terms auto-generated.</div></div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:'8px', flex:1 }}>
        <F at={0.1} p={p}>
          <div style={{ ...S.card, padding:'12px', display:'flex', flexDirection:'column', gap:'6px', height:'100%' }}>
            <div style={{ fontSize:'11px', fontWeight:700, color:'#f5f5f5' }}>🖼️ Image Gen</div>
            <div style={{ flex:1, background:'#0a0a0a', borderRadius:'6px', display:'flex', alignItems:'center', justifyContent:'center', border:'1px solid #222' }}>
              <div style={{ textAlign:'center' }}>
                <div style={{ fontSize:'28px', opacity:0.3 }}>🖼️</div>
                <div style={{ fontSize:'8px', color:S.accent, ...S.mono, marginTop:'4px' }}>FLUX · ~3 credits</div>
              </div>
            </div>
            <div style={{ fontSize:'8px', color:'#888' }}>Logos, social graphics, ad creatives</div>
          </div>
        </F>
        <F at={0.35} p={p}>
          <div style={{ ...S.card, padding:'12px', display:'flex', flexDirection:'column', gap:'6px', height:'100%' }}>
            <div style={{ fontSize:'11px', fontWeight:700, color:'#f5f5f5' }}>📄 Contracts</div>
            {['NDA template','Service agreement','Freelancer contract'].map((c,i) => (
              <div key={i} style={{ background:'#0a0a0a', borderRadius:'4px', padding:'6px 8px', fontSize:'9px', color:'#f5f5f5', display:'flex', justifyContent:'space-between' }}>
                <span>{c}</span><span style={{ color:S.accent, ...S.mono }}>AI fill →</span>
              </div>
            ))}
            <div style={{ fontSize:'8px', color:'#888', ...S.mono, marginTop:'auto' }}>DocuSign + Bonsai replacement</div>
          </div>
        </F>
        <F at={0.6} p={p}>
          <div style={{ ...S.card, padding:'12px', display:'flex', flexDirection:'column', gap:'6px', height:'100%' }}>
            <div style={{ fontSize:'11px', fontWeight:700, color:'#f5f5f5' }}>⚖️ Legal Docs</div>
            {['Privacy policy','Terms of service','Cookie policy'].map((d,i) => (
              <div key={i} style={{ background:'#0a0a0a', borderRadius:'4px', padding:'6px 8px', fontSize:'9px', color:'#f5f5f5', display:'flex', justifyContent:'space-between' }}>
                <span>{d}</span><span style={{ color:S.good, fontSize:'7px', ...S.mono }}>Generated ✓</span>
              </div>
            ))}
            <div style={{ fontSize:'8px', color:'#888', ...S.mono, marginTop:'auto' }}>Iubenda + Termly replacement</div>
          </div>
        </F>
      </div>
      <div style={S.caption}><span style={S.captionText}>Every output inherits your brand kit automatically</span></div>
    </div>
  );
}

// ─── SETTINGS ───
function WTSettings({ p }) {
  return (
    <div style={{ ...S.scene, padding:'16px 20px', gap:'8px' }}>
      <div><div style={S.cat}>settings</div><div style={S.title}>⚙️ BYOK · Credits · Team</div><div style={S.desc}>Wire your own API keys for $0 markup. Or use credits ($1 = 100). Role-based team access.</div></div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'10px', flex:1 }}>
        <F at={0.1} p={p}>
          <div style={{ ...S.card, padding:'12px', display:'flex', flexDirection:'column', gap:'8px', height:'100%' }}>
            <div style={{ fontSize:'12px', fontWeight:700, color:'#f5f5f5' }}>💳 Billing</div>
            <div style={{ padding:'10px', borderRadius:'6px', border:'1px solid #222' }}>
              <div style={{ fontSize:'10px', fontWeight:600, color:'#f5f5f5' }}>Pay with Credits</div>
              <div style={{ fontSize:'8px', color:'#888', marginTop:'2px' }}>$1 = 100 credits · every action shows cost before commit</div>
            </div>
            <div style={{ padding:'10px', borderRadius:'6px', border:'2px solid '+S.accent, background:'rgba(34,211,238,0.05)' }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                <div style={{ fontSize:'10px', fontWeight:600, color:S.accent }}>Bring Your Own Keys</div>
                <span style={{ ...S.tag, fontSize:'7px' }}>★ Recommended</span>
              </div>
              <div style={{ fontSize:'8px', color:'#888', marginTop:'2px' }}>$0 markup ever · per-tenant AES-256-GCM · spend caps</div>
            </div>
            <div style={{ fontSize:'8px', color:'#888', ...S.mono }}>Mix: BYOK for Claude, credits for the rest</div>
          </div>
        </F>
        <F at={0.4} p={p}>
          <div style={{ ...S.card, padding:'12px', display:'flex', flexDirection:'column', gap:'8px', height:'100%' }}>
            <div style={{ fontSize:'12px', fontWeight:700, color:'#f5f5f5' }}>👥 Team</div>
            {[
              { name:'You', role:'Owner', color:S.accent },
              { name:'Alex M.', role:'Admin', color:S.plum },
              { name:'Jordan K.', role:'Member', color:S.good },
              { name:'Sam L.', role:'Viewer', color:'#888' },
            ].map((m,i) => (
              <div key={i} style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:'6px 0', borderBottom:'1px solid rgba(34,34,34,0.4)' }}>
                <span style={{ fontSize:'11px', fontWeight:500, color:'#f5f5f5' }}>{m.name}</span>
                <span style={{ fontSize:'9px', color:m.color, ...S.mono }}>{m.role}</span>
              </div>
            ))}
            <div style={{ marginTop:'auto' }}>
              <div style={{ fontSize:'10px', fontWeight:700, color:'#f5f5f5', marginBottom:'4px' }}>Security</div>
              <div style={{ display:'flex', gap:'4px', flexWrap:'wrap' }}>
                {['Audit log','HIPAA mode','GDPR export','Spend caps'].map(s => <span key={s} style={{ ...S.tag, fontSize:'7px' }}>{s}</span>)}
              </div>
            </div>
          </div>
        </F>
      </div>
      <div style={S.caption}><span style={S.captionText}>Enterprise-grade security with startup-grade simplicity</span></div>
    </div>
  );
}

// ─── OUTRO ───
function WTOutro({ p }) {
  return (
    <div style={{ ...S.scene, alignItems:'center', justifyContent:'center', textAlign:'center', gap:'16px', background:'#000' }}>
      <F at={0.05} p={p}>
        <svg width="56" height="56" 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:'34px', fontWeight:700, color:'#f5f5f5', letterSpacing:'-0.03em', lineHeight:1.1 }}>
          One workspace.<br/>Every tool.<br/><span style={{ color:S.accent }}>AI-native.</span>
        </div>
      </F>
      <F at={0.3} p={p}>
        <div style={{ fontSize:'14px', color:'#888', maxWidth:'400px', lineHeight:1.5 }}>
          Free tier — no credit card. BYOK on every provider. 17-step guided tour gets you running in 30 minutes.
        </div>
      </F>
      <F at={0.5} p={p}>
        <div style={{ background:S.accent, color:'#000', padding:'10px 28px', borderRadius:'8px', fontSize:'16px', fontWeight:700 }}>
          looperhq.com
        </div>
      </F>
      <F at={0.65} p={p}>
        <div style={{ display:'flex', gap:'24px', fontSize:'11px', color:'#888' }}>
          <span>Free tier</span><span>·</span><span>BYOK = $0 markup</span><span>·</span><span>30+ tools</span>
        </div>
      </F>
    </div>
  );
}

Object.assign(window, { WTSeo, WTWorkflows, WTVoiceAppt, WTAnalytics, WTKbIntegrations, WTAppsMarketplace, WTImageContracts, WTSettings, WTOutro });