import TopHRHitters from '@/components/TopHRHitters';

export default function MLBPage() {
  return (
    <main style={{ padding: '2rem', fontFamily: 'sans-serif' }}>
      <h1>MLB Insights</h1>

      <section style={{ marginBottom: '2rem' }}>
        <h2>Hot Streaks</h2>
        <p><em>Teams and players trending up.</em></p>
      </section>

      <section style={{ marginBottom: '2rem' }}>
        <h2>Top Hitters</h2>
        <p><em>Based on multi-hit games, OBP trends, etc.</em></p>
      </section>

      <section style={{ marginBottom: '2rem' }}>
        <h2>Home Run Watch</h2>
        <p><em>Who’s due, who’s locked in.</em></p>
        <h3>Today's Top 20 Home Run Hitters</h3>
        <TopHRHitters />
      </section>

      <section style={{ marginBottom: '2rem' }}>
        <h2>Pitching Matchups</h2>
        <p><em>Today’s key arms, strikeout props, and matchups to monitor.</em></p>
      </section>

      <section style={{ marginBottom: '2rem' }}>
        <h2>Visual Trends (Coming Soon)</h2>
        <p><em>Custom Box2Board visuals and prop heat maps coming soon.</em></p>
      </section>
    </main>
  );
}