// Persona Studio — train an AI clone for social/marketing content generation
function Persona() {
  const [tab, setTab] = React.useState('voice');
  const sections = [
    { id: 'voice', label: 'Voice', icon: 'Sparkles', progress: 100 },
    { id: 'likeness', label: 'Likeness', icon: 'People', progress: 60 },
    { id: 'brand', label: 'Brand voice', icon: 'Book', progress: 0 },
    { id: 'scenes', label: 'Default scenes', icon: 'Globe', progress: 80 },
    { id: 'output', label: 'Output', icon: 'Play', progress: 0 },
  ];
  const totalProgress = Math.round(sections.reduce((s, x) => s + x.progress, 0) / sections.length);

  return (
    <div>
      <div className="page-hd">
        <div className="page-hd-l">
          <div className="page-eyebrow">Persona Studio · Reza · v3 model</div>
          <h1 className="page-title">Train your <em>clone</em></h1>
          <div className="page-sub">Teach Demiurge who you are: your voice, your look, the way you write. Then let your operators generate social content, reels, and outbound that actually sounds — and looks — like you.</div>
        </div>
        <div className="page-hd-r">
          <div className="row" style={{ gap: 14 }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--text-dim)' }}>{totalProgress}% trained</div>
            <div className="bar-track" style={{ width: 140 }}>
              <div className="bar-fill" style={{ width: `£${totalProgress}%` }}/>
            </div>
          </div>
          <button className="btn">Save draft</button>
          <button className="btn primary"><Icon.Sparkles className="icon"/>Generate preview</button>
        </div>
      </div>

      <div style={{ padding: '20px 24px 0', display: 'flex', gap: 4, borderBottom: '1px solid var(--border)' }}>
        {sections.map(s => {
          const I = Icon[s.icon];
          return (
            <button key={s.id} onClick={() => setTab(s.id)} style={{
              padding: '10px 14px',
              fontSize: 13,
              color: tab === s.id ? 'var(--text)' : 'var(--text-dim)',
              borderBottom: tab === s.id ? '2px solid var(--violet)' : '2px solid transparent',
              display: 'flex', alignItems: 'center', gap: 8,
              marginBottom: -1,
            }}>
              <I style={{ width: 14, height: 14, opacity: tab === s.id ? 1 : 0.6, color: tab === s.id ? 'var(--cyan)' : 'currentColor' }}/>
              <span>{s.label}</span>
              <span className="mono" style={{
                fontSize: 9,
                padding: '1px 5px',
                borderRadius: 3,
                background: s.progress === 100 ? 'rgba(93, 255, 176, 0.1)' : s.progress > 0 ? 'rgba(139, 107, 255, 0.1)' : 'rgba(255, 255, 255, 0.04)',
                color: s.progress === 100 ? 'var(--good)' : s.progress > 0 ? 'var(--violet)' : 'var(--text-faint)',
              }}>{s.progress}%</span>
            </button>
          );
        })}
      </div>

      <div style={{ padding: 24 }}>
        {tab === 'voice' && <VoiceTraining/>}
        {tab === 'likeness' && <LikenessTraining/>}
        {tab === 'brand' && <BrandVoiceTraining/>}
        {tab === 'scenes' && <ScenesTraining/>}
        {tab === 'output' && <OutputPreview/>}
      </div>
    </div>
  );
}

