// CruiseN'Shine Detailing — Wakefield, MA // Original design. Premium-modern automotive aesthetic. const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "#E8B04B", "theme": "midnight", "heroLayout": "cinematic", "serviceStyle": "cards", "showPricing": true, "density": "regular" }/*EDITMODE-END*/; const THEMES = { midnight: { bg: '#0B0C0E', surface: '#121317', surface2: '#1A1C22', line: 'rgba(255,255,255,0.08)', text: '#F4F4F5', muted: 'rgba(244,244,245,0.6)', faint: 'rgba(244,244,245,0.4)' }, graphite: { bg: '#1A1A1A', surface: '#222222', surface2: '#2A2A2A', line: 'rgba(255,255,255,0.08)', text: '#F5F5F4', muted: 'rgba(245,245,244,0.62)', faint: 'rgba(245,245,244,0.42)' }, paper: { bg: '#F6F4EF', surface: '#FFFFFF', surface2: '#EDEAE2', line: 'rgba(20,20,20,0.10)', text: '#1A1A1A', muted: 'rgba(26,26,26,0.62)', faint: 'rgba(26,26,26,0.42)' }, }; const SERVICES = [ { id: 'exterior', name: 'Exterior Detail', time: '30–60 min', price: 40, blurb: 'A complete outside reset by hand — washed, soaped, rinsed, glass cleaned, and tires shined.', includes: ['Base wash', 'Soap & second wash', 'Final soap & rinse', 'Glass cleaner', 'Tire shine'] }, { id: 'interior', name: 'Interior Detail', time: '~2 hr', price: 80, blurb: 'A deep clean inside — dust blown out, fully vacuumed, rugs and surfaces cleaned.', includes: ['Dust spray-out', 'Full vacuum', 'Rugs cleaned', 'Surfaces wiped down'] }, { id: 'full', name: 'Full Detail', time: '~3 hr', price: 120, blurb: 'Our most-booked package. Everything in the exterior and interior details — start to finish, by hand.', includes: ['Full exterior detail', 'Full interior detail'], featured: true }, ]; const REVIEWS = [ { name: 'Marcus T.', vehicle: '2019 BMW M340i', stars: 5, text: 'Dropped off a daily-driver, picked up something that felt new. The paint correction on the hood alone was worth the price. Booking again next month.' }, { name: 'Priya R.', vehicle: '2022 Tesla Model Y', stars: 5, text: 'I have two kids and a dog. The interior was, frankly, a crime scene. He made it disappear. The leather looks better than the day we got the car.' }, { name: 'Devon K.', vehicle: '2015 Tacoma TRD', stars: 5, text: 'Took the truck after a year of jobsite abuse. He spent eight hours on it and texted me photos through the whole process. Honest pricing, real craft.' }, { name: 'Sara L.', vehicle: '2024 Porsche Macan', stars: 5, text: 'Ceramic coat on a brand-new car. The water beading is wild and the gloss is unreal. He treats every car like it\u2019s his own.' }, ]; const FAQ = [ { q: 'Where are you located?', a: 'We\u2019re based in Wakefield, MA, and serve the surrounding North Shore towns. Mobile service available within a 15-mile radius — we come to you with water and power on board.' }, { q: 'How long does each service take?', a: 'An exterior detail takes about 30 minutes to an hour. An interior detail takes about 2 hours. A full detail is about 3 hours. We only book a few cars a day so each one gets the time it deserves.' }, { q: 'What about pet hair, vomit, smoke, etc.?', a: 'Bring it on. Heavy pet-hair removal is a flat $40 add-on to any interior service. Smoke odor takes an ozone treatment, $60. We\u2019ll quote anything unusual up front.' }, { q: 'Do you offer a guarantee?', a: 'Every detail comes with a 48-hour satisfaction window. If something isn\u2019t right, we make it right — no charge, no questions.' }, ]; const GALLERY = [ { tag: 'Exterior detail', sub: 'Black sedan, after wash', img: 'https://images.unsplash.com/photo-1605515298946-d5e83ce8b2cb?w=1200&q=80&auto=format&fit=crop' }, { tag: 'Interior reset', sub: 'SUV, full shampoo', img: 'https://images.unsplash.com/photo-1607853202273-797f1c22a38e?w=1000&q=80&auto=format&fit=crop' }, { tag: 'Wheel & tire', sub: 'Detailed face-out', img: 'https://images.unsplash.com/photo-1493238792000-8113da705763?w=1000&q=80&auto=format&fit=crop' }, { tag: 'Leather care', sub: 'Driver seat, conditioned', img: 'https://images.unsplash.com/photo-1601362840469-51e4d8d58785?w=1000&q=80&auto=format&fit=crop' }, { tag: 'Foam bath', sub: 'Decontamination wash', img: 'https://images.unsplash.com/photo-1542362567-b07e54358753?w=1000&q=80&auto=format&fit=crop' }, { tag: 'Final polish', sub: 'Hand-buffed finish', img: 'https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?w=1000&q=80&auto=format&fit=crop' }, ]; const HERO_IMG = 'https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=1600&q=85&auto=format&fit=crop'; // ─── Atoms ────────────────────────────────────────────────────────────────── // useMediaQuery hook function useIsMobile(bp = 760) { const [m, setM] = React.useState(typeof window !== 'undefined' ? window.innerWidth < bp : false); React.useEffect(() => { const on = () => setM(window.innerWidth < bp); window.addEventListener('resize', on); return () => window.removeEventListener('resize', on); }, [bp]); return m; } function PhotoTile({ label, sub, ratio = '4/3', src, accent = '#E8B04B' }) { return (
● {label}
{sub ?
{sub}
: null}
); } function StripedPlaceholder({ label, sub, ratio = '4/3', dark = true }) { const fg = dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)'; const bg = dark ? '#1A1C22' : '#EDEAE2'; const text = dark ? 'rgba(255,255,255,0.55)' : 'rgba(0,0,0,0.55)'; return (
{label}
{sub ?
{sub}
: null}
); } function Stars({ n = 5, color = '#E8B04B' }) { return (
{Array.from({ length: n }).map((_, i) => ( ))}
); } function ChevDown({ size = 14 }) { return ; } // ─── Sections ─────────────────────────────────────────────────────────────── function Nav({ T, accent, onBook }) { const [scrolled, setScrolled] = React.useState(false); const isMobile = useIsMobile(); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 40); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); return ( ); } function Logo({ accent }) { return ( ); } function Hero({ T, accent, layout, onBook }) { if (layout === 'split') return ; if (layout === 'editorial') return ; return ; } function HeroCinematic({ T, accent, onBook }) { const isMobile = useIsMobile(); return (
{/* Backdrop placeholder */}
{/* Top eyebrow */}
Est. 2024 — Wakefield, MA Booking 2 weeks out

