// Phone mock — Estimado opt-in hero animation. // // Scenes: // 1. Camera app — viewfinder over real bathroom shots; contractor snaps 3 photos. // 2. Transition — quick Estimado-icon pop. // 3. Estimado — chat thread: photos uploaded → contractor types scope fast // → AI thinks → AI returns the estimate. // // All scenes share one iPhone bezel so it reads as a single device session. const PD_PHOTOS = [ '/waitlist/assets/bath-1.jpg', // shower w/ glass doors close-up '/waitlist/assets/bath-2.jpg', // dark vanity + tall mirror '/waitlist/assets/bath-3.jpg', // shower + toilet wider shot ]; // Contractor's scope message — typed out into the chat thread. const PD_USER_MESSAGE = [ "10×5 shower — make it modern.", "• Full white 10×10 tile", "• Modern white vanity", "• 7×5 mirror, floor to ceiling", "• Frameless shower door", ].join('\n'); // AI's estimate — each line maps back to a request in the message. const PD_LINES = [ ['Demo', '$1,230'], ['Shower prep', '$1,350'], ['Tile · labor + materials', '$4,870'], ['Frameless shower + install', '$3,120'], ['Modern white vanity + install', '$3,530'], ['7×5 mirror', '$985' ], ['Plumbing + misc', '$1,150'], ]; const PD_TOTAL = '$16,235'; const PD_PROJECT = 'Bathroom Remodel'; // Scene timeline (each tick = 600ms): // 0 camera open, viewfinder = bath-1, no snaps // 1 SNAP photo 1 → viewfinder advances to bath-2 // 2 SNAP photo 2 → bath-3 // 3 SNAP photo 3 (hold) // 4 brief Estimado-icon transition // 5 app opens (empty chat) // 6 photos upload bubble (right) // 7..8 contractor sends text message (typewriter, 1.2s budget) // 9 AI thinking dots (left) // 10..16 estimate line items reveal (7 items, one per tick) // 17 total appears // 18..20 hold const PD_TOTAL_TICKS = 21; const TICK_MS = 600; const CAMERA_END = 3; const TRANSITION_TICK= 4; const APP_START_TICK = 5; function PhoneDemo({ height = 400 }) { const [tick, setTick] = React.useState(0); React.useEffect(() => { const id = setInterval(() => setTick((t) => (t + 1) % PD_TOTAL_TICKS), TICK_MS); return () => clearInterval(id); }, []); let scene = 'camera'; if (tick === TRANSITION_TICK) scene = 'transition'; else if (tick >= APP_START_TICK) scene = 'app'; const width = Math.round(height * 0.50); const radius = Math.round(height * 0.105); const innerRadius = radius - 5; return (