/* match-home.jsx — Home (product intro) + Lobby (game grid) + Community */
const DH = window.DM;

/* live ticker of open cars */
function Ticker({ en, onOpen }){
  const items = DH.PARTIES.slice(0,8);
  return (
    <div style={{ overflow:'hidden', maskImage:'linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)' }}>
      <div style={{ display:'flex', gap:12, animation:'ticker 38s linear infinite', width:'max-content' }}>
        {items.concat(items).map((p,i)=>(
          <div key={i} onClick={()=>onOpen(p)} className="card" style={{ padding:'9px 13px', display:'flex', alignItems:'center', gap:10, cursor:'pointer', flex:'none' }}>
            <GameGlyph game={p.game} size={24} r="6px" />
            <span style={{ fontFamily:'var(--hud)', fontWeight:700, fontSize:12.5 }}>{DH.modeName(p.game,p.mode)}</span>
            <RankTag game={p.game} rank={p.rank} sm />
            <NeedBadge party={p} en={en} />
          </div>
        ))}
      </div>
    </div>
  );
}

function HomeView({ en, go, onOpen, t }){
  const totalOpen = DH.PARTIES.length;
  const compare = [
    { d: en?'Scroll the channel, hope you catch "4=1" before the car fills':'刷频道,赌自己在车满之前看到那条 “4=1”',
      m: en?'Every open seat sits on one wall — you see it the second it opens':'所有空位挂在一面墙上,一开就看得见' },
    { d: en?'DM the host, wait, get “sorry just filled”':'私信车主,等回复,换来一句“刚满了”',
      m: en?'One-click apply, host pinged instantly, 18s avg accept':'一键申请,车主秒收到提醒,平均 18 秒通过' },
    { d: en?'Alone? Build a full 5 from scratch — exhausting':'一个人?从 0 攒满 5 黑 —— 太累了',
      m: en?'Queue once, get slotted into a car that just needs your seat':'挂一次队,直接被塞进就差你那个位置的车' }
  ];
  const steps = [
    { n:'01', t:en?'Submit what you want':'提交你想玩的', d:en?'Game, mode, rank, your role — or just type "diamond flex 4=1 mid".':'游戏、模式、段位、位置 —— 或者直接打 “钻石flex 4=1 中单”。' },
    { n:'02', t:en?'We scan every live car':'我们扫描每一辆在线车', d:en?'Real-time fit scoring across the wall and your Discord channels.':'实时对车队墙和 Discord 频道做契合度打分。' },
    { n:'03', t:en?'Get pinged, hit join':'收到提醒,一键上车', d:en?'A car that just needs your seat? You get the ping. Accept and go.':'有车就差你?提醒直接弹给你,接受即上。' }
  ];
  return (
    <div>
      {/* hero */}
      <section style={{ position:'relative', overflow:'hidden' }}>
        <div className="gridfx" />
        <div className="wrap" style={{ position:'relative', padding:'62px 26px 40px', textAlign:'center', display:'flex', flexDirection:'column', alignItems:'center' }}>
          <span className="chip" style={{ marginBottom:22, color:'var(--q-lime)', borderColor:'color-mix(in oklab,var(--q-lime) 35%,transparent)' }}>
            <span className="status online" style={{ border:'none', padding:0, background:'none' }}><span className="dot"/></span>
            {en?`${totalOpen} cars open right now · US`:`${totalOpen} 辆车正在招人 · 美服`}
          </span>
          <h1 className="h1" style={{ maxWidth:880 }}>
            {en?<>Stop chasing <span className="hl">“4=1”</span> in the channel.<br/>Get slotted into the car.</> : <>别再在频道里追着 <span className="hl">“4=1”</span> 跑。<br/>让系统把你塞进那辆车。</>}
          </h1>
          <p className="lede" style={{ fontSize:17, margin:'18px auto 0', maxWidth:620 }}>
            {en?'Deman Match turns scattered LFG messages into one smart wall — and a queue that pings you the moment a team needs exactly your seat.'
               :'电鳗开黑把零散的找车消息变成一面智能的车队墙,再配一个队列:有车就差你那个位置时,立刻提醒你。'}
          </p>
          <div style={{ display:'flex', gap:12, marginTop:28, flexWrap:'wrap', justifyContent:'center' }}>
            <button className="btn btn-go btn-lg" onClick={()=>go('match')}><Ic k="radar" w={17}/>{en?'Find me a car':'帮我找车'}</button>
            <button className="btn btn-ghost btn-lg" onClick={()=>go('start')}><Ic k="plus" w={16}/>{en?'Start a team':'我来发车'}</button>
          </div>
          <div style={{ marginTop:40, width:'100%' }}><Ticker en={en} onOpen={onOpen} /></div>
        </div>
      </section>

      {/* discord problem → match fix */}
      <section className="wrap" style={{ padding:'46px 26px' }}>
        <div style={{ textAlign:'center', marginBottom:34 }}>
          <span className="eyebrow" style={{ justifyContent:'center' }}>{en?'WHY NOT JUST DISCORD':'为什么不只用 Discord'}</span>
          <h2 className="h2" style={{ marginTop:12 }}>{en?'Everything you love about the channel — minus the missing.':'频道的好都留下,把“没看到、晚了一步”去掉。'}</h2>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:0, border:'1.5px solid var(--line)', borderRadius:'var(--r)', overflow:'hidden' }}>
          <div style={{ padding:'16px 20px', background:'var(--surface-2)', borderBottom:'1.5px solid var(--line)', borderRight:'1.5px solid var(--line)', display:'flex', alignItems:'center', gap:9 }}>
            <Discord w={16}/><span style={{ fontFamily:'var(--hud)', fontWeight:700, fontSize:13.5, color:'var(--text-dim)' }}>{en?'Discord channel today':'现在的 Discord 频道'}</span>
          </div>
          <div style={{ padding:'16px 20px', background:'color-mix(in oklab,var(--v-sig) 12%,var(--surface-2))', borderBottom:'1.5px solid var(--line)', display:'flex', alignItems:'center', gap:9 }}>
            <span className="logo" style={{ fontSize:16 }}>DEMAN <span className="accent">MATCH</span></span>
          </div>
          {compare.map((c,i)=>(
            <React.Fragment key={i}>
              <div style={{ padding:'18px 20px', borderRight:'1.5px solid var(--line)', borderBottom: i<2?'1px solid var(--line-soft)':'none', display:'flex', gap:11, color:'var(--text-mute)', fontFamily:'var(--cn)', fontSize:14, lineHeight:1.5 }}>
                <Ic k="x" w={16} style={{ color:'var(--q-coral)', flex:'none', marginTop:2 }}/>{c.d}
              </div>
              <div style={{ padding:'18px 20px', borderBottom: i<2?'1px solid var(--line-soft)':'none', display:'flex', gap:11, fontFamily:'var(--cn)', fontSize:14, lineHeight:1.5 }}>
                <Ic k="check" w={16} style={{ color:'var(--q-lime)', flex:'none', marginTop:2 }}/>{c.m}
              </div>
            </React.Fragment>
          ))}
        </div>
      </section>

      {/* how smart match works */}
      <section className="wrap" style={{ padding:'46px 26px' }}>
        <div style={{ textAlign:'center', marginBottom:34 }}>
          <span className="eyebrow" style={{ justifyContent:'center' }}>{en?'SMART MATCH':'智能匹配'}</span>
          <h2 className="h2" style={{ marginTop:12 }}>{en?'Three steps. Mostly waiting.':'三步,大部分时间你只是在等。'}</h2>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:16 }}>
          {steps.map(s=>(
            <div key={s.n} className="card" style={{ padding:24 }}>
              <div style={{ fontFamily:'var(--display)', fontStyle:'italic', fontWeight:900, fontSize:40, color:'var(--v-bright)', lineHeight:1 }}>{s.n}</div>
              <h3 className="h3" style={{ marginTop:14 }}>{s.t}</h3>
              <p style={{ fontFamily:'var(--cn)', fontSize:13.5, color:'var(--text-dim)', marginTop:8, lineHeight:1.6 }}>{s.d}</p>
            </div>
          ))}
        </div>
        <div style={{ textAlign:'center', marginTop:30 }}>
          <button className="btn btn-go btn-lg" onClick={()=>go('match')}><Ic k="bolt" w={16}/>{en?'Try smart match':'试试智能匹配'}</button>
        </div>
      </section>

      {/* community teaser */}
      <section className="wrap" style={{ padding:'10px 26px 60px' }}>
        <div className="card" style={{ padding:'32px 30px', display:'flex', alignItems:'center', gap:26, flexWrap:'wrap', background:'linear-gradient(120deg, color-mix(in oklab,var(--v-sig) 14%,var(--surface)), var(--surface))' }}>
          <div style={{ flex:1, minWidth:260 }}>
            <span className="eyebrow">{en?'MORE THAN MATCHING':'不止开黑'}</span>
            <h2 className="h2" style={{ marginTop:12, marginBottom:8 }}>{en?'A community, not just a queue':'一个社区,不只是一个队列'}</h2>
            <p className="lede" style={{ fontSize:14 }}>{en?'Cars, music, fitness, moments — the same people you grind ranked with, off the rift too.':'车子、音乐、健身、朋友圈 —— 和你一起上分的人,下了游戏也在。'}</p>
          </div>
          <div style={{ display:'flex', gap:8, flexWrap:'wrap', maxWidth:340 }}>
            {DH.TOPICS.map(tp=> <span key={tp.key} className="chip" style={{ fontSize:13, color:tp.color, borderColor:`color-mix(in oklab,${tp.color} 35%,transparent)` }}>{en?tp.en:tp.cn}</span>)}
            <button className="btn btn-primary btn-sm" onClick={()=>go('community')}>{en?'Explore':'逛逛社区'} <Ic k="arrow" w={14}/></button>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ============================================================ LOBBY */