Mirror finish. Meticulous work.

CruiseN’Shine is a hands-on detail shop in Wakefield, Massachusetts. Exterior, interior, full detail — by appointment, by hand, with the patience the work actually takes. No upsells, no surprises on the invoice.

{/* Stat strip */}
{[ { v: 312, suffix: '', decimals: 0, label: 'cars detailed' }, { v: 4.9, suffix: '', decimals: 1, label: 'average rating' }, { v: 48, suffix: ' hr', decimals: 0, label: 'satisfaction window' }, { v: 15, suffix: ' mi', decimals: 0, label: 'mobile radius' }, ].map((s, i) => ( = 2 ? `1px solid ${T.line}` : 'none' }}>
{s.label}
 ))}
); } function HeroSplit({ T, accent, onBook }) { const isMobile = useIsMobile(); return (
— By appointment

The kind of detail you used to get before everyone got busy.

Hands-on shop in Wakefield. Same hands every time. Booking out roughly two weeks.

Book a detail → See services
); } function HeroEditorial({ T, accent, onBook }) { const isMobile = useIsMobile(); return (
№ 001 — Hand-detailing est. 2024 Wakefield, MA

A car worth keeping.

CruiseN’Shine is a hands-on detail shop in Wakefield, Massachusetts. Exterior, interior, full detail — by appointment, by hand, with the patience the work actually takes.

Book a detail →
Or call (781) 555-0144
); } function Services({ T, accent, style, showPricing, onBook }) { const isMobile = useIsMobile(); return (
{style === 'list' ? ( ) : style === 'table' ? ( ) : ( )}
); } function SectionHead({ T, accent, eyebrow, title, sub }) { const isMobile = useIsMobile(); return (
{eyebrow}

{title}

{sub ?

{sub}

 : null}
); } function ServicesCards({ T, accent, showPricing, onBook }) { const isMobile = useIsMobile(); return (
{SERVICES.map((s, idx) => ( {s.featured ? ( Most booked ) : null}
{s.time}

{s.name}

{s.blurb}

    {s.includes.map((inc, i) => (
  • ✓ {inc}
    • ))}
{showPricing ? (
from
${s.price}
) : (
Quote on request
)}
))}
); } function ServicesList({ T, accent, showPricing, onBook }) { const isMobile = useIsMobile(); return (
{SERVICES.map(s => (
{!isMobile &&
0{SERVICES.indexOf(s) + 1}
}

{s.name}

{s.time}{s.featured ? ' · Most booked' : ''}
{!isMobile &&

{s.blurb}

}
{showPricing ? (
${s.price}
) :
Quote
}
))}
); } function ServicesTable({ T, accent, showPricing, onBook }) { const allRows = [ 'Hand wash & dry', 'Wheels & tires', 'Vacuum', 'Glass', 'Spray sealant', 'Interior shampoo', 'Leather condition', 'Clay bar decon', 'Two-stage polish', 'Engine bay', 'Headlight clarity', '9H ceramic', '5-year warranty', ]; const matrix = { exterior: [1,1,1,1,1,0,0,0,0,0,0,0,0], interior: [0,0,1,1,0,1,1,0,0,0,0,0,0], full: [1,1,1,1,1,1,1,1,1,1,1,0,0], }; return (
{SERVICES.map(s => ( ))} {allRows.map((row, i) => ( {SERVICES.map(s => ( ))} ))} ))}
{s.name}
{showPricing ?
from ${s.price}
: null}
{row} {matrix[s.id][i] ? '●' : '—'}
{SERVICES.map(s => (
); } function Process({ T, accent }) { const isMobile = useIsMobile(); const steps = [ { n: '01', t: 'Walk-around', d: 'I look at the car with you. We talk about what bothers you, what you want, and what\u2019s realistic.' }, { n: '02', t: 'Decon & wash', d: 'Foam bath, iron remover, surface decontamination. We get the car chemically and physically clean before anything else touches it.' }, { n: '03', t: 'The detail', d: 'Hand wash, interior shampoo, leather conditioning — whatever the package calls for. Done by hand, no skipping steps.' }, { n: '04', t: 'Final pass', d: 'Inspection under LED. Door jambs, badge edges, glass. You walk around it with me before you sign anything.' }, ]; return (
{steps.map((s, idx) => (
{s.n}

{s.t}

{s.d}

))}
); } function Gallery({ T, accent }) { const isMobile = useIsMobile(); const [active, setActive] = React.useState(0); return (
{GALLERY.map((g, i) => ( ))}
● {GALLERY[active].tag} — {GALLERY[active].sub}
); } function Reviews({ T, accent }) { const isMobile = useIsMobile(); return (
{REVIEWS.map((r, i) => (

“{r.text}”

{r.name[0]}
{r.name}
{r.vehicle}
 ))}
); } function FAQSection({ T, accent }) { const isMobile = useIsMobile(); const [open, setOpen] = React.useState(0); return (
{FAQ.map((f, i) => (

{f.a}

 ))}
); } function CTA({ T, accent, onBook }) { const isMobile = useIsMobile(); return (
Ready when you are

Bring it in dirty.

Booking takes about 90 seconds. Mobile service within 15 miles of Wakefield. Drop-off appointments welcome.

Book a detail →
); } function Footer({ T, accent }) { const isMobile = useIsMobile(); return (
CRUISEN’SHINE

One-person detail shop. Hand-finished work, by appointment, in the West End.

© 2026 CruiseN’Shine Detailing. Wakefield, MA. Built by hand, like the work.
); } function FooterCol({ T, title, lines }) { return (
{title}
{lines.map((l, i) =>
{l}
)}
); } function MarqueeStrip({ T, accent }) { const words = ['Exterior detail', 'Interior detail', 'Full detail', 'Pet hair removal', 'Headlight clarity', 'Hand-finished', 'By appointment', 'Wakefield, MA']; return (
{words.map((w, i) => ( {w} ◆ ))}
); } // ─── Booking modal (multi-step) ───────────────────────────────────────────── function BookingModal({ T, accent, open, onClose, initialService }) { const [step, setStep] = React.useState(0); const isMobile = useIsMobile(); const [data, setData] = React.useState({ service: initialService || 'signature', addons: [], vehicle: { year: '', make: '', model: '', color: '' }, location: 'shop', date: '', time: '', name: '', email: '', phone: '', notes: '', }); React.useEffect(() => { if (open) { setStep(0); setData(d => ({ ...d, service: initialService || d.service || 'signature' })); } }, [open, initialService]); if (!open) return null; const set = (patch) => setData(d => ({ ...d, ...patch })); const setVeh = (patch) => setData(d => ({ ...d, vehicle: { ...d.vehicle, ...patch } })); const steps = ['Service', 'Vehicle', 'When & where', 'Your info', 'Review']; const svc = SERVICES.find(s => s.id === data.service); const ADDONS = [ { id: 'pet', label: 'Pet hair removal', price: 60 }, { id: 'ozone', label: 'Ozone smoke treatment', price: 90 }, { id: 'engine', label: 'Engine bay degrease', price: 50 }, { id: 'headlights', label: 'Headlight restoration', price: 80 }, ]; const total = (svc?.price || 0) + data.addons.reduce((sum, id) => sum + (ADDONS.find(a => a.id === id)?.price || 0), 0); const canNext = (() => { if (step === 0) return !!data.service; if (step === 1) return data.vehicle.year && data.vehicle.make && data.vehicle.model; if (step === 2) return data.date && data.time; if (step === 3) return data.name && data.email && data.phone; return true; })(); return (
e.stopPropagation()} style={{ width: '100%', maxWidth: 720, maxHeight: '90vh', background: T.bg, border: `1px solid ${T.line}`, borderRadius: 12, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}> {/* Header */}
Book a detail
{steps[step]}
{/* Progress */}
{steps.map((_, i) => (
))}
{/* Body */}
{step === 0 && (
{SERVICES.map(s => ( ))}
Add-ons
{ADDONS.map(a => { const on = data.addons.includes(a.id); return ( ); })}
)} {step === 1 && (
setVeh({ year: v })} placeholder="2022" /> setVeh({ color: v })} placeholder="Frozen black" />
setVeh({ make: v })} placeholder="BMW" /> setVeh({ model: v })} placeholder="M340i" />
Condition
{['Light maintenance', 'Average', 'Needs love'].map(c => ( ))}
)} {step === 2 && (
Where
{[['shop', 'Drop-off', 'Wakefield, MA'], ['mobile', 'Mobile', 'Within 15 mi']].map(([id, label, sub]) => ( ))}
Date
set({ date: v })} />
Time
{['8:00a', '9:30a', '11:00a', '1:00p', '2:30p', '4:00p'].map(t => ( ))}
)} {step === 3 && (
set({ name: v })} placeholder="Alex Rivera"/>
set({ email: v })} placeholder="alex@example.com" type="email"/> set({ phone: v })} placeholder="(555) 555-0144" type="tel"/>
set({ notes: v })} placeholder="Anything we should know? Pet hair, smoker, specific paint chips, etc." multiline/>
)} {step === 4 && (
{data.addons.length > 0 && ADDONS.find(a => a.id === id)?.label).join(', ')} />}
Estimated total ${total}

