Merge pull request #174 from phattbeats/pha1274-coin-cta

PHA-1274: Major Wrapped → challenge-coin CTA

Author: phattbeats

scripts/verify-playoff-wrapped.ts

@@ -161,6 +161,9 @@ check("stinger is the post-credits 'will return'", /will return/i.test(out.find(
 check("stinger uses the Hotline brand, not the old name", /Hotline/.test(out.find((s) => s.id === "po-stinger")?.headline ?? "") && !/phaTT Picks/i.test(out.find((s) => s.id === "po-stinger")?.headline ?? ""));
 check("stinger teases the next Major (Singapore)", /Singapore/i.test(out.find((s) => s.id === "po-stinger")?.body ?? ""));
 check("thanks comes before the stinger", outIds.indexOf("po-thanks") < outIds.indexOf("po-stinger"));
+check("coin checkout slide present", outIds.includes("po-coin"));
+check("coin slide links to the shelf via CTA", (() => { const c = out.find((s) => s.id === "po-coin"); return c?.cta?.href === "/profile" && /coin/i.test(c?.cta?.label ?? ""); })());
+check("coin slide sits before the thank-you", outIds.indexOf("po-coin") < outIds.indexOf("po-thanks"));
 
 // ---- PHA-1274 scope correction: this is the *Major* Wrapped, not just Playoffs. ----
 check("cover frames the whole Major (32 walked in)", /thirty-two walked in/i.test(out[0].headline));

src/app/globals.css

@@ -1547,6 +1547,17 @@ main.shell.with-nav-action { padding-bottom: calc(152px + env(safe-area-inset-bo
   margin: 13px auto 0; max-width: 32ch;
   font-size: 14px; line-height: 1.55; color: var(--ink-mid); text-wrap: pretty;
 }
+/* PHA-1274: a slide CTA button (e.g. "See your coin" → /profile). Mirrors the
+   primary nav button; navigating closes the deck. */
+.sw-cta {
+  position: relative; display: inline-flex; align-items: center; gap: 7px;
+  margin: 16px auto 2px; padding: 10px 20px; border-radius: 4px;
+  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
+  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
+  color: var(--surf-1); border: 1px solid transparent;
+  background: linear-gradient(120deg, var(--heat), var(--heat-hot));
+  box-shadow: 0 4px 18px var(--heat-glow);
+}
 
 /* PHA-1276: shave the tallest elements on small/short phones so a typical slide
    fits the viewport without needing to scroll the stage. The scroll fallback

src/components/heat/StageWrapped.tsx

@@ -602,6 +602,13 @@ function SlideCard({ slide }: { slide: WrappedSlide }) {
         </div>
       )}
       {slide.body && <p className="sw-body">{slide.body}</p>}
+      {slide.cta && (
+        <a className="sw-cta brk" href={slide.cta.href}>
+          <span className="br-tr" />
+          <span className="br-bl" />
+          {slide.cta.label}
+        </a>
+      )}
     </div>
   );
 }

src/lib/playoff-wrapped-core.ts

@@ -559,6 +559,21 @@ export function buildPlayoffWrappedDeck(
     slides.push(rankSlide(eyebrow, personal, decided));
   }
 
+  // Send them to their challenge coin (PHA-1274, Brandon: "make a note to have
+  // the player checkout the challenge coin"). A Major mints a collectible coin
+  // (PHA-1278) once it's archived — exactly when this finale fires — so the
+  // recap points them to their shelf. One-tap CTA closes the deck en route.
+  slides.push({
+    id: "po-coin",
+    kind: "moment",
+    eyebrow: "YOUR CHALLENGE COIN",
+    headline: "You earned the Cologne coin.",
+    body: "Playing the Major mints you a collectible challenge coin — its tier set by where you finished. Cologne's is on your shelf now. Go give it a spin.",
+    brandLogo: majorBrand,
+    cta: { href: "/profile", label: "See your coin →" },
+    autoAdvanceMs: AUTO_MS,
+  });
+
   // Closer, part 1 — the heartfelt thank-you from -phaTT (Brandon: "a very
   // heartfelt thank you from -phaTT ... love for the community of cs and the
   // unity of all the different countries in the world participating and the

src/lib/stage-wrapped-core.ts

@@ -99,6 +99,11 @@ export interface WrappedSlide {
   stageBadge?: WrappedStageBadge;
   /** Personal reward: set when the viewer's pick matched this narrative moment. */
   calledIt?: { label: string; sub?: string };
+  /**
+   * Optional call-to-action link rendered as a button on the slide (PHA-1274 —
+   * e.g. "See your coin" → /profile). Navigating away naturally closes the deck.
+   */
+  cta?: { href: string; label: string };
   /**
    * Per-slide auto-advance, in ms. Falsy / omitted => this slide waits for the
    * user. The shell clamps to a sane floor so a stray `1` can't strobe.