function LobbyView({ en, go, setLobbyGame }){
  function openGame(k){ setLobbyGame && setLobbyGame(k); go('wall'); }
  return (
    <div className="wrap" style={{ padding:'30px 26px 70px' }}>
      <span className="eyebrow">{en?'LOBBY · US':'组队大厅 · 美服'}</span>
      <h2 className="h2" style={{ marginTop:10, marginBottom:6 }}>{en?'Pick your game, jump into the wall':'选个游戏,进车队墙'}</h2>
      <p className="lede" style={{ fontSize:14, marginBottom:28 }}>{en?'Each game keeps its own ranks, modes and roles — no one-size-fits-all.':'每个游戏保留自己的段位、模式、分路 —— 不是一套模板套所有。'}</p>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(280px,1fr))', gap:16 }}>
        {DH.GAME_ORDER.map(k=>{
          const g=DH.GAMES[k];
          const open=DH.PARTIES.filter(p=>p.game===k).length;
          return (
            <div key={k} className="card" onClick={()=>openGame(k)} style={{ overflow:'hidden', cursor:'pointer', transition:'.18s' }}
              onMouseEnter={e=>{ e.currentTarget.style.transform='translateY(-4px)'; e.currentTarget.style.borderColor='color-mix(in oklab,'+g.accent+' 55%,transparent)'; e.currentTarget.style.boxShadow='var(--shadow)'; }}
              onMouseLeave={e=>{ e.currentTarget.style.transform=''; e.currentTarget.style.borderColor='var(--line)'; e.currentTarget.style.boxShadow=''; }}>
              <div style={{ height:96, background:g.grad, position:'relative', display:'flex', alignItems:'flex-end', padding:14 }}>
                <div className="gridfx" style={{ opacity:.35, mask:'none' }} />
                <GameGlyph game={k} size={44} />
                {g.flagship && <span className="chip" style={{ position:'absolute', top:12, right:12, fontSize:10, background:'oklch(0 0 0 /.35)', color:'#fff', borderColor:'transparent' }}><Ic k="spark" w={11}/>{en?'Flagship':'旗舰'}</span>}
              </div>
              <div style={{ padding:'14px 16px' }}>
                <div style={{ fontFamily:'var(--cn)', fontWeight:800, fontSize:17 }}>{DH.gName(k)}</div>
                <div style={{ display:'flex', gap:6, flexWrap:'wrap', marginTop:10 }}>
                  {g.modes.slice(0,4).map(m=> <span key={m.key} className="chip" style={{ fontSize:10.5, padding:'3px 8px' }}>{en?m.en:m.cn}</span>)}
                </div>
                <div style={{ display:'flex', alignItems:'center', gap:7, marginTop:14, paddingTop:12, borderTop:'1px solid var(--line-soft)' }}>
                  <span className="status online" style={{ fontSize:10 }}><span className="dot"/>{open} {en?'cars':'车'}</span>
                  <span style={{ marginLeft:'auto', fontFamily:'var(--hud)', fontWeight:700, fontSize:12.5, color:'var(--v-bright)', display:'flex', alignItems:'center', gap:5 }}>{en?'Enter':'进入'} <Ic k="arrow" w={14}/></span>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ============================================================ COMMUNITY (legacy preview — replaced by match-community.jsx) */
function CommunityView_legacy({ en }){
  const moments = [
    { who:'阿White', game:'lol', txt:en?'Hit Challenger on the smurf, who wants on the climb car tonight 🔥':'小号上王者了,今晚谁来上分车 🔥', topic:'lfg', likes:42 },
    { who:'momo', game:null, txt:en?'New setup finally done. RGB tax paid in full.':'新桌搭好了,RGB 税交满 💸', topic:'rides', likes:88 },
    { who:'柚子', game:null, txt:en?'Leg day playlist — drop your hype tracks':'练腿歌单 —— 把你的炸歌甩过来', topic:'music', likes:31 },
    { who:'Kira', game:'valorant', txt:en?'5am ranked grind paid off, Radiant 🩷':'凌晨五点上分值了,辐能 🩷', topic:'moments', likes:120 }
  ];
  return (
    <div className="wrap" style={{ padding:'30px 26px 70px', maxWidth:900 }}>
      <span className="eyebrow">{en?'COMMUNITY':'社区'}</span>
      <h2 className="h2" style={{ marginTop:10, marginBottom:6 }}>{en?'The squad, off the rift':'下了峡谷,还是这帮人'}</h2>
      <p className="lede" style={{ fontSize:14, marginBottom:26 }}>{en?'Topics beyond the game — synced with your Discord. (Preview)':'游戏之外的话题,和 Discord 同步。(预览版块)'}</p>

      <div style={{ display:'flex', gap:9, flexWrap:'wrap', marginBottom:26 }}>
        {DH.TOPICS.map(tp=>(
          <span key={tp.key} className="chip" style={{ fontSize:13, padding:'8px 14px', color:tp.color, borderColor:`color-mix(in oklab,${tp.color} 35%,transparent)`, background:`color-mix(in oklab,${tp.color} 9%,transparent)` }}>
            {en?tp.en:tp.cn}<span style={{ fontFamily:'var(--mono)', fontSize:10.5, color:'var(--text-mute)', marginLeft:3 }}>{tp.posts}</span>{tp.hot && <Ic k="fire" w={12}/>}
          </span>
        ))}
      </div>

      <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
        {moments.map((m,i)=>{
          const tp = DH.TOPICS.find(x=>x.key===m.topic);
          return (
            <div key={i} className="card" style={{ padding:16, display:'flex', gap:13 }}>
              <Av name={m.who} size={42} round dot="online" />
              <div style={{ flex:1 }}>
                <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                  <span style={{ fontFamily:'var(--cn)', fontWeight:800, fontSize:14 }}>{m.who}</span>
                  {m.game && <RankTag game={m.game} rank={DH.ME.ranks[m.game]||'diamond'} sm />}
                  <span className="chip" style={{ fontSize:10, padding:'2px 8px', color:tp.color }}>{en?tp.en:tp.cn}</span>
                </div>
                <p style={{ fontFamily:'var(--cn)', fontSize:14, color:'var(--text)', marginTop:7, lineHeight:1.55 }}>{m.txt}</p>
                <div style={{ display:'flex', gap:16, marginTop:10, fontFamily:'var(--mono)', fontSize:11, color:'var(--text-mute)' }}>
                  <span style={{ display:'inline-flex', alignItems:'center', gap:5 }}><Ic k="fire" w={13}/>{m.likes}</span>
                  <span style={{ display:'inline-flex', alignItems:'center', gap:5 }}><Ic k="msg" w={13}/>{en?'reply':'回复'}</span>
                </div>
              </div>
            </div>
          );
        })}
      </div>
      <p style={{ textAlign:'center', fontFamily:'var(--mono)', fontSize:11.5, color:'var(--text-mute)', marginTop:24 }}>{en?'Community feed is a preview — full topics, posting & moments coming next.':'社区动态为预览 —— 完整话题、发帖、朋友圈即将上线。'}</p>
    </div>
  );
}

Object.assign(window, { HomeView, LobbyView });