// Fix sheet, Export, History, Profile screens

function FixSheet({ platform, issue, onClose, onApply, onApplyAll, undone }) {
  if (!issue) return null;
  const fix = FIXES[issue.id];
  const meta = ISSUE_META[issue.type];

  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: 100, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', pointerEvents: 'auto' }}>
      {/* scrim */}
      <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(26,13,46,0.45)', backdropFilter: 'blur(4px)' }}/>
      {/* sheet */}
      <div className="pop-in" style={{
        position: 'relative', background: '#fef9f0',
        borderTopLeftRadius: 28, borderTopRightRadius: 28,
        padding: '10px 20px 28px', paddingBottom: platform === 'ios' ? 40 : 28,
      }}>
        <div style={{ width: 40, height: 4, borderRadius: 100, background: 'rgba(26,13,46,0.15)', margin: '0 auto 14px' }}/>

        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
          <div style={{ width: 40, height: 40, borderRadius: 12, background: meta.color, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: 16, color: '#1a0d2e' }}>{meta.icon}</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.12em', color: '#6b5e88' }}>{meta.label}</div>
            <div style={{ fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: 15, color: '#1a0d2e' }}>
              {issue.type === 'missing' ? 'Add a section' : 'Let\'s tighten this'}
            </div>
          </div>
          <button onClick={onClose} style={{ width: 36, height: 36, borderRadius: '50%', border: 'none', background: 'rgba(26,13,46,0.06)', color: '#1a0d2e', cursor: 'pointer', fontSize: 18, lineHeight: 1 }}>✕</button>
        </div>

        {issue.type === 'missing' ? (
          <div>
            <div style={{ padding: 16, borderRadius: 14, background: '#fffdf7', border: '1px solid rgba(26,13,46,0.06)' }}>
              <div style={{ fontFamily: 'Plus Jakarta Sans', fontSize: 14, color: '#1a0d2e' }}>Your resume is missing a <strong>Skills</strong> section. Recruiters scan here first.</div>
              <div style={{ marginTop: 10, display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {['Figma', 'Prototyping', 'Design Systems', 'User Research', 'Accessibility'].map(s =>
                  <Chip key={s} bg="linear-gradient(90deg, #ff4db8, #8a5cf6)" color="#fff">{s}</Chip>
                )}
              </div>
            </div>
          </div>
        ) : fix ? (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {/* before */}
            <div style={{ padding: 14, borderRadius: 14, background: '#fffdf7', border: '1px solid rgba(26,13,46,0.06)' }}>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.12em', color: '#ff8a7a', marginBottom: 4 }}>before</div>
              <div style={{ fontFamily: 'Plus Jakarta Sans', fontSize: 14, color: '#6b5e88', textDecoration: 'line-through' }}>{fix.from}</div>
            </div>
            {/* arrow */}
            <div style={{ textAlign: 'center', color: '#8a5cf6' }}>
              <svg width="20" height="20" viewBox="0 0 20 20"><path d="M10 3 L10 17 M5 12 L10 17 L15 12" stroke="#8a5cf6" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </div>
            {/* after */}
            <div style={{ padding: 14, borderRadius: 14, background: 'linear-gradient(135deg, rgba(183,240,205,0.4), rgba(77,214,255,0.2))', border: '1.5px solid #5ac77f' }}>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.12em', color: '#5ac77f', marginBottom: 4 }}>after ✨</div>
              <div style={{ fontFamily: 'Plus Jakarta Sans', fontSize: 14, color: '#1a0d2e', fontWeight: 600 }}>{fix.to}</div>
            </div>
            {/* reason */}
            <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start', padding: '10px 12px', background: 'rgba(138,92,246,0.08)', borderRadius: 12 }}>
              <Auri score={88} size={36}/>
              <div style={{ flex: 1, fontFamily: 'Plus Jakarta Sans', fontSize: 12, color: '#1a0d2e', lineHeight: 1.45, paddingTop: 8 }}>
                {fix.reason}
              </div>
            </div>
          </div>
        ) : null}

        <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
          <PillButton variant="ghost" style={{ flex: 1, height: 48 }} onClick={onClose}>skip</PillButton>
          <PillButton variant="primary" style={{ flex: 2, height: 48 }} onClick={() => onApply(issue.id)}>
            apply fix <Sparkle color="#fae14b"/>
          </PillButton>
        </div>
        <button onClick={onApplyAll} style={{
          width: '100%', marginTop: 10, background: 'transparent', border: 'none',
          fontFamily: 'Plus Jakarta Sans', fontWeight: 600, fontSize: 13, color: '#8a5cf6', cursor: 'pointer',
        }}>or fix all issues at once →</button>
      </div>
    </div>
  );
}

function UndoToast({ show, kind = 'success', count, message, retry, onUndo, onRetry, onDismiss }) {
  React.useEffect(() => {
    if (show) { const t = setTimeout(onDismiss, kind === 'error' ? 6000 : 5000); return () => clearTimeout(t); }
  }, [show, kind]);
  if (!show) return null;

  const leading =
    kind === 'error'          ? <span style={{ color: '#ff8a7a', fontSize: 16, lineHeight: 1 }}>●</span>
    : kind === 'chatEdit'     ? <svg width="14" height="14" viewBox="0 0 20 20"><path d="M3 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H9l-4 4v-4H5a2 2 0 0 1-2-2V5z" stroke="#fae14b" strokeWidth="1.6" fill="none" strokeLinejoin="round"/></svg>
    :                           <Sparkle color="#fae14b"/>;

  const label =
    kind === 'error'      ? (message || 'something went wrong')
    : kind === 'chatEdit' ? 'applied your edit'
    :                       `fixed ${count} issue${count === 1 ? '' : 's'}`;

  const trailing =
    kind === 'error' && !retry
      ? <button onClick={onDismiss} style={{
          width: 28, height: 28, borderRadius: '50%', border: 'none',
          background: 'rgba(255,255,255,0.1)', color: 'rgba(255,255,255,0.8)',
          cursor: 'pointer', fontSize: 12, fontWeight: 700, fontFamily: 'inherit',
        }}>✕</button>
      : <button onClick={kind === 'error' ? onRetry : onUndo} style={{
          background: kind === 'error' ? '#ff8a7a' : '#fae14b', color: '#1a0d2e', border: 'none', borderRadius: 100,
          padding: '6px 14px', fontWeight: 700, fontSize: 13, cursor: 'pointer', fontFamily: 'inherit',
        }}>{kind === 'error' ? 'retry' : 'undo'}</button>;

  return (
    <div style={{
      position: 'absolute', left: 16, right: 16, bottom: 100, zIndex: 200,
      background: '#1a0d2e', color: '#fff', borderRadius: 100,
      padding: '10px 10px 10px 18px', display: 'flex', alignItems: 'center', gap: 10,
      boxShadow: '0 12px 40px rgba(26,13,46,0.4)',
      fontFamily: 'Plus Jakarta Sans', fontSize: 14, animation: 'pop-in 0.4s cubic-bezier(.34,1.56,.64,1) both',
    }}>
      {leading}
      <span style={{ flex: 1 }}>{label}</span>
      {trailing}
    </div>
  );
}

function ExportScreen({ platform, onBack }) {
  const [format, setFormat] = React.useState('pdf');
  const [template, setTemplate] = React.useState('classic');

  const pdfTemplates = [
    { id: 'classic', name: 'Classic', sub: 'Serif, single column', accent: '#1a0d2e' },
    { id: 'minimal', name: 'Minimal', sub: 'Clean, lots of whitespace', accent: '#6b5e88' },
    { id: 'modern',  name: 'Modern',  sub: 'Sidebar, sans-serif', accent: '#8a5cf6' },
    { id: 'creative', name: 'Creative', sub: 'Color accents, bold display', accent: '#ff4db8' },
  ];
  const docxTemplates = [
    { id: 'ats',  name: 'ATS-friendly', sub: 'Keywords optimized, plain', accent: '#5ac77f' },
    { id: 'std',  name: 'Standard',     sub: 'Traditional Word template', accent: '#4dd6ff' },
  ];
  const templates = format === 'pdf' ? pdfTemplates : docxTemplates;
  React.useEffect(() => { setTemplate(templates[0].id); }, [format]);

  const renderPreview = (t) => {
    const active = t.id === template;
    return (
      <div key={t.id} onClick={() => setTemplate(t.id)} style={{
        background: '#fffdf7', borderRadius: 16, overflow: 'hidden',
        border: active ? `2.5px solid ${t.accent}` : '1px solid rgba(26,13,46,0.08)',
        cursor: 'pointer', position: 'relative',
        boxShadow: active ? `0 8px 24px ${t.accent}33` : '0 1px 4px rgba(0,0,0,0.04)',
        transition: 'all 0.2s',
      }}>
        {/* mini resume preview */}
        <div style={{ padding: '14px 12px 10px', background: '#fff', height: 160, position: 'relative', overflow: 'hidden' }}>
          {t.id === 'classic' && <>
            <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: 14, color: '#1a0d2e', textAlign: 'center' }}>Jordan Rivera</div>
            <div style={{ borderTop: '1px solid #1a0d2e', margin: '4px 0 6px' }}/>
            {[95, 75, 88, 60].map((w,i) => <div key={i} style={{ height: 2, background: '#c5b8d9', width: `${w}%`, marginBottom: 3 }}/>)}
            <div style={{ height: 3, background: '#1a0d2e', width: '30%', margin: '6px 0 3px' }}/>
            {[80, 90, 70].map((w,i) => <div key={i} style={{ height: 2, background: '#c5b8d9', width: `${w}%`, marginBottom: 3 }}/>)}
          </>}
          {t.id === 'minimal' && <>
            <div style={{ fontFamily: 'Plus Jakarta Sans', fontSize: 13, fontWeight: 300, color: '#1a0d2e', letterSpacing: '0.15em' }}>JORDAN RIVERA</div>
            <div style={{ fontSize: 7, color: '#6b5e88', marginTop: 2 }}>Senior Product Designer</div>
            <div style={{ height: 12 }}/>
            {[100, 80, 90, 65, 85].map((w,i) => <div key={i} style={{ height: 2, background: '#e0dbce', width: `${w}%`, marginBottom: 4 }}/>)}
          </>}
          {t.id === 'modern' && <div style={{ display: 'flex', height: '100%', gap: 6 }}>
            <div style={{ width: 36, background: '#8a5cf6', height: '100%', borderRadius: 3, padding: 4 }}>
              <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#fff', marginBottom: 4 }}/>
              {[70, 90, 50].map((w,i) => <div key={i} style={{ height: 1.5, background: 'rgba(255,255,255,0.7)', width: `${w}%`, marginBottom: 2 }}/>)}
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: 12, color: '#1a0d2e' }}>Jordan Rivera</div>
              <div style={{ fontSize: 7, color: '#8a5cf6', marginBottom: 4 }}>Sr. Product Designer</div>
              {[90, 70, 85, 60].map((w,i) => <div key={i} style={{ height: 2, background: '#c5b8d9', width: `${w}%`, marginBottom: 3 }}/>)}
            </div>
          </div>}
          {t.id === 'creative' && <>
            <div style={{ fontFamily: 'Instrument Serif, serif', fontStyle: 'italic', fontSize: 16, color: '#ff4db8' }}>Jordan<span style={{ color: '#1a0d2e' }}> Rivera</span></div>
            <div style={{ display: 'flex', gap: 4, marginTop: 4 }}>
              {['#ff4db8','#8a5cf6','#4dd6ff'].map(c => <div key={c} style={{ width: 12, height: 4, borderRadius: 100, background: c }}/>)}
            </div>
            <div style={{ height: 8 }}/>
            {[80, 95, 60, 85].map((w,i) => <div key={i} style={{ height: 2, background: '#c5b8d9', width: `${w}%`, marginBottom: 3 }}/>)}
          </>}
          {t.id === 'ats' && <>
            <div style={{ fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: 12, color: '#1a0d2e' }}>JORDAN RIVERA</div>
            <div style={{ fontSize: 7, color: '#6b5e88' }}>jordan.r@mail.com | 415-555-0142</div>
            <div style={{ height: 8 }}/>
            <div style={{ fontSize: 8, fontWeight: 700 }}>EXPERIENCE</div>
            {[95, 80, 90, 65].map((w,i) => <div key={i} style={{ height: 2, background: '#c5b8d9', width: `${w}%`, marginBottom: 3 }}/>)}
          </>}
          {t.id === 'std' && <>
            <div style={{ fontFamily: 'Times, serif', fontSize: 14, color: '#1a0d2e', textAlign: 'center', fontWeight: 700 }}>Jordan Rivera</div>
            <div style={{ fontSize: 7, color: '#6b5e88', textAlign: 'center' }}>jordan.r@mail.com • (415) 555-0142</div>
            <div style={{ height: 6 }}/>
            {[90, 75, 85, 60, 80].map((w,i) => <div key={i} style={{ height: 2, background: '#c5b8d9', width: `${w}%`, marginBottom: 3 }}/>)}
          </>}

          {active && (
            <div style={{ position: 'absolute', top: 8, right: 8, width: 22, height: 22, borderRadius: '50%', background: t.accent, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 13 }}>✓</div>
          )}
        </div>
        <div style={{ padding: '10px 12px' }}>
          <div style={{ fontFamily: 'Plus Jakarta Sans', fontSize: 13, fontWeight: 700, color: '#1a0d2e' }}>{t.name}</div>
          <div style={{ fontFamily: 'Plus Jakarta Sans', fontSize: 11, color: '#6b5e88' }}>{t.sub}</div>
        </div>
      </div>
    );
  };

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: '#fef9f0' }}>
      <PhoneHeader platform={platform} title="export" sub="step 2 of 2" onBack={onBack}/>

      <div style={{ padding: '0 20px 12px' }}>
        <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: 34, lineHeight: 1, letterSpacing: '-0.02em', color: '#1a0d2e' }}>
          ship it <em style={{ background: 'linear-gradient(90deg, #ff4db8, #8a5cf6)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent', fontStyle: 'italic' }}>beautifully</em>
        </div>
      </div>

      {/* format toggle */}
      <div style={{ padding: '0 20px 12px', display: 'flex', gap: 6 }}>
        <div style={{ display: 'flex', background: '#f0ebe0', borderRadius: 100, padding: 4, flex: 1 }}>
          {['pdf','docx'].map(f => (
            <button key={f} onClick={() => setFormat(f)} style={{
              flex: 1, padding: '10px 12px', borderRadius: 100, border: 'none',
              background: format === f ? '#1a0d2e' : 'transparent',
              color: format === f ? '#fae14b' : '#6b5e88',
              fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: 13, cursor: 'pointer',
              textTransform: 'uppercase', letterSpacing: '0.08em',
            }}>{f}</button>
          ))}
        </div>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', padding: '0 16px 12px' }} className="device-scroll">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {templates.map(renderPreview)}
        </div>

        <div style={{ marginTop: 14, background: '#fffdf7', borderRadius: 14, padding: 12, display: 'flex', alignItems: 'center', gap: 10, border: '1px solid rgba(26,13,46,0.06)' }}>
          <div style={{ width: 36, height: 36, borderRadius: 10, background: 'linear-gradient(135deg, #b7f0cd, #5ac77f)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#1a0d2e', fontWeight: 700 }}>✓</div>
          <div style={{ flex: 1, fontFamily: 'Plus Jakarta Sans', fontSize: 12, color: '#1a0d2e', lineHeight: 1.4 }}>
            <strong>ATS pass</strong> — your content will parse clean in applicant tracking systems.
          </div>
        </div>
      </div>

      <div style={{ padding: '12px 16px', paddingBottom: platform === 'ios' ? 34 : 20, display: 'flex', gap: 8 }}>
        <PillButton variant="lemon" style={{ width: '100%' }}>
          download {format}
        </PillButton>
      </div>
    </div>
  );
}

