// Home, Game Detail, In-game, Profile, Düello — all mobile screens.

const { useState: useSM, useEffect: useEM } = React;

// ═══════════════════════════════════════════════════════════════
// HOME
// ═══════════════════════════════════════════════════════════════
window.HomeScreen = function HomeScreen({ setRoute }) {
  return (
    <div style={{ paddingBottom: 100 }}>
      <TopBar big title={`Merhaba, ${STATE.user.name}`}
        trailing={
          <button style={{
            width: 36, height: 36, borderRadius: 999,
            background: 'rgba(255,255,255,0.8)', border: `0.5px solid ${M.line}`,
            display: 'grid', placeItems: 'center', color: M.ink,
          }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35" strokeLinecap="round"/></svg>
          </button>
        } />

      {/* Streak strip */}
      <div style={{ padding: '6px 16px 0' }}>
        <div style={{
          background: M.ink, color: '#fff', borderRadius: 18,
          padding: 16, display: 'flex', alignItems: 'center', gap: 14,
          position: 'relative', overflow: 'hidden',
        }}>
          <div>
            <div style={{
              fontSize: 10, letterSpacing: 1.3, textTransform: 'uppercase',
              opacity: 0.6, fontWeight: 700,
            }}>Günlük Seri</div>
            <div style={{
              fontFamily: 'Fraunces, Georgia, serif',
              fontSize: 42, fontWeight: 700, letterSpacing: -2, lineHeight: 1,
              marginTop: 2,
            }}>{STATE.user.streak}<span style={{
              fontSize: 14, fontWeight: 500, opacity: 0.6, marginLeft: 6,
              letterSpacing: 0,
            }}>gün</span></div>
          </div>
          <div style={{ flex: 1, display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 3 }}>
            {['P','S','Ç','P','C','C','P'].map((d, i) => (
              <div key={i} style={{
                textAlign: 'center', padding: '4px 0', borderRadius: 5,
                background: i === 5 ? M.accent : i <= 5 ? 'rgba(255,255,255,0.14)' : 'transparent',
                border: i > 5 ? '1px dashed rgba(255,255,255,0.15)' : 'none',
                fontSize: 9, fontWeight: 800,
                color: i === 5 ? '#fff' : i <= 5 ? '#fff' : 'rgba(255,255,255,0.3)',
              }}>
                <div>{d}</div>
                <div style={{ fontSize: 10, marginTop: 1 }}>{i <= 5 ? '✓' : '·'}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Bugünün Oyunu */}
      <MSection title="Bugünün Oyunu" right="No. 1,247">
        <div style={{ padding: '0 16px' }}>
          <button onClick={() => setRoute({ name: 'game', id: 'kelimely' })} style={{
            width: '100%', background: '#5ECEAB', color: '#fff',
            borderRadius: 20, padding: 18, border: 'none', cursor: 'pointer',
            position: 'relative', overflow: 'hidden', minHeight: 170,
            textAlign: 'left', fontFamily: 'inherit',
          }}>
            <img src="icons/kelimely.svg" alt="" style={{
              position: 'absolute', right: -20, top: '50%',
              transform: 'translateY(-50%) scale(1.1)',
              width: 180, height: 180, objectFit: 'contain', opacity: 0.9,
            }} />
            <div style={{
              position: 'absolute', inset: 0,
              background: 'linear-gradient(to right, #5ECEAB 30%, #5ECEABcc 55%, transparent 85%)',
            }} />
            <div style={{ position: 'relative', zIndex: 1 }}>
              <div style={{
                display: 'inline-flex', padding: '3px 9px', borderRadius: 5,
                background: 'rgba(255,255,255,0.22)', backdropFilter: 'blur(4px)',
                fontSize: 9, fontWeight: 800, letterSpacing: 1.5, textTransform: 'uppercase',
                marginBottom: 12,
              }}>Günlük · 4–11 harf</div>
              <div style={{
                fontFamily: 'Fraunces, Georgia, serif',
                fontSize: 32, fontWeight: 700, letterSpacing: -1, lineHeight: 1,
              }}>Kelimely</div>
              <p style={{ fontSize: 12, opacity: 0.9, margin: '6px 0 12px', maxWidth: 200 }}>
                Bugünkü harf seti biraz zor — sesli harf az.
              </p>
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 5,
                padding: '9px 16px', borderRadius: 10,
                background: '#fff', color: '#5ECEAB',
                fontSize: 13, fontWeight: 800,
              }}>
                <svg width="10" height="10" viewBox="0 0 16 16" fill="currentColor"><path d="M5 3l7 5-7 5V3z"/></svg>
                Oyna
              </span>
            </div>
          </button>
        </div>
      </MSection>

      {/* Öne Çıkanlar — Düello + Eklemce */}
      <MSection title="Öne Çıkanlar">
        <div style={{
          display: 'flex', gap: 10, padding: '0 16px',
          overflowX: 'auto', scrollSnapType: 'x mandatory',
          scrollbarWidth: 'none',
        }}>
          <FeaturedLandscape game={GAMES.find(g => g.id === 'duello')}
            variant="live"
            onTap={() => setRoute({ name: 'duello' })} />
          <FeaturedLandscape game={GAMES.find(g => g.id === 'eklemce')}
            variant="playable"
            onTap={() => setRoute({ name: 'game', id: 'eklemce' })} />
        </div>
      </MSection>

      {/* Bugünkü Setin */}
      <MSection title="Setin" right={`${STATE.today.done.length}/5`}>
        <div style={{
          display: 'flex', gap: 8, padding: '0 16px',
          overflowX: 'auto', scrollbarWidth: 'none',
        }}>
          {['kelimely','petek','baglac','ipucu','caprazla'].map(id => {
            const g = GAMES.find(x => x.id === id);
            const done = STATE.today.done.includes(id);
            const prog = STATE.today.inProgress.includes(id);
            return (
              <button key={id}
                onClick={() => setRoute({ name: 'game', id })}
                style={{
                  minWidth: 110, padding: 12, borderRadius: 14,
                  background: done ? M.success : M.paper,
                  border: done ? 'none' : prog ? `1.5px solid ${M.warn}` : `1px solid ${M.line}`,
                  color: done ? '#fff' : M.ink,
                  textAlign: 'left', fontFamily: 'inherit', cursor: 'pointer',
                }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 8,
                  background: done ? 'rgba(255,255,255,0.2)' : g.accent,
                  marginBottom: 6, display: 'grid', placeItems: 'center',
                }}>
                  <img src={`icons/${g.id}.svg`} width="32" height="32"
                    alt="" style={{ objectFit: 'contain',
                      filter: done ? 'brightness(0) invert(1)' : 'none' }} />
                </div>
                <div style={{ fontWeight: 800, fontSize: 13 }}>{g.name}</div>
                <div style={{
                  fontSize: 9, fontWeight: 800, letterSpacing: 0.5,
                  textTransform: 'uppercase', marginTop: 2,
                  color: done ? 'rgba(255,255,255,0.85)' : prog ? M.warn : M.inkSoft,
                }}>
                  {done ? `✓ ${fmtTime(STATE.times[id] ?? 300)}`
                   : prog ? 'Devam' : 'Başla'}
                </div>
              </button>
            );
          })}
        </div>
      </MSection>

      {/* All games by category */}
      {['wordGuess','gridSearch','transformation','grouping','arrangement','deduction','geography'].map(cat => {
        const games = GAMES.filter(g => g.cat === cat && g.id !== 'kelimely' && g.id !== 'duello' && g.id !== 'eklemce');
        if (!games.length) return null;
        return (
          <MSection key={cat} title={CATEGORIES[cat].label}>
            <div style={{ padding: '0 16px' }}>
              <div style={{
                background: M.paper, borderRadius: 16, overflow: 'hidden',
                border: `1px solid ${M.line}`,
              }}>
                {games.map((g, i) => (
                  <React.Fragment key={g.id}>
                    <MobileGameRow game={g} onTap={() => setRoute({ name: 'game', id: g.id })} />
                    {i < games.length - 1 && (
                      <div style={{ height: 0.5, background: M.line, marginLeft: 72 }} />
                    )}
                  </React.Fragment>
                ))}
              </div>
            </div>
          </MSection>
        );
      })}
    </div>
  );
};

