// Hub screen + Why-it-matters strip + game cards.
const { useState: useStateH, useEffect: useEffectH, useMemo: useMemoH } = React;

const GAMES = [
  { id: 'phish',   title: 'PHISH OR LEGIT',   icon: 'glass',  color: '#34e6ff', accent: '#ff4d6d', tag: 'Spot the scam',          maxScore: 100, ranks: ['Easy Target','Bait Apprentice','Scam Spotter','Phish Hunter','Cyber Legend'] },
  { id: 'pass',    title: 'PASSWORD SMASH',   icon: 'lock',   color: '#ff4ec3', accent: '#ffd84d', tag: 'Build a strong password', maxScore: 500, ranks: ['Wet Noodle','Soggy Pretzel','Solid Lock','Vault Boss','Password Legend'] },
  { id: 'flag',    title: 'RED FLAG RUSH',    icon: 'chat',   color: '#a06bff', accent: '#ff8a3d', tag: 'Sort safe vs sus chats',  maxScore: 30,  ranks: ['Slow Sorter','Flag Rookie','Sus Spotter','Chat Ninja','Red Flag Legend'] },
  { id: 'priv',    title: 'PRIVACY DEFENDER', icon: 'shield', color: '#7dff5a', accent: '#34e6ff', tag: 'Decide: post or don\'t',  maxScore: 100, ranks: ['Oversharer','Loose Lips','Smart Poster','Privacy Pro','Privacy Legend'] },
  { id: 'link',    title: 'LINK INSPECTOR',   icon: 'link',   color: '#ffd84d', accent: '#0a141a', tag: 'Hover and bust fake links', maxScore: 100, ranks: ['Click Bait','URL Rookie','Domain Reader','Link Detective','Link Legend'] },
  { id: 'twofa',   title: 'TWO-FACTOR HERO',  icon: 'phone',  color: '#3da9ff', accent: '#eafcff', tag: 'Beat the hacker timer',   maxScore: 500, ranks: ['Slow Defender','Code Cadet','Quick Fingers','Lockdown Pro','Lightning Hero'] },
];
window.GAMES = GAMES;

function GameCard({ game, score, onPlay }) {
  const top = score && score >= game.maxScore * 0.8;
  return (
    <button
      onClick={onPlay}
      onMouseEnter={() => SFX.hover()}
      className="game-card"
      style={{ '--card-color': game.color, '--card-accent': game.accent }}
    >
      <div className="game-card__top">
        <PixIcon name={game.icon} size={56} color={game.color} />
        <span className="game-card__num">0{GAMES.indexOf(game)+1}</span>
      </div>
      <div className="game-card__title">{game.title}</div>
      <div className="game-card__tag">{game.tag}</div>
      <div className="game-card__foot">
        <span className="game-card__hi">HI · {score || 0}</span>
        {top && <span className="game-card__legend">★ LEGEND</span>}
        <span className="game-card__play">PLAY ▸</span>
      </div>
    </button>
  );
}

function WhyStrip() {
  return (
    <section className="why-strip" data-screen-label="Why it matters">
      <div className="why-strip__head">
        <h2>WHY THESE GAMES MATTER</h2>
        <span className="why-strip__sub">scroll → train all six = full Cyber Legend status</span>
      </div>
      <div className="why-strip__rail">
        {WHY_IT_MATTERS.map((w, i) => {
          const g = GAMES[i];
          return (
            <article key={w.id} className="why-card" style={{ '--c': g.color }}>
              <div className="why-card__num">0{w.id}</div>
              <PixIcon name={g.icon} size={42} color={g.color} />
              <div className="why-card__title">{w.title}</div>
              <p className="why-card__text">{w.text}</p>
            </article>
          );
        })}
      </div>
      <div className="why-strip__foot">TRAIN ALL 6 = FULL CYBER LEGEND STATUS.</div>
    </section>
  );
}

function Hub({ onPlay, scores, isLegend }) {
  return (
    <div className="hub" data-screen-label="Hub">
      <div className="hub__bg" aria-hidden="true">
        <div className="hub__grid" />
        <div className="hub__scan" />
      </div>

      <header className="hub__header">
        <div className="hub__brand">
          <span className="hub__chip">★ INSERT COIN</span>
          <span className="hub__chip hub__chip--alt">CAB-01 · ONLINE</span>
        </div>
        <div className="hub__legend" data-on={isLegend ? 'true' : 'false'}>
          <span className="hub__legend-glyph">★</span>
          <div>
            <div className="hub__legend-label">{isLegend ? 'CYBER LEGEND UNLOCKED' : 'CYBER LEGEND'}</div>
            <div className="hub__legend-sub">{isLegend ? 'all six maxed' : 'top rank in all 6'}</div>
          </div>
        </div>
      </header>

      <section className="hub__hero">
        <div className="hub__hero-mascot">
          <Scanner mood="cheering" size={140} />
        </div>
        <div className="hub__hero-title">
          <h1>CYBER<br/>ARCADE</h1>
        </div>
        <div className="hub__hero-meta">
          <div className="hub__hero-sub">6 games. 1 mission.<br/>Stay safe online.</div>
          <div className="hub__hero-stats">
            <div><span>HI</span><b>{Math.max(0, ...Object.values(scores))}</b></div>
            <div><span>WON</span><b>{Object.keys(scores).length}/6</b></div>
          </div>
        </div>
      </section>

      <section className="hub__grid-wrap" data-screen-label="Game grid">
        <div className="hub__row-label"><span>SELECT GAME</span><i /></div>
        <div className="hub__cards">
          {GAMES.map((g) => (
            <GameCard key={g.id} game={g} score={scores[g.id]} onPlay={() => { SFX.select(); onPlay(g.id); }} />
          ))}
        </div>
      </section>

      <WhyStrip />
    </div>
  );
}
window.Hub = Hub;