/* Mobile gift page · purpose-built for 420px width Sized for one-thumb scrolling, restacks the deck/transport, polaroid, CTAs. */ const MOBILE_JAM_PALETTES = { Roast: { body: "#D4501A", bodyHighlight: "#FF7A3E", bodyShadow: "#8C2A0A", accent: "#D93616", labelTone: "warm" }, Heartfelt: { body: "#C8553D", bodyHighlight: "#E87A60", bodyShadow: "#7A2A1C", accent: "#A8412E", labelTone: "warm" }, Hype: { body: "#F5C518", bodyHighlight: "#FFE873", bodyShadow: "#A88408", accent: "#D93616", labelTone: "neon" }, Romantic: { body: "#D85A8A", bodyHighlight: "#F590B5", bodyShadow: "#8A2E58", accent: "#A8412E", labelTone: "warm" }, }; function MobileDeckBtn({ children, onClick, active, label, flex }) { return ( ); } function MobileGiftPage({ song = {}, onMakeYourOwn, onWaitlist }) { const [mCopied, setMCopied] = React.useState(false); const [mSide, setMSide] = React.useState("A"); const mCopy = React.useCallback(() => { const url = window.location.href; if (navigator.clipboard?.writeText) { navigator.clipboard.writeText(url).then(() => { setMCopied(true); setTimeout(() => setMCopied(false), 1800); }).catch(() => {}); } }, []); const { recipient = "Maya", title = "The Ballad of May-May", occasion = "30th birthday", senderName = "Jess", senderMessage = "Happy 30th, weirdo. You deserve to be sung about.", songType = "Roast", genre = "Pop anthem", duration = 54, lyrics: lyricsRaw, } = song; const palette = MOBILE_JAM_PALETTES[songType] || MOBILE_JAM_PALETTES.Roast; const [playing, setPlaying] = React.useState(false); const [t, setT] = React.useState(0); const [scrubbing, setScrubbing] = React.useState(false); const audioRef = React.useRef(null); const audioSrc = song.audioUrl || (typeof SAMPLE_AUDIO !== "undefined" ? SAMPLE_AUDIO[songType] : null) || "data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEAQB8AAIA+AAACABAAZGF0YQAAAAA="; const simulateAudio = /^data:audio\//.test(audioSrc || ""); React.useEffect(() => { const a = audioRef.current; if (!a || simulateAudio) return; if (playing) a.play().catch(() => setPlaying(false)); else a.pause(); }, [playing, simulateAudio]); React.useEffect(() => { if (!playing || !simulateAudio) return undefined; const timer = setInterval(() => { setT((current) => { const next = Math.min(duration, current + 0.25); if (next >= duration) { setPlaying(false); return 0; } return next; }); }, 250); return () => clearInterval(timer); }, [duration, playing, simulateAudio]); React.useEffect(() => { const a = audioRef.current; if (!a || simulateAudio) return; const onTime = () => { const cur = Math.min(a.currentTime, duration); setT(cur); if (a.currentTime >= duration) { a.pause(); setPlaying(false); } }; const onEnd = () => { setPlaying(false); setT(0); }; a.addEventListener("timeupdate", onTime); a.addEventListener("ended", onEnd); return () => { a.removeEventListener("timeupdate", onTime); a.removeEventListener("ended", onEnd); }; }, [duration, simulateAudio]); const seek = React.useCallback((newT) => { const clamped = Math.max(0, Math.min(duration, newT)); setT(clamped); if (audioRef.current) audioRef.current.currentTime = clamped; }, [duration]); const scrubToPointer = React.useCallback((e) => { const r = e.currentTarget.getBoundingClientRect(); const next = ((e.clientX - r.left) / r.width) * duration; seek(next); setMSide(next / duration >= 0.52 ? "B" : "A"); }, [duration, seek]); const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, "0")}`; const progress = t / duration; const cassetteTraits = createPrototypeCassetteTraits({ seed: song.giftSlug || `${recipient}-${occasion}-${title}`, recipient, occasion, title, songType, genre, tier: song.tier || "quick", durationSeconds: duration, }); const cassetteMeta = cassetteTraits.label.meta; const lyrics = lyricsRaw || `[Verse 1] She rolls in twenty minutes late... (no lyrics provided)`; const mSides = React.useMemo(() => { const lines = lyrics.split("\n"); const bridgeIdx = lines.findIndex(l => /\[Bridge\]/i.test(l)); if (bridgeIdx < 0) return { A: lyrics, B: "(B-side coming soon...)" }; return { A: lines.slice(0, bridgeIdx).join("\n").trim(), B: lines.slice(bridgeIdx).join("\n").trim(), }; }, [lyrics]); return (
); } Object.assign(window, { MobileGiftPage });