/* ============================================================ Egg — the crackable centerpiece. Reusable. Pass: brandName, offerHeadline, offerBody, ctaLabel, tapCount, percentOff, on… ============================================================ */ const { useState, useEffect, useRef, useCallback, useMemo } = React; // ─── Crack paths — 9 progressively-added overlays. // Drawn in viewBox 0 0 200 260 (egg lives roughly y=20..240, x=40..160). // Each path renders on top, stroke-dasharray reveal. // Each entry: { d: path, w: stroke width override }. Larger w on early hairlines // so the first few taps read clearly across the egg's surface. const CRACK_PATHS = [ // 1: clear hairline at the crown, longer + bolder than before { d: "M 96 30 L 102 44 L 96 58 L 104 72 L 98 86" }, // 2: a branch peeling off to the right { d: "M 104 72 L 116 78 L 122 88 L 134 92" }, // 3: a counter-branch left + downward zigzag { d: "M 96 58 L 84 64 L 78 76 L 68 84 M 78 76 L 82 92" }, // 4: spider — pronounced branching across the upper half { d: "M 98 86 L 110 96 L 116 110 M 110 96 L 124 102 M 98 86 L 88 98 L 78 108" }, // 5: a wide fracture sweeping across mid-shell { d: "M 68 84 L 56 102 L 64 118 L 80 116 L 96 126 L 112 120 L 126 130 L 138 122 L 148 108" }, // 6: side fracture opens — clear darker line { d: "M 138 122 L 142 142 L 134 158 M 142 142 L 152 138" }, // 7: jagged scar down the left flank { d: "M 56 102 L 46 128 L 56 150 L 48 170" }, // 8: meridian — shell almost cracked through, top to bottom { d: "M 96 30 L 92 50 L 100 70 L 92 92 L 102 116 L 92 142 L 100 168 L 92 190" }, // 9: base fracture — the egg is groaning { d: "M 48 170 L 60 188 L 78 196 L 96 188 L 116 198 L 134 192 L 148 178 L 152 138" }, ]; // ─── Micro-feedback strings shown over the egg at certain taps function feedbackForTap(n, total) { // Final three taps escalate if (n === total - 2) return "crack…"; if (n === total - 1) return "almost…"; if (n === total) return "one more…"; return null; } // ─── Pre-generate shard end positions deterministically. // 12 shards radiating outward with varied angles/distance. function makeShards(n = 12) { const out = []; for (let i = 0; i < n; i++) { const angle = (-110 + (i / n) * 340) * (Math.PI / 180); const dist = 110 + Math.random() * 140; const tx = Math.cos(angle) * dist; const ty = Math.sin(angle) * dist - 30; // bias upward slightly const r = (Math.random() * 720 - 360) | 0; const d = (Math.random() * 80) | 0; out.push({ tx, ty, r, d, i }); } return out; } function makeSparkles(n = 14) { const out = []; for (let i = 0; i < n; i++) { const angle = Math.random() * Math.PI * 2; const dist = 80 + Math.random() * 120; out.push({ tx: Math.cos(angle) * dist, ty: Math.sin(angle) * dist, d: (Math.random() * 200) | 0, size: 3 + Math.random() * 4, }); } return out; } // ─── The egg SVG: stylized-premium, golden-hour rim light. function EggSVG({ tapStage, hatched }) { // Reveal cracks 1..tapStage; on tapStage>=10, shell shatters visually (we fade it). const reveal = Math.min(tapStage, CRACK_PATHS.length); return ( ); } // ─── The nest — a woven golden basket beneath the egg. function NestSVG() { return ( ); } // ─── The coupon card — multi-step unfold reveal function CouponCard({ brandName, headline, body, percent, ctaLabel, onCta, visible }) { return (
{brandName} · A token

{headline}

{percent}% off

{body}

); } // ─── The main reusable egg component function CrackableEgg({ brandName = "Yolk & Gold", couponHeadline = "You cracked it.", couponBody = "10% off your table — just show us this when you sit down.", percentOff = 10, ctaLabel = "Reserve a table", tapCount = 10, hintAfterMs = 8000, onHatch, onReserve, }) { const [taps, setTaps] = useState(0); const [hatched, setHatched] = useState(false); const [showHint, setShowHint] = useState(false); const [tapping, setTapping] = useState(false); const [showCoupon, setShowCoupon] = useState(false); const [showReopen, setShowReopen] = useState(false); const [flash, setFlash] = useState(null); // {text, key} const [shards, setShards] = useState(null); // [{tx,ty,r,d}] const [sparkles, setSparkles] = useState(null); const [hatchFlash, setHatchFlash] = useState(false); const buttonRef = useRef(null); const lastTapAt = useRef(0); const hintTimer = useRef(null); const tapClassTimer = useRef(null); const flashKey = useRef(0); // Hint timer — show after N ms of idle (no taps) useEffect(() => { if (hatched) return; clearTimeout(hintTimer.current); hintTimer.current = setTimeout(() => { if (Date.now() - lastTapAt.current >= hintAfterMs - 100) { setShowHint(true); } }, hintAfterMs); return () => clearTimeout(hintTimer.current); }, [taps, hatched, hintAfterMs]); const handleTap = useCallback((e) => { if (hatched) return; e.preventDefault(); lastTapAt.current = Date.now(); setShowHint(false); // per-tap spring class setTapping(false); requestAnimationFrame(() => { setTapping(true); clearTimeout(tapClassTimer.current); tapClassTimer.current = setTimeout(() => setTapping(false), 380); }); const next = taps + 1; setTaps(next); // micro-feedback for the final escalating moments const txt = feedbackForTap(next, tapCount); if (txt) { flashKey.current += 1; setFlash({ text: txt, key: flashKey.current }); setTimeout(() => setFlash(null), 1100); } // HATCH if (next >= tapCount) { setTimeout(() => triggerHatch(), 120); } }, [taps, hatched, tapCount]); const triggerHatch = useCallback(() => { setHatched(true); setShards(makeShards(12)); setSparkles(makeSparkles(14)); setHatchFlash(true); // Reveal the coupon after the burst peak setTimeout(() => setShowCoupon(true), 380); setTimeout(() => setShowReopen(true), 2400); setTimeout(() => setHatchFlash(false), 1000); onHatch?.(); }, [onHatch]); const closeCoupon = useCallback(() => { setShowCoupon(false); }, []); const reopenCoupon = useCallback(() => { setShowCoupon(true); }, []); const isFragile = taps >= Math.max(6, tapCount - 3) && !hatched; return (