function VoiceTraining() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 14 }}>
      <div className="panel">
        <div className="panel-hd">
          <h3>Define your voice</h3>
          <span className="mono" style={{ fontSize: 10, color: 'var(--good)' }}>✓ COMPLETE · 12 of 12 answered</span>
        </div>
        <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          {[
            { q: 'What do you create and who is it for?', a: 'I build AI-native operator infrastructure for marketing/growth teams at SMBs. The people I talk to are usually drowning in tools and looking to consolidate.' },
            { q: 'Three words you\'d use to describe how you write?', a: 'Direct. Dry. Slightly nerdy.' },
            { q: 'Phrases you use a lot?', a: '"the punchline is" · "the cheap version of this is" · "let me steel-man that"' },
            { q: 'Phrases you\'d never use?', a: '"unlock", "leverage", any superlative, "leveraging", "synergize", emoji-stuffed sentences' },
          ].map((qa, i) => (
            <div key={i}>
              <div className="mono faint" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 8 }}>Q{i + 1} · {qa.q}</div>
              <div style={{
                padding: '12px 14px',
                background: 'rgba(0, 0, 0, 0.25)',
                border: '1px solid var(--border)',
                borderRadius: 'var(--radius)',
                fontSize: 13,
                lineHeight: 1.55,
              }}>{qa.a}</div>
            </div>
          ))}
          <button className="btn" style={{ alignSelf: 'flex-start' }}>Edit answers <Icon.Pen className="icon"/></button>
        </div>
      </div>
      <div className="col" style={{ gap: 14 }}>
        <div className="panel">
          <div className="panel-hd">
            <h3>Voice samples</h3>
            <span className="mono" style={{ fontSize: 10, color: 'var(--cyan)' }}>3 UPLOADED</span>
          </div>
          <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              { name: 'all-hands-q1-2026.wav', dur: '8m 12s', wav: fakeStream(7, 64, 30, 25) },
              { name: 'podcast-saas-stack.wav', dur: '24m 04s', wav: fakeStream(8, 64, 30, 25) },
              { name: 'loom-roadmap-walkthrough.wav', dur: '12m 41s', wav: fakeStream(9, 64, 30, 25) },
            ].map((s, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 12, alignItems: 'center', padding: 12, background: 'rgba(0, 0, 0, 0.25)', border: '1px solid var(--border)', borderRadius: 'var(--radius)' }}>
                <button style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--iridescent)', display: 'grid', placeItems: 'center', color: '#07091a' }}><Icon.Play style={{ width: 10, height: 10, marginLeft: 1 }}/></button>
                <div>
                  <div className="mono" style={{ fontSize: 11 }}>{s.name}</div>
                  <BarSeries data={s.wav} w={210} h={20} color="#8b6bff"/>
                </div>
                <span className="mono faint" style={{ fontSize: 10 }}>{s.dur}</span>
              </div>
            ))}
            <UploadSlot label="Upload more audio" hint="WAV/MP3 · 30s minimum · clear, single speaker"/>
          </div>
        </div>
        <div className="panel">
          <div className="panel-hd">
            <h3>Model state</h3>
            <span className="tag live">TRAINED</span>
          </div>
          <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div className="row" style={{ justifyContent: 'space-between', fontSize: 12 }}>
              <span className="dim">Style fingerprint</span>
              <span className="mono" style={{ color: 'var(--cyan)' }}>v3 · sha 4a8c12e</span>
            </div>
            <div className="row" style={{ justifyContent: 'space-between', fontSize: 12 }}>
              <span className="dim">Last trained</span>
              <span className="mono dim">2h ago</span>
            </div>
            <div className="row" style={{ justifyContent: 'space-between', fontSize: 12 }}>
              <span className="dim">Detection score</span>
              <span className="mono" style={{ color: 'var(--cyan)' }}>97 · indistinguishable</span>
            </div>
            <button className="btn sm" style={{ alignSelf: 'flex-start', marginTop: 6 }}>Retrain <Icon.Refresh className="icon"/></button>
          </div>
        </div>
      </div>
    </div>
  );
}

