// Home — main hub: greeting, level progress, game modes grid, daily mission
const Home = ({ profile, onPlay, onMission }) => {
  const t = window.MP_I18N.t;
  const lvl = window.MP_DATA.levelFor(profile.points || 0);

  const modes = [
    { id: 'time_attack', cls: 'gc-magenta', title: t('time_attack'), sub: t('time_attack_sub'), icon: '⏱️' },
    { id: 'memorama',    cls: 'gc-cyan',    title: t('memorama'),    sub: t('memorama_sub'),    icon: '🧩' },
    { id: 'escalera',    cls: 'gc-violet',  title: t('escalera'),    sub: t('escalera_sub'),    icon: '🪜' },
    { id: 'mision',      cls: 'gc-yellow',  title: t('mision'),      sub: t('mision_sub'),      icon: '🎯' },
    { id: 'tabla',       cls: 'gc-lime',    title: t('tabla'),       sub: t('tabla_sub'),       icon: '🔢' },
    { id: 'tf',          cls: 'gc-coral',   title: t('tf'),          sub: t('tf_sub'),          icon: '⚡' },
    { id: 'blank',       cls: 'gc-magenta', title: t('blank'),       sub: t('blank_sub'),       icon: '❓' }
  ];

  return (
    <>
      <div className="topbar">
        <div className="brand">★ MULTIPLIER</div>
        <div className="spacer" />
        <span className="chip streak" title={t('streak')}>🔥 {profile.streak || 0}</span>
        <span className="chip coin" title="coins">⭐ {profile.coins || 0}</span>
      </div>

      <div className="card card-strong" style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <Mascot id={profile.mascot || 'nebu'} size={84} mood="happy" />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="caption">{t('hello')},</div>
          <div className="h-2" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
            {profile.firstName} {profile.lastInitial}.
          </div>
          <div className="row gap-sm mt-sm" style={{ alignItems: 'baseline' }}>
            <span className="caption">{t('level')}</span>
            <strong style={{ fontSize: 16 }}>{lvl.curr.name[window.MP_I18N.getLang()]}</strong>
            <span className="caption" style={{ marginLeft: 'auto' }}>{profile.points} {t('points')}</span>
          </div>
          <div className="progress-bar mt-sm"><div style={{ width: (lvl.progress * 100) + '%' }} /></div>
        </div>
      </div>

      <div className="card mt-md" style={{ background: 'linear-gradient(135deg, rgba(255,214,10,0.18), rgba(255,61,138,0.14))', borderColor: 'rgba(255,214,10,0.4)' }}>
        <div className="row">
          <div style={{ fontSize: 36 }}>🎯</div>
          <div style={{ flex: 1 }}>
            <div className="h-3">{t('todays_mission')}</div>
            <div className="caption">{t('complete_to_earn')} +50 ⭐</div>
          </div>
          <button className="btn btn-yellow btn-sm" onClick={onMission}>{t('play')}</button>
        </div>
      </div>

      <h2 className="h-2 mt-lg mb-md">{t('pick_a_mode')}</h2>
      <div className="game-grid">
        {modes.map(m => (
          <button key={m.id} className={'game-card ' + m.cls} onClick={() => { window.MP_SOUND.tap(); onPlay(m.id); }}>
            <div className="gc-icon" style={{ fontSize: 30 }}>{m.icon}</div>
            <div>
              <div className="gc-title">{m.title}</div>
              <div className="gc-sub">{m.sub}</div>
            </div>
          </button>
        ))}
      </div>
    </>
  );
};

window.Home = Home;