// mocks.jsx — Mocked secondary screens (favorites, report, filter panel) // We have one real screenshot (the map). These fill the other device frames. // ────────────────────────────────────────────────────────── // Small inline icons (24px viewBox) // ────────────────────────────────────────────────────────── const Ico = { heart: (c = 'currentColor') => ( ), bolt: (c = 'currentColor') => ( ), drop: (c = 'currentColor') => ( ), alert: (c = 'currentColor') => ( ), flame: (c = 'currentColor') => ( ), wind: (c = 'currentColor') => ( ), search: (c = 'currentColor') => ( ), download: (c = 'currentColor') => ( ), mail: (c = 'currentColor') => ( ), check: (c = 'currentColor') => ( ), chev: (c = 'currentColor') => ( ), pin: (c = 'currentColor') => ( ), rail: (c = 'currentColor') => ( ), star: (c = 'currentColor') => ( ), leaf: (c = 'currentColor') => ( ), }; // ────────────────────────────────────────────────────────── // Phone screen: Favorites list // ────────────────────────────────────────────────────────── function PhoneFavorites({ dark = false }) { const bg = dark ? '#0b0d12' : '#ffffff'; const card = dark ? '#161922' : '#f6f5f1'; const text = dark ? '#e8e9ec' : '#1a1a1d'; const dim = dark ? 'rgba(232,233,236,.55)' : 'rgba(26,26,29,.55)'; const div = dark ? 'rgba(255,255,255,.06)' : 'rgba(0,0,0,.06)'; const accent = dark ? '#a78bff' : '#5b46d4'; const items = [ { name: '142 Elm Street', city: 'Asheville, NC', issues: 3, top: 'EMF', color: accent, ico: Ico.bolt }, { name: '88 Maple Ave', city: 'Raleigh, NC', issues: 1, top: 'Water Quality', color: '#3aa3ff', ico: Ico.drop }, { name: 'Lake Lure Cabin', city: 'Lake Lure, NC', issues: 0, top: 'All clear', color: '#34c79a', ico: Ico.check }, { name: '21 Birch Lane', city: 'Greenville, SC', issues: 2, top: 'Contam. land', color: '#d97f3b', ico: Ico.alert }, { name: '305 Oak Run', city: 'Charlotte, NC', issues: 4, top: 'Noise', color: '#e68a3a', ico: Ico.wind }, ]; return (
My Homes
Favorites
{Ico.search(dim)} Search saved properties…
{items.map((it, i) => (
{it.ico(it.color)}
{it.name}
{it.city} · {it.top}
{it.issues === 0 ? 'Clear' : `${it.issues} flags`}
))}
{['Map','Favorites','Reports','Account'].map((l, i) => (
{l.toUpperCase()}
))}
); } // ────────────────────────────────────────────────────────── // Phone screen: Report (renders the actual PDF report image) // ────────────────────────────────────────────────────────── function PhoneReport({ dark = false, bare = false }) { const bg = dark ? '#0b0d12' : '#ffffff'; const card = dark ? '#161922' : '#f6f5f1'; const text = dark ? '#e8e9ec' : '#1a1a1d'; const dim = dark ? 'rgba(232,233,236,.55)' : 'rgba(26,26,29,.55)'; const div = dark ? 'rgba(255,255,255,.06)' : 'rgba(0,0,0,.06)'; const accent = dark ? '#a78bff' : '#5b46d4'; if (bare) { return (
report
); } return (
{/* Compact top bar */}
REPORT
{Ico.mail(text)}
{Ico.download(text)}
{/* Scrolling report content — shows the actual PDF */}
report
{/* Footer CTA */}
); } // ────────────────────────────────────────────────────────── // Phone screen: Mini map preview (for the dark variant hero) // ────────────────────────────────────────────────────────── function PhoneMapPreview({ dark = true }) { // Stylized abstract map (radial streets + chips) const bg = dark ? '#0b0d12' : '#ffffff'; const card = dark ? 'rgba(22,25,34,.92)' : 'rgba(255,255,255,.92)'; const text = dark ? '#e8e9ec' : '#1a1a1d'; const dim = dark ? 'rgba(232,233,236,.55)' : 'rgba(26,26,29,.55)'; const accent = dark ? '#a78bff' : '#5b46d4'; return (
{/* fake map */} {/* street lines */} {Array.from({ length: 16 }).map((_, i) => { const a = (i / 16) * Math.PI * 2; const x2 = 200 + Math.cos(a) * 500; const y2 = 370 + Math.sin(a) * 500; return ; })} {/* rings */} {/* dots */} {[[150,300,accent],[260,330,'#d97f3b'],[180,420,'#3aa3ff'],[240,440,accent],[200,360,'#fff'],[120,400,'#e68a3a'],[280,380,'#34c79a']].map(([x,y,c], i) => ( ))} {/* top search */}
{Ico.search(dim)} 142 Elm Street, Asheville
{/* bottom sheet */}
Around this home
5 things to know
{[ { c: accent, l: 'EMF — 12 sources within 1 mi', i: Ico.bolt }, { c: '#d97f3b', l: 'Contaminated land — 3 nearby', i: Ico.alert }, { c: '#34c79a', l: 'Air quality — Good (AQI 42)', i: Ico.wind }, ].map((r, i) => (
{r.i(r.c)}
{r.l}
))}
); } // Expose Object.assign(window, { Ico, PhoneFavorites, PhoneReport, PhoneMapPreview });