function FeaturedLandscape({ game, variant, onTap }) {
  const isLive = variant === 'live';
  return (
    <button onClick={onTap} style={{
      minWidth: 280, borderRadius: 16, padding: 14,
      background: isLive ? '#151821' : game.accent,
      color: '#fff', border: 'none', cursor: 'pointer',
      position: 'relative', overflow: 'hidden', minHeight: 140,
      textAlign: 'left', fontFamily: 'inherit',
      scrollSnapAlign: 'start',
    }}>
      {isLive && (
        <div style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(ellipse at 90% 40%, rgba(232,90,109,0.35), transparent 55%)',
        }} />
      )}
      <img src={`icons/${game.id}.svg`} alt="" style={{
        position: 'absolute', right: -10, top: '50%',
        transform: 'translateY(-50%)',
        width: 130, height: 130, objectFit: 'contain', opacity: isLive ? 0.35 : 0.9,
      }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: isLive ? 'none' : `linear-gradient(to right, ${game.accent}, ${game.accent}aa 55%, transparent 85%)`,
      }} />
      <div style={{ position: 'relative', zIndex: 1, display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 5,
          padding: '3px 8px', borderRadius: 999,
          background: 'rgba(255,255,255,0.18)', backdropFilter: 'blur(4px)',
          fontSize: 9, fontWeight: 800, letterSpacing: 1, textTransform: 'uppercase',
          alignSelf: 'flex-start',
        }}>
          {isLive && <span style={{
            width: 5, height: 5, borderRadius: 999, background: '#ff3b5c',
            boxShadow: '0 0 0 3px rgba(255,59,92,0.3)',
          }} />}
          {isLive ? 'Canlı · 2 Kişilik' : 'Yeni · Hece Oyunu'}
        </div>
        <div>
          <div style={{
            fontFamily: 'Fraunces, Georgia, serif',
            fontSize: 22, fontWeight: 700, letterSpacing: -0.6,
            lineHeight: 1,
          }}>{game.name}</div>
          <div style={{ fontSize: 11, opacity: 0.85, marginTop: 4, maxWidth: 180 }}>
            {isLive ? '233 oyuncu çevrimiçi' : 'Blokları birleştir, kelime kur'}
          </div>
        </div>
        {isLive && (
          <div style={{ display: 'flex', marginTop: 2 }}>
            {['#E85A6D', '#6B9CF5'].map((c, i) => (
              <div key={i} style={{
                width: 22, height: 22, borderRadius: 999,
                background: c, color: '#fff',
                display: 'grid', placeItems: 'center',
                fontSize: 10, fontWeight: 800,
                border: '2px solid #151821',
                marginLeft: i ? -6 : 0,
              }}>{['A','M'][i]}</div>
            ))}
          </div>
        )}
      </div>
    </button>
  );
}

