/* eslint-disable */
// dot+ Wireframe screens — 5 screens × 3 variations
// Each screen is a self-contained component rendering inside a DCArtboard.

// ============== HOME ==============

const Status = ({time = '9:41'}) => (
  <div className="wf-status">
    <span>{time}</span>
    <span className="right">●●● 5G ▮</span>
  </div>
);

const TabBar = ({active = 'home'}) => (
  <div className="wf-tab">
    <div className={'t ' + (active==='home'?'on':'')}><span className="ico">⌂</span><span>Home</span></div>
    <div className={'t ' + (active==='lib'?'on':'')}><span className="ico">◫</span><span>Library</span></div>
    <div className={'t ' + (active==='ask'?'on':'')}><span className="ico">◈</span><span>Ask</span></div>
    <div className={'t ' + (active==='set'?'on':'')}><span className="ico">⚙</span><span>Settings</span></div>
  </div>
);

const Anno = ({x, y, w, children, arrowFrom}) => (
  <>
    <div className="wf-anno" style={{left: x, top: y, width: w || 'auto'}}>{children}</div>
    {arrowFrom && <div className="wf-anno-arrow" style={arrowFrom}></div>}
  </>
);

// HOME A — Conservative list with FAB
const HomeA = () => (
  <div className="wf">
    <Status />
    <div className="wf-nav">
      <span className="nav-display">Library</span>
      <span className="nav-iconbtn">⌕</span>
    </div>
    <div className="wf-body">
      <div className="wf-section">Today</div>
      <div className="wf-row"><div className="stripe pos"></div><div className="info"><div className="title">Golf Course Planning</div><div className="meta">1h 32m · Bobby Weed</div></div><span className="wf-tag pos">done</span></div>
      <div className="wf-row"><div className="stripe warn"></div><div className="info"><div className="title">Quintero Strategy</div><div className="meta">47m</div></div><span className="wf-tag warn">3 todos</span></div>
      <div className="wf-section" style={{marginTop:8}}>Yesterday</div>
      <div className="wf-row"><div className="stripe"></div><div className="info"><div className="title">Site Visit Recap</div><div className="meta">38m</div></div><span className="wf-tag default">offline</span></div>
      <div className="wf-row"><div className="stripe pos"></div><div className="info"><div className="title">Investor Call</div><div className="meta">1h 4m · 3 speakers</div></div><span className="wf-tag pos">done</span></div>
    </div>
    <button className="wf-btn fab">＋</button>
    <TabBar active="home" />
    <Anno x={170} y={70} w={130}>standard iOS{'\n'}list pattern</Anno>
    <Anno x={210} y={520} w={100}>FAB → record</Anno>
  </div>
);

// HOME B — Dense folders + grouped rows, top action bar
const HomeB = () => (
  <div className="wf">
    <Status />
    <div className="wf-nav">
      <span className="nav-display" style={{fontSize:20}}>dot+</span>
      <div style={{display:'flex',gap:6}}>
        <span className="nav-iconbtn">⌕</span>
        <span className="nav-iconbtn">⏺</span>
      </div>
    </div>
    <div className="wf-body tight">
      <div className="wf-card" style={{padding:'10px 12px'}}>
        <div style={{display:'flex',gap:10}}>
          <div style={{flex:1}}><div style={{fontSize:18,fontWeight:700,letterSpacing:'-.4px'}}>24</div><div className="meta" style={{fontSize:9,fontFamily:'JetBrains Mono'}}>this week</div></div>
          <div style={{flex:1}}><div style={{fontSize:18,fontWeight:700,letterSpacing:'-.4px'}}>11h</div><div className="meta" style={{fontSize:9,fontFamily:'JetBrains Mono'}}>recorded</div></div>
          <div style={{flex:1}}><div style={{fontSize:18,fontWeight:700,letterSpacing:'-.4px'}}>34</div><div className="meta" style={{fontSize:9,fontFamily:'JetBrains Mono'}}>todos open</div></div>
        </div>
      </div>
      <div className="wf-section">Folders</div>
      <div className="wf-row" style={{padding:'8px 0'}}><div className="avatar">🏗</div><div className="info"><div className="title">Golf Project</div><div className="meta">7 · 8h 42m</div></div><span style={{color:'var(--wf-muted)'}}>›</span></div>
      <div className="wf-row" style={{padding:'8px 0'}}><div className="avatar">🏠</div><div className="info"><div className="title">Real Estate</div><div className="meta">12 · 14h 20m</div></div><span style={{color:'var(--wf-muted)'}}>›</span></div>
      <div className="wf-row" style={{padding:'8px 0'}}><div className="avatar">💻</div><div className="info"><div className="title">dot+ Development</div><div className="meta">5 · 6h 11m</div></div><span style={{color:'var(--wf-muted)'}}>›</span></div>
      <div className="wf-section" style={{marginTop:8}}>Recent</div>
      <div className="wf-row" style={{padding:'6px 0'}}><div className="stripe pos"></div><div className="info"><div className="title" style={{fontSize:12}}>Golf Course Planning</div><div className="meta" style={{fontSize:9}}>Today · 1h 32m</div></div></div>
      <div className="wf-row" style={{padding:'6px 0'}}><div className="stripe warn"></div><div className="info"><div className="title" style={{fontSize:12}}>Quintero Strategy</div><div className="meta" style={{fontSize:9}}>Yest · 47m</div></div></div>
    </div>
    <TabBar active="home" />
    <Anno x={150} y={60} w={150}>dense — stats +{'\n'}folders + recent{'\n'}like Uber app</Anno>
  </div>
);