function LikenessTraining() {
  const photos = [
    { kind: 'front', label: 'Front · neutral' },
    { kind: 'profile-l', label: 'Profile · left' },
    { kind: 'profile-r', label: 'Profile · right' },
    { kind: 'smile', label: 'Smile' },
    { kind: 'three-q', label: '3/4 view' },
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 14 }}>
      <div className="col" style={{ gap: 14 }}>
        <div className="panel">
          <div className="panel-hd">
            <h3>Face references</h3>
            <span className="mono" style={{ fontSize: 10, color: 'var(--violet)' }}>3 of 5 uploaded</span>
          </div>
          <div className="panel-body">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 10, marginBottom: 14 }}>
              {photos.map((p, i) => (
                <PhotoSlot key={p.kind} label={p.label} filled={i < 3}/>
              ))}
            </div>
            <div className="dim" style={{ fontSize: 11 }}>Upload clear, well-lit photos. Avoid sunglasses, hats, or extreme angles. Higher diversity = better cloning fidelity.</div>
          </div>
        </div>

        <div className="panel">
          <div className="panel-hd">
            <h3>Panning video <span className="mono faint" style={{ fontSize: 10, marginLeft: 6 }}>OPTIONAL · &lt;10s</span></h3>
            <span className="mono" style={{ fontSize: 10, color: 'var(--good)' }}>✓ UPLOADED</span>
          </div>
          <div className="panel-body">
            <div style={{
              height: 140,
              borderRadius: 'var(--radius)',
              background: 'linear-gradient(135deg, rgba(75, 232, 255, 0.15), rgba(139, 107, 255, 0.25), rgba(255, 122, 217, 0.15))',
              position: 'relative', overflow: 'hidden',
              display: 'grid', placeItems: 'center',
              border: '1px solid var(--border)',
            }}>
              <div style={{ width: 48, height: 48, borderRadius: '50%', background: 'rgba(0, 0, 0, 0.4)', backdropFilter: 'blur(20px)', border: '1px solid rgba(255, 255, 255, 0.2)', display: 'grid', placeItems: 'center' }}>
                <Icon.Play style={{ width: 18, height: 18, color: '#fff', marginLeft: 2 }}/>
              </div>
              <div style={{ position: 'absolute', bottom: 10, left: 12, right: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span className="mono" style={{ fontSize: 10, color: 'rgba(255,255,255,0.85)' }}>panning-720p.mp4</span>
                <span className="tag">7.4S · 24 FRAMES</span>
              </div>
            </div>
          </div>
        </div>

        <div className="panel">
          <div className="panel-hd">
            <h3>Tattoos & marks <span className="mono faint" style={{ fontSize: 10, marginLeft: 6 }}>OPTIONAL</span></h3>
            <span className="mono faint" style={{ fontSize: 10 }}>JPEG only</span>
          </div>
          <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div className="dim" style={{ fontSize: 12 }}>For tattoos, scars, or distinctive features the model should reproduce. Add one photo + a short description of placement.</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <PhotoSlot label="Tattoo · forearm" filled small/>
                <input style={{ padding: '6px 10px', background: 'rgba(0,0,0,0.3)', border: '1px solid var(--border)', borderRadius: 4, fontSize: 11 }} defaultValue="Left inner forearm"/>
              </div>
              <UploadSlot label="Add tattoo" hint="JPEG · &lt;5MB" small/>
              <UploadSlot label="Add tattoo" hint="JPEG · &lt;5MB" small/>
            </div>
          </div>
        </div>
      </div>

      <div className="col" style={{ gap: 14 }}>
        <div className="panel">
          <div className="panel-hd">
            <h3>Physique <span className="mono faint" style={{ fontSize: 10, marginLeft: 6 }}>OPTIONAL</span></h3>
          </div>
          <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div className="dim" style={{ fontSize: 11, lineHeight: 1.5 }}>Optional. Helps render full-body shots accurately for reels. Stored privately, never shared.</div>
            <FormField label="HEIGHT">
              <span className="row" style={{ gap: 8 }}>
                <input style={inputStyle} defaultValue="5'10"/>
                <select style={{ ...inputStyle, width: 80 }}>
                  <option>ft / in</option>
                  <option>cm</option>
                </select>
              </span>
            </FormField>
            <FormField label="WEIGHT">
              <span className="row" style={{ gap: 8 }}>
                <input style={inputStyle} defaultValue="172"/>
                <select style={{ ...inputStyle, width: 80 }}>
                  <option>lb</option>
                  <option>kg</option>
                </select>
              </span>
            </FormField>
            <FormField label="BUILD">
              <select style={inputStyle}>
                <option>Athletic / lean</option>
                <option>Average</option>
                <option>Stocky</option>
                <option>Slim</option>
              </select>
            </FormField>
          </div>
        </div>

        <div className="panel" style={{ borderColor: 'rgba(139, 107, 255, 0.25)' }}>
          <div className="panel-hd">
            <h3><Icon.Sparkles className="gradient-text" style={{ width: 14, height: 14 }}/>Generated preview</h3>
            <span className="tag violet">3 SAMPLES</span>
          </div>
          <div className="panel-body">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
              {[0, 1, 2, 3].map(i => (
                <div key={i} style={{
                  aspectRatio: '1',
                  borderRadius: 8,
                  background: `linear-gradient(${135 + i * 30}deg, rgba(75, 232, 255, ${0.15 + i * 0.04}), rgba(139, 107, 255, ${0.2 + i * 0.03}), rgba(255, 122, 217, ${0.12 + i * 0.02}))`,
                  border: '1px solid var(--border)',
                  position: 'relative',
                  overflow: 'hidden',
                  display: 'grid', placeItems: 'end',
                }}>
                  <div style={{ padding: 8, fontFamily: 'var(--font-mono)', fontSize: 9, color: 'rgba(255,255,255,0.7)' }}>
                    {['LINKEDIN HEADSHOT', 'REEL · OFFICE BG', 'PODCAST THUMB', 'CAROUSEL · STUDIO'][i]}
                  </div>
                </div>
              ))}
            </div>
            <button className="btn sm" style={{ marginTop: 12, width: '100%' }}>Generate 4 more <Icon.Refresh className="icon"/></button>
          </div>
        </div>
      </div>
    </div>
  );
}

