// screens-you.jsx — You (profile / settings)

function ScreenYou() {
  return (
    <div className="rv-screen rv">
      <StatusBar time="10:02"/>

      {/* Top bar */}
      <div style={{ position: 'absolute', top: 56, left: 0, right: 0, padding: '6px 20px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', zIndex: 5 }}>
        <h1 style={{
          margin: 0, fontFamily: 'var(--display)', fontWeight: 800,
          fontSize: 28, lineHeight: 1, letterSpacing: '-0.04em', color: 'var(--text)',
        }}>You</h1>
        <span style={{
          fontSize: 11, color: 'var(--accent)', fontWeight: 600,
          padding: '4px 10px', background: 'var(--accent-tint)',
          borderRadius: 999, letterSpacing: '0.06em',
        }}>PRO · WAITLIST</span>
      </div>

      <div style={{ position: 'absolute', top: 110, left: 0, right: 0, bottom: 0, overflow: 'auto', paddingBottom: 200 }}>
        {/* Profile chip */}
        <div style={{ padding: '8px 20px 20px', display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{
            width: 58, height: 58, borderRadius: 14,
            background: 'var(--accent)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'var(--display)', fontWeight: 800,
            fontSize: 26, color: '#fff', letterSpacing: '-0.04em',
            boxShadow: '0 2px 0 rgba(24,30,50,0.18), 0 8px 20px rgba(61,143,224,0.30)',
          }}>N</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 17, fontWeight: 600, color: 'var(--text)' }}>Niraj Pant</div>
            <div style={{ fontSize: 13, color: 'var(--text-3)', marginTop: 2 }}>niraj@reverb.fm · 42-day streak</div>
          </div>
        </div>

        {/* Listening stat strip */}
        <div style={{ padding: '0 16px 22px' }}>
          <div style={{
            display: 'flex', padding: '14px 6px', borderRadius: 18,
            background: 'var(--bg-1)', border: '0.5px solid var(--line)',
          }}>
            <Stat value="3h 12m" label="Listened this week"/>
            <Divider/>
            <Stat value="38" label="Briefs heard"/>
            <Divider/>
            <Stat value="7m" label="Avg length"/>
          </div>
        </div>

        {/* Voices section */}
        <SectionLabel title="Voices" sub="Tap to preview"/>
        <div style={{ padding: '0 18px 22px', display: 'flex', gap: 10, overflowX: 'auto' }}>
          <VoiceCard name="Niraj-Anchor"  engine="Kokoro" desc="Warm, measured" selected chipBg="var(--accent)"  chipKind="mic"/>
          <VoiceCard name="Maya-Banter"   engine="Kokoro" desc="Sharp, dry"     chipBg="var(--magenta)" chipKind="chat"/>
          <VoiceCard name="The Late Host" engine="Piper"  desc="Late-night quick" chipBg="var(--yellow)" chipKind="bolt"/>
          <VoiceCard name="Add voice"     add/>
        </div>

        {/* Settings list */}
        <div style={{ padding: '0 16px 12px', display: 'flex', flexDirection: 'column', gap: 12 }}>
          <SettingsGroup label="LISTEN">
            <SettingRow label="Default style" value="Quick brief"/>
            <SettingRow label="Brief delivery" value="Daily · 7:30 AM"/>
            <SettingRow label="Length cap" value="≤ 10 min"/>
            <SettingRow label="Mark heard automatically" toggle on isLast/>
          </SettingsGroup>

          <SettingsGroup label="AUDIO">
            <SettingRow label="Voice engine" value="Kokoro · 1.0"/>
            <SettingRow label="Playback rate" value="1.0×"/>
            <SettingRow label="Lock-screen art" toggle on isLast/>
          </SettingsGroup>

          <SettingsGroup label="APPEARANCE">
            <SettingRow label="Theme" value="Auto · dark at night"/>
            <SettingRow label="Accent" value="Sky" swatch="var(--accent)" isLast/>
          </SettingsGroup>

          <SettingsGroup label="DATA">
            <SettingRow label="Export listening history"/>
            <SettingRow label="Sign out" danger isLast/>
          </SettingsGroup>
        </div>

        <div style={{ padding: '20px 22px 40px', textAlign: 'center' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11.5, color: 'var(--text-4)' }}>
            <RvMark size={11} color="var(--text-4)"/> Reverb · v0.4.1
          </div>
        </div>
      </div>

      <MiniPlayer title="The Wednesday Brief" progress={0.32}/>
      <TabBar active="you"/>
      <HomeIndicator/>
    </div>
  );
}

function Stat({ value, label }) {
  return (
    <div style={{ flex: 1, textAlign: 'center' }}>
      <div style={{ fontFamily: 'var(--display)', fontWeight: 800, fontSize: 22, color: 'var(--text)', letterSpacing: '-0.04em' }}>{value}</div>
      <div style={{ fontSize: 10.5, color: 'var(--text-3)', marginTop: 2, letterSpacing: '0.05em', textTransform: 'uppercase', fontWeight: 500 }}>{label}</div>
    </div>
  );
}
function Divider() {
  return <div style={{ width: 0.5, alignSelf: 'stretch', background: 'var(--line-strong)' }}/>;
}

