// screens.jsx — the eight screens of the FireHorse flow. // Each screen accepts `ctx` (the shared app state) and `nav` (the routing helpers). const { useState, useEffect, useRef } = React; // ─────────────────────────────────────────────────────────────────────────── // 1. WELCOME // ─────────────────────────────────────────────────────────────────────────── function ScreenWelcome({ ctx, nav }) { const isMobile = ctx.device === "mobile"; return (

Discover the beast
that walks with you.

From the hour of your birth, an old practice draws a creature from the scrolls of Chinese mythology — painted in ink and gold by Steven Yu.

takes about a minute
); } // ─────────────────────────────────────────────────────────────────────────── // 2. BIRTH INFO — mirrors the login reference // ─────────────────────────────────────────────────────────────────────────── function ScreenInfo({ ctx, nav, setField }) { const { date, time, location } = ctx.user; const canContinue = date.trim().length >= 4 && time.trim().length >= 1 && location.trim().length >= 2; const isMobile = ctx.device === "mobile"; return (
Please Enter Your Information
setField("date", v)} placeholder="Year / Month / Date" /> setField("time", v)} placeholder="Time of birth" /> setField("location", v)} placeholder="Location" />
Your details are saved only for this reading. We never share or sell them.
); } // ─────────────────────────────────────────────────────────────────────────── // 3. CALCULATING // ─────────────────────────────────────────────────────────────────────────── function ScreenCalculating({ ctx, nav }) { const [step, setStep] = useState(0); const lines = [ "Aligning the hours of your birth…", "Consulting the five elements…", "Drawing the brush across the sky…", ]; useEffect(() => { const t1 = setTimeout(()=>setStep(1), 1100); const t2 = setTimeout(()=>setStep(2), 2200); const t3 = setTimeout(()=>nav.go("preview"), 3400); return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); }; }, []); return (
{lines.map((l,i)=>(
{l}
))}
); } // ─────────────────────────────────────────────────────────────────────────── // 4. PREVIEW — low-res with watermark + claim CTA // ─────────────────────────────────────────────────────────────────────────── function ScreenPreview({ ctx, nav }) { const beast = BEASTS.find(b => b.id === ctx.beastId) || BEASTS[0]; const isMobile = ctx.device === "mobile"; return (
{/* Image card — low-res / watermarked */}
{beast.name}
{/* watermark */}
{Array.from({length:24}).map((_,i)=>(
STEVEN YU · PREVIEW
))}
{/* corner seal */}
SY
{/* Reveal copy */}
Your spirit beast is the
{beast.name}
{beast.element} · {beast.trait}
“{beast.poem}”
Hi-res · free · sent to your inbox
); } // ─────────────────────────────────────────────────────────────────────────── // 5. EMAIL GATE — reward framing // ─────────────────────────────────────────────────────────────────────────── function ScreenGate({ ctx, nav, setField }) { const beast = BEASTS.find(b => b.id === ctx.beastId) || BEASTS[0]; const email = ctx.user.email; const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); const isMobile = ctx.device === "mobile"; const onSubmit = (e) => { e.preventDefault(); if (valid) nav.go("check"); }; // copy variants const copyMap = { reward: { kicker:"Your painting is ready", headline:"Send it to your inbox." }, save: { kicker:"Save your reading", headline:"Keep it before it fades." }, utility: { kicker:"Where should we send it?", headline:"Your email, please." }, }; const copy = copyMap[ctx.gateCopy] || copyMap.reward; return (
{/* Envelope / preview side */}
{/* envelope flap */}
{/* peeking artwork */}
{/* wax seal */}
SY
{/* Form */}
{copy.kicker}
{copy.headline}
We'll send you a single link to claim your full-resolution {beast.name} painting.
setField("email", v)} placeholder="you@inbox.com" type="email" />
No newsletter. One email, one link, then we'll let you be.
); } // ─────────────────────────────────────────────────────────────────────────── // 6. CHECK YOUR EMAIL // ─────────────────────────────────────────────────────────────────────────── function ScreenCheck({ ctx, nav }) { const isMobile = ctx.device === "mobile"; return (
SY
One last step
Check your inbox.
We sent a link to {ctx.user.email || "your email"}. Click it to claim your painting.
The link expires in 24 hours.
); } // ─────────────────────────────────────────────────────────────────────────── // 7. INBOX — mocked email view // ─────────────────────────────────────────────────────────────────────────── function ScreenInbox({ ctx, nav }) { const beast = BEASTS.find(b => b.id === ctx.beastId) || BEASTS[0]; const isMobile = ctx.device === "mobile"; return (
{/* fake mail-client chrome */}
◀ ▶ Inbox ⌕
{/* email card */}
{/* header */}
SY
Steven Yu Art
painting@stevenyu.art  ·  to {ctx.user.email || "you@inbox.com"}
just now
{/* subject */}
Your {beast.name} is ready.
{/* body */}

The reading is finished. Your spirit beast is the {beast.name} — {beast.element}, {beast.trait.toLowerCase()}.

“{beast.poem}”

{/* preview thumb */}
{/* CTA */}
stevenyu.art/claim/8f3a-fire-horse-…
{/* footer */}
This link verifies your email and unlocks the full-resolution image. It will expire in 24 hours. If you didn't request this reading, you may safely ignore this message.
); } // ─────────────────────────────────────────────────────────────────────────── // 7b. VERIFYING (brief) // ─────────────────────────────────────────────────────────────────────────── function ScreenVerifying({ ctx, nav }) { useEffect(() => { const t = setTimeout(()=>nav.go("landing"), 1500); return ()=>clearTimeout(t); }, []); return (
Verifying your inbox…
); } // ─────────────────────────────────────────────────────────────────────────── // 8. LANDING — full-res reveal, download / share // ─────────────────────────────────────────────────────────────────────────── function ScreenLanding({ ctx, nav, setField }) { const beast = BEASTS.find(b => b.id === ctx.beastId) || BEASTS[0]; const isMobile = ctx.device === "mobile"; const [shareOpen, setShareOpen] = useState(false); const [downloaded, setDownloaded] = useState(false); return (
{/* atmospheric backdrop — same artwork, blurred + darkened */}
nav.restart()} />
{/* hero image */}
{beast.name}
{/* details */}
Verified · Your painting
{beast.name}
{beast.element} · {beast.trait}
“{beast.poem}”
JPEG · 3840 × 5120 · 18.2 MB · for personal use
{/* share sheet */} {shareOpen && (
setShareOpen(false)}>
e.stopPropagation()}>
Share your beast
{["Twitter","Instagram","Link"].map(s => (
{s==="Twitter"?"✦":s==="Instagram"?"◎":"⌘"}
{s}
))}
)}
); } Object.assign(window, { ScreenWelcome, ScreenInfo, ScreenCalculating, ScreenPreview, ScreenGate, ScreenCheck, ScreenInbox, ScreenVerifying, ScreenLanding, });