// Three iPhone screen mocks for the marketing hero + feature sections.
// Composed simply — they're decorative product shots, not the real screens.

// ===== SHARED PHONE BG =====
function PhoneBg({ children, gradient = 'default', style }) {
  const grads = {
    default: 'radial-gradient(140% 100% at 30% 10%, rgba(122,68,238,0.18) 0%, transparent 55%), linear-gradient(180deg, #0c0820 0%, #07040e 100%)',
    seeker:  'radial-gradient(140% 100% at 50% 5%, rgba(255,180,90,0.16) 0%, transparent 50%), linear-gradient(180deg, #100a1f 0%, #07040e 100%)',
    win:     'radial-gradient(140% 100% at 50% 0%, rgba(90,230,200,0.18) 0%, transparent 55%), linear-gradient(180deg, #061a16 0%, #050810 100%)',
  };
  return (
    <div style={{
      width: '100%', height: '100%',
      background: grads[gradient],
      color: '#fff',
      fontFamily: '-apple-system, system-ui, sans-serif',
      display: 'flex', flexDirection: 'column',
      ...style,
    }}>{children}</div>
  );
}

// ===== LOBBY MOCK — show 4 friends locked in =====
function LobbyMock() {
  const players = [
    { name: 'maya',   tone: 'lucid',       glyph: 'eye',     elo: 1820, ready: true },
    { name: 'jules',  tone: 'seeker',      glyph: 'compass', elo: 1554, ready: true },
    { name: 'you',    tone: 'scroller',    glyph: 'feed',    elo: 1340, ready: true, self: true },
    { name: 'tomás',  tone: 'clairvoyant', glyph: 'crystal', elo: 2104, ready: false },
  ];
  return (
    <PhoneBg>
      <div style={{ padding: '48px 18px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ fontSize: 12, color: '#7a759a', letterSpacing: '0.12em', textTransform: 'uppercase' }}>
          Lobby
        </div>
        <div style={{ fontSize: 11, color: '#5ae6c8', display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#5ae6c8' }}/>
          live
        </div>
      </div>

      <div style={{ padding: '4px 18px 0' }}>
        <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em' }}>
          Friday night vault
        </div>
        <div style={{ fontSize: 12, color: '#9089b3', marginTop: 4 }}>
          4 hours · Instagram, TikTok, X blocked
        </div>
      </div>

      {/* stake card */}
      <div style={{
        margin: '20px 18px 0',
        padding: '14px 16px',
        borderRadius: 16,
        background: 'linear-gradient(135deg, rgba(122,68,238,0.18), rgba(40,20,90,0.3))',
        border: '1px solid rgba(163,120,255,0.25)',
      }}>
        <div style={{ fontSize: 10, color: '#c8a6ff', letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 600 }}>
          Stake · winner takes
        </div>
        <div style={{ fontSize: 28, fontWeight: 700, marginTop: 6, letterSpacing: '-0.02em',
          background: 'linear-gradient(135deg,#fff,#c8a6ff)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>
          +24 ELO
        </div>
      </div>

      {/* roster */}
      <div style={{ flex: 1, padding: '20px 18px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {players.map((p, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 12,
            padding: '10px 12px',
            borderRadius: 14,
            background: p.self ? 'rgba(122,68,238,0.14)' : 'rgba(255,255,255,0.03)',
            border: `1px solid ${p.self ? 'rgba(163,120,255,0.3)' : 'rgba(255,255,255,0.06)'}`,
          }}>
            <div style={{ width: 38, height: 38, flexShrink: 0 }}>
              <Avatar avatar={{ id: p.name, glyph: p.glyph }} tone={p.tone} size={38} frame={true}/>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 600 }}>
                {p.name}{p.self && <span style={{ marginLeft: 6, color: '#c8a6ff', fontWeight: 500, fontSize: 11 }}>· you</span>}
              </div>
              <div style={{ fontSize: 11, color: '#7a759a', fontVariantNumeric: 'tabular-nums' }}>
                {p.elo} ELO
              </div>
            </div>
            {p.ready ? (
              <div style={{
                fontSize: 10, fontWeight: 700, letterSpacing: '0.08em',
                color: '#5ae6c8', padding: '4px 8px',
                background: 'rgba(90,230,200,0.1)', borderRadius: 6, border: '1px solid rgba(90,230,200,0.25)',
              }}>READY</div>
            ) : (
              <div style={{
                fontSize: 10, fontWeight: 700, letterSpacing: '0.08em',
                color: '#7a759a', padding: '4px 8px',
                background: 'rgba(255,255,255,0.04)', borderRadius: 6,
              }}>WAITING</div>
            )}
          </div>
        ))}
      </div>

      <div style={{ padding: '16px 18px 24px' }}>
        <div style={{
          padding: '14px',
          borderRadius: 14,
          background: 'linear-gradient(135deg, #a378ff 0%, #7a44ee 100%)',
          textAlign: 'center', fontWeight: 700, fontSize: 14,
          boxShadow: '0 14px 36px -10px rgba(122,68,238,0.65), inset 0 1px 0 rgba(255,255,255,0.2)',
        }}>
          Lock the vault
        </div>
      </div>
    </PhoneBg>
  );
}

// ===== CHALLENGE MOCK — mid-game timer =====
function ChallengeMock() {
  return (
    <PhoneBg gradient="seeker">
      <div style={{ padding: '48px 18px 8px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ fontSize: 12, color: '#7a759a', letterSpacing: '0.12em', textTransform: 'uppercase' }}>
          Challenge active
        </div>
        <div style={{ fontSize: 11, color: '#ffbe64', fontWeight: 600 }}>
          02:47:13
        </div>
      </div>

      {/* huge ring */}
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', position: 'relative' }}>
        <div style={{ position: 'relative', width: 240, height: 240 }}>
          <svg width="240" height="240" viewBox="0 0 240 240" style={{ transform: 'rotate(-90deg)' }}>
            <defs>
              <linearGradient id="ring-grad" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0" stopColor="#ffbe64"/>
                <stop offset="1" stopColor="#ff465a"/>
              </linearGradient>
            </defs>
            <circle cx="120" cy="120" r="106" fill="none" stroke="rgba(255,255,255,0.06)" strokeWidth="6"/>
            <circle cx="120" cy="120" r="106" fill="none" stroke="url(#ring-grad)" strokeWidth="6"
              strokeLinecap="round"
              strokeDasharray={`${2*Math.PI*106*0.68} ${2*Math.PI*106}`}
              style={{ filter: 'drop-shadow(0 0 8px rgba(255,180,90,0.55))' }}/>
          </svg>
          <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
            <div style={{ fontSize: 11, color: '#ffbe64', letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 600 }}>
              Time left
            </div>
            <div style={{ fontSize: 56, fontWeight: 700, letterSpacing: '-0.04em', marginTop: 6, fontVariantNumeric: 'tabular-nums',
              background: 'linear-gradient(135deg,#fff,#ffd9b0)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>
              2:47
            </div>
            <div style={{ fontSize: 11, color: '#9089b3', marginTop: 4, letterSpacing: '0.04em' }}>
              of 4 hours
            </div>
          </div>
        </div>

        {/* who's in */}
        <div style={{ marginTop: 36, display: 'flex', gap: -8, alignItems: 'center' }}>
          {[
            { tone: 'lucid', glyph: 'eye' },
            { tone: 'seeker', glyph: 'compass' },
            { tone: 'scroller', glyph: 'feed' },
            { tone: 'clairvoyant', glyph: 'crystal' },
          ].map((p, i) => (
            <div key={i} style={{ marginLeft: i === 0 ? 0 : -10, border: '2px solid #07040e', borderRadius: '50%', width: 36, height: 36 }}>
              <Avatar avatar={{ id: 'c'+i, glyph: p.glyph }} tone={p.tone} size={32} frame={true}/>
            </div>
          ))}
        </div>
        <div style={{ fontSize: 12, color: '#9089b3', marginTop: 12 }}>
          4 still locked in
        </div>
      </div>

      <div style={{ padding: '0 18px 24px' }}>
        <div style={{
          padding: '14px', borderRadius: 14,
          background: 'rgba(255,255,255,0.04)',
          border: '1px solid rgba(255,255,255,0.08)',
          textAlign: 'center', fontSize: 13, color: '#aaa3cc',
        }}>
          Keep your phone face-down
        </div>
      </div>
    </PhoneBg>
  );
}

// ===== END SCREEN MOCK — XP gain =====
function EndScreenMock() {
  return (
    <PhoneBg gradient="win">
      <div style={{ padding: '48px 18px 8px', display: 'flex', justifyContent: 'center' }}>
        <div style={{ fontSize: 11, color: '#5ae6c8', letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700 }}>
          Vault unlocked · you won
        </div>
      </div>

      {/* trophy avatar */}
      <div style={{ display: 'flex', justifyContent: 'center', marginTop: 30, position: 'relative' }}>
        <div style={{ position: 'absolute', width: 200, height: 200, borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(90,230,200,0.4), transparent 60%)',
          filter: 'blur(20px)', top: -20 }}/>
        <div style={{ position: 'relative' }}>
          <Avatar avatar={{ id: 'win', glyph: 'eye' }} tone="lucid" size={120} frame={true}/>
        </div>
      </div>

      <div style={{ textAlign: 'center', marginTop: 24, padding: '0 24px' }}>
        <div style={{ fontSize: 13, color: '#9089b3' }}>You climbed</div>
        <div style={{ fontSize: 22, fontWeight: 700, marginTop: 4 }}>
          Seeker → <GradWord from="#a8f0d8" via="#5ae6c8" to="#5ae6c8">Lucid</GradWord>
        </div>
      </div>

      {/* XP card */}
      <div style={{ margin: '24px 18px 0', padding: '20px 16px', borderRadius: 18,
        background: 'linear-gradient(135deg, rgba(90,230,200,0.16), rgba(20,60,50,0.3))',
        border: '1px solid rgba(90,230,200,0.3)',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <div style={{ fontSize: 11, color: '#5ae6c8', letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 700 }}>
            ELO gain
          </div>
          <div style={{ fontSize: 11, color: '#9089b3' }}>1554 → 1720</div>
        </div>
        <div style={{ fontSize: 56, fontWeight: 700, marginTop: 8, letterSpacing: '-0.04em', lineHeight: 1,
          background: 'linear-gradient(135deg,#fff,#5ae6c8)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
          fontVariantNumeric: 'tabular-nums' }}>
          +166
        </div>
        <div style={{ fontSize: 12, color: '#7a759a', marginTop: 8 }}>
          Personal record · biggest single climb
        </div>
      </div>

      {/* defeated */}
      <div style={{ flex: 1, padding: '20px 18px 0' }}>
        <div style={{ fontSize: 11, color: '#7a759a', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 10 }}>
          Outlasted
        </div>
        {[
          { name: 'jules',  tone: 'seeker', glyph: 'compass', mins: '0:34', loss: '−42' },
          { name: 'tomás', tone: 'clairvoyant', glyph: 'crystal', mins: '1:58', loss: '−68' },
          { name: 'kai',   tone: 'addicted', glyph: 'phone', mins: '2:12', loss: '−18' },
        ].map((p, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderBottom: i < 2 ? '1px solid rgba(255,255,255,0.05)' : 'none' }}>
            <div style={{ width: 28, height: 28 }}>
              <Avatar avatar={{ id: 'l'+i, glyph: p.glyph }} tone={p.tone} size={28} frame={true}/>
            </div>
            <div style={{ flex: 1, fontSize: 13, fontWeight: 500 }}>{p.name}</div>
            <div style={{ fontSize: 11, color: '#7a759a', fontVariantNumeric: 'tabular-nums' }}>cracked at {p.mins}</div>
            <div style={{ fontSize: 12, fontWeight: 700, color: '#ff8090', fontVariantNumeric: 'tabular-nums', minWidth: 36, textAlign: 'right' }}>{p.loss}</div>
          </div>
        ))}
      </div>

      <div style={{ padding: '16px 18px 24px' }}>
        <div style={{
          padding: '14px', borderRadius: 14,
          background: 'linear-gradient(135deg, #5ae6c8, #2da38b)',
          textAlign: 'center', fontWeight: 700, fontSize: 14, color: '#062018',
          boxShadow: '0 14px 36px -10px rgba(90,230,200,0.45), inset 0 1px 0 rgba(255,255,255,0.3)',
        }}>
          Share the win
        </div>
      </div>
    </PhoneBg>
  );
}

window.LobbyMock = LobbyMock;
window.ChallengeMock = ChallengeMock;
window.EndScreenMock = EndScreenMock;
window.PhoneBg = PhoneBg;