— HEADQUARTERS

{isOpen?'OPEN NOW':'AFTER HOURS'}

Oklahoma City

OKLAHOMA · EST. 2024

{/* Radar — coords visualized */}

{/* Crosshairs */}

{/* Concentric rings */} {[18,38,58].map(r=>(

))} {/* Sweeping radar line */}

{/* HQ pin */}

{/* Outpost dots */} {[ {x:32,y:38},{x:71,y:28},{x:78,y:62},{x:24,y:70},{x:58,y:82},{x:14,y:48},{x:88,y:50} ].map((p,i)=>(

))} {/* Coords label */}

35.4676°N

97.5164°W

{/* Live clock + contacts */}

{time}

{date} · CDT

{[[publicContact.email,`mailto:${publicContact.email}`],[publicContact.phone,publicContact.phoneHref]].map(([l,h])=>{ const evt = h.startsWith('mailto:') ? 'email_click' : 'phone_call_click'; return ( window.mwtTrack&&window.mwtTrack(evt,{page_section:'services_card'})} style={{fontFamily:'var(--font-mono)',fontSize:11, color:'var(--fg-3)',textDecoration:'none',letterSpacing:'0.06em',transition:'color .15s'}} onMouseEnter={e=>e.currentTarget.style.color='var(--accent)'} onMouseLeave={e=>e.currentTarget.style.color='var(--fg-3)'}>{l} ); })}

); } /* ---- US Service-Area Map — TopoJSON + tiered regional story ---- Two-column layout (>=900px): map left, info rail right. Three tiers of geographic meaning: home turf (OK), bordering states, real ship destinations. No fake CDN packets, no random sampling — the numbers and cities are deterministic and tell the actual studio story. */ function USNetworkMap() { const [geo, setGeo] = useStSv(null); const [err, setErr] = useStSv(false); // prefers-reduced-motion subscription — the SMIL HQ pulse is the only // infinite animation in this component; gate it on the user's OS-level // motion preference (Copilot review on PR #38). When `reducedMotion` // is true the static HQ dot still renders, just without the pulse. const [reducedMotion, setReducedMotion] = useStSv(false); useEfSv(() => { if (typeof window === 'undefined' || !window.matchMedia) return; const mq = window.matchMedia('(prefers-reduced-motion: reduce)'); const update = () => setReducedMotion(mq.matches); update(); if (mq.addEventListener) mq.addEventListener('change', update); else if (mq.addListener) mq.addListener(update); return () => { if (mq.removeEventListener) mq.removeEventListener('change', update); else if (mq.removeListener) mq.removeListener(update); }; }, []); // Cropped viewBox — drops Pacific/Atlantic gulf vs the original 960x500. const W = 700, H = 460; const HQ = { name:'Oklahoma City', lon:-97.517, lat:35.468 }; // Tiered regional data — sums to 124 across home + border, plus 5 // ship cities below = 129 sites, satisfying the "127+" public stat. const REGIONS = [ { code:'OK', label:'Oklahoma', count:64, tier:'home' }, { code:'TX', label:'Texas', count:28, tier:'border' }, { code:'KS', label:'Kansas', count:12, tier:'border' }, { code:'AR', label:'Arkansas', count: 9, tier:'border' }, { code:'MO', label:'Missouri', count: 7, tier:'border' }, { code:'CO', label:'Colorado', count: 4, tier:'border' }, ]; // Bordering states for the highlight ring around the home turf. // Mirrors REGIONS exactly so the visual highlight, the legend list, // and the "states served" stat all describe the same set. const BORDER_CODES = new Set(['TX','KS','AR','MO','CO']); const HOME_CODE = 'OK'; // Real ship destinations — five hand-picked cities, no random sampling. const SHIP_CITIES = [ { name:'Los Angeles', lon:-118.243, lat:34.052 }, { name:'Denver', lon:-104.990, lat:39.739 }, { name:'Chicago', lon:-87.629, lat:41.878 }, { name:'Atlanta', lon:-84.388, lat:33.749 }, { name:'Boston', lon:-71.059, lat:42.361 }, ]; useEfSv(() => { let cancelled = false; const loadScript = (src) => new Promise((resolve, reject) => { // Skip if already on window const existing = document.querySelector(`script[src="${src}"]`); if (existing) { if (existing.dataset.loaded === '1') return resolve(); existing.addEventListener('load', () => resolve()); existing.addEventListener('error', () => reject()); return; } const s = document.createElement('script'); s.src = src; s.onload = () => { s.dataset.loaded = '1'; resolve(); }; s.onerror = () => reject(); document.head.appendChild(s); }); (async () => { try { // Self-hosted under /lib so the map can't be broken by adblockers, // privacy extensions, corporate firewalls, or stricter CSPs that // would block third-party CDNs. if (!window.d3) await loadScript('/lib/d3.min.js'); if (!window.topojson) await loadScript('/lib/topojson-client.min.js'); if (cancelled) return; const d3l = window.d3, tp = window.topojson; if (!d3l || !tp) { setErr(true); return; } const r = await fetch('/lib/us-atlas-states-10m.json'); const us = await r.json(); if (cancelled) return; const nation = tp.feature(us, us.objects.nation); const states = tp.feature(us, us.objects.states); // Slight inset so HQ + service ring don't crowd the cropped viewBox. const proj = d3l.geoAlbersUsa().fitExtent( [[16, 24], [W - 16, H - 28]], nation ); const path = d3l.geoPath().projection(proj); setGeo({ nation, states, proj, path }); } catch (e) { if (!cancelled) setErr(true); } })(); return () => { cancelled = true; }; }, []); const hqPos = geo ? geo.proj([HQ.lon, HQ.lat]) : null; // Project ship cities. filter() drops anything geoAlbersUsa rejects. const shipPts = geo ? SHIP_CITIES.map(c => ({ ...c, pos: geo.proj([c.lon, c.lat]) })) .filter(c => c.pos) : []; // 250-mile service radius in projected pixels. geoAlbersUsa is composite, // so we measure by projecting a point ~250 mi due east of HQ and taking // the resulting screen-space distance. ~250 mi ≈ 3.62° lon at 35.5° N. let serviceR = 0; if (geo && hqPos) { const eastPt = geo.proj([HQ.lon + 3.62, HQ.lat]); if (eastPt) serviceR = Math.abs(eastPt[0] - hqPos[0]); } // Reduced 4-stat strip (was 6). "States served" counts every state // visualized on the map: 1 home (OK) + 5 bordering (TX/KS/AR/MO/CO) // + 4 unique ship-destination states (CA/IL/GA/MA; Denver/CO already // counted in the bordering set) = 10. Sites total reconciles with // REGIONS counts plus the 5 ship cities. const STATS = [ { v:'127+', l:'Sites shipped' }, { v:'10', l:'States served' }, { v:window.MWT_PRICING.startingPriceShort, l:'Starting price' }, { v:'100%', l:'Hand-built' }, ]; // Helper: state-code lookup from a TopoJSON feature. const codeOf = (f) => (f.properties && (f.properties.code || f.properties.iso || f.properties.STUSPS)) || null; // us-atlas 10m only ships state name + id; map id to USPS code. const ID_TO_CODE = { '01':'AL','02':'AK','04':'AZ','05':'AR','06':'CA','08':'CO','09':'CT','10':'DE', '11':'DC','12':'FL','13':'GA','15':'HI','16':'ID','17':'IL','18':'IN','19':'IA', '20':'KS','21':'KY','22':'LA','23':'ME','24':'MD','25':'MA','26':'MI','27':'MN', '28':'MS','29':'MO','30':'MT','31':'NE','32':'NV','33':'NH','34':'NJ','35':'NM', '36':'NY','37':'NC','38':'ND','39':'OH','40':'OK','41':'OR','42':'PA','44':'RI', '45':'SC','46':'SD','47':'TN','48':'TX','49':'UT','50':'VT','51':'VA','53':'WA', '54':'WV','55':'WI','56':'WY', }; const stateCode = (f) => { const c = codeOf(f); if (c) return c; const id = String(f.id || '').padStart(2,'0'); return ID_TO_CODE[id] || null; }; return (

{/* HUD top bar — service-area framing, not "active network" theater */}

— SERVICE AREA · OKC + REGIONAL

35.47°N 97.52°W · OKC HQ LIVE · {REGIONS.length} STATES PRIMARY

{/* Two-column body: map left, info rail right (>=900px). The grid fills the cell horizontally so it doesn't grow tall. */}

{/* LEFT — SVG map. The right border is applied by a globals.css rule on .mw-bento-usmap-grid > :first-child only at >=900px so it doesn't leave a stray hairline at the right edge of the full-width single-column layout below 900px. */}

{/* RIGHT — info rail */}

— SERVICE AREA · OKC HQ

Oklahoma City

35.47°N 97.52°W · EST. 2024

{/* Regional breakdown — code | name | count */}

{REGIONS.map(r => { const isHome = r.tier === 'home'; return (

{r.code} {r.label} {r.count}

); })}

{/* Recent shipments — pairs the map's accent-colored ship dots with their cities and the kind of build delivered. Replaces the previous one-line italic ("Remote-built…") which the operator flagged as "useless" — same five cities the map labels, now with concrete project context so the right rail reads as a small live-feed instead of filler copy. */}

— RECENT SHIPMENTS 5 / 5

{[ { c:'Los Angeles', t:'Boutique store', k:'CA' }, { c:'Denver', t:'Real-estate listings', k:'CO' }, { c:'Chicago', t:'Service-business site', k:'IL' }, { c:'Atlanta', t:'Custom SaaS portal', k:'GA' }, { c:'Boston', t:'Multi-page brand', k:'MA' }, ].map((s, i) => (

))}

{/* Stats strip — 4 stats, full width across both columns, smaller padding than the original 6-stat strip. */}

{STATS.map((s,i) => (

0?'1px solid var(--border)':'none', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', textAlign:'center' }}>

{s.v}

{s.l}

))}

); } /* ---- Process Cell — animated horizontal timeline w/ visual candy ---- */ function ProcessCell() { const steps = [ { n:'01', t:'Consult', d:'30 min · free call', note:'Tell us what you need', glyph:'phone', metric:'30 MIN', deliverables:['Discovery call','Goals + audience','Rough budget'] }, { n:'02', t:'Scope', d:'1–3 day write-up', note:'Fixed price, no surprises', glyph:'doc', metric:'1-3 DAYS', deliverables:['Sitemap + features','Fixed quote','Timeline locked'] }, { n:'03', t:'Build', d:'2–12 weeks', note:'Real people, real craft', glyph:'hammer', metric:'2-12 WKS', deliverables:['Design previews','Hand-coded site','Weekly check-ins'] }, { n:'04', t:'Ship', d:'Deploy + handoff', note:'Yours forever, no lock-in', glyph:'rocket', metric:'GO LIVE', deliverables:['Domain + hosting','Owner training','30-day support'] }, ]; const [active, setActive] = useStSv(0); const [auto, setAuto] = useStSv(true); useEfSv(()=>{ if(!auto) return; const t=setInterval(()=>setActive(a=>(a+1)%steps.length),2400); return()=>clearInterval(t); },[auto]); // Glyphs as inline SVG — small, on-brand, monochrome const Glyph = ({k, color}) => { const s = { fill:'none', stroke:color, strokeWidth:1.4, strokeLinecap:'round', strokeLinejoin:'round' }; if (k==='phone') return ; if (k==='doc') return ; if (k==='hammer') return ; if (k==='rocket') return ; return null; }; return (

setAuto(false)} onMouseLeave={()=>setAuto(true)}> {/* Subtle grid background — opacity reduced for the smaller cell */}

