// Walkthrough Scenes Part B: Sequences, Sites, Widgets, Forms, Social, Ads, AEO, Competitors

// ─── EMAIL SEQUENCES ───
function WTSequences({ p }) {
  const steps = [
    { day:'Day 0', subject:'Introduction + value prop', status:'Sent', opens:'68%', clicks:'12%' },
    { day:'Day 3', subject:'Case study: 3x pipeline in 30 days', status:'Sent', opens:'52%', clicks:'8%' },
    { day:'Day 7', subject:'Quick question about your stack', status:'Scheduled', opens:'—', clicks:'—' },
    { day:'Day 14', subject:'Last chance: free audit offer', status:'Draft', opens:'—', clicks:'—' },
  ];
  return (
    <div style={{ ...S.scene, padding:'16px 20px', gap:'8px' }}>
      <div><div style={S.cat}>outreach</div><div style={S.title}>✉️ Email sequences</div><div style={S.desc}>Multi-step outreach with per-lead personalization. Auto-pause on reply. Brand voice baked in.</div></div>
      <F at={0.05} p={p}>
        <div style={{ display:'flex', gap:'8px', alignItems:'center' }}>
          <div style={{ ...S.card, padding:'6px 10px', fontSize:'10px', fontWeight:600, color:'#f5f5f5' }}>Series A Outreach</div>
          <span style={{ fontSize:'9px', color:S.good, ...S.mono }}>Active · 41 enrolled</span>
          <span style={{ fontSize:'9px', color:'#888', ...S.mono, marginLeft:'auto' }}>via Resend</span>
        </div>
      </F>
      <div style={{ display:'flex', flexDirection:'column', gap:'4px', flex:1 }}>
        {steps.map((s,i) => (
          <F key={i} at={0.1 + i*0.15} p={p}>
            <div style={{ ...S.card, padding:'10px', display:'grid', gridTemplateColumns:'60px 2fr 0.7fr 0.5fr 0.5fr', alignItems:'center', gap:'8px' }}>
              <div style={{ fontSize:'10px', color:S.accent, fontWeight:600, ...S.mono }}>{s.day}</div>
              <div style={{ fontSize:'11px', color:'#f5f5f5' }}>{s.subject}</div>
              <div style={{ fontSize:'9px', color:s.status==='Sent' ? S.good : s.status==='Scheduled' ? S.warn : '#888', ...S.mono }}>{s.status}</div>
              <div style={{ fontSize:'9px', color:'#888', ...S.mono, textAlign:'center' }}>{s.opens}</div>
              <div style={{ fontSize:'9px', color:'#888', ...S.mono, textAlign:'center' }}>{s.clicks}</div>
            </div>
          </F>
        ))}
      </div>
      <F at={0.75} p={p}>
        <div style={{ ...S.card, padding:'8px 12px', borderColor:'rgba(16,185,129,0.3)', display:'flex', alignItems:'center', gap:'8px' }}>
          <span style={{ color:S.good }}>↩</span>
          <span style={{ fontSize:'10px', color:'#f5f5f5' }}>Reply detected → sequence auto-paused, deal created</span>
        </div>
      </F>
      <div style={S.caption}><span style={S.captionText}>Haiku personalizes every email · reply auto-pause via Gmail polling</span></div>
    </div>
  );
}