No card on file. We confirm by text within 4 hours and collect payment after the work is done. Cancel free up to 24 hours before.

)}
{/* Footer */}
{step < 4 ? <>Step {step + 1} of {steps.length} : <>Almost done} {svc && · running total ${total}}
{step > 0 && } {step < steps.length - 1 ? ( ) : ( )}
{step === 5 && (
✓

Booking received.

We\u2019ll text {data.phone || 'you'} within 4 hours to confirm {data.date} at {data.time}.

)}
); } function Field({ T, label, value, onChange, placeholder, type = 'text', multiline }) { const Cmp = multiline ? 'textarea' : 'input'; return ( ); } function Row({ T, k, v }) { return (
{k} {v}
); } function DatePicker({ T, accent, value, onChange }) { const today = new Date(2026, 4, 7); // May 7 2026 const days = Array.from({ length: 14 }).map((_, i) => { const d = new Date(today); d.setDate(today.getDate() + i + 2); // start booking ~2 days out return d; }); const fmt = (d) => `${d.toLocaleString('en', { month: 'short' })} ${d.getDate()}`; return (
{days.map((d, i) => { const key = fmt(d); const dow = d.toLocaleString('en', { weekday: 'short' }); const sel = value === key; const sunday = d.getDay() === 0 || d.getDay() === 1; return ( ); })}
); } // ─── App ──────────────────────────────────────────────────────────────────── function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [bookingOpen, setBookingOpen] = React.useState(false); const [bookingService, setBookingService] = React.useState(null); const isMobile = useIsMobile(760); const T = THEMES[t.theme] || THEMES.midnight; const openBooking = (sid) => { setBookingService(typeof sid === 'string' ? sid : null); setBookingOpen(true); }; React.useEffect(() => { document.body.style.background = T.bg; document.body.style.color = T.text; }, [T]); return (
); } ReactDOM.createRoot(document.getElementById('root')).render();