— HOW IT WORKS

STEP {steps[active].n} / 04

{/* Two-column body: headline+pills (left), vertical rail (right) */}

{/* LEFT — active step content */}

{steps[active].n} {steps[active].t}

{steps[active].note}

{/* Deliverables strip — tighter padding */}

{steps[active].deliverables.map((d)=>(

◆ {d}

))}

{/* RIGHT — vertical progress rail. The rail sits 14px from the right edge of this column so the dots can sit on the rail with their metric labels flowing LEFT into the available space (toward the headline column). The active dot is 24px and inactive 12px; both center on the rail. */}

{/* Base vertical rail — anchored to right edge */}

{/* Active progress fill grows top-to-bottom */}

{steps.map((s,i)=>{ const isActive = i === active; const isDone = i < active; const dotSize = isActive ? 24 : 12; // Position each dot at 0%, 33%, 66%, 100% along the rail. const yPct = (i / (steps.length - 1)) * 100; // Activate jumps the active step without locally calling // setAuto(false). Desktop hover pause/resume is handled by // the outer ProcessCell wrapper's onMouseEnter/onMouseLeave; // calling setAuto(false) here would persist on touch // devices, where no matching mouseLeave fires to re-arm // auto-advance — Codex P2 review on PR #38. const activate = ()=>setActive(i); return (

{ if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); activate(); } }} style={{ position:'absolute', left:0, right:0, top:`calc(${yPct}% - ${dotSize/2}px)`, height:dotSize, cursor:'pointer'}}> {/* Metric label — anchored to the LEFT of the dot, right edge stops 8px before the dot's left edge. Rail center sits at right:15 (right:14 + width:2/2), so dot left edge is at right:(15 + dotSize/2). */}

