/* ============================================================ Phone screen components — interactive overlays on Seedream images Each screen uses the Seedream image as background and adds real HTML interactive controls on top. ============================================================ */ const { useState, useEffect, useRef, useCallback } = React; // ───────────────────────────────────────── // Utility: preference option data // ───────────────────────────────────────── const PREFERENCE_QUESTIONS = [ { key: 'household', question: 'Who are you finding a home for?', subtitle: 'Tell us about your household so we can find the right home for your family.', options: [ { value: 'single', label: 'Just me', icon: 'single' }, { value: 'couple', label: 'A couple', icon: 'couple' }, { value: 'family', label: 'A growing family', icon: 'family' }, { value: 'multi-gen', label: 'A multi-generation family', icon: 'multigen' }, ], }, { key: 'lifestage', question: 'Which stage of life best describes you?', subtitle: 'Your life stage shapes the kind of home that fits best.', options: [ { value: 'just-started', label: 'Just starting out', icon: 'sprout' }, { value: 'growing', label: 'Growing with kids', icon: 'kids' }, { value: 'nesting', label: 'Settled and nesting', icon: 'nest' }, { value: 'empty-nest', label: 'Empty nesters', icon: 'bird' }, ], }, { key: 'priority', question: 'What matters most in your daily life?', subtitle: 'Pick the one that would make the biggest difference.', options: [ { value: 'green-space', label: 'Green space & nature', icon: 'leaf' }, { value: 'privacy', label: 'Privacy & quiet', icon: 'shield' }, { value: 'entertaining', label: 'Hosting & entertaining', icon: 'glass' }, { value: 'proximity', label: 'Close to amenities', icon: 'pin' }, ], }, { key: 'spaceStyle', question: 'What\'s your ideal home feeling?', subtitle: 'The mood you want to walk into every day.', options: [ { value: 'bright-open', label: 'Bright and open', icon: 'sun' }, { value: 'cozy-traditional', label: 'Warm and cozy', icon: 'candle' }, { value: 'modern-minimal', label: 'Sleek and modern', icon: 'cube' }, { value: 'outdoor-focused', label: 'Indoor-outdoor flow', icon: 'door' }, ], }, { key: 'communityVibe', question: 'What kind of community feels like home?', subtitle: 'The neighborhood matters as much as the house.', options: [ { value: 'walkable-family', label: 'Walkable & family-friendly', icon: 'walk' }, { value: 'quiet-suburban', label: 'Quiet suburban feel', icon: 'house' }, { value: 'vibrant-urban', label: 'Vibrant and connected', icon: 'city' }, { value: 'nature-retreat', label: 'Nature retreat', icon: 'mountain' }, ], }, ]; // ───────────────────────────────────────── // Icon components for preference options // ───────────────────────────────────────── function PrefIcon({ type }) { const icons = { single: ( ), couple: ( ), family: ( ), multigen: ( ), sprout: ( ), kids: ( ), nest: ( ), bird: ( ), leaf: ( ), shield: ( ), glass: ( ), pin: ( ), sun: ( ), candle: ( ), cube: ( ), door: ( ), walk: ( ), house: ( ), city: ( ), mountain: ( ), }; return (

{icons[type] || icons.single}

); } // ───────────────────────────────────────── // Screen 01: Discover // ───────────────────────────────────────── function DiscoverScreen() { const { dispatch } = useApp(); const handleStart = () => { dispatch({ type: 'NEXT_STEP' }); }; const handleExplore = () => { // Jump directly to match step dispatch({ type: 'SET_STEP', step: 2 }); }; return (

{/* Top: ambient visual from background image (top 40% with fade) */}

{/* Solid bottom panel — hides baked-in image text, provides clean surface for native HTML copy so nothing double-renders */}

{/* Content — all text lives here, fully on the solid panel */}

AI-Powered Home Match

Find the home where your life fits.

Tell us how you want to live. We'll match you with homes and communities that fit your lifestyle — then show you what a day in your future home could look like.

Free demo · No real data stored

); } // ───────────────────────────────────────── // Screen 02: Preferences // ───────────────────────────────────────── function PreferencesScreen() { const { state, dispatch } = useApp(); const [qIndex, setQIndex] = useState(0); const questions = PREFERENCE_QUESTIONS; const currentQ = questions[qIndex]; const currentVal = state.preferences[currentQ.key]; const progress = ((qIndex + 1) / questions.length) * 100; const handleSelect = (value) => { dispatch({ type: 'SET_PREFERENCE', key: currentQ.key, value }); }; const handleNext = () => { if (qIndex < questions.length - 1) { setQIndex(qIndex + 1); } else { dispatch({ type: 'NEXT_STEP' }); } }; const handlePrev = () => { if (qIndex > 0) { setQIndex(qIndex - 1); } else { dispatch({ type: 'PREV_STEP' }); } }; const canContinue = currentVal !== null; return (

{/* Image header band — top photography fades into solid dark below (the baked-in image copy is fully covered by the solid panel) */}

{/* Progress bar */}

{qIndex + 1}/{questions.length}

{/* Question card — sits fully on solid background, no ghost text */}

{questions[qIndex].key === 'household' ? 'Step 1 of 5' : questions[qIndex].key === 'lifestage' ? 'Step 2 of 5' : questions[qIndex].key === 'priority' ? 'Step 3 of 5' : questions[qIndex].key === 'spaceStyle' ? 'Step 4 of 5' : 'Step 5 of 5'}

{currentQ.question}

{currentQ.subtitle}

{/* Options */}

{currentQ.options.map((opt) => { const selected = currentVal === opt.value; return ( ); })}

{/* Continue button */}

); } // Expose window.DiscoverScreen = DiscoverScreen; window.PreferencesScreen = PreferencesScreen; window.PREFERENCE_QUESTIONS = PREFERENCE_QUESTIONS; window.PrefIcon = PrefIcon;