function BrandVoiceTraining() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 14 }}>
      <div className="panel">
        <div className="panel-hd">
          <h3>Brand voice documents</h3>
          <span className="mono faint" style={{ fontSize: 10 }}>PDF · DOCX · MD · TXT</span>
        </div>
        <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div className="dim" style={{ fontSize: 12, lineHeight: 1.55 }}>
            Drop in anything that defines how Demiurge talks: positioning docs, style guides, your favorite past emails, customer testimonials you want to echo. Kairos will index them and reference them when writing.
          </div>
          <div style={{
            padding: 32,
            borderRadius: 'var(--radius)',
            border: '2px dashed rgba(139, 107, 255, 0.3)',
            background: 'rgba(139, 107, 255, 0.04)',
            textAlign: 'center',
            cursor: 'pointer',
          }}>
            <Icon.Book style={{ width: 28, height: 28, color: 'var(--violet)', margin: '0 auto 10px' }}/>
            <div style={{ fontSize: 14, marginBottom: 4 }}>Drop documents here</div>
            <div className="dim" style={{ fontSize: 11 }}>or <span className="gradient-text" style={{ cursor: 'pointer' }}>browse files</span> · up to 50MB each</div>
          </div>
          <div>
            <div className="mono faint" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 10 }}>Indexed documents · 4</div>
            {[
              { name: 'brand-voice-2025.pdf', size: '2.4 MB', ind: 'indexed' },
              { name: 'top-100-cold-emails.md', size: '128 KB', ind: 'indexed' },
              { name: 'positioning-v3.docx', size: '512 KB', ind: 'indexed' },
              { name: 'customer-words.txt', size: '64 KB', ind: 'pending' },
            ].map((d, i) => (
              <div key={i} className="row" style={{ padding: '10px 12px', background: 'rgba(0,0,0,0.2)', border: '1px solid var(--border)', borderRadius: 'var(--radius)', marginBottom: 6, gap: 12 }}>
                <Icon.Book style={{ width: 14, height: 14, color: 'var(--text-dim)' }}/>
                <span className="mono" style={{ fontSize: 11, flex: 1 }}>{d.name}</span>
                <span className="mono faint" style={{ fontSize: 10 }}>{d.size}</span>
                <span className={`tag ${d.ind === 'indexed' ? 'live' : 'scheduled'}`}>{d.ind === 'indexed' ? 'INDEXED' : 'INDEXING'}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="col" style={{ gap: 14 }}>
        <div className="panel">
          <div className="panel-hd"><h3>Tone matrix</h3></div>
          <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {[
              { l: 'Casual', r: 'Formal', v: 0.32 },
              { l: 'Playful', r: 'Serious', v: 0.65 },
              { l: 'Concise', r: 'Elaborate', v: 0.18 },
              { l: 'Modest', r: 'Bold', v: 0.55 },
            ].map((s, i) => (
              <div key={i}>
                <div className="row" style={{ justifyContent: 'space-between', marginBottom: 6 }}>
                  <span className="mono faint" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.1em' }}>{s.l}</span>
                  <span className="mono faint" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.1em' }}>{s.r}</span>
                </div>
                <div style={{ position: 'relative', height: 6, background: 'rgba(255,255,255,0.06)', borderRadius: 3 }}>
                  <div style={{ position: 'absolute', left: 0, right: 0, top: '50%', transform: 'translateY(-50%)', height: 1, background: 'rgba(255,255,255,0.06)' }}/>
                  <div style={{ position: 'absolute', left: `£${s.v * 100}%`, top: '50%', transform: 'translate(-50%, -50%)', width: 14, height: 14, borderRadius: '50%', background: 'var(--iridescent)', boxShadow: '0 0 8px rgba(139, 107, 255, 0.5)' }}/>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="panel">
          <div className="panel-hd"><h3>Banned phrases</h3></div>
          <div className="panel-body">
            <div className="dim" style={{ fontSize: 11, marginBottom: 10 }}>Phrases your clone will never write.</div>
            <div className="row" style={{ flexWrap: 'wrap', gap: 6 }}>
              {['unlock', 'leverage', 'synergize', 'super excited', 'reach out', 'circle back', 'low-hanging fruit', 'best-in-class', 'world-class', '!!'].map(p => (
                <span key={p} className="tag" style={{ background: 'rgba(255, 93, 110, 0.06)', color: 'var(--danger)', borderColor: 'rgba(255, 93, 110, 0.2)' }}>{p}</span>
              ))}
              <button className="tag" style={{ cursor: 'pointer' }}>+ Add</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function ScenesTraining() {
  const formats = ['Reel', 'AI clone', 'Static image', 'Carousel', 'Reel · viral hook', 'LinkedIn post'];
  const [format, setFormat] = React.useState(0);
  const styles = [
    { name: 'Studio · soft white', mood: 'professional' },
    { name: 'Office · loft + plants', mood: 'casual' },
    { name: 'Outdoor · golden hour', mood: 'lifestyle' },
    { name: 'Neon · gradient bg', mood: 'tech' },
    { name: 'Bookshelf · warm', mood: 'editorial' },
    { name: 'Concrete · industrial', mood: 'minimal' },
  ];
  return (
    <div className="panel">
      <div className="panel-hd">
        <h3>Default scenes per format</h3>
        <span className="panel-meta">Auto-applied when operators generate content</span>
      </div>
      <div className="panel-body">
        <div style={{ display: 'flex', gap: 4, marginBottom: 18, padding: 3, background: 'rgba(255, 255, 255, 0.04)', border: '1px solid var(--border)', borderRadius: 'var(--radius)', width: 'fit-content' }}>
          {formats.map((f, i) => (
            <button key={f} onClick={() => setFormat(i)} style={{
              padding: '6px 12px', borderRadius: 5,
              fontSize: 11,
              fontFamily: 'var(--font-mono)',
              textTransform: 'uppercase',
              letterSpacing: '0.06em',
              color: format === i ? 'var(--text)' : 'var(--text-dim)',
              background: format === i ? 'rgba(255, 255, 255, 0.08)' : 'transparent',
            }}>{f}</button>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
          {styles.map((s, i) => (
            <div key={s.name} style={{
              borderRadius: 'var(--radius-lg)',
              border: i === 1 ? '1px solid rgba(139, 107, 255, 0.5)' : '1px solid var(--border)',
              overflow: 'hidden',
              cursor: 'pointer',
              position: 'relative',
              boxShadow: i === 1 ? '0 0 0 1px rgba(139, 107, 255, 0.3), 0 0 24px rgba(139, 107, 255, 0.15)' : 'none',
            }}>
              <div style={{
                aspectRatio: '16/10',
                background: `linear-gradient(${135 + i * 30}deg, hsl(${190 + i * 40}, 70%, 55%), hsl(${260 + i * 20}, 65%, 50%))`,
                position: 'relative',
              }}>
                <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at 30% 40%, rgba(255, 255, 255, 0.3), transparent 60%)' }}/>
                {i === 1 && (
                  <div style={{ position: 'absolute', top: 8, right: 8 }}>
                    <span className="tag violet">SELECTED</span>
                  </div>
                )}
              </div>
              <div style={{ padding: 12, background: 'rgba(0, 0, 0, 0.25)' }}>
                <div style={{ fontSize: 12 }}>{s.name}</div>
                <div className="mono faint" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.08em', marginTop: 2 }}>{s.mood}</div>
              </div>
            </div>
          ))}
        </div>
        <button className="btn" style={{ marginTop: 14 }}><Icon.Plus className="icon"/>Upload custom background</button>
      </div>
    </div>
  );
}

function OutputPreview() {
  return (
    <div className="col" style={{ gap: 14 }}>
      <div className="panel" style={{ borderColor: 'rgba(139, 107, 255, 0.3)' }}>
        <div className="panel-hd">
          <h3><Icon.Sparkles className="gradient-text" style={{ width: 14, height: 14 }}/>Persona output sandbox</h3>
          <div className="row" style={{ gap: 8 }}>
            <button className="btn sm">Regenerate</button>
            <button className="btn primary sm">Publish post</button>
          </div>
        </div>
        <div style={{ padding: 18, display: 'grid', gridTemplateColumns: '320px 1fr', gap: 18 }}>
          <div>
            <div style={{
              aspectRatio: '9/16',
              borderRadius: 'var(--radius-lg)',
              background: 'linear-gradient(135deg, rgba(75, 232, 255, 0.25), rgba(139, 107, 255, 0.35), rgba(255, 122, 217, 0.2))',
              position: 'relative',
              overflow: 'hidden',
              border: '1px solid var(--border)',
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              padding: 16,
            }}>
              <div className="row" style={{ justifyContent: 'space-between' }}>
                <span className="tag">REEL · 9:16</span>
                <span className="mono" style={{ fontSize: 10, color: '#fff' }}>00:14</span>
              </div>
              <div>
                <div className="serif" style={{ fontSize: 28, color: '#fff', fontStyle: 'italic', lineHeight: 1.1, marginBottom: 8, textShadow: '0 2px 12px rgba(0,0,0,0.4)' }}>"Your SDR tools just want each other"</div>
                <div className="mono" style={{ fontSize: 10, color: 'rgba(255,255,255,0.85)', letterSpacing: '0.08em' }}>REZA · DEMIURGE SYSTEMS</div>
              </div>
            </div>
            <div className="row" style={{ marginTop: 10, justifyContent: 'space-between' }}>
              <button className="btn ghost sm"><Icon.Refresh className="icon"/></button>
              <span className="mono faint" style={{ fontSize: 10 }}>VARIATION 2 OF 6</span>
              <button className="btn ghost sm"><Icon.ChevronR className="icon"/></button>
            </div>
          </div>
          <div className="col" style={{ gap: 14 }}>
            <div>
              <div className="mono faint" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 8 }}>Generated caption</div>
              <div style={{ padding: 14, background: 'rgba(0, 0, 0, 0.25)', border: '1px solid var(--border)', borderRadius: 'var(--radius)', fontSize: 13, lineHeight: 1.6 }}>
                Most SDR teams run 6 tools and trust none of them.{'\n\n'}I built mine to fire one operator at one channel and own the entire conversation. The punchline is: it costs less than the cheapest seat you're already paying for.{'\n\n'}Link in bio if you want to see what 8 autonomous workers running your funnel looks like.
              </div>
            </div>
            <div>
              <div className="mono faint" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 8 }}>Voice match score</div>
              <div className="row" style={{ gap: 12 }}>
                <Ring pct={94} size={56}/>
                <div className="col" style={{ gap: 2, fontSize: 11 }}>
                  <span>97 · phrasing</span>
                  <span>92 · cadence</span>
                  <span>88 · banned phrases avoided</span>
                </div>
              </div>
            </div>
            <div>
              <div className="mono faint" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 8 }}>Publish targets</div>
              <div className="row" style={{ flexWrap: 'wrap', gap: 6 }}>
                {['LinkedIn', 'X', 'Instagram', 'TikTok', 'YouTube Shorts'].map((p, i) => (
                  <button key={p} className="tag" style={{ cursor: 'pointer', color: i < 3 ? 'var(--cyan)' : 'var(--text-dim)', borderColor: i < 3 ? 'rgba(75, 232, 255, 0.3)' : 'var(--border)' }}>
                    {i < 3 && '✓ '}{p}
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

const inputStyle = {
  padding: '8px 12px',
  background: 'rgba(0, 0, 0, 0.25)',
  border: '1px solid var(--border)',
  borderRadius: 'var(--radius)',
  fontSize: 12,
  fontFamily: 'var(--font-mono)',
  width: '100%',
  color: 'var(--text)',
};

function FormField({ label, children }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <span className="mono faint" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.1em' }}>{label}</span>
      {children}
    </div>
  );
}

function PhotoSlot({ label, filled, small }) {
  return (
    <div style={{
      aspectRatio: '1',
      borderRadius: 'var(--radius)',
      border: filled ? '1px solid var(--border)' : '1px dashed var(--border-strong)',
      background: filled ? 'linear-gradient(135deg, rgba(75, 232, 255, 0.2), rgba(139, 107, 255, 0.3))' : 'rgba(255, 255, 255, 0.02)',
      cursor: 'pointer',
      position: 'relative',
      overflow: 'hidden',
      display: 'grid', placeItems: 'center',
    }}>
      {filled ? (
        <React.Fragment>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at 40% 30%, rgba(255, 255, 255, 0.25), transparent 60%)' }}/>
          <div style={{ position: 'absolute', bottom: 6, left: 8, right: 8, fontFamily: 'var(--font-mono)', fontSize: small ? 8 : 9, color: 'rgba(255,255,255,0.85)', letterSpacing: '0.06em' }}>
            {label}
          </div>
        </React.Fragment>
      ) : (
        <div style={{ textAlign: 'center', padding: 8 }}>
          <Icon.Plus style={{ width: small ? 14 : 16, height: small ? 14 : 16, color: 'var(--text-faint)', margin: '0 auto 4px' }}/>
          <div className="mono faint" style={{ fontSize: small ? 9 : 10, letterSpacing: '0.06em' }}>{label}</div>
        </div>
      )}
    </div>
  );
}

function UploadSlot({ label, hint, small }) {
  return (
    <div style={{
      padding: small ? 12 : 20,
      borderRadius: 'var(--radius)',
      border: '1px dashed var(--border-strong)',
      background: 'rgba(139, 107, 255, 0.03)',
      textAlign: 'center',
      cursor: 'pointer',
      aspectRatio: small ? '1' : 'auto',
      display: 'grid', placeItems: 'center',
    }}>
      <div>
        <Icon.Plus style={{ width: small ? 14 : 18, height: small ? 14 : 18, color: 'var(--violet)', margin: '0 auto 6px' }}/>
        <div style={{ fontSize: small ? 11 : 12, marginBottom: 2 }}>{label}</div>
        <div className="dim" style={{ fontSize: small ? 9 : 10 }}>{hint}</div>
      </div>
    </div>
  );
}

window.Persona = Persona;