{s.metric} · {s.d.toUpperCase()}

{/* Dot — centered on the rail (rail center at right:15) */}

{isActive &&

} {isDone && !isActive &&

✓

}

); })}

{auto ? 'AUTO-ADVANCING · HOVER TO PAUSE' : 'PAUSED · HOVER A STEP'}

window['mwtTrack'] && window['mwtTrack']('select_content', { content_type: 'cta', content_id: 'services_free_consult', cta_label: 'Start with a free consult', page_section: 'services_process', page_path: typeof window !== 'undefined' ? window.location.pathname : '', })} >Start with a free consult

); } /* ---- Spectrum Cell ---- */ /* Wireframe primitives drawn for the morphing website preview. Each receives a `weight` 0–1 indicating how "present" the layout this primitive belongs to currently is — all visual props (opacity, transform, stroke) ramp smoothly off that single number so the box feels like one continuous mockup reorganizing itself, not five layouts crossfading. */ function WirePrim({ weight, children, translate=[0,0], origin='50% 50%' }) { const w = Math.max(0, Math.min(1, weight)); // Ease the weight so primitives "pop" near full presence and fade slow when leaving const eased = w * w * (3 - 2 * w); const tx = translate[0] * (1 - eased); const ty = translate[1] * (1 - eased); const scale = 0.92 + 0.08 * eased; return ( {children} ); } /* ---- Realistic site previews — one full layout per spectrum stage. ---- Each renders inside a 4:3 viewport. Designed to look like an actual site you'd recognize at a glance: a barber landing page, a car listings grid, an editorial multi-page brand, a shop, and a SaaS dashboard. */ /* Subtle striped placeholder for imagery — feels intentional, not lazy. */ function PreviewImg({ style, label, dark=false, hue='var(--accent)' }) { return (

{label}

); } /* SIMPLE — barber landing page */ function PreviewSimple() { return (

{/* Top nav */}

MAIN ST. BARBER

SERVICESHOURSBOOK ↗

{/* Hero — fills the pane */}

EST. 1998 · DOWNTOWN OKC

A clean cut,
done right.

Walk-ins welcome. Appointments preferred. Hot towel finish on every cut. Three barbers, six chairs, no fuss.

BOOK NOW →

(405) 555-0142

{/* Footer strip */}

MON–SAT · 9–7124 N MAIN ST@MAINSTBARBER

); } /* LISTINGS — car inventory page */ function PreviewListings() { const cars = [ {y:'2020',m:'Silverado 1500',mi:'48k',p:'$32,900',c:'#1f3b5a'}, {y:'2018',m:'F-150 XLT',mi:'67k',p:'$28,400',c:'#7a2727'}, {y:'2021',m:'Tacoma TRD',mi:'31k',p:'$36,200',c:'#2d4a2d'}, {y:'2019',m:'RAM 1500',mi:'54k',p:'$29,750',c:'#3a3a3a'}, {y:'2017',m:'Tundra SR5',mi:'82k',p:'$24,600',c:'#5c4a2d'}, {y:'2022',m:'Ranger Lariat',mi:'19k',p:'$34,100',c:'#1a1a1a'}, ]; return (

{/* Header */}

RED DIRT AUTO

INVENTORY · FINANCING · TRADE-IN

{/* Filter bar */}

FILTER ▾ {['TRUCKS','SUVS','SEDANS','UNDER $25K'].map((f,i)=>( {f} ))} 247 RESULTS · SORT: NEWEST ▾

{/* Grid — bigger cards, fewer columns to use the space */}

{cars.map((car,i)=>(

{car.y}

{car.m}

{car.mi} MI

{car.p}

))}

); } /* FULL — editorial multi-page brand */ function PreviewFull() { return (

{/* Top nav */}

Foundry Press

WORK JOURNALSTUDIOCONTACT

{/* Editorial hero */}

Letterpress, made in the heartland.

VOL. 14 · 2026

{/* Tile row — bigger imagery, fuller meta */}

FEATURED · 001

The Larkspur Wedding Suite

WEDDING · COTTON 220 · 2026

READ →

Cedar & Bone Menus

HOSPITALITY · 2025

Plainsong Calling Cards

STATIONERY · 2024

{/* Footer rule */}

EST. 2011 · OKLAHOMA CITYBOOK A STUDIO VISIT →

); } /* STORE — eCommerce shop */ function PreviewStore() { const items = [ {n:'Cast Iron Skillet',d:'12-inch · pre-seasoned',p:'$48',c:'#3a3a3a',badge:'NEW'}, {n:'Walnut Cutting Board',d:'End-grain · oiled',p:'$72',c:'#5c3a1f'}, {n:'Stoneware Mug Set',d:'Set of 4 · matte',p:'$36',c:'#7a6b4a'}, {n:'Linen Apron',d:'Heavyweight · clay',p:'$54',c:'#a64a2a'}, ]; return (

{/* Header */}

PRAIRIE GOODS

SHOPJOURNALSEARCH BAG 3

{/* Section header */}

Kitchen essentials

FREE SHIP OVER $75

{/* Product grid — 4 cards filling height with images + meta */}

{items.map((it,i)=>(

{it.badge &&

{it.badge}

}

{it.n}

{it.p}

{it.d}

))}

); } /* CUSTOM — SaaS dashboard */ function PreviewCustom() { return (

{/* Top bar */}

SILO ANALYTICS

/ DASHBOARD / OVERVIEW

LAST 30D ▾ JT

{/* Body: sidebar + content */}

{/* Sidebar */}

{[{l:'OVERVIEW',a:true},{l:'YIELD'},{l:'MOISTURE'},{l:'TEMP'},{l:'ALERTS'},{l:'REPORTS'},{l:'SETTINGS'}].map((s)=>(

{s.l}

))}

{/* Main */}

{/* KPI row spans full */}

{[{l:'TOTAL YIELD',v:'14,820',d:'BU',c:'#a64a2a',t:'+8.2%'}, {l:'AVG MOISTURE',v:'13.4',d:'%',c:'#7a9a7a',t:'+0.3%'}, {l:'BIN TEMP',v:'52',d:'°F',c:'#7a8aa6',t:'STABLE'}, {l:'ACTIVE BINS',v:'18 / 24',d:'',c:'#f7f4ec',t:'6 IDLE'}].map((k,i)=>(

{k.l}

{k.v} {k.d}

{k.t}

))}

{/* Chart */}

Yield by week

BU × 1000

{/* Activity feed */}

Activity

{[ {t:'Bin 14',e:'Moisture +0.4%',c:'#a64a2a',time:'2m'}, {t:'Bin 07',e:'Aeration on',c:'#7a9a7a',time:'14m'}, {t:'Bin 21',e:'Temp alert',c:'#a64a2a',time:'1h'}, {t:'Bin 03',e:'Loaded 412 bu',c:'#7a8aa6',time:'3h'}, {t:'Bin 19',e:'Sensor sync',c:'#7a9a7a',time:'5h'}, ].map((a,i)=>(

{a.t} {a.e} {a.time}

))}

{/* Bottom table — header + rows */}

BINCROPLEVELTEMPSTATUS

{[ ['#14','Hard Red Wheat','94%','51°F',{t:'OK',c:'#7a9a7a'}], ['#07','Yellow Corn','71%','54°F',{t:'AERATING',c:'#7a8aa6'}], ['#21','Soybean','38%','62°F',{t:'ALERT',c:'#a64a2a'}], ].map((r,i)=>(

{r[0]} {r[1]}{r[2]}{r[3]} {r[4].t}

))}

); } function SpectrumCell() { const [pos, setPos] = useStSv(35); const [isDragging, setIsDragging] = useStSv(false); // Layout-shift-free pin: once we decide to engage the tall scroll-pin // shell, we keep it tall for the rest of the page-load even after the // user breaks out of the auto-advance. Toggling shell height mid-scroll // would jerk the document. `pinShellTall` is set true once and never // reset. `pinArmedRef` (ref-only, not state — render never reads it) // controls whether scroll deltas drive `pos` and whether the // auto-sweep is allowed to fire. `stickyEngaged` controls whether // the inner is `position: sticky` — released once the user has // fully scrubbed through the shell (ride-the-bike pattern: after // the first complete pass, subsequent scroll-throughs do NOT re-pin). const [pinShellTall, setPinShellTall] = useStSv(false); const [stickyEngaged, setStickyEngaged] = useStSv(true); const trackRef = useRefSv(null); const shellRef = useRefSv(null); // tall outer container const interactedRef = useRefSv(false); // user has dragged/tapped/keyed const pinArmedRef = useRefSv(true); // listener guard const pinShellTallRef = useRefSv(false); // mirrors pinShellTall const reducedMotionRef = useRefSv(false); const stickyEngagedRef = useRefSv(true); // mirrors stickyEngaged const autoSweepRafRef = useRefSv(0); const autoSweepStartRef = useRefSv(0); const idleTimerRef = useRefSv(0); const sweepFiredRef = useRefSv(false); // cap auto-sweep at one per page-load // Price & timeline pulled from window.MWT_PRICING (mwt-v2/pricing.js). // The "custom" tier shows "quote" instead of its short budget here. const P = window.MWT_PRICING.byKind; const stages = [ { x:8, kind:'simple', label:'SIMPLE', note:P.simple.weeks, price:P.simple.budget, url:'mainstreetbarber.com', bizType:'Local service', includes:['1–3 page site','Mobile-perfect','Contact form','Hosting + SSL'] }, { x:28, kind:'listings', label:'LISTINGS', note:P.listings.weeks, price:P.listings.budget, url:'reddirtauto.com/inventory', bizType:'Inventory site', includes:['Search + filter','Up to 500 listings','Image galleries','Owner CMS'] }, { x:50, kind:'full', label:'FULL SITE', note:P.full.weeks, price:P.full.budget, url:'foundrypress.com', bizType:'Multi-page brand', includes:['Multi-page site','Blog + gallery','Forms + bookings','SEO baseline'] }, { x:72, kind:'store', label:'STORE', note:P.store.weeks, price:P.store.budget, url:'prairiegoods.com/shop', bizType:'eCommerce', includes:['Cart + checkout','Stripe payments','Inventory CMS','Order emails'] }, { x:92, kind:'custom', label:'CUSTOM', note:P.custom.weeks, price:'quote', url:'app.siloanalytics.com', bizType:'Custom platform', includes:['Bespoke build','Logins + portals','Integrations + APIs','AI workflows'] }, ]; const hovered = stages.reduce((b,s)=>Math.abs(s.x-pos) { if (interactedRef.current) return; interactedRef.current = true; pinArmedRef.current = false; if (autoSweepRafRef.current) { window.cancelAnimationFrame(autoSweepRafRef.current); autoSweepRafRef.current = 0; } if (idleTimerRef.current) { window.clearTimeout(idleTimerRef.current); idleTimerRef.current = 0; } }; // Pointer-driven position update. Reads pointer x relative to the track bounds. const positionFromPointer = (clientX) => { const el = trackRef.current; if (!el) return; const r = el.getBoundingClientRect(); setPos(Math.max(4, Math.min(96, ((clientX - r.left) / r.width) * 100))); }; const onPointerDown = (e) => { disarmPin(); setIsDragging(true); try { e.currentTarget.setPointerCapture(e.pointerId); } catch (_) {} positionFromPointer(e.clientX); }; const onPointerMove = (e) => { if (!isDragging) return; positionFromPointer(e.clientX); }; const endDrag = (e) => { if (!isDragging) return; setIsDragging(false); try { e.currentTarget.releasePointerCapture(e.pointerId); } catch (_) {} // Compute the snap target from the pointer-up event itself rather than // reading `pos` from React state — the most recent `setPos` from // `onPointerMove` may not have committed yet, which would land the snap // on the wrong stop. Mirrors `positionFromPointer` math against the // current track bounds. const el = trackRef.current; if (!el) { return; } const r = el.getBoundingClientRect(); const live = Math.max(4, Math.min(96, ((e.clientX - r.left) / r.width) * 100)); const nearest = stages.reduce((b,s)=>Math.abs(s.x-live) { const clamped = Math.max(0, Math.min(stages.length - 1, idx)); setPos(stages[clamped].x); }; const onKeyDown = (e) => { if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') { e.preventDefault(); disarmPin(); snapTo(currentIdx - 1); } else if (e.key === 'ArrowRight' || e.key === 'ArrowUp') { e.preventDefault(); disarmPin(); snapTo(currentIdx + 1); } else if (e.key === 'Home') { e.preventDefault(); disarmPin(); snapTo(0); } else if (e.key === 'End') { e.preventDefault(); disarmPin(); snapTo(stages.length - 1); } }; const onStopClick = (xVal) => { disarmPin(); setPos(xVal); }; const onThumbFocus = () => { disarmPin(); }; // ── Reduced-motion detection ───────────────────────────────── // Reduced-motion users never get pin scrubbing or auto-sweep — // they keep the existing manual interaction with no scroll-jacking. useEfSv(() => { if (typeof window === 'undefined' || !window.matchMedia) return; const mq = window.matchMedia('(prefers-reduced-motion: reduce)'); const apply = () => { reducedMotionRef.current = mq.matches; if (mq.matches) { pinArmedRef.current = false; } }; apply(); if (mq.addEventListener) mq.addEventListener('change', apply); else if (mq.addListener) mq.addListener(apply); return () => { if (mq.removeEventListener) mq.removeEventListener('change', apply); else if (mq.removeListener) mq.removeListener(apply); }; }, []); // ── First-entry detection: arm the tall shell + start idle clock ─ // IntersectionObserver fires once, the first time the section enters // the viewport. After that the tall shell stays tall (no layout-shift // mid-scroll), and the idle clock can fire the belt-and-suspenders // auto-sweep if no scroll deltas accumulate. // // Desktop kill switch — responsive, follows resize transitions. // Three reviewers (Gemini / Codex / Copilot) flagged that a // mount-only `matchMedia` snapshot leaks: a session that loads on // mobile then resizes wider keeps the scroll-pin listeners active // on desktop, and a session that loads on desktop then resizes // narrower never installs them. Subscribe to the breakpoint and // engage / disengage on transition. `(max-width: 767px)` (not 768) // because 768 is inclusive — a 768 px tablet would otherwise hit // the mobile path, contradicting the documented 768–1100 px // desktop range. useEfSv(() => { if (typeof window === 'undefined' || !window.matchMedia) return; if (reducedMotionRef.current) return; if (interactedRef.current) return; const mql = window.matchMedia('(max-width: 767px)'); let io = null; const engage = () => { if (io) return; if (reducedMotionRef.current) return; if (interactedRef.current) return; if (pinShellTallRef.current) return; const el = shellRef.current; if (!el) return; let firedEnter = false; io = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (!entry.isIntersecting || firedEnter) return; firedEnter = true; if (io) { io.disconnect(); io = null; } // Engage the tall shell only when the section has actually been // reached. The visual stays sticky-pinned for one extra viewport // height of scroll, which the wheel/touch listener maps to `pos`. pinShellTallRef.current = true; setPinShellTall(true); // The bento cell's row stretches to the tallest cell in that // row, which would balloon the side-by-side AIBanner cell into // a 200vh empty box. Toggle a body-scoped class so the bento // grid pushes the spectrum cell to its own row while pinned. // CSS rule lives in app/globals.css next to the other // .mw-spectrum-* rules. Class is prefixed with the spectrum // namespace so it is unambiguously owned by this component. if (typeof document !== 'undefined' && document.body && document.body.classList) { document.body.classList.add('mw-spectrum-pin-engaged'); } // Belt-and-suspenders: if the user scrolls in but produces no // scroll delta against the shell for ~600ms (e.g., mouse stuck, // user reading), fire a one-shot auto-sweep. Cancelled on any // scroll/pointer/key activity (see disarmPin and the scroll // listener below). idleTimerRef.current = window.setTimeout(() => { if (!pinArmedRef.current || sweepFiredRef.current) return; sweepFiredRef.current = true; autoSweepStartRef.current = 0; const SWEEP_MS = 3200; const FROM = 4, TO = 96, SETTLE = 50; const tick = (ts) => { if (!pinArmedRef.current || interactedRef.current) { autoSweepRafRef.current = 0; return; } if (!autoSweepStartRef.current) autoSweepStartRef.current = ts; const t = Math.min(1, (ts - autoSweepStartRef.current) / SWEEP_MS); // Ease-in-out for a graceful sweep across the spectrum. const eased = t < 0.5 ? 2*t*t : 1 - Math.pow(-2*t + 2, 2)/2; const live = FROM + (TO - FROM) * eased; setPos(live); if (t < 1) { autoSweepRafRef.current = window.requestAnimationFrame(tick); } else { autoSweepRafRef.current = 0; setPos(SETTLE); } }; autoSweepRafRef.current = window.requestAnimationFrame(tick); }, 600); }); }, { threshold: 0.35 }); io.observe(el); }; const disengage = () => { // Tear down everything the engaged path can leave hanging: // the IntersectionObserver, the idle-timeout, any in-flight // auto-sweep RAF, the body class, and reset the tall-shell / // armed refs so a subsequent transition back to mobile re- // engages cleanly. The layout-shift-free invariant is broken // here on purpose — the alternative is the 200 vh shell // staying ballooned on a now-desktop viewport, which is the // exact bug we are fixing. if (io) { io.disconnect(); io = null; } if (idleTimerRef.current) { window.clearTimeout(idleTimerRef.current); idleTimerRef.current = 0; } if (autoSweepRafRef.current) { window.cancelAnimationFrame(autoSweepRafRef.current); autoSweepRafRef.current = 0; } pinShellTallRef.current = false; pinArmedRef.current = true; sweepFiredRef.current = false; setPinShellTall(false); stickyEngagedRef.current = true; setStickyEngaged(true); if (typeof document !== 'undefined' && document.body && document.body.classList) { document.body.classList.remove('mw-spectrum-pin-engaged'); } }; const apply = () => { if (mql.matches) engage(); else disengage(); }; apply(); if (mql.addEventListener) mql.addEventListener('change', apply); else if (mql.addListener) mql.addListener(apply); return () => { if (mql.removeEventListener) mql.removeEventListener('change', apply); else if (mql.removeListener) mql.removeListener(apply); disengage(); }; }, []); // ── Scroll-driven scrub ────────────────────────────────────── // While armed and the shell is tall, map the user's scroll progress // through the shell to slider `pos`. The shell is `100vh + 100vh` // tall and the inner is `position: sticky; height: 100vh`, so as the // viewport descends through the second viewport-height of the shell, // we have a full viewport of scroll-distance to scrub `pos` from // 4 → 96. Once `pos` crosses the high end the user just keeps // scrolling and the section unpins naturally as the sticky inner // releases at the bottom of the shell. // // Implementation note (post-review): we listen ONLY to `scroll` — // `wheel` and `touchmove` always cause `scroll` to fire too, so // three listeners doing the same DOM read was wasted main-thread // work. Then we rAF-throttle so `getBoundingClientRect()` + `setPos` // run at most once per frame regardless of how many scroll events // fire between paints. Auto-sweep / idle-timer cancellation runs // BEFORE any early-return so a user mid-scroll while the section // is just intersecting (rect.top > 0) still cancels the pending // 600ms sweep — that race was the Codex P1 / Copilot duplicate on // round 1 of PR #33. // // Desktop kill switch — responsive, mirrors the IntersectionObserver // effect above. Subscribes to `(max-width: 767px)` and attaches / // detaches the scroll listener on each transition so a session that // resizes from mobile to desktop tears the listener down (no scroll- // jacking on a now-desktop viewport) and a session that resizes // from desktop to mobile installs it (so the storytelling still // works after the resize). useEfSv(() => { if (typeof window === 'undefined' || !window.matchMedia) return; const mql = window.matchMedia('(max-width: 767px)'); let scheduled = 0; let attached = false; const tick = () => { scheduled = 0; const el = shellRef.current; if (!el) return; const rect = el.getBoundingClientRect(); const vh = window.innerHeight || 1; // Cancel any pending auto-sweep / idle timer on ANY scroll delta — // even before the section is fully into the scrub band — so a // user actively scrolling never gets the slider yanked from // under them by a 600ms-late timer. if (autoSweepRafRef.current) { window.cancelAnimationFrame(autoSweepRafRef.current); autoSweepRafRef.current = 0; } if (idleTimerRef.current) { window.clearTimeout(idleTimerRef.current); idleTimerRef.current = 0; } // Ride-the-bike: once the user has scrolled past the bottom of // the shell (i.e., they completed one full pass through the // pin), unstick the inner permanently. Subsequent scroll-throughs // from above will see the visual scroll naturally with the page, // not get pinned again. We keep the shell's `is-tall` class // intact to avoid layout-shift; only the sticky inner releases. if (stickyEngagedRef.current && rect.bottom <= 0) { stickyEngagedRef.current = false; setStickyEngaged(false); } if (!pinArmedRef.current || interactedRef.current) return; // Scrub window: starts when the shell's top crosses the viewport // top (rect.top === 0) and ends one viewport later (rect.top === -vh). // Outside this band we leave `pos` alone so the user can scroll past // the section without us yanking them back. if (rect.top > 0) return; const scrubbed = Math.min(1, Math.max(0, -rect.top / vh)); setPos(4 + (96 - 4) * scrubbed); }; const onScroll = () => { if (scheduled) return; scheduled = window.requestAnimationFrame(tick); }; const attach = () => { if (attached) return; window.addEventListener('scroll', onScroll, { passive: true }); attached = true; }; const detach = () => { if (!attached) return; window.removeEventListener('scroll', onScroll); attached = false; if (scheduled) { window.cancelAnimationFrame(scheduled); scheduled = 0; } }; const apply = () => { if (mql.matches) attach(); else detach(); }; apply(); if (mql.addEventListener) mql.addEventListener('change', apply); else if (mql.addListener) mql.addListener(apply); return () => { if (mql.removeEventListener) mql.removeEventListener('change', apply); else if (mql.removeListener) mql.removeListener(apply); detach(); }; }, []); // ── Cleanup any pending RAF/timeouts + body class on unmount ── useEfSv(() => () => { if (autoSweepRafRef.current) window.cancelAnimationFrame(autoSweepRafRef.current); if (idleTimerRef.current) window.clearTimeout(idleTimerRef.current); if (typeof document !== 'undefined' && document.body && document.body.classList) { document.body.classList.remove('mw-spectrum-pin-engaged'); } }, []); return (

— COMPLEXITY SPECTRUM

↔ DRAG OR TAP A STOP

{/* LEFT: title + slider + included list */}

{hovered.label} — {hovered.note}

{hovered.price} · {hovered.bizType}

{/* Slider — inset 4% on each side so end labels (SIMPLE / CUSTOM) don't clip the column edges. Pointer Events + setPointerCapture enable native drag on mouse, touch, and pen. Each stop label is a tap-target button so phone users can pick a stage without dragging. Keyboard: ArrowLeft/Right (or Down/Up) step stops; Home/End jump to first/last. */}

{stages.map(s=>{ const active = Math.abs(s.x - pos) < 10; return ( ); })}

{/* What's included */}

{hovered.includes.map((item)=>(

✓ {item}

))}

◆ ALL PLANS INCLUDE HOSTING · FROM $79/MO · NO CONTRACT

{/* RIGHT: Realistic website preview — swaps cleanly between stages */}

{/* Browser chrome */}

{[0,1,2].map(i=>

)}

https:// {hovered.url}

LIVE

{/* Stage indicator strip */}

◆ {hovered.label} · {hovered.bizType.toUpperCase()} {Math.round(pos)}% COMPLEXITY

{/* Realistic website preview — one full mockup per stage, clean swap */}

{hovered.kind==='simple' && } {hovered.kind==='listings' && } {hovered.kind==='full' && } {hovered.kind==='store' && } {hovered.kind==='custom' && }

); } /* ---- AI Banner ---- */ function AIBanner() { const convos = [ [{r:'user',t:'is someone available saturday?'},{r:'bot',t:'yes — 10am or 2pm open.'},{r:'user',t:'book 10am, john smith.'},{r:'bot',t:'done. confirmation text sent.'}], [{r:'user',t:'how much for a full detail?'},{r:'bot',t:'interior + exterior starts at $180.'},{r:'user',t:'do you come to me?'},{r:'bot',t:'yes — mobile service in OKC metro.'}], [{r:'user',t:'do you accept walk-ins?'},{r:'bot',t:'yes, but appointments get priority.'},{r:'user',t:'what are your hours?'},{r:'bot',t:'mon–sat 8am–6pm, closed sunday.'}], [{r:'user',t:'is the 2018 f-150 still available?'},{r:'bot',t:'yes — 47k miles, asking $28,900.'},{r:'user',t:'can I test drive tomorrow?'},{r:'bot',t:'10am works. name and number?'}], ]; const [ci, setCi] = useStSv(0); const [step, setStep] = useStSv(0); useEfSv(()=>{ const conv=convos[ci]; if(stepsetStep(s=>s+1),1400);return()=>clearTimeout(t);} else{const t=setTimeout(()=>{setCi(i=>(i+1)%convos.length);setStep(0);},2200);return()=>clearTimeout(t);} },[step,ci]); const msgs=convos[ci].slice(0,step); return (

— AI FOR YOUR CUSTOMERS LIVE

We build by hand.
AI works for you.

Real people design and code your site. Then we plug in a smart helper that answers questions, books jobs, and fills forms 24/7. Optional add-on from $400/mo.

{/* Concise inline capabilities. Replaces the prior 2x2 matrix that broke at the actual column width — "SMS reply when you can't talk" was getting squeezed into a single-character column and rendering vertical character fragments. The live chat panel on the right is the demonstration; this line is just the named capability list, accent-marked. */}

{/* Messages area now flex:1 + minHeight:0 so it fills the right column when the bento row stretches tall, instead of leaving the bottom 60–70% of the panel as black void. justifyContent:flex-end keeps messages stacked at the bottom of the available space, so partial conversations read as "more chat above". */}

{msgs.map((m,i)=>(

{m.t}

))} {step

)}

