/* form.jsx — End-game / WinPanel.
   Lives INSIDE the game stage (same .game-embed__main slot the board
   was using) so the celebration feels like part of the simulation,
   not a marketing page below it. Two internal views, switched via
   local state:
     1. "victory"  — eyebrow + headline + lead + tries/code chip +
                     CTA that navigates to the apply view.
     2. "apply"    — how-to-apply 3-step card + primary mailto CTA
                     + secondary link that scrolls the main page to
                     the open-positions section underneath the game.
   Both views share the same dark-navy chrome (no light section). */

const WinPanel = ({ code, tries }) => {
  const { t } = useReto();
  const W = t.win;
  const [view, setView] = React.useState("victory");
  const [copied, setCopied] = React.useState(false);

  const copy = () => {
    if (navigator.clipboard) navigator.clipboard.writeText(code);
    setCopied(true); setTimeout(() => setCopied(false), 1800);
  };

  /* Mailto skeleton — code injected into the template's "código del
     juego" / "game code" line via regex so the wording can change in
     i18n without touching this. */
  const bodyLines = W.mailBody.map(line =>
    /^· .+: $/.test(line) ? line + code : line);
  const mailto =
    "mailto:" + W.emailTo +
    "?subject=" + encodeURIComponent(W.mailSubject + " · " + code) +
    "&body="    + encodeURIComponent(bodyLines.join("\n"));

  /* Open-positions handoff — scrolls the OUTER document (the main
     site below the game) to the .talento-positions section. The
     selector lives on PageTalento; we querySelector on document so
     we cross the reto-scope boundary cleanly. */
  const goToPositions = () => {
    const el = document.querySelector(".talento-positions");
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <div className="win">
      {/* Shared background — sits behind both views so the swap is a
          card-only transition, the dim grid + glow never reflows. */}
      <div className="win__bg" aria-hidden="true">
        <div className="win__gridbg" />
        <div className="win__glow" />
      </div>

      {view === "victory" ? (
        <div className="win__screen container win__hero-inner">
          <span className="eyebrow eyebrow--on-dark win__eyebrow"><span className="win__pulse" />{W.eyebrow}</span>
          <h2 className="win__title">{W.title}</h2>
          <p className="win__lead">{W.lead}</p>

          <div className="win__meta">
            <div className="win__meta-stat">
              <span className="win__meta-k">{W.triesLabel}</span>
              <b className="win__meta-v">{tries}</b>
            </div>
            <div className="win__meta-div" aria-hidden="true" />
            <div className="win__meta-code">
              <span className="win__meta-k">{W.codeLabel}</span>
              <div className="win__code-row">
                <span className="win__code-v">{code}</span>
                <button className="win__copy" onClick={copy}>
                  {copied ? <RIcon.Check s={14} c="currentColor" /> : <RIcon.Copy s={14} c="currentColor" />}
                  <span>{copied ? W.copied : W.copy}</span>
                </button>
              </div>
            </div>
          </div>

          {/* Primary CTA — moves to the apply view. */}
          <button className="btn btn-primary win__cta" onClick={() => setView("apply")}>
            <span>{W.cta}</span>
            <span className="arr">→</span>
          </button>
        </div>
      ) : (
        <div className="win__screen container win__send-inner">
          {/* Back to the victory screen. */}
          <button className="win__back" onClick={() => setView("victory")}>
            <span className="arr">←</span><span>{W.back}</span>
          </button>

          <span className="eyebrow eyebrow--on-dark win__send-eyebrow">{W.sendEyebrow}</span>
          <h3 className="win__send-title">{W.sendTitle}</h3>
          <p className="win__send-lead">{W.sendLead}</p>

          <ol className="win__steps">
            {W.steps.map((s, i) => (
              <li className="win__step" key={i}>
                <span className="win__step-k">{s.k}</span>
                <div className="win__step-c">
                  <b className="win__step-t">{s.title}</b>
                  <p className="win__step-b">{s.body}</p>
                </div>
              </li>
            ))}
          </ol>

          {/* Action row — primary mailto + secondary scroll-down link. */}
          <div className="win__cta-row">
            <a className="btn btn-primary win__cta" href={mailto}>
              <span>{W.ctaApply}</span>
              <span className="arr">→</span>
            </a>
            <button className="win__link" onClick={goToPositions}>
              <span>{W.seePositions}</span>
              <span className="arr">↓</span>
            </button>
          </div>
          <p className="win__cta-sub">{W.ctaSub}</p>

          <p className="win__fallback">
            {W.fallbackPre} <a className="win__fallback-link" href={"mailto:" + W.emailTo}>{W.emailTo}</a>
          </p>
        </div>
      )}
    </div>
  );
};

Object.assign(window, { WinPanel });