// app/page-home.jsx — Home / Discovery (data-driven, navigable).

function PageHome() {
  const app = useApp();
  const S = window.SCHOLIA;
  const row = S.recordingOfWeek;

  const Pick = ({ r }) => (
    <div className="clickable" onClick={() => navigate('/recording/' + r.id)} style={{ display: 'flex', flexDirection: 'column', gap: 13 }}>
      <Cover composer={r.composerName.toUpperCase()} work={r.work.title} tone={r.tone} size={'fluid'} label={r.label.split(' ')[0]} style={{ width: '100%' }} />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        <div className="c-eyebrow">{r.conductor || r.soloist} · {r.year}</div>
        <div className="c-serif" style={{ fontSize: 21, fontWeight: 500, lineHeight: 1.08, letterSpacing: '-0.01em' }}>{r.work.title}</div>
      </div>
      <div style={{ marginTop: 2 }}><ScoreInline c={r.critic} f={r.fan} size={40} /></div>
    </div>
  );

  const TrendRow = ({ n, w }) => {
    const top = S.recordingsForWork(w.id)[0];
    return (
      <div className="clickable" onClick={() => navigate('/work/' + w.id)}
        style={{ display: 'grid', gridTemplateColumns: '40px 1fr auto', alignItems: 'center', gap: 18, padding: '17px 0', borderBottom: '1px solid var(--rule)' }}>
        <div className="c-serif" style={{ fontSize: 26, color: 'var(--ink-3)', fontWeight: 400 }}>{n}</div>
        <div>
          <div className="c-serif" style={{ fontSize: 20, fontWeight: 500, letterSpacing: '-0.01em' }}>{w.title}</div>
          <div style={{ fontSize: 13.5, color: 'var(--ink-2)', marginTop: 3 }}>{w.composerName} · {w.recordingCount} recordings</div>
        </div>
        <ScoreInline c={top.critic} f={top.fan} size={38} />
      </div>
    );
  };

  return (
    <div className="coda" style={{ width: '100%', minHeight: '100%' }}>
      <Nav active="Browse" />

      <div className="app-wrap" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '14px 48px', borderBottom: '1px solid var(--rule)' }}>
        <span className="c-eyebrow">The classical recordings almanac</span>
        <span className="c-eyebrow">Sunday, June 7, 2026 · No. 414</span>
      </div>

      <main className="app-wrap" style={{ paddingTop: 40, paddingBottom: 8 }}>
        {/* HERO */}
        <section className="home-hero">
          <Cover className="hero-cover clickable" onClick={() => navigate('/recording/' + row.id)}
            composer={row.composerName.toUpperCase()} work={row.work.title + ' ' + row.work.subtitle} tone={row.tone} size={420} label={row.label.split(' ')[0] + ' · ' + row.year} />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <div className="c-eyebrow" style={{ color: 'var(--critic)' }}>Recording of the week</div>
            <h1 className="c-serif clickable" onClick={() => navigate('/recording/' + row.id)} style={{ fontSize: 'clamp(40px,5.2vw,56px)', lineHeight: 0.98, fontWeight: 500, letterSpacing: '-0.02em' }}>
              Kleiber’s Fifth, <span style={{ fontStyle: 'italic', color: 'var(--ink-2)' }}>still untouched</span>
            </h1>
            <p style={{ fontSize: 16.5, lineHeight: 1.55, color: 'var(--ink-2)', maxWidth: 560 }}>
              {row.conductor} · {row.ensemble} · {row.year}. Half a century on, no one has matched the white-hot
              tension of this account — the benchmark by which every Fifth is measured.
            </p>
            <div style={{ display: 'flex', gap: 44, alignItems: 'center', margin: '8px 0 6px', flexWrap: 'wrap' }}>
              <ScoreStat value={row.critic} kind="critic" label="CRITICS" count={row.proCount + ' reviews'} size={86} />
              <ScoreStat value={row.fan} kind="fan" label="FANS" count={row.fanCount.toLocaleString() + ' ratings'} size={86} />
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, maxWidth: 540 }}>
              <Listen svc="Spotify" /><Listen svc="Apple Music" /><Listen svc="Qobuz" /><Listen svc="Tidal" />
            </div>
          </div>
        </section>

        {/* EDITOR'S PICKS */}
        <section style={{ paddingTop: 44 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 26 }}>
            <h2 className="c-serif" style={{ fontSize: 30, fontWeight: 500, letterSpacing: '-0.01em' }}>Editor’s Picks</h2>
            <span className="c-link c-mono clickable" style={{ fontSize: 12, letterSpacing: '0.08em' }} onClick={() => navigate('/search?q=editor')}>VIEW ALL →</span>
          </div>
          <div className="picks-grid">
            {S.editorsPicks.map((r) => <Pick key={r.id} r={r} />)}
          </div>
        </section>

        {/* TRENDING + COMPOSERS */}
        <section className="home-lower">
          <div>
            <h2 className="c-serif" style={{ fontSize: 30, fontWeight: 500, letterSpacing: '-0.01em', marginBottom: 8 }}>Trending Works</h2>
            <div className="c-eyebrow" style={{ marginBottom: 6 }}>Most reviewed this week</div>
            <div>
              {S.trendingWorkIds.map((id, i) => <TrendRow key={id} n={i + 1} w={S.work(id)} />)}
            </div>
          </div>
          <div>
            <h2 className="c-serif" style={{ fontSize: 30, fontWeight: 500, letterSpacing: '-0.01em', marginBottom: 22 }}>Browse by composer</h2>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
              {S.composers.map((c) => (
                <span key={c.id} className="c-chip" style={{ fontSize: 14, padding: '8px 15px' }} onClick={() => navigate('/search?q=' + encodeURIComponent(c.name))}>{c.name}</span>
              ))}
            </div>
            <div style={{ marginTop: 30, padding: 24, background: 'var(--paper-2)', border: '1px solid var(--rule)', borderRadius: 4 }}>
              <div className="c-eyebrow" style={{ marginBottom: 10 }}>Browse by</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {['Performer & soloist', 'Conductor', 'Orchestra & ensemble', 'Era & label'].map((x) => (
                  <span key={x} className="c-serif clickable" style={{ fontSize: 19, color: 'var(--ink)', display: 'flex', justifyContent: 'space-between' }} onClick={() => navigate('/search')}>
                    {x}<span style={{ color: 'var(--ink-3)' }}>→</span>
                  </span>
                ))}
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
}

Object.assign(window, { PageHome });