// HOME C — Timeline + persistent recording dock
const HomeC = () => (
  <div className="wf">
    <Status />
    <div className="wf-nav">
      <span className="nav-display" style={{fontSize:20}}>Timeline</span>
      <span className="nav-meta">May 17</span>
    </div>
    <div className="wf-body" style={{paddingLeft:48,paddingRight:14,position:'relative'}}>
      <div style={{position:'absolute',left:24,top:12,bottom:12,width:1.5,background:'repeating-linear-gradient(to bottom,var(--wf-line) 0 3px,transparent 3px 6px)'}}></div>
      <div style={{position:'relative'}}>
        <div style={{position:'absolute',left:-32,top:6,width:10,height:10,borderRadius:'50%',background:'var(--wf-accent-pos)'}}></div>
        <div className="wf-card" style={{padding:10}}>
          <div className="title" style={{fontSize:13,fontWeight:600}}>Golf Course Planning</div>
          <div className="meta">9:30 AM · 1h 32m</div>
          <span className="wf-tag pos" style={{alignSelf:'flex-start'}}>done</span>
        </div>
      </div>
      <div style={{position:'relative',marginTop:8}}>
        <div style={{position:'absolute',left:-32,top:6,width:10,height:10,borderRadius:'50%',background:'var(--wf-accent-warn)'}}></div>
        <div className="wf-card" style={{padding:10}}>
          <div className="title" style={{fontSize:13,fontWeight:600}}>Quintero Strategy</div>
          <div className="meta">11:15 AM · 47m</div>
          <span className="wf-tag warn" style={{alignSelf:'flex-start'}}>3 todos</span>
        </div>
      </div>
      <div style={{position:'relative',marginTop:8}}>
        <div style={{position:'absolute',left:-32,top:6,width:10,height:10,borderRadius:'50%',background:'var(--wf-line)'}}></div>
        <div className="wf-card" style={{padding:10,borderStyle:'dashed'}}>
          <div className="title" style={{fontSize:13,fontWeight:600,color:'var(--wf-muted)'}}>2:00 PM · upcoming</div>
          <div className="meta">Investor follow-up</div>
        </div>
      </div>
    </div>
    <div className="wf-dock">
      <span className="dot"></span>
      <span className="tm">47:23</span>
      <span className="pill">REC</span>
    </div>
    <TabBar active="home" />
    <Anno x={130} y={70} w={170}>chronological{'\n'}+ persistent rec dock{'\n'}(can leave & come back)</Anno>
  </div>
);

// ============== NEW MEETING ==============

// NEW MEETING A — Conservative form sheet
const NewMtgA = () => (
  <div className="wf">
    <Status />
    <div className="wf-nav">
      <span className="nav-bk">Cancel</span>
      <span className="nav-title">New Meeting</span>
      <span className="nav-act" style={{color:'var(--wf-line)'}}>Start</span>
    </div>
    <div className="wf-body">
      <div>
        <label className="wf-field-label">Title</label>
        <div className="wf-input"><span className="ph">e.g. Golf Course Planning</span></div>
      </div>
      <div>
        <label className="wf-field-label">Type</label>
        <div className="wf-input"><span style={{color:'var(--wf-strong)'}}>Real Estate</span><span style={{marginLeft:'auto',color:'var(--wf-muted)'}}>▾</span></div>
      </div>
      <div>
        <label className="wf-field-label">AI Model</label>
        <div className="wf-input"><span style={{color:'var(--wf-strong)'}}>Gemini 2.5 Pro</span><span style={{marginLeft:'auto',color:'var(--wf-muted)'}}>▾</span></div>
      </div>
      <div>
        <label className="wf-field-label">Folder</label>
        <div className="wf-input"><span style={{color:'var(--wf-strong)'}}>Golf Project</span><span style={{marginLeft:'auto',color:'var(--wf-muted)'}}>▾</span></div>
      </div>
      <div style={{flex:1}}></div>
      <button className="wf-btn primary lg">Start Recording</button>
    </div>
    <Anno x={170} y={150} w={130}>4 form fields,{'\n'}then big CTA</Anno>
  </div>
);

