// Examine — Home / set picker
function Home({ state, setState, onPickSet, onNav, user }) {
  const totalQ = window.EXAM_DATA.sets.reduce((s, set) => s + set.questions.length, 0);
  const overall = window.Stats.overallStats(state);
  const progressBySet = window.EXAM_DATA.sets.map(set => {
    const sessions = Object.values(state.sessions).filter(s => s && s.setId === set.id && s.finishedAt);
    const best = sessions.length ? Math.max(...sessions.map(s => {
      const c = Object.entries(s.answers || {}).filter(([i, a]) => set.questions[+i] && a === set.questions[+i].a).length;
      return c / set.questions.length;
    })) : 0;
    return { set, best, attempts: sessions.length };
  });

  const accents = ['#C76F4A', '#6F8054', '#7E5A7A', '#4F7F8A'];

  return (
    <div className="fade-in">
      <div className="hero">
        <div>
          <div className="eyebrow" style={{fontSize:'0.78rem', letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--clay-deep)', fontWeight:600, marginBottom:'1rem'}}>
            Financial Management · MBA{user ? <span style={{marginLeft:'0.6rem', paddingLeft:'0.6rem', borderLeft:'1px solid var(--rule)', color:'var(--ink-3)'}}>Welcome, {user.name.split(' ')[0]}</span> : null}
          </div>
          <h1>Master <em>capital budgeting</em>, valuation, and the cost of capital — one case at a time.</h1>
          <p className="hero-sub">Four exam sets, 120 multiple-choice questions, and four end-to-end Part 2 case analyses. Drill in practice mode for instant feedback, simulate the real thing in exam mode, and track which topics you're crushing.</p>
          <div className="cta-row">
            <button className="btn btn-primary" onClick={() => onPickSet(window.EXAM_DATA.sets[0].id, 'practice')}>
              Start practicing <Icon name="arrow" size={16} />
            </button>
            <button className="btn btn-ghost" onClick={() => onNav('browse')}>Browse questions</button>
          </div>
        </div>
        <div className="hero-stats">
          <div className="hero-stat">
            <div className="num">{window.EXAM_DATA.sets.length}</div>
            <div className="lbl">Exam Sets</div>
          </div>
          <div className="hero-stat">
            <div className="num">{totalQ}</div>
            <div className="lbl">Questions</div>
          </div>
          <div className="hero-stat">
            <div className="num">{overall.attempts}</div>
            <div className="lbl">Your Attempts</div>
          </div>
          <div className="hero-stat">
            <div className="num">{Math.round(overall.accuracy * 100)}<span style={{fontSize:'1rem', color:'var(--ink-3)'}}>%</span></div>
            <div className="lbl">Accuracy</div>
          </div>
        </div>
      </div>

      <div className="page-head">
        <div>
          <h2 style={{fontSize:'1.6rem'}}>Exam Sets</h2>
          <p>Each set ships with 30 multiple-choice questions plus a fully-worked Part 2 case study.</p>
        </div>
      </div>

      <div className="set-grid">
        {progressBySet.map(({ set, best, attempts }, i) => (
          <div key={set.id} className="set-card" style={{ '--accent': accents[i] }} onClick={() => onPickSet(set.id, 'practice')}>
            <div className="accent" style={{ background: accents[i] }}></div>
            <div className="num">Set {String(i+1).padStart(2,'0')}</div>
            <h3>{set.title}</h3>
            <div className="meta">
              <span className={`tag diff-${set.difficulty.replace('+','\\+')}`}>{set.difficulty}</span>
              <span className="tag">{set.questions.length} Q</span>
              <span className="tag">Part 2 · {set.caseTitle.split('—')[0].trim()}</span>
            </div>
            <div className="progress"><div style={{ width: `${best * 100}%`, background: accents[i] }}></div></div>
            <div className="micro">
              <span>{attempts === 0 ? 'Not started' : `${attempts} attempt${attempts>1?'s':''}`}</span>
              <span>{best > 0 ? `Best ${Math.round(best*100)}%` : '—'}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.Home = Home;