// ─── AI SITE BUILDER ───
function WTSiteBuilder({ p }) {
  return (
    <div style={{ ...S.scene, padding:'16px 20px', gap:'8px' }}>
      <div><div style={S.cat}>sites</div><div style={S.title}>🌐 AI site builder</div><div style={S.desc}>Describe your page → AI fills copy + structure. Brand kit colors auto-applied. Deploy to Vercel in one click.</div></div>
      <div style={{ display:'flex', gap:'12px', flex:1 }}>
        {/* Prompt side */}
        <F at={0.05} p={p} style={{ width:'200px', display:'flex', flexDirection:'column', gap:'6px' }}>
          <div style={{ fontSize:'8px', color:'#888', textTransform:'uppercase', ...S.mono }}>Template</div>
          <div style={{ ...S.field }}>SaaS hero landing page ▾</div>
          <div style={{ fontSize:'8px', color:'#888', textTransform:'uppercase', ...S.mono }}>Prompt</div>
          <div style={{ ...S.field, flex:1, fontSize:'10px', lineHeight:1.5 }}>
            A landing page for an AI-powered business OS. Hero with bold headline, 3 feature cards, how-it-works section, and a CTA.
          </div>
          <div style={{ background:S.accent, color:'#000', padding:'6px 12px', borderRadius:'5px', fontSize:'11px', fontWeight:600, textAlign:'center' }}>Generate →</div>
        </F>
        {/* Preview side */}
        <F at={0.3} p={p} style={{ flex:1, display:'flex', flexDirection:'column' }}>
          <div style={{ ...S.card, flex:1, overflow:'hidden' }}>
            <div style={{ padding:'5px 8px', borderBottom:'1px solid #222', display:'flex', alignItems:'center', gap:'4px' }}>
              <div style={{ display:'flex', gap:'2px' }}><div style={{ width:'5px', height:'5px', borderRadius:'50%', background:'#ef4444' }}/><div style={{ width:'5px', height:'5px', borderRadius:'50%', background:'#f59e0b' }}/><div style={{ width:'5px', height:'5px', borderRadius:'50%', background:'#10b981' }}/></div>
              <div style={{ flex:1, fontSize:'8px', color:'#888', background:'#0a0a0a', borderRadius:'2px', padding:'2px 6px', ...S.mono }}>acme-digital.looperhq.com</div>
              <div style={{ fontSize:'7px', color:S.good, ...S.mono }}>DEPLOYED ✓</div>
            </div>
            <div style={{ padding:'14px', background:'linear-gradient(180deg, #0a0a0a, #141414)', textAlign:'center', display:'flex', flexDirection:'column', alignItems:'center', gap:'8px' }}>
              <div style={{ fontSize:'16px', fontWeight:700, color:'#f5f5f5' }}>Ship faster with <span style={{ color:S.accent }}>AI on autopilot</span></div>
              <div style={{ fontSize:'9px', color:'#888' }}>The all-in-one platform for modern dev teams</div>
              <div style={{ background:S.accent, color:'#000', padding:'4px 10px', borderRadius:'4px', fontSize:'9px', fontWeight:600 }}>Get started free</div>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:'5px', width:'100%', marginTop:'6px' }}>
                {['Smart CRM','Auto Outreach','AI Agents'].map(f => (
                  <div key={f} style={{ background:'#0a0a0a', border:'1px solid #222', borderRadius:'4px', padding:'8px', fontSize:'9px', fontWeight:600, color:'#f5f5f5' }}>{f}</div>
                ))}
              </div>
            </div>
          </div>
        </F>
      </div>
      <div style={S.caption}><span style={S.captionText}>First-party analytics + chat widget auto-installed + custom domain</span></div>
    </div>
  );
}

// ─── CHAT WIDGETS + FORMS ───
function WTWidgetsForms({ p }) {
  return (
    <div style={{ ...S.scene, padding:'16px 20px', gap:'8px' }}>
      <div><div style={S.cat}>engagement</div><div style={S.title}>💬 Chat widget + 📝 Forms</div><div style={S.desc}>AI chat on your site captures leads into CRM. Custom forms with field builder + submissions inbox.</div></div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'10px', flex:1 }}>
        {/* Chat widget */}
        <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' }}>Chat Widget</div>
            <div style={{ flex:1, background:'#0a0a0a', borderRadius:'6px', padding:'10px', display:'flex', flexDirection:'column', gap:'5px' }}>
              <div style={{ alignSelf:'flex-start', ...S.card, borderRadius:'8px 8px 8px 2px', padding:'6px 10px', fontSize:'10px', color:'#f5f5f5', maxWidth:'85%' }}>Hi! I'm the Acme AI assistant. How can I help you today?</div>
              <div style={{ alignSelf:'flex-end', background:S.accent, borderRadius:'8px 8px 2px 8px', padding:'6px 10px', fontSize:'10px', color:'#000', maxWidth:'75%' }}>What's your pricing?</div>
              <div style={{ alignSelf:'flex-start', ...S.card, borderRadius:'8px 8px 8px 2px', padding:'6px 10px', fontSize:'10px', color:'#f5f5f5', maxWidth:'85%' }}>We have a free tier and Pro at $49/mo. Want me to book a demo?</div>
            </div>
            <div style={{ fontSize:'8px', color:S.good, ...S.mono }}>→ Auto-captures email + transcript to CRM lead</div>
          </div>
        </F>
        {/* Forms */}
        <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' }}>Contact Form Builder</div>
            <div style={{ display:'flex', flexDirection:'column', gap:'5px', flex:1 }}>
              <div><div style={{ fontSize:'8px', color:'#888', ...S.mono, marginBottom:'2px' }}>Name *</div><div style={S.field}>John Smith</div></div>
              <div><div style={{ fontSize:'8px', color:'#888', ...S.mono, marginBottom:'2px' }}>Email *</div><div style={S.field}>john@acme.com</div></div>
              <div><div style={{ fontSize:'8px', color:'#888', ...S.mono, marginBottom:'2px' }}>Message</div><div style={{ ...S.field, minHeight:'36px' }}>Interested in the Pro plan…</div></div>
              <div style={{ background:S.accent, color:'#000', padding:'6px', borderRadius:'4px', fontSize:'10px', fontWeight:600, textAlign:'center' }}>Submit</div>
            </div>
            <div style={{ fontSize:'8px', color:S.accent, ...S.mono }}>→ Submissions land as CRM leads with transcript</div>
          </div>
        </F>
      </div>
      <div style={S.caption}><span style={S.captionText}>One snippet on your site — widget + forms auto-embed</span></div>
    </div>
  );
}

