// Phone frame + three app screens that cycle: Map w/ boundaries, Circle-an-area, Pin details const { useState, useEffect, useRef } = React; function PhoneFrame({ children, width = 340 }) { const h = Math.round(width * (852/393)); return (
{children}
{/* Dynamic island */}
); } // Screen 1: Main map with property boundaries function ScreenMap() { return (
{/* Satellite map tile — stylized */} {/* Parcels */} {/* Road */} {/* River */} {/* Live location */} {/* Status bar */}
9:41 ●●●● 5G ▮
{/* Search bar */}
Search address or owner…
{/* Tool rail */}
{["layers","circle","pin","measure","offline"].map((t,i) => (
{t === "circle" ? : t === "pin" ? : t === "layers" ? : t === "measure" ? : }
))}
{/* Bottom card */}
Parcel · 0.45 ac
Stephany Bryan
4291 Willow Creek Rd
Owner details · Save pin · Share
); } // Screen 2: Circle an area function ScreenCircle() { return (
{/* Circled region */} {/* Highlight pins inside */}
9:41 ●●●● 5G ▮
{/* Bottom sheet — properties list */}
5 properties
IN SELECTED AREA · 12.4 ac
Export
{[ { name: "J. Morrison", addr: "2104 Ridge Line Rd", ac: "3.1" }, { name: "Kestrel Holdings LLC", addr: "2140 Ridge Line Rd", ac: "2.8" }, { name: "D. & M. Alvarez", addr: "2180 Ridge Line Rd", ac: "1.9" }, ].map((p,i) => (
{p.name}
{p.addr}
{p.ac} ac
))}
); } // Screen 3: Pin detail / property info function ScreenDetail() { return (
9:41 ●●●● 5G ▮
{/* Mini map top */}
Back
{/* Detail card */}
Parcel 014-227-031
Stephany Bryan
4291 Willow Creek Rd · Brazos County
{[ ["Acreage","24.8 ac"], ["Last sale","Apr 2022"], ["Assessed","$312,400"], ["Zoning","AG-2"], ].map(([k,v]) => (
{k}
{v}
))}
Owner contact available
{/* CTA */}
Save pin
Contact owner
); } function PhoneMockup({ screen = "cycle", width = 340 }) { const [idx, setIdx] = useState(0); const screens = [, , ]; useEffect(() => { if (screen !== "cycle") return; const t = setInterval(() => setIdx(i => (i + 1) % screens.length), 3800); return () => clearInterval(t); }, [screen]); const current = screen === "cycle" ? idx : screen === "map" ? 0 : screen === "circle" ? 1 : 2; return (
{screens.map((s, i) => (
{s}
))}
{screen === "cycle" && (
{screens.map((_,i) => (
)}
); } window.PhoneMockup = PhoneMockup; window.ScreenMap = ScreenMap; window.ScreenCircle = ScreenCircle; window.ScreenDetail = ScreenDetail; window.PhoneFrame = PhoneFrame;