/* global React */ const { useState, useEffect, useRef } = React; /* ── Logo ── */ function MagicLogo({ size = 40 }) { const h = size; const w = Math.round(h * 3.6); return ( {/* Mark — abstract roof / M glyph */} {/* Roof outline — two peaks = letter M + house */} {/* Ground line */} {/* Door hint */} {/* Divider */} {/* Wordmark */} MAGIC HOME RENOVATION ); } /* ── Scroll reveal ── */ function useReveal(threshold = 0.08) { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { el.style.opacity='1'; el.style.transform='none'; } }, { threshold, rootMargin:'0px 0px -40px 0px' }); obs.observe(el); return () => obs.disconnect(); }, []); return ref; } /* ── Parallax + hover zoom for photo bg images ── */ function useImageParallax(speed = 0.1) { const imgRef = useRef(null); useEffect(() => { const el = imgRef.current; if (!el) return; const section = el.parentElement; let lastY = 0; const getY = () => { const r = section.getBoundingClientRect(); return (r.top + r.height / 2 - window.innerHeight / 2) * speed; }; const onScroll = () => { lastY = getY(); el.style.transition = 'none'; el.style.transform = `scale(1.1) translateY(${lastY}px)`; }; const onEnter = () => { lastY = getY(); el.style.transition = 'transform 500ms var(--ease-cinematic)'; el.style.transform = `scale(1.16) translateY(${lastY}px)`; }; const onLeave = () => { lastY = getY(); el.style.transition = 'transform 500ms var(--ease-cinematic)'; el.style.transform = `scale(1.1) translateY(${lastY}px)`; }; window.addEventListener('scroll', onScroll, { passive: true }); section.addEventListener('mouseenter', onEnter); section.addEventListener('mouseleave', onLeave); onScroll(); return () => { window.removeEventListener('scroll', onScroll); section.removeEventListener('mouseenter', onEnter); section.removeEventListener('mouseleave', onLeave); }; }, []); return imgRef; } /* ── Animated counter ── */ function useCounter(target, duration, active) { const [val, setVal] = useState(0); const done = useRef(false); useEffect(() => { if (!active || done.current) return; done.current = true; const num = parseInt(String(target).replace(/[^0-9]/g, '')) || 0; if (!num) return; const t0 = performance.now(); const tick = now => { const p = Math.min((now - t0) / duration, 1); setVal(Math.round((1 - Math.pow(1 - p, 3)) * num)); if (p < 1) requestAnimationFrame(tick); else setVal(num); }; requestAnimationFrame(tick); }, [active]); return val; } /* ── Typewriter ── */ function useTypewriter(text, speed = 55) { const [i, setI] = useState(0); useEffect(() => { if (i >= text.length) return; const t = setTimeout(() => setI(n => n + 1), speed); return () => clearTimeout(t); }, [i]); return text.slice(0, i); } /* ── Stat counter (animated on reveal) ── */ function StatCounter({ value, label }) { const [active, setActive] = useState(false); const ref = useRef(null); const num = parseInt(String(value).replace(/[^0-9]/g, '')) || 0; const suffix = value.replace(/[\d,]/g, ''); const counted = useCounter(num, 2200, active); const display = num >= 1000 ? counted.toLocaleString('en-US') : String(counted); useEffect(() => { const el = ref.current; if (!el) return; const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setActive(true); }, { threshold: 0.1 }); obs.observe(el); return () => obs.disconnect(); }, []); return (
{display}{suffix}
{label}
); } /* ── Gold trailing cursor dot ── */ function Cursor() { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; let cx = -20, cy = -20, tx = -20, ty = -20, raf, moving = false; const onMove = e => { tx = e.clientX; ty = e.clientY; if (!moving) { moving = true; raf = requestAnimationFrame(loop); } }; window.addEventListener('mousemove', onMove, { passive: true }); const loop = () => { const dx = tx-cx, dy = ty-cy; cx += dx*0.13; cy += dy*0.13; el.style.transform=`translate(${cx}px,${cy}px)`; if (Math.abs(dx) > 0.1 || Math.abs(dy) > 0.1) { raf = requestAnimationFrame(loop); } else { moving = false; } }; return () => { window.removeEventListener('mousemove', onMove); cancelAnimationFrame(raf); }; }, []); return
; } /* ── Scroll progress bar ── */ function ScrollProgress() { const [pct, setPct] = useState(0); useEffect(() => { const fn = () => { const max = document.documentElement.scrollHeight - window.innerHeight; setPct(max>0?(window.scrollY/max)*100:0); }; window.addEventListener('scroll', fn, { passive: true }); return () => window.removeEventListener('scroll', fn); }, []); return (
); } /* ── Nav ── */ function Nav() { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const fn = () => setScrolled(window.scrollY > 80); window.addEventListener('scroll', fn, { passive:true }); return () => window.removeEventListener('scroll', fn); }, []); const close = () => { setOpen(false); document.body.style.overflow=''; }; const toggle = () => { const n=!open; setOpen(n); document.body.style.overflow=n?'hidden':''; }; const links = [['Services','#services'],['Estimate','#estimate'],['Process','#process'],['Inspections','#inspection'],['Contact','#contact']]; const ls = { font:'600 10px var(--font-sans)',letterSpacing:'0.26em',textTransform:'uppercase',color:'var(--text-muted)',textDecoration:'none',transition:'color 200ms' }; return ( <> {open&&
{links.map(([l,h])=>{l})} Book Walkthrough
} ); } /* ── Hero — full screen video/photo + cinematic overlay ── */ function Hero() { const VIDEO_SRC = 'assets/hero.mp4'; const HERO_IMG = 'assets/hero.jpg'; const [videoError, setVideoError] = useState(false); const ref = useReveal(0.02); const eyebrowText = useTypewriter('North Shore Exterior Specialists', 50); return (
{/* Background */} {!videoError ? : } {/* Cinematic overlays */}
{/* Gold vertical line — Ferrari-style accent */}
{/* Content */}
{eyebrowText}

A different
standard
of exterior.

Serving Glenview, Highland Park, Winnetka and the North Shore — James Hardie, Nichiha, Equitone. Installed by one crew. Inspected after by someone who doesn't work for us.

{/* Stats — animated counters */}
{[['40','years'],['1,200+','homes'],['0','subs']].map(([n,l])=>( ))}
{/* Scroll indicator */}
); } /* ── Full-screen photo section (reusable) ── */ function PhotoSection({ id, img, align='left', eyebrow, headline, body, cta, ctaHref='#contact', children }) { const ref = useReveal(0.06); const imgRef = useImageParallax(0.1); return (
); } /* ── Services dark grid ── */ function Services() { const ref = useReveal(0.05); const svcs = [ { n:'01',tag:'Cladding',title:'Siding & Exteriors',body:"James Hardie ColorPlus, LP SmartSide, cedar restoration. Full tear-off, proper vapor barrier. We don't install over the old." }, { n:'02',tag:'Apertures',title:'Windows',body:'Marvin and Pella exclusively. Full-frame replacements with proper flashing — not the foam-and-pray method.' }, { n:'03',tag:'Trim',title:'Soffit, Fascia & Gutters',body:'Aluminum wrapped on-site. Seamless 6″ gutters, hidden hangers. Heat tape on north faces that need it.' }, { n:'04',tag:'Verification',title:'Post-Contractor Inspection',body:'Independent inspector. Thermal camera, moisture meter. Full written report — with no incentive to find nothing.' }, ]; return (
What we do

Everything on the outside. Nothing it doesn't need.

All services →
{svcs.map((s,i)=>)}
); } function ServiceCard({ n, tag, title, body, last }) { const [h, setH] = useState(false); const ref = useReveal(0.1); const onMove = e => { const el = e.currentTarget, r = el.getBoundingClientRect(); const x = (e.clientX - r.left) / r.width - 0.5; const y = (e.clientY - r.top) / r.height - 0.5; el.style.transform = `perspective(800px) rotateX(${-y*7}deg) rotateY(${x*7}deg) translateZ(6px)`; }; const onLeave = e => { e.currentTarget.style.transform = 'perspective(800px) rotateX(0deg) rotateY(0deg) translateZ(0)'; setH(false); }; return (
setH(true)} onMouseMove={onMove} onMouseLeave={onLeave} style={{ padding:'clamp(28px,3.5vw,48px) clamp(20px,2.5vw,36px)',minHeight:340,display:'flex',flexDirection:'column',cursor:'default',transition:'background 360ms var(--ease-cinematic),transform 400ms var(--ease-out)',background:h?'var(--bg-elevated)':'transparent' }}>
{n} / {tag}

{title}

{body}

Learn more
); } function ProcessStep({ n, t, b }) { const r = useReveal(0.1); return (
{n}

{t}

{b}

); } /* ── Process — editorial dark ── */ function Process() { const ref = useReveal(0.05); const steps = [ ['01','Two-hour Walkthrough',"Every elevation. Thermal camera if useful. We don't leave until we understand the whole house — not twenty minutes and a clipboard."], ['02','Line-by-line Spec',"Materials chosen with you. We tell you what you don't need. No upsells. Half our walkthroughs end with 'wait another year.'"], ['03','One Crew. On-site Daily.','In-house only. No subcontractors. The people who quoted the job are the people doing it, every morning.'], ['04','Independent Inspection','After we finish, a separate inspector — not ours — verifies every elevation. Written report, yours to keep.'], ]; return (
The process

Built once.
Inspected after.

{steps.map(([n,t,b])=>)}
); } /* ── Testimonial — large, centered ── */ function Quote() { const ref = useReveal(0.06); return (
"

They tore off the siding a previous contractor had installed two years earlier. Showed me the rot underneath with photos. Then rebuilt the wall correctly. That's not what most contractors do.

Margaret S.
Lincoln Park · Siding & windows · 2024
); } /* ── Contact ── */ function Contact() { const [sent, setSent] = useState(false); const ref = useReveal(0.04); const onSubmit = e => { e.preventDefault(); setSent(true); }; return (
Schedule

A two-hour
walkthrough.

We come out, look at every elevation, and tell you exactly what's wrong. No hard sell — and no charge for the walkthrough.

{[['Phone','(773) 503-8017'],['Email','info@magichomerenovation.com'],['Area','North Shore · Glenview · Highland Park · Winnetka · Morton Grove']].map(([l,v])=>(
{l} {v}
))}
{sent ?

We'll be in touch.

Expect a call within one business day.

:
{[['Full name','text','John Smith'],['Phone','tel','312-000-0000'],['Email','email','you@email.com']].map(([l,t,p])=>( ))} }
); } function TextField({ label, type='text', placeholder, required }) { const [f,setF]=useState(false); return ( ); } function CustomSelect({ label, options, value, onChange }) { const [open, setOpen] = useState(false); const [focused, setFocused] = useState(false); const [hovered, setHovered] = useState(null); const ref = useRef(null); useEffect(() => { if (!open) return; const onMouse = e => { if (!ref.current?.contains(e.target)) { setOpen(false); setFocused(false); } }; const onKey = e => { if (e.key === 'Escape') { setOpen(false); setFocused(false); } }; document.addEventListener('mousedown', onMouse); document.addEventListener('keydown', onKey); return () => { document.removeEventListener('mousedown', onMouse); document.removeEventListener('keydown', onKey); }; }, [open]); const toggle = () => { setOpen(o => !o); setFocused(true); }; const pick = opt => { onChange(opt); setOpen(false); setFocused(false); setHovered(null); }; const active = open || focused; return (
{label && {label}} {open && (
{options.map(opt => ( ))}
)}
); } function SelectField({ label, options }) { const [val, setVal] = useState(options[0] || ''); return ; } function TextareaField({ label, placeholder }) { const [f,setF]=useState(false); return (