// NEW MEETING B — Dense inline settings
const NewMtgB = () => (
  <div className="wf">
    <Status />
    <div className="wf-nav">
      <span className="nav-bk">‹ Back</span>
      <span className="nav-title">Setup</span>
      <span></span>
    </div>
    <div className="wf-body tight">
      <div className="wf-input focused" style={{height:54,padding:'8px 12px',flexDirection:'column',alignItems:'flex-start',justifyContent:'center'}}>
        <div className="wf-field-label" style={{margin:0}}>TITLE</div>
        <div style={{color:'var(--wf-strong)',fontSize:15,fontWeight:600}}>Golf Course Planning</div>
      </div>
      <div className="wf-row" style={{padding:'10px 12px',background:'var(--wf-card)',border:'1px solid var(--wf-card-border)',borderRadius:8,marginTop:4}}>
        <div className="info">
          <div className="meta" style={{textTransform:'uppercase',letterSpacing:'.1em'}}>Type</div>
          <div className="title" style={{fontSize:13}}>Real Estate</div>
        </div>
        <span style={{color:'var(--wf-muted)'}}>›</span>
      </div>
      <div className="wf-row" style={{padding:'10px 12px',background:'var(--wf-card)',border:'1px solid var(--wf-card-border)',borderRadius:8}}>
        <div className="info">
          <div className="meta" style={{textTransform:'uppercase',letterSpacing:'.1em'}}>Model</div>
          <div className="title" style={{fontSize:13}}>Gemini 2.5 Pro <span className="wf-tag info" style={{marginLeft:6,height:16,fontSize:9}}>cloud</span></div>
        </div>
        <span style={{color:'var(--wf-muted)'}}>›</span>
      </div>
      <div className="wf-row" style={{padding:'10px 12px',background:'var(--wf-card)',border:'1px solid var(--wf-card-border)',borderRadius:8}}>
        <div className="info">
          <div className="meta" style={{textTransform:'uppercase',letterSpacing:'.1em'}}>Folder</div>
          <div className="title" style={{fontSize:13}}>Golf Project</div>
        </div>
        <span style={{color:'var(--wf-muted)'}}>›</span>
      </div>
      <div className="wf-card" style={{padding:'10px 12px',marginTop:4}}>
        <div className="wf-section" style={{margin:0}}>Advanced</div>
        <div className="wf-row" style={{padding:'4px 0',borderBottom:'none'}}><div className="info"><div className="title" style={{fontSize:12}}>Auto-extract todos</div></div><span className="wf-tag pos" style={{height:18,fontSize:9}}>on</span></div>
        <div className="wf-row" style={{padding:'4px 0',borderBottom:'none'}}><div className="info"><div className="title" style={{fontSize:12}}>Speaker labels</div></div><span className="wf-tag pos" style={{height:18,fontSize:9}}>on</span></div>
      </div>
      <div style={{flex:1}}></div>
      <button className="wf-btn primary lg">Start Recording</button>
    </div>
    <Anno x={155} y={290} w={150}>everything visible{'\n'}— tap row to edit</Anno>
  </div>
);

