/* ============================================================
   Individual game detail page, exported to window.
   ============================================================ */
function GamePage({ go, game, games }) {
  const tint = "oklch(0.6 0.16 " + game.hue + ")";
  const more = games.filter((g) => g.id !== game.id).slice(0, 4);
  const gameReviews = window.REVIEWS.filter((r) => r.game === game.id);
  const shots = shotsOf(game);

  React.useEffect(() => { window.scrollTo(0, 0); }, [game.id]);

  return (
    <div style={{ "--game": tint }}>
      {/* hero */}
      <section className="gp-hero" style={{ "--game": tint }}>
        <div className="hero-glow"></div>
        <div className="wrap-wide">
          <button type="button" className="gp-back" onClick={() => go({ name: "home", scroll: "games" })}>
            <Icon name="arrow-left" /> All games
          </button>
          <div className={"gp-grid" + (shots.length ? "" : " gp-grid-solo")}>
            <div>
              <div className="gp-head">
                <AppIcon game={game} size={76} />
                <div>
                  <h1>{game.name}</h1>
                  <div className="gp-cat">{game.category} · {game.kind}{game.isNew ? " · New release" : ""}</div>
                </div>
              </div>
              <p className="gp-tag">{game.tagline}</p>
              <p className="gp-desc">{game.description}</p>
              <div className="gp-cta">
                <AppStore url={game.url} />
                <span className="rating-inline"><Stars value={game.rating} gold /> <b>{game.rating.toFixed(1)}</b> · {game.ratings} ratings</span>
              </div>
            </div>
            {shots.length > 0 && (
              <div className="gp-stage">
                <PhoneFrame game={game} width={300} shot={shots[0]} label={game.name + " · gameplay"} />
              </div>
            )}
          </div>
        </div>
      </section>

      {/* gallery */}
      {shots.length > 0 && (
      <section className="section-pad alt-bg" style={{ "--game": tint }}>
        <div className="wrap-wide">
          <div className="section-head reveal" style={{ marginBottom: 40 }}>
            <span className="eyebrow">Screens</span>
            <h2 className="display" style={{ fontSize: "clamp(26px,3vw,40px)", marginTop: 12 }}>Inside the game</h2>
          </div>
          <div className="gallery">
            {shots.slice(0, 4).map((s, i) => (
              <div className="reveal" key={i} style={{ display: "grid", placeItems: "center" }}>
                <PhoneFrame game={game} width={220} shot={s} />
              </div>
            ))}
          </div>
        </div>
      </section>
      )}

      {/* features */}
      <section className="section-pad" style={{ "--game": tint }}>
        <div className="wrap-wide">
          <div style={{ display: "grid", gridTemplateColumns: "0.8fr 1.2fr", gap: 48, alignItems: "start" }} className="feat-wrap">
            <div className="reveal" style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 420 }}>
              <span className="eyebrow">The climb</span>
              <h2 className="display" style={{ fontSize: "clamp(26px,3vw,40px)" }}>From nothing to legendary.</h2>
              <p className="lead">A deep career sim you can actually sink into, and replay a dozen different ways.</p>
            </div>
            <div className="feat-grid">
              {game.features.map((f) => (
                <div className="feat reveal" key={f}>
                  <span className="ck"><Icon name="check" style={{ width: 15, height: 15, strokeWidth: 2.4 }} /></span>
                  <span>{f}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* reviews for this game */}
      {gameReviews.length > 0 && (
        <section className="section-pad alt-bg" style={{ "--game": tint }}>
          <div className="wrap-wide">
            <div className="section-head reveal" style={{ marginBottom: 36 }}>
              <span className="eyebrow">Player reviews</span>
              <h2 className="display" style={{ fontSize: "clamp(26px,3vw,40px)", marginTop: 12 }}>What players say</h2>
            </div>
            <div className="review-rail" tabIndex={0} role="region" aria-label={"Player reviews for " + game.name + ", scrollable"}>
              {gameReviews.concat(gameReviews.length === 1 ? [{ game: game.id, quote: game.blurb, author: "From the App Store listing", stars: 5 }] : []).map((r, i) => (
                <figure className="rcard reveal" key={i} style={{ "--game": tint }}>
                  <Stars value={r.stars} gold />
                  <blockquote className="quote" style={{ margin: 0 }}>"{r.quote}"</blockquote>
                  <figcaption className="rcard-foot">
                    <AppIcon game={game} size={40} />
                    <span className="who"><b>{game.name}</b><span>{r.author}</span></span>
                    {r.real && <span className="realtag">Verified</span>}
                  </figcaption>
                </figure>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* download cta */}
      <section className="section-pad" style={{ "--game": tint }}>
        <div className="wrap-wide">
          <div className="cta-band reveal" style={{ "--accent": tint }}>
            <div className="glow2"></div>
            <AppIcon game={game} size={72} />
            <h2 style={{ marginTop: 22 }}>Ready to start {game.name}?</h2>
            <p className="lead">Free on the App Store. No ads, no accounts.</p>
            <div style={{ display: "flex", justifyContent: "center", gap: 16, flexWrap: "wrap" }}>
              <AppStore url={game.url} />
            </div>
          </div>
        </div>
      </section>

      {/* more games */}
      <section className="section-pad alt-bg">
        <div className="wrap-wide">
          <div className="section-head reveal" style={{ marginBottom: 36 }}>
            <span className="eyebrow">Keep playing</span>
            <h2 className="display" style={{ fontSize: "clamp(26px,3vw,40px)", marginTop: 12 }}>More from Chimpanzee</h2>
          </div>
          <div className="morelist">
            {more.map((g) => (
              <a key={g.id} className="gcard reveal" href={g.url} target="_blank" rel="noopener noreferrer" style={{ "--game": "oklch(0.6 0.16 " + g.hue + ")" }}>
                <div className="gcard-top">
                  <AppIcon game={g} size={52} />
                  <div className="gcard-titles">
                    <h3 style={{ fontSize: 17 }}>{g.name}</h3>
                    <div className="cat">{g.category}</div>
                  </div>
                </div>
                <div className="gcard-foot">
                  <span className="rating-inline" style={{ fontSize: 13 }}><Stars value={g.rating} gold /> {g.rating.toFixed(1)}</span>
                  <span className="getbtn"><Apple /> App Store</span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { GamePage });