/* global React, KeraiMark, ScreenFrame, Display, Eyebrow, Body, PrimaryButton, themeTokens, useTheme, useReducedMotion, PALETTE, KeraiCommerce, TYPE, SERIF */ const { useState, useEffect, useRef } = React; const KA = KeraiCommerce; const EASE_A = "cubic-bezier(.22,.7,.2,1)"; const NOUN_A = { bracelets: "bracelet", earrings: "earrings", pendants: "pendant" }; const titledName = (product) => { const noun = NOUN_A[(product.label || product.box).toLowerCase()] || ""; return new RegExp(noun, "i").test(product.name) ? product.name : `${product.name} ${noun}`; }; /* A few layers that take turns: the current one sharpens in, the last one blurs away. Used by the attract pieces and the home reviews. */ function useTurns(count, interval, reduced) { const [idx, setIdx] = useState(0); useEffect(() => { if (reduced || count < 2) return; const id = setInterval(() => setIdx((i) => (i + 1) % count), interval); return () => clearInterval(id); }, [count, interval, reduced]); return idx; } const turnStyle = (active, reduced) => ({ position: "absolute", inset: 0, opacity: active ? 1 : 0, filter: active ? "blur(0px)" : "blur(14px)", transform: active ? "scale(1)" : "scale(0.985)", transition: reduced ? "none" : `opacity 1.1s ease, filter 1.1s ease, transform 1.4s ${EASE_A}`, pointerEvents: "none", }); /* ------------------------------------------------------------------ */ /* 01. ATTRACT */ /* Pieces take turns, each with the lowest price it can be bought at. */ /* The film of the host inviting guests over replaces this when Kerai */ /* supplies it. */ /* ------------------------------------------------------------------ */ const ATTRACT_IDS = ["ea-rndh", "pe-eme", "ea-ovlh", "pe-rndh", "ea-prn"]; function ScreenAttract({ theme, stock, onTap }) { const t = themeTokens(theme); const reduced = useReducedMotion(); const pieces = ATTRACT_IDS.map((id) => KA.PRODUCT_BY_ID[id]) .map((p) => { const prices = KA.MACHINE.metals.map((m) => KA.fromPrice(p, m, stock)).filter((x) => x != null); return prices.length ? { product: p, from: Math.min(...prices) } : null; }) .filter(Boolean); const idx = useTurns(pieces.length, 5200, reduced); return (
{pieces.map(({ product }, i) => (
))}
{pieces.map(({ product, from }, i) => (
{titledName(product)} from {KA.formatMoney(from)}
))}
Box of radiant moments
Tap to begin
); } /* ------------------------------------------------------------------ */ /* 02. CHOOSE YOUR BOX */ /* The grid mirrors the cabinet's four lit boxes, so a guest can look */ /* from a tile to the box beside them. Beneath: everything in the */ /* machine, or the sets. Reviews take turns at the foot of the screen. */ /* ------------------------------------------------------------------ */ function BoxTile({ box, index, onPick, onLock, locked }) { const [filled, setFilled] = useState(false); const ink = PALETTE.orange; const choose = () => { if (locked || filled) return; setFilled(true); if (onLock) onLock(); window.setTimeout(() => onPick(box.id), 720); }; return (
); } function Stars({ size = 30, color }) { return (
{[0, 1, 2, 3, 4].map((i) => ( ))}
); } function Reviews({ reviews }) { const t = themeTokens(useTheme()); const reduced = useReducedMotion(); const idx = useTurns(reviews.length, 6500, reduced); return (
{reviews.map((r, i) => (
“{r.quote}”
— {r.name}
))}
); } function ScreenHome({ theme, onPickBox, onAllProducts, onSets, onLogo }) { const t = themeTokens(theme); const [picked, setPicked] = useState(null); const TILE = 252; const GAP = 20; const GRID = TILE * 2 + GAP; const enter = (delay) => ({ opacity: 0, animation: `kerai-tile-in 0.9s ${EASE_A} ${delay}s forwards` }); return (
Choose your box
{KA.BOXES.map((b, i) => ( setPicked(b.id)} locked={picked !== null} /> ))}
); } window.ScreenAttract = ScreenAttract; window.ScreenHome = ScreenHome; window.titledName = titledName;