// ═══════════════════════════════════════════════════════════════
// GAME DETAIL
// ═══════════════════════════════════════════════════════════════
window.GameDetailScreen = function GameDetailScreen({ gameId, setRoute }) {
  const game = GAMES.find(g => g.id === gameId);
  if (!game) return null;
  const streak = STATE.streaks[game.id] || 0;
  const playing = STATE.playing[game.id] ?? 200;
  return (
    <div style={{ paddingBottom: 100 }}>
      <TopBar onBack={() => setRoute({ name: 'home' })} />
      {/* Hero */}
      <div style={{
        background: game.accent, color: '#fff',
        padding: '8px 20px 22px', position: 'relative', overflow: 'hidden',
      }}>
        <img src={`icons/${game.id}.svg`} alt="" style={{
          position: 'absolute', right: -30, top: '50%',
          transform: 'translateY(-50%)',
          width: 200, height: 200, objectFit: 'contain', opacity: 0.92,
        }} />
        <div style={{
          position: 'absolute', inset: 0,
          background: `linear-gradient(to right, ${game.accent} 30%, ${game.accent}bb 60%, transparent 90%)`,
        }} />
        <div style={{ position: 'relative', zIndex: 1, maxWidth: '70%' }}>
          <div style={{
            display: 'inline-flex', padding: '3px 9px', borderRadius: 5,
            background: 'rgba(255,255,255,0.22)',
            fontSize: 9, fontWeight: 800, letterSpacing: 1.5, textTransform: 'uppercase',
            marginBottom: 10,
          }}>{CATEGORIES[game.cat].label}</div>
          <h1 style={{
            margin: 0, fontFamily: 'Fraunces, Georgia, serif',
            fontSize: 34, fontWeight: 700, letterSpacing: -1.2, lineHeight: 1,
          }}>{game.name}</h1>
          <p style={{ fontSize: 13, opacity: 0.9, margin: '8px 0 0', maxWidth: 230 }}>
            {game.desc}
          </p>
        </div>
      </div>

      {/* Play button */}
      <div style={{ padding: '14px 16px 0' }}>
        <button style={{
          width: '100%', padding: '14px', borderRadius: 14,
          background: M.ink, color: '#fff', border: 'none',
          fontWeight: 800, fontSize: 15, cursor: 'pointer',
          fontFamily: 'inherit',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>
          <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M5 3l7 5-7 5V3z"/></svg>
          Bugünkü bulmacayı oyna
        </button>
        <button style={{
          width: '100%', padding: '12px', marginTop: 8,
          borderRadius: 14, background: 'transparent',
          border: `1px solid ${M.line}`, color: M.ink,
          fontWeight: 700, fontSize: 14, cursor: 'pointer',
          fontFamily: 'inherit',
        }}>Sınırsız modu dene</button>
      </div>

      {/* Stats */}
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
        gap: 8, padding: '18px 16px 0',
      }}>
        <MiniStat label="Seri" value={streak} accent={M.accent} />
        <MiniStat label="Ort." value="4:12" />
        <MiniStat label="Oynayan" value={fmtCount(playing)} />
        <MiniStat label="Zorluk" value="6/10" />
      </div>

      {/* How to play */}
      <MSection title="Nasıl Oynanır">
        <div style={{ padding: '0 16px' }}>
          <MCard>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                'Gizli kelimeyi 6 denemede tahmin et.',
                'Yeşil: harf doğru yerde. Sarı: harf var, yer yanlış. Gri: harf yok.',
                'Her gün yeni bir bulmaca.',
              ].map((t, i) => (
                <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                  <span style={{
                    width: 22, height: 22, borderRadius: 999,
                    background: game.accent, color: '#fff',
                    display: 'grid', placeItems: 'center',
                    fontSize: 11, fontWeight: 800, flexShrink: 0,
                  }}>{i + 1}</span>
                  <span style={{ fontSize: 13, lineHeight: 1.4, color: M.ink }}>{t}</span>
                </div>
              ))}
            </div>
          </MCard>
        </div>
      </MSection>

      {/* Last 5 games */}
      <MSection title="Son oynananlar">
        <div style={{ padding: '0 16px' }}>
          <MCard style={{ padding: 0 }}>
            {[
              { d: 'Dün', result: '✓ 4:12', tries: '4/6' },
              { d: '2 gün önce', result: '✓ 3:45', tries: '3/6' },
              { d: '3 gün önce', result: '✓ 5:20', tries: '5/6' },
              { d: '4 gün önce', result: '✗ Bulunamadı', tries: '—', fail: true },
              { d: '5 gün önce', result: '✓ 2:55', tries: '3/6' },
            ].map((h, i, arr) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center',
                padding: '12px 14px',
                borderBottom: i < arr.length - 1 ? `0.5px solid ${M.line}` : 'none',
              }}>
                <div style={{ flex: 1, fontSize: 13, color: M.ink }}>{h.d}</div>
                <div style={{
                  fontSize: 12, color: h.fail ? M.danger : M.success,
                  fontWeight: 700, marginRight: 10,
                }}>{h.result}</div>
                <div style={{
                  fontSize: 11, color: M.inkSoft, fontVariantNumeric: 'tabular-nums',
                }}>{h.tries}</div>
              </div>
            ))}
          </MCard>
        </div>
      </MSection>
    </div>
  );
};

