function HelpPanel({ open, onClose, match, }) {
    const [tab, setTab] = useState("coach");
    const tip = match ? coachTip(match) : null;
    const ev = match ? envidoPoints(match.hands.player) : null;
    return (<div className={cn("fixed inset-0 z-40 flex justify-end", open ? "pointer-events-auto" : "pointer-events-none")} hidden={!open} inert={!open} aria-hidden={!open}>
      <button type="button" aria-label={t("help")} className={cn("absolute inset-0 bg-ink/50 transition-opacity", open ? "opacity-100" : "opacity-0")} onClick={onClose}/>
      <aside className={cn("relative flex h-full w-full max-w-md flex-col border-l-2 border-ink bg-cream text-ink shadow-pixel transition-transform duration-200", open ? "translate-x-0" : "translate-x-full")}>
        <header className="flex items-center justify-between border-b-2 border-ink px-4 py-3">
          <h2 className="font-display text-sm">{t("help")}</h2>
          <button type="button" onClick={onClose} className="grid size-10 place-items-center" aria-label={t("help")}>
            <X className="size-5"/>
          </button>
        </header>
        <nav className="flex border-b-2 border-ink">
          {[
            ["coach", (CURRENT_LANG === "en" ? "In game" : CURRENT_LANG === "pt" ? "Em jogo" : CURRENT_LANG === "it" ? "In gioco" : CURRENT_LANG === "fr" ? "En jeu" : "En juego"), MessageSquare],
            ["rank", CURRENT_LANG === "en" ? "Hierarchy" : CURRENT_LANG === "pt" ? "Hierarquia" : CURRENT_LANG === "it" ? "Gerarchia" : CURRENT_LANG === "fr" ? "Hiérarchie" : "Jerarquía", ListOrdered],
            ["rules", CURRENT_LANG === "en" ? "Rules" : CURRENT_LANG === "pt" ? "Regras" : CURRENT_LANG === "it" ? "Regole" : CURRENT_LANG === "fr" ? "Règles" : "Reglas", BookOpen],
        ].map(([id, label, Icon]) => (<button key={id} type="button" onClick={() => setTab(id)} className={cn("flex flex-1 items-center justify-center gap-1 py-3 text-xs font-semibold", tab === id ? "bg-felt text-cream" : "bg-cream text-ink")}>
              <Icon className="size-3.5"/>
              {label}
            </button>))}
        </nav>
        <div className="flex-1 overflow-y-auto p-4">
          {tab === "coach" ? (<div className="space-y-4">
              {tip ? (<div className="border-2 border-ink bg-cream-dim p-3">
                  <p className="font-display text-xs">{tip.title}</p>
                  <p className="mt-2 text-sm leading-relaxed">{tip.body}</p>
                  <p className="mt-2 text-sm font-semibold text-crimson">{tip.hint}</p>
                </div>) : (<p className="text-sm leading-relaxed">
                  Entrá a una partida para ver consejos según la mano. Mientras tanto, mirá la jerarquía y las reglas.
                </p>)}
              {match && ev !== null ? (<p className="text-sm">
                  Tu tanto de envido ahora: <strong>{ev}</strong>
                  {match.hands.player.length
                    ? `. Cartas en mano: ${match.hands.player.length}.`
                    : ""}
                </p>) : null}
            </div>) : null}
          {tab === "rank" ? (<ol className="space-y-2">
              {POWER_LADDER.map((row, i) => (<li key={row.label} className="flex items-center gap-3 border-2 border-ink bg-cream-dim p-2">
                  <PixelCard card={row.sample} size="xs"/>
                  <div className="min-w-0">
                    <p className="font-display text-[11px]">
                      {i + 1}. {row.label}
                    </p>
                    <p className="text-xs leading-snug text-ink/70">{row.detail}</p>
                  </div>
                </li>))}
            </ol>) : null}
          {tab === "rules" ? (<div className="space-y-4">
              {RULE_SECTIONS.map((s) => (<section key={s.id}>
                  <h3 className="font-display text-xs">{s.title}</h3>
                  <p className="mt-1 text-sm leading-relaxed">{s.body}</p>
                </section>))}
            </div>) : null}
        </div>
      </aside>
    </div>);
}