{convos.map((_,i)=>(

))}

); } /* ---- Build Card ---- */ /* Unique wireframe-style preview per card kind. Drawn as inline SVG, lives as a backdrop in the lower portion of the card and gets a subtle scale on hover. */ function BuildPreview({ kind, hover, idx = 0, count = 5 }) { const stroke = 'color-mix(in oklab, var(--fg-1) 18%, transparent)'; const strokeHover = 'color-mix(in oklab, var(--accent) 50%, transparent)'; const fill = 'color-mix(in oklab, var(--accent) 6%, transparent)'; const accent = 'var(--accent)'; const ink = 'var(--fg-1)'; const muted = 'var(--fg-4)'; const s = { stroke: hover ? strokeHover : stroke, strokeWidth: 1, fill: 'none' }; const sf = { ...s, fill }; const v = ((idx % count) + count) % count; const clipId = React.useMemo(() => 'bp-clip-' + Math.random().toString(36).slice(2, 8), []); // Browser frame helper — chrome bar, viewport rect, and a clip path to scope contents const Frame = ({ url, children, padViewport = 10 }) => ( {/* Outer body */} {/* Chrome bar */} {/* Traffic lights */} {/* URL pill */} {url} {/* Live dot */} {children} ); // Scroll-shift wrapper — each variant rendered at its own y-band, viewport translates so // the active band is centered. Smooth vertical travel = real scroll motion. // Each variant is drawn in its own coordinate space starting near y=22 (TopBar). // We stack variants vertically (i * bandH apart) and translate the whole stack // by -v*bandH so the active variant aligns with the viewport top (y=17). // No extra +17 — that was pushing every TopBar 17px below the chrome bar. const Scroller = ({ bandH = 111, children }) => { return ( {React.Children.map(children, (child, i) => ( {child} ))} ); }; return ( ); } function BuildCard({ kind, icon, name, ex, budget, weeks, ai, href, seed=0 }) { const [hover, setHover] = useStSv(false); const examples = Array.isArray(ex)?ex:[ex]; const [idx, setIdx] = useStSv(0); useEfSv(()=>{ if(examples.length<=1) return; const delay=setTimeout(()=>{ const t=setInterval(()=>setIdx(i=>(i+1)%examples.length),2200); return()=>clearInterval(t); }, seed*380); return()=>clearTimeout(delay); },[]); return ( window['mwtTrack'] && window['mwtTrack']('select_content', { content_type: 'card', content_id: name ? 'service_card_' + String(name).toLowerCase().replace(/[^a-z0-9]+/g, '_') : 'service_card', cta_label: typeof name === 'string' ? name : undefined, page_section: 'services_grid', page_path: typeof window !== 'undefined' ? window.location.pathname : '', })} onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)} style={{padding:18,height:'100%',display:'flex',flexDirection:'column', gap:10, textDecoration:'none', color:'inherit', background:'var(--bg-elev-1)', border:`1px solid ${hover?'var(--accent)':'var(--border-strong)'}`, transform:hover?'translateY(-2px)':'none', transition:'transform .25s var(--ease-out),border-color .25s', cursor:'pointer',position:'relative',overflow:'hidden'}}> {hover&&

} {/* COMPACT HEADER — icon + name inline, then rotating examples + dots, then meta strip */}