function HistoryScreen({ platform, onBack, onOpen, onExport }) {
  const history = [
    { name: 'Jordan_Resume_v4', score: 82, date: 'just now', delta: +14, current: true },
    { name: 'Jordan_Resume_v3', score: 68, date: '2d ago', delta: +6 },
    { name: 'Jordan_Resume_v2', score: 62, date: '1w ago', delta: +17 },
    { name: 'Jordan_Resume_v1', score: 45, date: '3w ago', delta: null },
  ];
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: '#fef9f0' }}>
      <PhoneHeader platform={platform} title="history" sub="4 scans" onBack={onBack}/>

      {/* progress chart */}
      <div style={{ padding: '0 20px 16px' }}>
        <div style={{
          padding: 18, borderRadius: 20,
          background: 'linear-gradient(135deg, #1a0d2e, #3d1a55)', color: '#fff',
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ position: 'absolute', top: -30, right: -30, width: 120, height: 120, borderRadius: '50%', background: 'radial-gradient(circle, #ff4db8, transparent 60%)', filter: 'blur(20px)', opacity: 0.5 }}/>
          <div style={{ position: 'relative' }}>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.15em', color: 'rgba(255,255,255,0.6)' }}>aura growth</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 2 }}>
              <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: 48, lineHeight: 1 }}>+37</div>
              <div style={{ fontSize: 13, color: '#b7f0cd' }}>↑ since first scan</div>
            </div>
            {/* sparkline */}
            <svg width="100%" height="60" viewBox="0 0 300 60" style={{ marginTop: 14 }}>
              <defs><linearGradient id="spark" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stopColor="#ff4db8"/><stop offset="1" stopColor="#fae14b"/></linearGradient></defs>
              <path d="M10 45 L80 38 L160 28 L230 20 L290 8" stroke="url(#spark)" strokeWidth="3" fill="none" strokeLinecap="round"/>
              {[[10,45],[80,38],[160,28],[230,20],[290,8]].map(([x,y],i) => <circle key={i} cx={x} cy={y} r="4" fill="#fff"/>)}
            </svg>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'JetBrains Mono, monospace', fontSize: 9, color: 'rgba(255,255,255,0.5)', marginTop: -4 }}>
              <span>v1</span><span>v2</span><span>v3</span><span>v4</span>
            </div>
          </div>
        </div>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', padding: '0 16px 12px' }} className="device-scroll">
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.15em', color: '#6b5e88', margin: '4px 6px 8px' }}>all scans</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {history.map((h, i) => (
            <div key={i} style={{
              background: '#fffdf7', borderRadius: 16, padding: 14,
              border: h.current ? '1.5px solid #8a5cf6' : '1px solid rgba(26,13,46,0.06)',
              display: 'flex', alignItems: 'center', gap: 12,
            }}>
              {/* mini score */}
              <div onClick={h.current ? onOpen : undefined} style={{ width: 56, height: 56, borderRadius: '50%', background: h.score >= 75 ? 'linear-gradient(135deg, #b7f0cd, #5ac77f)' : h.score >= 55 ? 'linear-gradient(135deg, #fae14b, #e5c71a)' : 'linear-gradient(135deg, #ff8a7a, #ff4db8)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, fontFamily: 'Instrument Serif, serif', fontSize: 22, color: '#1a0d2e', cursor: h.current ? 'pointer' : 'default' }}>
                {h.score}
              </div>
              <div onClick={h.current ? onOpen : undefined} style={{ flex: 1, minWidth: 0, cursor: h.current ? 'pointer' : 'default' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <div style={{ fontFamily: 'Plus Jakarta Sans', fontSize: 14, fontWeight: 700, color: '#1a0d2e' }}>{h.name}</div>
                  {h.current && <Chip bg="#fae14b">current</Chip>}
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 2, fontFamily: 'Plus Jakarta Sans', fontSize: 12, color: '#6b5e88' }}>
                  <span>{h.date}</span>
                  {h.delta !== null && <>
                    <span>·</span>
                    <span style={{ color: h.delta > 0 ? '#5ac77f' : '#ff8a7a', fontWeight: 600 }}>{h.delta > 0 ? '↑' : '↓'} {Math.abs(h.delta)}</span>
                  </>}
                </div>
              </div>
              <button onClick={onExport} style={{
                width: 38, height: 38, borderRadius: '50%', border: 'none',
                background: '#1a0d2e', color: '#fae14b', cursor: 'pointer',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0, boxShadow: '0 4px 12px rgba(26,13,46,0.2)',
              }} title="download">
                <svg width="15" height="15" viewBox="0 0 14 14"><path d="M7 1v8m0 0l-3-3m3 3l3-3M2 12h10" stroke="#fae14b" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function ProfileScreen({ platform, onBack, onExport }) {
  const stats = [
    { label: 'scans', val: 4 },
    { label: 'best aura', val: 82 },
    { label: 'fixes', val: 27 },
  ];
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: '#fef9f0' }}>
      <PhoneHeader platform={platform} title="profile" onBack={onBack}/>

      <div style={{ flex: 1, overflowY: 'auto', padding: '0 20px 20px' }} className="device-scroll">
        {/* header card */}
        <div style={{
          padding: '20px 20px 24px', borderRadius: 24,
          background: 'linear-gradient(135deg, #1a0d2e, #3d1a55)', color: '#fff',
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 80% 20%, rgba(255,77,184,0.3), transparent 50%)' }}/>
          <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ position: 'relative' }}>
              <Auri score={82} size={72}/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: 28, fontStyle: 'italic', lineHeight: 1 }}>Jordan R.</div>
              <div style={{ fontFamily: 'Plus Jakarta Sans', fontSize: 12, color: 'rgba(255,255,255,0.7)', marginTop: 2 }}>aura apprentice · since Apr 2026</div>
            </div>
          </div>
          <div style={{ position: 'relative', display: 'flex', gap: 10, marginTop: 18 }}>
            {stats.map(s => (
              <div key={s.label} style={{ flex: 1, background: 'rgba(255,255,255,0.08)', borderRadius: 14, padding: '10px 12px', border: '1px solid rgba(255,255,255,0.08)' }}>
                <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: 26, lineHeight: 1 }}>{s.val}</div>
                <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 9, textTransform: 'uppercase', letterSpacing: '0.12em', color: 'rgba(255,255,255,0.6)', marginTop: 2 }}>{s.label}</div>
              </div>
            ))}
          </div>
        </div>

        {/* aura subscription */}
        <div style={{ marginTop: 14, padding: 18, borderRadius: 22, background: 'linear-gradient(135deg, #ff4db8, #8a5cf6)', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', top: -40, right: -40, width: 140, height: 140, borderRadius: '50%', background: 'rgba(250,225,75,0.25)', filter: 'blur(28px)' }}/>
          <div style={{ position: 'relative' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <Sparkle color="#fae14b"/>
              <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, fontWeight: 700, letterSpacing: '0.14em', color: '#fae14b' }}>GO PRO</span>
            </div>
            <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: 28, fontStyle: 'italic', color: '#fff', marginTop: 8, lineHeight: 1 }}>unlimited aura</div>
            <div style={{ fontFamily: 'Plus Jakarta Sans', fontSize: 13, color: 'rgba(255,255,255,0.85)', marginTop: 8, maxWidth: 260, lineHeight: 1.4 }}>rescan daily, unlock every template, keep every version in history.</div>
            <PillButton variant="lemon" style={{ marginTop: 14, height: 40 }}>upgrade</PillButton>
          </div>
        </div>

        {/* settings list */}
        <div style={{ marginTop: 14, background: '#fffdf7', borderRadius: 20, overflow: 'hidden', border: '1px solid rgba(26,13,46,0.06)' }}>
          {[
            { label: 'help & feedback', icon: '?', trailing: 'external' },
            { label: 'settings', icon: '⚙', trailing: 'chevron' },
          ].map((r, i, arr) => (
            <div key={i} style={{
              padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12,
              borderBottom: i < arr.length - 1 ? '1px solid rgba(26,13,46,0.05)' : 'none',
              cursor: 'pointer',
            }}>
              <div style={{ width: 28, height: 28, borderRadius: 8, background: '#f0ebe0', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, fontWeight: 700, color: '#1a0d2e' }}>{r.icon}</div>
              <div style={{ flex: 1, fontFamily: 'Plus Jakarta Sans', fontSize: 14, color: '#1a0d2e', fontWeight: 500 }}>{r.label}</div>
              {r.trailing === 'external' ? (
                <svg width="11" height="11" viewBox="0 0 12 12"><path d="M3 9L9 3M5 3h4v4" stroke="#6b5e88" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
              ) : (
                <Chevron dir="right" color="#6b5e88" size={12}/>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { FixSheet, UndoToast, ExportScreen, HistoryScreen, ProfileScreen });