// Rôle : affiche les raccourcis de la page d'accueil Monster Hunter Wilds.
import { assetPath } from "./utils.js";

export function MhwildsOverview({ 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>Monster Hunter: Wilds</h1>
          <p>Consultez rapidement les monstres, faiblesses, afflictions, hitzones et emplacements de faune endémique.</p>
        </div>
      </section>
      <section className="game-home-grid">
        <a className="feature game-home-card" href="#/games/mhwilds/monsters">
          <img src={assetPath("arkveld")} alt="" />
          <strong>Monstres</strong>
          <span>Recherche, filtres par faiblesse et tableau de dégâts par partie.</span>
        </a>
        <a className="feature game-home-card" href="#/games/mhwilds/endemic">
          <img src={assetPath("vigorwasp")} alt="" />
          <strong>Faune endémique</strong>
          <span>Faune endémique et aquatique filtrable par localisation.</span>
        </a>
        <a className="feature game-home-card" href="#/games/mhwilds/lists">
          <span className="game-home-card-icon" aria-hidden="true">
            <span className="module-icon-svg module-icon-checklist" />
          </span>
          <strong>Listes</strong>
          <span>Données copiables au format checklist pour préparer vos suivis.</span>
        </a>
      </section>
    </>
  );
}