function MiniStat({ label, value, accent }) {
  return (
    <div style={{
      background: M.paper, border: `1px solid ${M.line}`,
      borderRadius: 12, padding: '10px 8px', textAlign: 'center',
    }}>
      <div style={{
        fontSize: 9, letterSpacing: 0.8, textTransform: 'uppercase',
        color: M.inkSoft, fontWeight: 700,
      }}>{label}</div>
      <div style={{
        fontSize: 16, fontWeight: 800, color: accent || M.ink,
        marginTop: 2, fontFamily: 'Fraunces, Georgia, serif',
      }}>{value}</div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// IN-GAME KELIMELY
// ═══════════════════════════════════════════════════════════════
window.InGameScreen = function InGameScreen({ setRoute }) {
  const rows = [
    { letters: ['k','a','l','e','m'], states: ['a','c','a','a','p'] },
    { letters: ['s','i','l','i','m'], states: ['a','a','a','a','c'] },
    { letters: ['b','i','l','i','m'], states: ['p','a','a','c','c'] },
    { letters: ['','','','',''],      states: ['f','f','f','f','f'], current: true },
    { letters: ['','','','',''],      states: ['e','e','e','e','e'] },
    { letters: ['','','','',''],      states: ['e','e','e','e','e'] },
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', background: '#fafaf5' }}>
      <TopBar title="Kelimely · No. 1,247"
        onBack={() => setRoute({ name: 'game', id: 'kelimely' })}
        trailing={
          <div style={{
            width: 36, height: 36, borderRadius: 999,
            background: 'rgba(255,255,255,0.8)', border: `0.5px solid ${M.line}`,
            display: 'grid', placeItems: 'center', color: M.ink, fontSize: 11, fontWeight: 800,
          }}>?</div>
        } />

      <div style={{
        flex: 1, display: 'flex', flexDirection: 'column',
        padding: '16px', gap: 4, alignItems: 'center',
      }}>
        {rows.map((r, i) => (
          <div key={i} style={{ display: 'flex', gap: 5 }}>
            {r.letters.map((l, j) => {
              const s = r.states[j];
              const colors = {
                c: { bg: '#3a9e5c', fg: '#fff', bd: '#3a9e5c' },
                p: { bg: '#c79a1b', fg: '#fff', bd: '#c79a1b' },
                a: { bg: '#b8b5a8', fg: '#fff', bd: '#b8b5a8' },
                e: { bg: 'transparent', fg: M.ink, bd: '#dcdacf' },
                f: { bg: '#fff', fg: M.ink, bd: '#8a8882' },
              };
              const c = colors[s];
              return (
                <div key={j} style={{
                  width: 58, height: 58, borderRadius: 8,
                  background: c.bg, color: c.fg,
                  border: `2px solid ${c.bd}`,
                  display: 'grid', placeItems: 'center',
                  fontWeight: 900, fontSize: 26, textTransform: 'uppercase',
                }}>{l}</div>
              );
            })}
          </div>
        ))}
      </div>

      {/* Keyboard */}
      <div style={{
        padding: '8px 6px 36px', background: 'transparent',
        display: 'flex', flexDirection: 'column', gap: 6,
      }}>
        {['ertyuıopğü','asdfghjklşi','zcvbnmöç'].map((row, i) => (
          <div key={i} style={{
            display: 'flex', gap: 4, justifyContent: 'center',
          }}>
            {i === 2 && (
              <KeyBtn w={46} label="GİR" accent />
            )}
            {row.split('').map(ch => <KeyBtn key={ch} label={ch} />)}
            {i === 2 && (
              <KeyBtn w={46} label="⌫" />
            )}
          </div>
        ))}
      </div>
    </div>
  );
};

function KeyBtn({ label, w, accent }) {
  return (
    <button style={{
      width: w || 28, height: 52, borderRadius: 6,
      background: accent ? M.success : '#d7d4c6',
      color: accent ? '#fff' : M.ink, border: 'none',
      fontWeight: 800, fontSize: accent ? 11 : 16, letterSpacing: 0.5,
      textTransform: 'uppercase', fontFamily: 'inherit', cursor: 'pointer',
      flex: w ? 'none' : 1,
    }}>{label}</button>
  );
}

// ═══════════════════════════════════════════════════════════════
// PROFILE
// ═══════════════════════════════════════════════════════════════
window.ProfileScreen = function ProfileScreen({ setRoute }) {
  return (
    <div style={{ paddingBottom: 100 }}>
      <TopBar big title="Profil" />

      {/* Identity card */}
      <div style={{ padding: '6px 16px 0' }}>
        <MCard style={{
          display: 'flex', alignItems: 'center', gap: 14, padding: 16,
        }}>
          <div style={{
            width: 56, height: 56, borderRadius: 999,
            background: 'linear-gradient(135deg, #5ECEAB, #6B9CF5 50%, #A685F2)',
            color: '#fff', display: 'grid', placeItems: 'center',
            fontSize: 22, fontWeight: 800, fontFamily: 'Fraunces, serif',
          }}>{STATE.user.name[0]}</div>
          <div>
            <div style={{
              fontFamily: 'Fraunces, Georgia, serif',
              fontSize: 22, fontWeight: 700, color: M.ink, letterSpacing: -0.3,
            }}>{STATE.user.name}</div>
            <div style={{ fontSize: 12, color: M.inkSoft, marginTop: 1 }}>
              2024'ten beri Kelimely'de
            </div>
          </div>
        </MCard>
      </div>

      {/* Streak big card */}
      <div style={{ padding: '10px 16px 0' }}>
        <div style={{
          background: M.ink, color: '#fff', borderRadius: 18,
          padding: 18, position: 'relative', overflow: 'hidden',
        }}>
          <svg viewBox="0 0 120 120" width="140" height="140" style={{
            position: 'absolute', right: -10, bottom: -20, opacity: 0.1,
          }}>
            <path d="M60 10c7 17 27 27 27 52a27 27 0 0 1-54 0c0-10 5-17 10-22 0 10 5 15 10 15 0-15-5-25 7-45z" fill="#fff" />
          </svg>
          <div style={{
            fontSize: 10, letterSpacing: 1.3, textTransform: 'uppercase',
            opacity: 0.65, fontWeight: 700,
          }}>Günlük Seri</div>
          <div style={{
            fontFamily: 'Fraunces, Georgia, serif',
            fontSize: 64, fontWeight: 700, letterSpacing: -3, lineHeight: 1,
            marginTop: 4,
          }}>{STATE.user.streak}</div>
          <div style={{ fontSize: 12, opacity: 0.75 }}>
            gün üst üste · En uzun seri: 28
          </div>
        </div>
      </div>

      {/* Stat grid */}
      <MSection title="İstatistikler">
        <div style={{ padding: '0 16px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            <StatBig label="Toplam oyun" value={STATE.user.totalPlayed} />
            <StatBig label="Çözülen" value="189" />
            <StatBig label="Ort. süre" value="4:08" />
            <StatBig label="Başarı" value="%82" />
          </div>
        </div>
      </MSection>

      {/* Achievements */}
      <MSection title="Rozetler">
        <div style={{
          display: 'flex', gap: 10, padding: '0 16px',
          overflowX: 'auto', scrollbarWidth: 'none',
        }}>
          {[
            { n: '7 Gün', e: '🔥', got: true },
            { n: 'İlk Zafer', e: '✨', got: true },
            { n: 'Pangram', e: '⭐', got: true },
            { n: '30 Gün', e: '🏆', got: false },
            { n: 'Düello', e: '⚔️', got: false },
          ].map(a => (
            <div key={a.n} style={{
              minWidth: 88, padding: '12px 8px', borderRadius: 14,
              background: a.got ? M.paper : 'transparent',
              border: `1px ${a.got ? 'solid' : 'dashed'} ${M.line}`,
              textAlign: 'center', opacity: a.got ? 1 : 0.45,
            }}>
              <div style={{ fontSize: 28 }}>{a.e}</div>
              <div style={{
                fontSize: 10, fontWeight: 800, color: M.ink,
                marginTop: 4, letterSpacing: 0.3,
              }}>{a.n}</div>
            </div>
          ))}
        </div>
      </MSection>

      {/* Settings */}
      <MSection title="Ayarlar">
        <div style={{ padding: '0 16px' }}>
          <MCard style={{ padding: 0 }}>
            {['Bildirimler', 'Tema', 'Dil', 'Hakkında'].map((t, i, arr) => (
              <div key={t} style={{
                display: 'flex', alignItems: 'center', padding: '13px 14px',
                borderBottom: i < arr.length - 1 ? `0.5px solid ${M.line}` : 'none',
                fontSize: 14, color: M.ink,
              }}>
                <span style={{ flex: 1 }}>{t}</span>
                <svg width="7" height="12" viewBox="0 0 8 14"><path d="M1 1l6 6-6 6" stroke="rgba(0,0,0,0.25)" strokeWidth="2" fill="none" strokeLinecap="round"/></svg>
              </div>
            ))}
          </MCard>
        </div>
      </MSection>
    </div>
  );
};

function StatBig({ label, value }) {
  return (
    <div style={{
      background: M.paper, border: `1px solid ${M.line}`,
      borderRadius: 14, padding: 14,
    }}>
      <div style={{
        fontSize: 10, letterSpacing: 1, textTransform: 'uppercase',
        color: M.inkSoft, fontWeight: 700,
      }}>{label}</div>
      <div style={{
        fontFamily: 'Fraunces, Georgia, serif',
        fontSize: 28, fontWeight: 700, color: M.ink, letterSpacing: -0.5,
        marginTop: 2,
      }}>{value}</div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// DÜELLO ROOM
// ═══════════════════════════════════════════════════════════════
window.DuelloScreen = function DuelloScreen({ setRoute }) {
  const [mode, setMode] = useSM('quick');
  return (
    <div style={{ paddingBottom: 100, background: '#0c0d12', minHeight: '100%' }}>
      <TopBar big title="Düello"
        trailing={<div style={{ width: 36 }} />} />

      {/* Top hero */}
      <div style={{ padding: '0 16px' }}>
        <div style={{
          background: 'linear-gradient(135deg, #151821, #1f1526)',
          color: '#fff', borderRadius: 20, padding: 20,
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', inset: 0,
            background: 'radial-gradient(circle at 80% 30%, rgba(232,90,109,0.3), transparent 50%)',
          }} />
          <div style={{ position: 'relative' }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 5,
              fontSize: 10, fontWeight: 800, letterSpacing: 1.5,
              textTransform: 'uppercase', marginBottom: 8,
            }}>
              <span style={{
                width: 6, height: 6, borderRadius: 999, background: '#ff3b5c',
                boxShadow: '0 0 0 3px rgba(255,59,92,0.3)',
              }} />
              Canlı
            </div>
            <div style={{
              fontFamily: 'Fraunces, Georgia, serif',
              fontSize: 28, fontWeight: 700, letterSpacing: -0.8,
            }}>Kelime düellosu</div>
            <div style={{ fontSize: 13, opacity: 0.7, marginTop: 2 }}>
              Gerçek zamanlı. 2 oyuncu. 6 deneme.
            </div>
            <div style={{
              marginTop: 14, display: 'flex', gap: 16, fontSize: 11,
            }}>
              <span><strong style={{ fontSize: 18, fontFamily: 'Fraunces, serif' }}>233</strong><br/><span style={{ opacity: 0.6 }}>Oynayan</span></span>
              <span><strong style={{ fontSize: 18, fontFamily: 'Fraunces, serif' }}>4sn</strong><br/><span style={{ opacity: 0.6 }}>Ort. bekleme</span></span>
              <span><strong style={{ fontSize: 18, fontFamily: 'Fraunces, serif' }}>{STATE.streaks.duello || 0}</strong><br/><span style={{ opacity: 0.6 }}>Galibiyet</span></span>
            </div>
          </div>
        </div>
      </div>

      {/* Mode pills */}
      <div style={{ padding: '18px 16px 0' }}>
        <div style={{
          display: 'flex', gap: 6,
          background: 'rgba(255,255,255,0.06)',
          padding: 4, borderRadius: 12,
        }}>
          {[
            { id: 'quick', l: 'Hızlı Eşleş' },
            { id: 'friend', l: 'Arkadaşla' },
            { id: 'code', l: 'Kod Gir' },
          ].map(m => (
            <button key={m.id} onClick={() => setMode(m.id)} style={{
              flex: 1, padding: '10px', borderRadius: 9,
              background: mode === m.id ? '#fff' : 'transparent',
              color: mode === m.id ? '#151821' : 'rgba(255,255,255,0.65)',
              border: 'none', fontWeight: 800, fontSize: 12,
              cursor: 'pointer', fontFamily: 'inherit',
            }}>{m.l}</button>
          ))}
        </div>
      </div>

      {/* Mode content */}
      <div style={{ padding: '14px 16px 0' }}>
        {mode === 'quick' && (
          <div style={{
            background: 'rgba(255,255,255,0.04)', borderRadius: 18,
            padding: 20, color: '#fff', textAlign: 'center',
          }}>
            <div style={{
              fontSize: 12, opacity: 0.7, letterSpacing: 1,
              textTransform: 'uppercase', fontWeight: 700,
            }}>Rakip aranıyor</div>
            <div style={{
              display: 'flex', justifyContent: 'center', gap: 18,
              alignItems: 'center', margin: '22px 0',
            }}>
              <Avatar letter="A" color="#6B9CF5" />
              <div style={{ fontSize: 20, fontWeight: 900, opacity: 0.3 }}>VS</div>
              <Avatar letter="?" color="rgba(255,255,255,0.15)" pulse />
            </div>
            <button onClick={() => setRoute({ name: 'duello-matched' })} style={{
              width: '100%', padding: 14, borderRadius: 12,
              background: '#E85A6D', color: '#fff', border: 'none',
              fontWeight: 800, fontSize: 15, cursor: 'pointer',
              fontFamily: 'inherit',
            }}>Eşleşmeyi başlat</button>
            <div style={{ fontSize: 11, opacity: 0.55, marginTop: 10 }}>
              Tahmini bekleme süresi: 4 saniye
            </div>
          </div>
        )}
        {mode === 'friend' && (
          <div style={{
            background: 'rgba(255,255,255,0.04)', borderRadius: 18,
            padding: 20, color: '#fff',
          }}>
            <div style={{
              fontSize: 12, opacity: 0.7, letterSpacing: 1,
              textTransform: 'uppercase', fontWeight: 700, marginBottom: 10,
            }}>Oda kur</div>
            <div style={{
              background: '#fff', color: '#151821',
              borderRadius: 12, padding: 18, textAlign: 'center',
            }}>
              <div style={{
                fontSize: 11, color: M.inkSoft, fontWeight: 700,
                letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 6,
              }}>Oda Kodu</div>
              <div style={{
                fontFamily: 'ui-monospace, monospace',
                fontSize: 32, fontWeight: 900, letterSpacing: 6,
              }}>K7M9X</div>
            </div>
            <button style={{
              width: '100%', padding: 12, borderRadius: 10,
              background: '#E85A6D', color: '#fff', border: 'none',
              fontWeight: 800, fontSize: 14, cursor: 'pointer',
              fontFamily: 'inherit', marginTop: 12,
            }}>Davet bağlantısını paylaş</button>
          </div>
        )}
        {mode === 'code' && (
          <div style={{
            background: 'rgba(255,255,255,0.04)', borderRadius: 18,
            padding: 20, color: '#fff',
          }}>
            <div style={{
              fontSize: 12, opacity: 0.7, letterSpacing: 1,
              textTransform: 'uppercase', fontWeight: 700, marginBottom: 10,
            }}>Kod ile katıl</div>
            <div style={{
              display: 'flex', gap: 6, justifyContent: 'center',
            }}>
              {[0,1,2,3,4].map(i => (
                <div key={i} style={{
                  width: 44, height: 54, borderRadius: 10,
                  background: 'rgba(255,255,255,0.06)',
                  border: `1px solid rgba(255,255,255,${i === 0 ? 0.5 : 0.1})`,
                  display: 'grid', placeItems: 'center',
                  fontSize: 24, fontWeight: 900, color: '#fff',
                  fontFamily: 'ui-monospace, monospace',
                }}>{i === 0 ? 'K' : ''}</div>
              ))}
            </div>
            <button style={{
              width: '100%', padding: 12, borderRadius: 10,
              background: '#E85A6D', color: '#fff', border: 'none',
              fontWeight: 800, fontSize: 14, cursor: 'pointer',
              fontFamily: 'inherit', marginTop: 14,
            }}>Katıl</button>
          </div>
        )}
      </div>

      {/* Recent duels */}
      <div style={{ padding: '20px 16px 0' }}>
        <div style={{
          fontSize: 11, letterSpacing: 1.3, textTransform: 'uppercase',
          color: 'rgba(255,255,255,0.5)', fontWeight: 700, marginBottom: 10,
        }}>Son Düellolar</div>
        {[
          { op: 'Mehmet', result: 'W', diff: '+32sn', color: '#6B9CF5' },
          { op: 'Zeynep', result: 'L', diff: '-18sn', color: '#5ECEAB' },
          { op: 'Emre',   result: 'W', diff: '+5sn',  color: '#F0915E' },
        ].map((d, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 12,
            padding: '10px 14px', borderRadius: 12,
            background: 'rgba(255,255,255,0.04)', marginBottom: 6,
            color: '#fff',
          }}>
            <Avatar letter={d.op[0]} color={d.color} size={32} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 700 }}>{d.op}</div>
              <div style={{ fontSize: 11, opacity: 0.55 }}>{d.diff}</div>
            </div>
            <div style={{
              padding: '4px 10px', borderRadius: 6,
              background: d.result === 'W' ? '#3a9e5c' : '#E85A6D',
              fontSize: 11, fontWeight: 800,
            }}>{d.result === 'W' ? 'GALİBİYET' : 'YENİLGİ'}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

function Avatar({ letter, color, size = 54, pulse = false }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: 999,
      background: color, color: '#fff',
      display: 'grid', placeItems: 'center',
      fontSize: size * 0.44, fontWeight: 800,
      animation: pulse ? 'kelpulse 1.2s ease-in-out infinite' : 'none',
      boxShadow: pulse ? '0 0 0 0 rgba(232,90,109,0.6)' : 'none',
    }}>{letter}</div>
  );
}