/* global React */
// Screens part 3 — AI Livestream

function LiveScreen({ onCur }) {
  return (
    <div className="appbody" style={{ background: '#000', position: 'relative', overflow: 'hidden' }}>
      {/* full-bleed video bg */}
      <div style={{ position: 'absolute', inset: 0, background: 'url(assets/p3.jpg) center/cover' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 35%, rgba(0,0,0,0.85) 100%)' }} />

      {/* top bar */}
      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 8, padding: '10px 14px', color: '#fff' }}>
        <Icon name="back" size={18} stroke="#fff" sw={1.8} />
        <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 6 }}>
          <div style={{ width: 30, height: 30, borderRadius: '50%', border: '1.5px solid var(--brand)', background: 'url(assets/sinsagom-1.jpg) center/cover' }} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 11, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 4 }}>
              Sora Studio · AI 主播
              <span style={{ fontSize: 7, fontWeight: 700, padding: '1px 4px', background: 'var(--brand)', borderRadius: 2, fontFamily: 'var(--font-display)' }}>LIVE</span>
            </div>
            <div style={{ fontSize: 9, opacity: 0.7, fontFamily: 'var(--font-mono)' }}>2,481 在线 · 已直播 4h 12m</div>
          </div>
          <button className="btn primary" style={{ padding: '4px 10px', fontSize: 10 }}>+ 关注</button>
        </div>
      </div>

      {/* AI badge */}
      <div style={{ position: 'absolute', top: 64, left: 14, display: 'flex', flexDirection: 'column', gap: 6 }}>
        <span className="nightband"><i />SEOUL 02:14 · 365×24</span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 9, fontWeight: 700, padding: '3px 7px', background: 'rgba(0,0,0,0.55)', color: '#FFD53D', borderRadius: 999, backdropFilter: 'blur(8px)', letterSpacing: '0.06em' }}>
          ⚡ AI ANCHOR · 多平台同播
        </span>
      </div>

      {/* multilingual chat */}
      <div style={{ position: 'absolute', left: 12, right: 80, bottom: 130, color: '#fff', fontSize: 10, lineHeight: 1.6, display: 'flex', flexDirection: 'column', gap: 4 }}>
        {[
          ['🇨🇳 小雨','刚下了那件碎花裙'],
          ['🇰🇷 지민','이거 진짜 예뻐요'],
          ['🇻🇳 An','Có size S không ạ?'],
          ['🇯🇵 Yui','3番のワンピが欲しい'],
          ['🇺🇸 Mia','How much in USD?'],
        ].map((m, i) => (
          <div key={i} style={{ background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(6px)', borderRadius: 12, padding: '4px 10px', alignSelf: 'flex-start', maxWidth: '88%' }}>
            <span style={{ color: '#FFD53D', fontWeight: 600 }}>{m[0]}</span> <span style={{ opacity: 0.9 }}>{m[1]}</span>
          </div>
        ))}
      </div>

      {/* right action rail */}
      <div style={{ position: 'absolute', right: 10, bottom: 130, display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'center' }}>
        {[
          { i: 'heart', n: '12.4k' },
          { i: 'share', n: '分享' },
          { i: 'cart', n: '购物袋' },
        ].map(b => (
          <div key={b.i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, color: '#fff' }}>
            <span style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(0,0,0,0.45)', display: 'grid', placeItems: 'center', backdropFilter: 'blur(6px)' }}>
              <Icon name={b.i} size={17} stroke="#fff" sw={1.6} />
            </span>
            <span style={{ fontSize: 9, fontWeight: 600 }}>{b.n}</span>
          </div>
        ))}
      </div>

      {/* floating product card */}
      <div style={{ position: 'absolute', left: 12, right: 12, bottom: 56, background: 'rgba(255,255,255,0.97)', borderRadius: 12, padding: 8, display: 'flex', gap: 10, alignItems: 'center', boxShadow: '0 12px 32px rgba(0,0,0,0.4)' }}>
        <div style={{ width: 58, height: 58, borderRadius: 6, background: 'url(assets/p1.jpg) center/cover', flexShrink: 0, position: 'relative' }}>
          <span style={{ position: 'absolute', top: 0, left: 0, width: 18, height: 18, background: 'var(--brand)', color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 10, display: 'grid', placeItems: 'center' }}>3</span>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 11, fontWeight: 600, lineHeight: 1.3 }}>法式碎花茶歇连衣裙</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 2 }}>
            <PriceBlock cny={268} originCny={398} size={14} />
            <span style={{ fontSize: 9, color: 'var(--fg-3)' }}>已抢 218</span>
          </div>
        </div>
        <button className="btn primary" style={{ padding: '8px 14px', fontSize: 11, fontWeight: 700 }}>抢购</button>
      </div>

      {/* bottom comment */}
      <div style={{ position: 'absolute', left: 12, right: 12, bottom: 14, display: 'flex', gap: 8, alignItems: 'center' }}>
        <div style={{ flex: 1, padding: '8px 14px', borderRadius: 999, background: 'rgba(255,255,255,0.18)', backdropFilter: 'blur(10px)', fontSize: 11, color: 'rgba(255,255,255,0.7)' }}>说点什么…</div>
        <span style={{ width: 32, height: 32, borderRadius: '50%', background: 'rgba(255,255,255,0.18)', display: 'grid', placeItems: 'center', backdropFilter: 'blur(10px)' }}>
          <Icon name="globe" size={15} stroke="#fff" sw={1.6} />
        </span>
        <span style={{ width: 32, height: 32, borderRadius: '50%', background: 'rgba(255,255,255,0.18)', display: 'grid', placeItems: 'center', backdropFilter: 'blur(10px)' }}>
          <Icon name="cart" size={15} stroke="#fff" sw={1.6} />
        </span>
      </div>
    </div>
  );
}

window.LiveScreen = LiveScreen;