function SectionLabel({ title, sub }) {
  return (
    <div style={{ padding: '4px 22px 12px', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
      <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-3)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>{title}</span>
      {sub && <span style={{ fontSize: 11, color: 'var(--text-4)' }}>{sub}</span>}
    </div>
  );
}

function VoiceCard({ name, engine, desc, selected, add, chipBg = 'var(--accent)', chipKind = 'mic' }) {
  if (add) {
    return (
      <div style={{
        flexShrink: 0, width: 124, padding: 12,
        borderRadius: 14, border: '0.5px dashed var(--line-strong)',
        background: 'transparent', color: 'var(--text-3)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        gap: 6, minHeight: 144,
      }}>
        <div style={{ width: 32, height: 32, borderRadius: 999, background: 'var(--bg-1)', color: 'var(--text-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '0.5px solid var(--line)' }}>
          <IcPlus s={16}/>
        </div>
        <div style={{ fontSize: 12.5, color: 'var(--text-2)' }}>{name}</div>
      </div>
    );
  }
  return (
    <div style={{
      flexShrink: 0, width: 124, padding: 12,
      borderRadius: 14,
      background: selected ? 'var(--text)' : 'var(--bg-1)',
      color: selected ? '#fff' : 'var(--text)',
      border: selected ? 'none' : '0.5px solid var(--line)',
      boxShadow: selected
        ? '0 2px 0 rgba(24,30,50,0.20), 0 8px 18px rgba(24,30,50,0.18)'
        : '0 1px 0 rgba(24,30,50,0.04)',
      position: 'relative',
    }}>
      <div style={{ display: 'flex', justifyContent: 'center', margin: '4px 0 10px', position: 'relative' }}>
        <ColorChip size={56} kind={chipKind} bg={chipBg} fg={chipBg === 'var(--yellow)' ? 'var(--text)' : '#fff'} rotate={-4} radius={14}/>
        {selected && (
          <div style={{
            position: 'absolute', bottom: -4, right: 18,
            width: 20, height: 20, borderRadius: 999,
            background: 'var(--yellow)', color: 'var(--text)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            border: '2px solid var(--text)',
          }}>
            <IcCheck s={11} w={2.6}/>
          </div>
        )}
      </div>
      <div style={{ textAlign: 'center' }}>
        <div style={{ fontFamily: 'var(--display)', fontSize: 13.5, fontWeight: 700, letterSpacing: '-0.02em' }}>{name}</div>
        <div style={{ fontSize: 10, marginTop: 2, letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 700, color: selected ? 'var(--accent-soft)' : 'var(--text-3)' }}>{engine}</div>
        <div style={{ fontSize: 11.5, marginTop: 5, color: selected ? 'rgba(255,255,255,0.7)' : 'var(--text-2)' }}>{desc}</div>
      </div>
    </div>
  );
}

function SettingsGroup({ label, children }) {
  return (
    <div>
      <div style={{ padding: '2px 6px 8px', fontSize: 10.5, color: 'var(--text-3)', letterSpacing: '0.1em', fontWeight: 600 }}>{label}</div>
      <div style={{ background: 'var(--bg-1)', border: '0.5px solid var(--line)', borderRadius: 16, overflow: 'hidden' }}>
        {children}
      </div>
    </div>
  );
}

function SettingRow({ label, value, toggle, on, danger, isLast, swatch }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '13px 14px',
      borderBottom: isLast ? '0' : '0.5px solid var(--line)',
    }}>
      <div style={{ flex: 1, fontSize: 14, fontWeight: 500, color: danger ? 'var(--bad)' : 'var(--text)' }}>{label}</div>
      {swatch && (
        <span style={{ width: 14, height: 14, borderRadius: 999, background: swatch, boxShadow: 'inset 0 0 0 0.5px rgba(255,255,255,0.2)' }}/>
      )}
      {value && (
        <span style={{ fontSize: 13, color: 'var(--text-3)' }}>{value}</span>
      )}
      {toggle ? <Toggle on={on}/> : <IcChevR s={14} stroke="var(--text-4)"/>}
    </div>
  );
}

function Toggle({ on }) {
  return (
    <div style={{
      width: 42, height: 26, borderRadius: 999,
      background: on ? 'var(--accent)' : 'var(--bg-3)',
      position: 'relative', flexShrink: 0,
      boxShadow: on ? 'inset 0 1px 0 rgba(255,255,255,0.2)' : 'inset 0 0 0 0.5px var(--line-strong)',
    }}>
      <div style={{
        position: 'absolute', top: 2, left: on ? 18 : 2,
        width: 22, height: 22, borderRadius: 999, background: '#fff',
        boxShadow: '0 2px 6px rgba(0,0,0,0.25)',
        transition: 'left 0.2s',
      }}/>
    </div>
  );
}

Object.assign(window, { ScreenYou });