// ─── SOCIAL SCHEDULER ───
function WTSocial({ p }) {
  const posts = [
    { platform:'LinkedIn', time:'Tue 9am', content:'🚀 Announcing our new AI mission engine…', status:'Scheduled', color:'#0077b5' },
    { platform:'X / Twitter', time:'Wed 2pm', content:'Thread: How we replaced 15 SaaS tools…', status:'Draft', color:'#888' },
    { platform:'Instagram', time:'Thu 11am', content:'Behind the scenes of our AI workspace…', status:'Scheduled', color:'#e1306c' },
    { platform:'TikTok', time:'Fri 3pm', content:'60s demo: lead discovery in action', status:'Draft', color:'#888' },
  ];
  return (
    <div style={{ ...S.scene, padding:'16px 20px', gap:'8px' }}>
      <div><div style={S.cat}>growth</div><div style={S.title}>📣 Social scheduler</div><div style={S.desc}>Queue posts to LinkedIn, X, Instagram, TikTok, YouTube Shorts, Threads. AI drafts in your brand voice.</div></div>
      <div style={{ display:'flex', flexDirection:'column', gap:'4px', flex:1 }}>
        {posts.map((po,i) => (
          <F key={i} at={0.1 + i*0.15} p={p}>
            <div style={{ ...S.card, padding:'10px', display:'grid', gridTemplateColumns:'100px 2fr 0.6fr', gap:'10px', alignItems:'center' }}>
              <div>
                <div style={{ fontSize:'11px', fontWeight:700, color:po.color }}>{po.platform}</div>
                <div style={{ fontSize:'8px', color:'#888', ...S.mono }}>{po.time}</div>
              </div>
              <div style={{ fontSize:'10px', color:'#f5f5f5', lineHeight:1.4 }}>{po.content}</div>
              <div style={{ fontSize:'9px', color:po.status==='Scheduled' ? S.good : S.warn, ...S.mono, textAlign:'right' }}>{po.status}</div>
            </div>
          </F>
        ))}
      </div>
      <F at={0.75} p={p}>
        <div style={{ ...S.card, padding:'8px 12px', display:'flex', alignItems:'center', gap:'8px' }}>
          <span style={{ color:S.accent }}>✦</span>
          <span style={{ fontSize:'10px', color:'#f5f5f5' }}>Per-platform writers tuned to each algorithm's physics</span>
        </div>
      </F>
      <div style={S.caption}><span style={S.captionText}>Cron publishes every 5min via Ayrshare — or copy-paste manually</span></div>
    </div>
  );
}