// NEW MEETING C — One-tap with advanced drawer
const NewMtgC = () => (
  <div className="wf">
    <Status />
    <div className="wf-nav">
      <span></span>
      <span className="nav-act" style={{color:'var(--wf-muted)'}}>✕</span>
    </div>
    <div className="wf-bigstart">
      <div style={{fontSize:11,fontFamily:'JetBrains Mono',color:'var(--wf-muted)',textTransform:'uppercase',letterSpacing:'.1em'}}>Ready</div>
      <div className="ring">
        <div className="ico">●</div>
        <div className="lbl">Tap to record</div>
      </div>
      <div style={{fontSize:14,fontWeight:600,color:'var(--wf-strong)'}}>Untitled Meeting</div>
      <div className="meta" style={{fontFamily:'JetBrains Mono',fontSize:11,color:'var(--wf-muted)'}}>Gemini 2.5 Pro · auto-title</div>
    </div>
    <div style={{padding:'12px 16px 18px',borderTop:'1px solid var(--wf-divider)'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
        <span style={{fontFamily:'JetBrains Mono',fontSize:11,color:'var(--wf-muted)'}}>Advanced</span>
        <span style={{color:'var(--wf-muted)'}}>▴</span>
      </div>
    </div>
    <Anno x={155} y={210} w={150}>just tap to start.{'\n'}title auto-generated.{'\n'}drawer for advanced</Anno>
  </div>
);

// ============== RECORDING ==============

// RECORDING A — Full-screen, big timer, big waveform
const RecA = () => (
  <div className="wf">
    <Status />
    <div className="wf-nav">
      <span className="nav-bk">⌄ Minimize</span>
      <div style={{display:'flex',alignItems:'center',gap:5}}><span className="wf-recdot"></span><span style={{fontSize:11,fontFamily:'JetBrains Mono',fontWeight:700,color:'var(--wf-accent-neg)'}}>REC</span></div>
      <span></span>
    </div>
    <div className="wf-body center" style={{padding:24}}>
      <div className="meta" style={{fontFamily:'JetBrains Mono',fontSize:11,marginBottom:8,textTransform:'uppercase',letterSpacing:'.1em'}}>Golf Course Planning</div>
      <div className="wf-timer" style={{fontSize:48}}>47:23</div>
      <div style={{margin:'24px 0',width:'100%'}}>
        <div className="wf-wave" style={{height:60}}>
          {[12,28,40,32,46,18,38,30,44,22,36,16,42,26,38,14,30,22,36,18].map((h,i)=>(
            <div key={i} className={'b ' + (i%3?'':'dim')} style={{height:h,animationDelay:(i*.06)+'s'}}></div>
          ))}
        </div>
      </div>
      <div style={{display:'flex',gap:10,marginTop:6}}>
        <span className="wf-tag default">2 speakers</span>
        <span className="wf-tag info">Gemini 2.5</span>
      </div>
    </div>
    <div style={{padding:'12px 16px 24px',display:'flex',gap:10}}>
      <button className="wf-btn secondary" style={{flex:1}}>Pause</button>
      <button className="wf-btn danger" style={{flex:1}}>Stop</button>
    </div>
    <Anno x={170} y={170} w={140}>big timer.{'\n'}centered focus.{'\n'}no distraction.</Anno>
  </div>
);

// RECORDING B — Compact recording + live transcript preview
const RecB = () => (
  <div className="wf">
    <Status />
    <div className="wf-nav">
      <div style={{display:'flex',alignItems:'center',gap:6}}><span className="wf-recdot"></span><span className="wf-timer" style={{fontSize:15}}>47:23</span></div>
      <span className="nav-meta">Gemini 2.5 · 2 spkrs</span>
      <span className="nav-iconbtn">⌄</span>
    </div>
    <div style={{padding:'10px 16px',borderBottom:'1px solid var(--wf-divider)'}}>
      <div className="wf-wave" style={{height:32}}>
        {[10,18,26,14,22,16,24,12,20,8,22,18,26,12,18,22,14,20,16,24,10,18].map((h,i)=>(
          <div key={i} className={'b ' + (i%2?'':'dim')} style={{height:h,animationDelay:(i*.04)+'s'}}></div>
        ))}
      </div>
    </div>
    <div className="wf-body tight">
      <div className="wf-section">Live transcript</div>
      <div style={{fontSize:12,lineHeight:1.5,color:'var(--wf-muted)'}}>
        <span style={{fontWeight:600,color:'var(--wf-strong)'}}>Bobby:</span> Let's review the tee positions for hole seven, I think we need to move it back about ten yards...
      </div>
      <div style={{fontSize:12,lineHeight:1.5,color:'var(--wf-muted)'}}>
        <span style={{fontWeight:600,color:'var(--wf-strong)'}}>Rodrigo:</span> Agreed. And the landing zone — let me pull up the topo map.
      </div>
      <div style={{fontSize:12,lineHeight:1.5,color:'var(--wf-strong)'}}>
        <span style={{fontWeight:600}}>Bobby:</span> The drainage on the left side is a concern. We saw water pool there after the rain last...
      </div>
      <div className="wf-textline" style={{width:'85%'}}></div>
      <div className="wf-textline" style={{width:'60%'}}></div>
    </div>
    <div style={{padding:'12px 16px 18px',display:'flex',gap:10,borderTop:'1px solid var(--wf-divider)'}}>
      <button className="wf-btn secondary" style={{flex:1}}>Pause</button>
      <button className="wf-btn danger" style={{flex:1}}>Stop</button>
    </div>
    <Anno x={150} y={180} w={160}>live transcript scrolls{'\n'}as you talk — see it{'\n'}working in real time</Anno>
  </div>
);

// RECORDING C — Minimal, Dynamic Island is primary UI
const RecC = () => (
  <div className="wf">
    <Status />
    <div className="wf-mini-island"><span className="dot"></span><span>REC · 47:23</span><span>·</span><span>👥 2</span></div>
    <div className="wf-body center" style={{paddingTop:80,gap:24}}>
      <div className="wf-section" style={{margin:0}}>Recording in background</div>
      <div style={{width:120,height:120,borderRadius:'50%',border:'2px solid var(--wf-accent-neg)',display:'flex',alignItems:'center',justifyContent:'center',position:'relative'}}>
        <span className="wf-recdot" style={{width:18,height:18}}></span>
      </div>
      <div className="wf-timer" style={{fontSize:32}}>47:23</div>
      <div style={{fontSize:12,color:'var(--wf-muted)',maxWidth:240,textAlign:'center',lineHeight:1.5}}>
        Tap home or swipe up to leave. Recording continues. Control from the Island.
      </div>
      <div style={{display:'flex',gap:8,marginTop:8}}>
        <button className="wf-btn ghost" style={{padding:'0 14px',height:36,fontSize:12}}>Pause</button>
        <button className="wf-btn danger" style={{padding:'0 14px',height:36,fontSize:12}}>Stop</button>
      </div>
    </div>
    <Anno x={155} y={50} w={150}>Dynamic Island is{'\n'}the real UI →</Anno>
    <Anno x={50} y={320} w={120}>screen is just{'\n'}reassurance</Anno>
  </div>
);

// ============== PROCESSING ==============

// PROCESSING A — Linear step list
const ProcA = () => (
  <div className="wf">
    <Status />
    <div className="wf-nav">
      <span className="nav-bk">Cancel</span>
      <span className="nav-title">Processing</span>
      <span></span>
    </div>
    <div className="wf-body">
      <div className="meta" style={{fontFamily:'JetBrains Mono',fontSize:11,marginBottom:6,textTransform:'uppercase',letterSpacing:'.1em'}}>Golf Course Planning · 47m</div>
      <div className="wf-card flat">
        <div className="wf-step done"><span className="stepicon done">✓</span><span className="steplbl">Audio uploaded</span><span className="stepst">done</span></div>
        <div className="wf-step done"><span className="stepicon done">✓</span><span className="steplbl">Transcript generated</span><span className="stepst">done</span></div>
        <div className="wf-step active"><span className="stepicon active"><span className="wf-spin"></span></span><span className="steplbl">Generating notes</span><span className="stepst">running...</span></div>
        <div className="wf-step"><span className="stepicon">○</span><span className="steplbl">Extract todos</span><span className="stepst">waiting</span></div>
        <div className="wf-step"><span className="stepicon">○</span><span className="steplbl">iCloud sync</span><span className="stepst">waiting</span></div>
      </div>
      <div style={{flex:1}}></div>
      <div className="meta" style={{textAlign:'center',fontFamily:'JetBrains Mono',fontSize:10}}>~30 seconds remaining</div>
    </div>
    <Anno x={170} y={170} w={140}>linear checklist,{'\n'}like Xcode build</Anno>
  </div>
);

// PROCESSING B — Big stage focus + progress
const ProcB = () => (
  <div className="wf">
    <Status />
    <div className="wf-nav">
      <span className="nav-bk">Cancel</span>
      <span className="nav-title">Processing</span>
      <span></span>
    </div>
    <div className="wf-body center" style={{padding:24}}>
      <div className="meta" style={{fontFamily:'JetBrains Mono',fontSize:10,textTransform:'uppercase',letterSpacing:'.1em',marginBottom:10}}>Step 3 of 5</div>
      <div style={{fontSize:22,fontWeight:700,letterSpacing:'-.4px',marginBottom:8}}>Generating notes</div>
      <div className="meta" style={{fontSize:12,color:'var(--wf-muted)',marginBottom:24}}>Summarizing your meeting with Gemini 2.5 Pro</div>
      <div style={{width:'100%',height:6,background:'var(--wf-divider)',borderRadius:3,overflow:'hidden'}}>
        <div style={{width:'62%',height:'100%',background:'var(--wf-strong)',borderRadius:3}}></div>
      </div>
      <div style={{display:'flex',justifyContent:'space-between',width:'100%',marginTop:6}}>
        <span style={{fontFamily:'JetBrains Mono',fontSize:10,color:'var(--wf-muted)'}}>62%</span>
        <span style={{fontFamily:'JetBrains Mono',fontSize:10,color:'var(--wf-muted)'}}>~12s</span>
      </div>
      <div style={{flex:1}}></div>
      <div style={{display:'flex',gap:6,marginTop:12}}>
        <div style={{width:8,height:8,borderRadius:'50%',background:'var(--wf-accent-pos)'}}></div>
        <div style={{width:8,height:8,borderRadius:'50%',background:'var(--wf-accent-pos)'}}></div>
        <div style={{width:8,height:8,borderRadius:'50%',background:'var(--wf-strong)'}}></div>
        <div style={{width:8,height:8,borderRadius:'50%',background:'var(--wf-line-soft)'}}></div>
        <div style={{width:8,height:8,borderRadius:'50%',background:'var(--wf-line-soft)'}}></div>
      </div>
    </div>
    <Anno x={170} y={170} w={140}>current step{'\n'}is the focus.{'\n'}calmer.</Anno>
  </div>
);

// PROCESSING C — Visual pipeline
const ProcC = () => (
  <div className="wf">
    <Status />
    <div className="wf-nav">
      <span className="nav-bk">Cancel</span>
      <span className="nav-title">Pipeline</span>
      <span></span>
    </div>
    <div className="wf-body" style={{padding:'16px 24px'}}>
      <div className="wf-pipe">
        <div className="wf-pipe-node done"><span>✓</span><span>audio.m4a</span><span style={{marginLeft:'auto'}}>43.2MB</span></div>
        <div className="wf-pipe-connector"></div>
        <div className="wf-pipe-node done"><span>✓</span><span>transcript</span><span style={{marginLeft:'auto'}}>4,212w</span></div>
        <div className="wf-pipe-connector"></div>
        <div className="wf-pipe-node active"><span className="wf-spin"></span><span>notes.md</span><span style={{marginLeft:'auto'}}>62%</span></div>
        <div className="wf-pipe-connector dashed"></div>
        <div className="wf-pipe-node" style={{opacity:.5}}><span>○</span><span>todos.json</span></div>
        <div className="wf-pipe-connector dashed"></div>
        <div className="wf-pipe-node" style={{opacity:.5}}><span>○</span><span>icloud sync</span></div>
      </div>
    </div>
    <Anno x={160} y={170} w={150}>pipeline metaphor —{'\n'}feels like real{'\n'}engineering tool</Anno>
  </div>
);

// ============== RESULTS ==============

// RESULTS A — Tabs at top
const ResA = () => (
  <div className="wf">
    <Status />
    <div className="wf-nav">
      <span className="nav-bk">‹</span>
      <span className="nav-title">Golf Course Planning</span>
      <span className="nav-iconbtn">⋯</span>
    </div>
    <div className="wf-resulttabs">
      <div className="rt on">Summary</div>
      <div className="rt">Transcript</div>
      <div className="rt">Todos<span style={{color:'var(--wf-accent-warn)',marginLeft:3}}>3</span></div>
      <div className="rt">Notes</div>
    </div>
    <div className="wf-body tight">
      <div className="meta" style={{fontFamily:'JetBrains Mono',fontSize:10,textTransform:'uppercase',letterSpacing:'.1em'}}>Today · 1h 32m · 2 speakers</div>
      <div className="wf-h">Key points</div>
      <div className="wf-textline"></div>
      <div className="wf-textline medium"></div>
      <div className="wf-textline"></div>
      <div className="wf-textline short"></div>
      <div className="wf-h" style={{marginTop:8}}>Decisions</div>
      <div className="wf-textline"></div>
      <div className="wf-textline medium"></div>
      <div className="wf-h" style={{marginTop:8}}>Open questions</div>
      <div className="wf-textline"></div>
    </div>
    <Anno x={170} y={120} w={140}>tabs — easy{'\n'}to jump between</Anno>
  </div>
);

// RESULTS B — Single scroll with section headers
const ResB = () => (
  <div className="wf">
    <Status />
    <div className="wf-nav">
      <span className="nav-bk">‹</span>
      <span className="nav-title" style={{fontSize:15}}>Golf Course Planning</span>
      <span className="nav-iconbtn">⌖</span>
    </div>
    <div className="wf-body tight" style={{gap:10}}>
      <div className="meta" style={{fontFamily:'JetBrains Mono',fontSize:10,textTransform:'uppercase',letterSpacing:'.1em'}}>Today · 1h 32m</div>
      <div className="wf-h">Summary</div>
      <div className="wf-textline"></div>
      <div className="wf-textline medium"></div>
      <div style={{height:1,background:'var(--wf-divider)',margin:'4px 0'}}></div>
      <div className="wf-h" style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}><span>Todos</span><span className="wf-tag warn" style={{height:18,fontSize:9}}>3 open</span></div>
      <div className="wf-step" style={{padding:'4px 0',borderBottom:'none'}}><span style={{fontSize:13}}>☐</span><span className="steplbl" style={{fontFamily:'Inter',fontSize:12,color:'var(--wf-strong)'}}>Move tee on hole 7 back 10 yards</span></div>
      <div className="wf-step" style={{padding:'4px 0',borderBottom:'none'}}><span style={{fontSize:13}}>☐</span><span className="steplbl" style={{fontFamily:'Inter',fontSize:12,color:'var(--wf-strong)'}}>Pull topo map for landing zone</span></div>
      <div style={{height:1,background:'var(--wf-divider)',margin:'4px 0'}}></div>
      <div className="wf-h">Transcript</div>
      <div className="wf-textline"></div>
      <div className="wf-textline medium"></div>
      <div className="wf-textline short"></div>
    </div>
    <Anno x={155} y={120} w={155}>everything in one{'\n'}scroll. nothing hidden.{'\n'}feels like a doc.</Anno>
  </div>
);

// RESULTS C — Swipeable card stack
const ResC = () => (
  <div className="wf">
    <Status />
    <div className="wf-nav">
      <span className="nav-bk">‹</span>
      <span className="nav-title" style={{fontSize:15}}>Golf Course Planning</span>
      <span></span>
    </div>
    <div className="wf-body" style={{padding:14}}>
      <div className="meta" style={{fontFamily:'JetBrains Mono',fontSize:10,textTransform:'uppercase',letterSpacing:'.1em',textAlign:'center'}}>Card 1 of 4 · Summary</div>
      <div className="wf-cardstack">
        <div className="stack-card s3"></div>
        <div className="stack-card s2"></div>
        <div className="stack-card">
          <div className="wf-h">Summary</div>
          <div className="wf-textline"></div>
          <div className="wf-textline medium"></div>
          <div className="wf-textline"></div>
          <div className="wf-textline short"></div>
          <div className="wf-textline medium"></div>
          <div style={{flex:1}}></div>
          <div className="meta" style={{fontFamily:'JetBrains Mono',fontSize:10,textAlign:'center'}}>‹ swipe · transcript ›</div>
        </div>
      </div>
      <div className="wf-swipe-dots">
        <div className="d on"></div>
        <div className="d"></div>
        <div className="d"></div>
        <div className="d"></div>
      </div>
    </div>
    <Anno x={165} y={210} w={140}>swipe between{'\n'}sections like{'\n'}stories.</Anno>
  </div>
);

// ============== HOME v2 — REFINED (per user feedback) ==============
// Direction: avatar top-right, stat strip up top, search, then recent.
// No "Good morning". No giant action tiles competing with Record CTA.

// Shared bits for v2
const HomeV2Header = ({date='MAY 18, 2026', initials='RA'}) => (
  <div style={{padding:'10px 16px 6px',display:'flex',alignItems:'center',justifyContent:'space-between'}}>
    <div>
      <div style={{fontFamily:'JetBrains Mono',fontSize:10,letterSpacing:'.12em',color:'var(--wf-muted)',fontWeight:600}}>{date}</div>
      <div style={{fontSize:22,fontWeight:700,letterSpacing:'-.4px',color:'var(--wf-strong)',marginTop:2}}>dot+</div>
    </div>
    <div style={{width:36,height:36,borderRadius:'50%',background:'var(--wf-divider)',border:'1.5px solid var(--wf-card-border)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:12,fontWeight:600,color:'var(--wf-strong)',fontFamily:'Inter'}}>{initials}</div>
  </div>
);

const HomeV2Search = ({onSurface=false}) => (
  <div className="wf-input" style={{height:38,background:onSurface?'var(--wf-card)':'var(--wf-divider)',border:onSurface?'1px solid var(--wf-card-border)':'1px solid transparent',marginTop:2,marginBottom:6,fontSize:12}}>
    <span style={{marginRight:8,color:'var(--wf-muted)'}}>⌕</span>
    <span className="ph">Search meetings, todos, transcripts...</span>
  </div>
);

const StatTile = ({n, label, sub, accent}) => (
  <div style={{flex:1,padding:'10px 12px',background:'var(--wf-card)',border:'1px solid var(--wf-card-border)',borderRadius:8,display:'flex',flexDirection:'column',gap:2}}>
    <div style={{display:'flex',alignItems:'baseline',gap:4}}>
      <div style={{fontSize:20,fontWeight:700,letterSpacing:'-.5px',color:accent||'var(--wf-strong)'}}>{n}</div>
      {sub && <div style={{fontSize:9,fontFamily:'JetBrains Mono',color:'var(--wf-muted)'}}>{sub}</div>}
    </div>
    <div style={{fontSize:9,fontFamily:'JetBrains Mono',color:'var(--wf-muted)',textTransform:'uppercase',letterSpacing:'.08em'}}>{label}</div>
  </div>
);

const MeetingCardV2 = ({title, date, mins, actions, status='completed'}) => {
  const tagClass = status==='needs-review' ? 'warn' : status==='offline' ? 'default' : 'pos';
  const tagText = status==='needs-review' ? 'needs review' : status==='offline' ? 'offline' : 'completed';
  const actionLabel = actions===1 ? '1 action' : `${actions} actions`;
  return (
    <div className="wf-card" style={{padding:'12px 14px',gap:8}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start'}}>
        <span className={'wf-tag ' + tagClass} style={{height:20,fontSize:10}}>{tagText}</span>
        <span style={{fontSize:10,fontFamily:'JetBrains Mono',color:'var(--wf-muted)'}}>{date}</span>
      </div>
      <div style={{fontSize:16,fontWeight:600,color:'var(--wf-strong)',letterSpacing:'-.2px',lineHeight:1.2}}>{title}</div>
      <div style={{display:'flex',gap:14,marginTop:2}}>
        <span style={{fontSize:11,fontFamily:'JetBrains Mono',color:'var(--wf-muted)',display:'inline-flex',alignItems:'center',gap:4}}>◷ {mins}m</span>
        <span style={{fontSize:11,fontFamily:'JetBrains Mono',color:'var(--wf-muted)',display:'inline-flex',alignItems:'center',gap:4}}>✓ {actionLabel}</span>
      </div>
    </div>
  );
};

// HOME v2 — A : Stats up top, search, recent feed
const HomeV2A = () => (
  <div className="wf">
    <Status time="2:09" />
    <HomeV2Header />
    <div className="wf-body tight" style={{paddingTop:6,gap:8}}>
      <div style={{display:'flex',gap:6}}>
        <StatTile n="24" sub="this wk" label="meetings" />
        <StatTile n="18h" label="recorded" />
        <StatTile n="11" label="todos" accent="var(--wf-accent-warn)" />
      </div>
      <HomeV2Search />
      <div className="wf-section" style={{margin:'2px 0 4px'}}>Recent</div>
      <MeetingCardV2 title="Golf Course Planning" date="5/17" mins={45} actions={2} status="needs-review" />
      <MeetingCardV2 title="Q3 Software Sync" date="5/16" mins={22} actions={1} status="completed" />
      <MeetingCardV2 title="Vacation Club Sales" date="5/13" mins={65} actions={1} status="completed" />
    </div>
    <TabBar active="home" />
    <Anno x={155} y={48} w={155}>avatar top right →{'\n'}date + brand left.{'\n'}no greeting.</Anno>
    <Anno x={155} y={108} w={150}>glanceable stats:{'\n'}meetings · time · todos</Anno>
    <Anno x={155} y={195} w={155}>search recent + everything</Anno>
  </div>
);

// HOME v2 — B : Compact stats inline + bigger meeting feed
const HomeV2B = () => (
  <div className="wf">
    <Status time="2:09" />
    <HomeV2Header />
    <div className="wf-body tight" style={{paddingTop:4,gap:6}}>
      <div style={{display:'flex',alignItems:'center',gap:0,padding:'8px 12px',background:'var(--wf-card)',border:'1px solid var(--wf-card-border)',borderRadius:8}}>
        <div style={{flex:1,textAlign:'center'}}>
          <div style={{fontSize:18,fontWeight:700,letterSpacing:'-.4px'}}>24</div>
          <div style={{fontSize:9,fontFamily:'JetBrains Mono',color:'var(--wf-muted)',textTransform:'uppercase',letterSpacing:'.08em'}}>meetings</div>
        </div>
        <div style={{width:1,height:24,background:'var(--wf-divider)'}}></div>
        <div style={{flex:1,textAlign:'center'}}>
          <div style={{fontSize:18,fontWeight:700,letterSpacing:'-.4px'}}>18h</div>
          <div style={{fontSize:9,fontFamily:'JetBrains Mono',color:'var(--wf-muted)',textTransform:'uppercase',letterSpacing:'.08em'}}>recorded</div>
        </div>
        <div style={{width:1,height:24,background:'var(--wf-divider)'}}></div>
        <div style={{flex:1,textAlign:'center'}}>
          <div style={{fontSize:18,fontWeight:700,letterSpacing:'-.4px',color:'var(--wf-accent-warn)'}}>11</div>
          <div style={{fontSize:9,fontFamily:'JetBrains Mono',color:'var(--wf-muted)',textTransform:'uppercase',letterSpacing:'.08em'}}>todos open</div>
        </div>
      </div>
      <HomeV2Search />
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginTop:2}}>
        <div className="wf-section" style={{margin:0}}>Recent</div>
        <span style={{fontSize:11,fontFamily:'JetBrains Mono',color:'var(--wf-muted)'}}>See all ›</span>
      </div>
      <MeetingCardV2 title="Golf Course Planning" date="5/17" mins={45} actions={2} status="needs-review" />
      <MeetingCardV2 title="Q3 Software Sync" date="5/16" mins={22} actions={1} status="completed" />
      <MeetingCardV2 title="Vacation Club Sales" date="5/13" mins={65} actions={1} status="completed" />
    </div>
    <TabBar active="home" />
    <Anno x={155} y={118} w={150}>3-up stat strip,{'\n'}single row, dividers.{'\n'}most compact.</Anno>
    <Anno x={155} y={250} w={155}>"See all" goes to{'\n'}Library tab</Anno>
  </div>
);

// HOME v2 — C : Stats + Folders shortcut + Recent
const HomeV2C = () => (
  <div className="wf">
    <Status time="2:09" />
    <HomeV2Header />
    <div className="wf-body tight" style={{paddingTop:6,gap:8}}>
      <div style={{display:'flex',gap:6}}>
        <StatTile n="24" sub="this wk" label="meetings" />
        <StatTile n="18h" label="recorded" />
        <StatTile n="11" label="todos" accent="var(--wf-accent-warn)" />
      </div>
      <HomeV2Search />
      <div className="wf-section" style={{margin:'2px 0 2px'}}>Folders</div>
      <div style={{display:'flex',gap:6,overflowX:'hidden'}}>
        <div style={{flex:'0 0 110px',padding:'10px 12px',background:'var(--wf-card)',border:'1px solid var(--wf-card-border)',borderRadius:8}}>
          <div style={{fontSize:18,marginBottom:2}}>🏗</div>
          <div style={{fontSize:12,fontWeight:600,color:'var(--wf-strong)'}}>Golf Project</div>
          <div style={{fontSize:9,fontFamily:'JetBrains Mono',color:'var(--wf-muted)'}}>7 · 8h 42m</div>
        </div>
        <div style={{flex:'0 0 110px',padding:'10px 12px',background:'var(--wf-card)',border:'1px solid var(--wf-card-border)',borderRadius:8}}>
          <div style={{fontSize:18,marginBottom:2}}>🏠</div>
          <div style={{fontSize:12,fontWeight:600,color:'var(--wf-strong)'}}>Real Estate</div>
          <div style={{fontSize:9,fontFamily:'JetBrains Mono',color:'var(--wf-muted)'}}>12 · 14h</div>
        </div>
        <div style={{flex:'0 0 60px',padding:'10px 12px',background:'transparent',border:'1.5px dashed var(--wf-line)',borderRadius:8,display:'flex',alignItems:'center',justifyContent:'center',color:'var(--wf-muted)',fontSize:20}}>+</div>
      </div>
      <div className="wf-section" style={{margin:'4px 0 2px'}}>Recent</div>
      <MeetingCardV2 title="Golf Course Planning" date="5/17" mins={45} actions={2} status="needs-review" />
      <MeetingCardV2 title="Q3 Software Sync" date="5/16" mins={22} actions={1} status="completed" />
    </div>
    <TabBar active="home" />
    <Anno x={155} y={240} w={155}>horizontal folder strip{'\n'}— quick filter / jump.{'\n'}"+" = new folder</Anno>
  </div>
);

Object.assign(window, { HomeV2A, HomeV2B, HomeV2C });

// Export to window
Object.assign(window, {
  HomeA, HomeB, HomeC,
  NewMtgA, NewMtgB, NewMtgC,
  RecA, RecB, RecC,
  ProcA, ProcB, ProcC,
  ResA, ResB, ResC,
});