{icon}

{name}

{examples.map((e,i)=>(

{e}

))}

{examples.length>1&&(

{examples.map((_,i)=>(

))}

)}

{/* META STRIP — collapsed onto one row to free vertical for the preview */}

{budget} · {ai} SHIPS {weeks.toUpperCase()}

{/* PREVIEW — gets the lion's share of vertical space now */}

{/* FOOTER — compact CTA + url breadcrumb on one line */}

↳ midwesttech.dev/{href||''}

See page →

); } /* ---- Main Services section ---- */ function Services() { const ref = useRefSv(null); useReveal(ref); // Budgets & timelines come from window.MWT_PRICING (mwt-v2/pricing.js). // Update prices/timelines there, not here. const P = window.MWT_PRICING.byKind; const builds = [ { kind:'simple', icon:'▭', name:'Simple website', href:'/builds/simple-website', ex:['Website for lawn care & landscaping','Website for plumbers & HVAC','Website for salons, barbers & spas','Website for food trucks & restaurants','Website for contractors & tradespeople'], budget:P.simple.budget, weeks:P.simple.weeks, ai:'+chat' }, { kind:'listings', icon:'▦', name:'Listings site', href:'/builds/listings-site', ex:['Real estate agent & broker websites','Used car dealer inventory sites','Vacation rental & Airbnb listing sites','Farm equipment & machinery listings','Commercial property listing sites'], budget:P.listings.budget, weeks:P.listings.weeks, ai:'+search' }, { kind:'full', icon:'▣', name:'Full website', href:'/builds/full-website', ex:['Law firm websites OKC','Medical & dental practice websites','Church & nonprofit websites','HVAC, roofing & construction websites','Marketing agency & consulting firm websites'], budget:P.full.budget, weeks:P.full.weeks, ai:'+helper' }, { kind:'store', icon:'▰', name:'Online store', href:'/builds/online-store', ex:['Boutique apparel & local brand stores','Local food, farm-to-door & specialty makers','Custom merch & print-on-demand stores','Digital download & subscription products','Multi-vendor marketplaces'], budget:P.store.budget, weeks:P.store.weeks, ai:'+support' }, { kind:'seo', icon:'★', name:'Google presence', href:'/builds/google-presence', ex:['Local SEO for Oklahoma businesses','Google Business Profile management','Map pack ranking & citation cleanup','Monthly blog content for service businesses','Local competitor SEO monitoring'], budget:P.seo.budget, weeks:P.seo.weeks, ai:'add-on' }, { kind:'custom', icon:'◫', name:'Custom builds', href:'/builds/custom-builds', ex:['Internal tools, dashboards & reporting','Client portals with role-based access','Data pipelines & API integrations','Two-sided platforms & marketplaces','AI agents that handle real workflows'], budget:P.custom.budget, weeks:P.custom.weeks, ai:'any AI' }, ]; return (

From a simple website
to everything you need.} kicker="Every site is built by hand — no AI slop, no templates. Lawn care, hydraulics, a food truck, a salon, whatever you do, we build the site that brings in business." />

{builds.map((b,i)=>(

))}

); } Object.assign(window, { Services });