// ─── AD COPY + AUDIENCES ───
function WTAdCopy({ p }) {
  return (
    <div style={{ ...S.scene, padding:'16px 20px', gap:'8px' }}>
      <div><div style={S.cat}>growth</div><div style={S.title}>🪧 Ad copy + audiences</div><div style={S.desc}>Meta + Google Ads variants in your brand voice. Hashed audiences for Custom Audience uploads.</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' }}>
            <div style={{ display:'flex', justifyContent:'space-between' }}>
              <div style={{ fontSize:'11px', fontWeight:700, color:'#f5f5f5' }}>Meta Ad Copy</div>
              <span style={S.tag}>3 variants</span>
            </div>
            <div style={{ background:'#0a0a0a', borderRadius:'5px', padding:'10px' }}>
              <div style={{ fontSize:'8px', color:'#888', ...S.mono, marginBottom:'4px' }}>PRIMARY TEXT</div>
              <div style={{ fontSize:'10px', color:'#f5f5f5', lineHeight:1.5 }}>Stop juggling 15 SaaS tools. LooperHQ gives you CRM, lead gen, email sequences, and AI agents — all in one workspace. Start free.</div>
            </div>
            <div style={{ background:'#0a0a0a', borderRadius:'5px', padding:'10px' }}>
              <div style={{ fontSize:'8px', color:'#888', ...S.mono, marginBottom:'4px' }}>HEADLINE</div>
              <div style={{ fontSize:'12px', fontWeight:700, color:'#f5f5f5' }}>One Workspace. Every Tool. AI-Native.</div>
            </div>
          </div>
        </F>
        <F at={0.4} p={p}>
          <div style={{ ...S.card, padding:'12px', display:'flex', flexDirection:'column', gap:'6px' }}>
            <div style={{ fontSize:'11px', fontWeight:700, color:'#f5f5f5' }}>Google Search Ads</div>
            <div style={{ background:'#0a0a0a', borderRadius:'5px', padding:'10px' }}>
              <div style={{ fontSize:'12px', fontWeight:700, color:S.accent, lineHeight:1.3 }}>AI Business OS — Replace 15 SaaS Tools</div>
              <div style={{ fontSize:'9px', color:S.good, ...S.mono, marginTop:'2px' }}>looperhq.com</div>
              <div style={{ fontSize:'10px', color:'#888', marginTop:'4px', lineHeight:1.4 }}>CRM, lead gen, AI agents, site builder — one subscription. Free tier, no credit card. Start in 5 minutes.</div>
            </div>
            <div style={{ marginTop:'auto' }}>
              <div style={{ fontSize:'11px', fontWeight:700, color:'#f5f5f5', marginBottom:'4px' }}>Audiences</div>
              <div style={{ display:'flex', gap:'4px', flexWrap:'wrap' }}>
                {['SaaS founders','Series A','Austin TX','Dev tools'].map(a => <span key={a} style={{ ...S.tag, fontSize:'8px' }}>{a}</span>)}
              </div>
            </div>
          </div>
        </F>
      </div>
      <div style={S.caption}><span style={S.captionText}>Copy any variant straight into Ads Manager — character limits enforced</span></div>
    </div>
  );
}

// ─── AEO CITATIONS ───
function WTAeo({ p }) {
  const engines = [
    { name:'ChatGPT', score:'72%', trend:'↑ 8%', color:S.good },
    { name:'Claude', score:'68%', trend:'↑ 3%', color:S.accent },
    { name:'Perplexity', score:'85%', trend:'↑ 12%', color:S.good },
    { name:'Gemini', score:'41%', trend:'↓ 5%', color:S.bad },
    { name:'Sonar', score:'63%', trend:'—', color:'#888' },
  ];
  return (
    <div style={{ ...S.scene, padding:'16px 20px', gap:'8px' }}>
      <div><div style={S.cat}>intelligence</div><div style={S.title}>🔎 AEO citation tracker</div><div style={S.desc}>Track how often AI assistants cite your brand. When citations drop, auto-rewriter drafts fixes.</div></div>
      <F at={0.1} p={p}>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(5,1fr)', gap:'6px' }}>
          {engines.map((e,i) => (
            <div key={i} style={{ ...S.card, padding:'10px', textAlign:'center' }}>
              <div style={{ fontSize:'9px', color:'#888', ...S.mono }}>{e.name}</div>
              <div style={{ fontSize:'22px', fontWeight:700, color:e.color, marginTop:'2px' }}>{e.score}</div>
              <div style={{ fontSize:'8px', color:e.color, ...S.mono }}>{e.trend}</div>
            </div>
          ))}
        </div>
      </F>
      <F at={0.4} p={p}>
        <div style={{ ...S.card, padding:'12px', flex:1 }}>
          <div style={{ fontSize:'11px', fontWeight:700, color:'#f5f5f5', marginBottom:'6px' }}>Watched queries</div>
          {['best ai crm for startups','marketing automation tool 2026','lead generation saas'].map((q,i) => (
            <div key={i} style={{ display:'flex', justifyContent:'space-between', padding:'5px 0', borderBottom:'1px solid rgba(34,34,34,0.4)', fontSize:'10px' }}>
              <span style={{ color:'#f5f5f5', ...S.mono }}>"{q}"</span>
              <span style={{ color:S.good, fontSize:'9px', ...S.mono }}>Cited ✓</span>
            </div>
          ))}
        </div>
      </F>
      <F at={0.7} p={p}>
        <div style={{ ...S.card, padding:'8px 12px', borderColor:'rgba(245,158,11,0.3)', display:'flex', alignItems:'center', gap:'8px' }}>
          <span style={{ color:S.warn }}>✦</span>
          <span style={{ fontSize:'10px', color:'#f5f5f5' }}>Auto-rewriter: when Gemini drops your citation, AI drafts a page that wins it back</span>
        </div>
      </F>
      <div style={S.caption}><span style={S.captionText}>Daily cron scans every AI engine — the Profound replacement ($499+/mo)</span></div>
    </div>
  );
}

