"use client";
import Link from "next/link";
import { useEffect, useState, useSyncExternalStore } from "react";
import { createPortal } from "react-dom";
import { FOCUS_RING_CLASSES } from "@/components/ui/styles";
import { cn } from "@/lib/utils";
/**
* "Get your ticket!" badge — traced verbatim (shape + transforms) from
* `cta_signaturee1.svg`, inlined here instead of used via `` for
* one reason: an ``-loaded SVG is an isolated document that can't
* inherit the page's fonts, so the asset's own baked-in
* `font-family:'RushenCurvy-Regular'` just fell back to the browser
* default. Inlining it as real markup lets the `` elements below use
* `var(--font-rushen-curvy)` (the real font, self-hosted via
* next/font/local — see layout.tsx) instead.
*/
function TicketCtaBadge({ className }: { className?: string }) {
return (
);
}
/**
* Sticky "Get your ticket!" CTA — stays `position: fixed` bottom-right for
* the whole Signature page, same technique as the homepage HeroBanner's
* floating CTA (portaled to `` so no ancestor's transform/isolate
* stacking context can break `fixed`). Hides right as the site Footer
* (`#site-footer`, rendered globally by the root layout) starts entering
* the viewport, so it never overlaps the footer.
*/
export function SignatureFloatingCta({ href }: { href: string }) {
// Client-only mount flag without a setState-in-effect (react-hooks/
// set-state-in-effect) — useSyncExternalStore's server snapshot is always
// false, client snapshot always true, no subscription ever fires.
const mounted = useSyncExternalStore(
() => () => {},
() => true,
() => false,
);
const [visible, setVisible] = useState(true);
useEffect(() => {
let rafId = 0;
function check() {
rafId = 0;
const footer = document.getElementById("site-footer");
if (!footer) return;
setVisible(footer.getBoundingClientRect().top > window.innerHeight);
}
function onScroll() {
if (!rafId) rafId = requestAnimationFrame(check);
}
check();
window.addEventListener("scroll", onScroll, { passive: true });
window.addEventListener("resize", onScroll);
return () => {
window.removeEventListener("scroll", onScroll);
window.removeEventListener("resize", onScroll);
if (rafId) cancelAnimationFrame(rafId);
};
}, []);
if (!mounted) return null;
return createPortal(
,
document.body,
);
}