export function Diablo4Overview({ game }) {
  const heroStyle = game?.images?.heroBg ? { "--game-hero-image": `url("${game.images.heroBg}")` } : undefined;

  return (
    <>
      <section className="game-hero" style={heroStyle}>
        <div>
          <p className="eyebrow">Guide de jeu</p>
          <h1>Diablo IV</h1>
          <p>Consultez rapidement les affixes et leurs catégories pour préparer vos builds sans quitter votre session.</p>
        </div>
      </section>
      <section className="game-home-grid diablo4-home-grid">
        <a className="feature game-home-card diablo4-home-card" href="#/games/diablo4/affixes">
          <span className="diablo4-home-mark" aria-hidden="true" />
          <strong>Affixes</strong>
          <span>Recherche et filtres par catégorie pour retrouver les statistiques utiles.</span>
        </a>
      </section>
    </>
  );
}