// ─── COMPETITORS ───
function WTCompetitors({ p }) {
  return (
    <div style={{ ...S.scene, padding:'16px 20px', gap:'8px' }}>
      <div><div style={S.cat}>intelligence</div><div style={S.title}>👁️ Competitor watchlist</div><div style={S.desc}>Daily diffs on competitor pages. Screenshots, share-of-voice scoring, counter-campaign drafts.</div></div>
      <F at={0.1} p={p}>
        <div style={{ ...S.card, padding:'12px' }}>
          <div style={{ fontSize:'11px', fontWeight:700, color:'#f5f5f5', marginBottom:'8px' }}>Active watchlists</div>
          {[
            { label:'Direct competitors', urls:5, changes:3, last:'2h ago' },
            { label:'Enterprise alternatives', urls:3, changes:1, last:'6h ago' },
          ].map((w,i) => (
            <div key={i} style={{ display:'flex', justifyContent:'space-between', padding:'6px 0', borderBottom:'1px solid rgba(34,34,34,0.4)', fontSize:'10px' }}>
              <span style={{ fontWeight:600, color:'#f5f5f5' }}>{w.label}</span>
              <span style={{ color:'#888', ...S.mono }}>{w.urls} URLs · {w.changes} changes · {w.last}</span>
            </div>
          ))}
        </div>
      </F>
      <F at={0.35} p={p}>
        <div style={{ ...S.card, padding:'12px', flex:1 }}>
          <div style={{ fontSize:'11px', fontWeight:700, color:S.warn, marginBottom:'6px' }}>Recent changes detected</div>
          {[
            { comp:'CompetitorA', change:'New pricing page — dropped $20/mo on starter tier', sig:'High' },
            { comp:'CompetitorB', change:'Launched "AI agents" feature page', sig:'Critical' },
            { comp:'CompetitorC', change:'Blog post: "Why we switched from X"', sig:'Medium' },
          ].map((c,i) => (
            <div key={i} style={{ padding:'6px 0', borderBottom:'1px solid rgba(34,34,34,0.4)', fontSize:'10px' }}>
              <div style={{ display:'flex', justifyContent:'space-between' }}>
                <span style={{ fontWeight:600, color:'#f5f5f5' }}>{c.comp}</span>
                <span style={{ color:c.sig==='Critical' ? S.bad : c.sig==='High' ? S.warn : '#888', fontSize:'8px', ...S.mono }}>{c.sig}</span>
              </div>
              <div style={{ color:'#888', marginTop:'2px' }}>{c.change}</div>
            </div>
          ))}
        </div>
      </F>
      <F at={0.7} p={p}>
        <div style={{ ...S.card, padding:'8px 12px', borderColor:'rgba(34,211,238,0.3)', display:'flex', alignItems:'center', gap:'8px' }}>
          <span style={{ color:S.accent }}>⚡</span>
          <span style={{ fontSize:'10px', color:'#f5f5f5' }}>Counter-campaign drafter writes a response in your brand voice — ship in 1 click</span>
        </div>
      </F>
      <div style={S.caption}><span style={S.captionText}>They show the change — we close the loop</span></div>
    </div>
  );
}

Object.assign(window, { WTSequences, WTSiteBuilder, WTWidgetsForms, WTSocial, WTAdCopy, WTAeo, WTCompetitors });